Edraak - An Arabic learning platform for adults and school students
“
Free courses for adults and school lessons for students, on one site.
Edraak
Web platform for desktop, tablet and phone, 2017
About the project
Edraak, an initiative of the Queen Rania Foundation, is an Arabic platform for free online courses, launched in 2014 on Open edX. In 2017 it was adding a school section for students, parents and teachers, starting with math. We redesigned the main site, designed the school section for desktop, tablet and phone in Arabic and English, and built the front end.
Project
Edraak Learning Platform
Industry
Education and E-Learning
Location
Amman, Jordan
Date
2017
“
Client Request
Edraak wanted a home page that could present its courses and its new school material well, whether there were only a few of them or many.
Edraak
Prototype review notes, August 2017
Design Pillars
Core UX Principles
Continuous education and school education sit side by side in the header and at the top of the home page.
Arabic is the main language, right to left, and each main page has an English twin mirrored left to right.
The search bar stays at the top of every page, and results split into the two kinds of learning.
What Users Need
Finding the Right Lesson Faster
Subject Before Country
The Edraak team saw the subject as more important than the country, so the school section opens on math topics and grades, with the curriculum country chosen on the grade page.
Courses Were Hard to Find
On the old site, icon categories and course types like self paced or ended confused people, so we rebuilt the catalog around clear tabs and filters.
Room to Grow
The school section would start with only a little material, so each layout had to look complete with a few items or with many.
The Challenge
Problem Statement
The Main Goal: Add School Learning to a Platform Built for Adults
Edraak’s catalog was built around free courses for adults from universities and other institutions. The school section would bring students, parents and teachers to the same site, and the old site already made courses hard to find. We had to give school material its own clear place without burying the course catalog, in two languages and on every screen size.
“
The search bar is absolutely necessary, and it makes more sense to have it in the header than anywhere else.
Edraak Prototype Review
Edraak, August 2017
Our Approach
Solution
A New Edraak, From Wireframes to Code
Wireframes, the final UI for desktop, tablet and phone in Arabic and English, and the front end code for the main site and its new school section. It is an example of our EdTech Product Design work.
01 - Wireframes and Notes
We wireframed every page, from the home page to password reset, with notes on error and empty states.
02 - Two Directions, One UI
We presented two design directions for the main pages, then drew the final UI in both languages.
03 - Front End Code
For the foundation, we coded the approved designs in responsive HTML and CSS, with right to left layouts for Arabic.
Before & After
The Blueprint & Evolution
Old Home Page to New Home Page
We redesigned the home page along with the rest of the site.
Before: the Edraak home page on a phone in November 2017.
After: our design, with both learning paths at the top and courses in a short list.
Design
Key Features
Math by Topic and Grade
The school section opens on math, with each topic one tap away and a card for each grade, starting with grades 7 and 9.
Course Pages
Each course page shows the language, dates, effort and level first, with a side menu for its sections and the Enroll button.
Design System
Visual Identity
Bilingual Type
Open Sans for English and Droid Arabic Naskh for Arabic, the two fonts in Edraak’s brand guide.
Color Palette
Edraak teal for buttons and continuous education, with the brand red and a teal to red gradient for the school section.
Course States
Every course card says whether it is current, upcoming, ended or self paced, and a search with no results points back to the catalog.
Impact
Live on Edraak in 2018
Results for Edraak
The new design was live on edraak.org by March 2018, with the school section marked New in the main menu.
Edraak
Result
By the Numbers
150 Screens and States
In the final design files, in both languages.
3 Screen Sizes
Desktop, tablet and phone layouts.
2 Languages
Arabic and English, right to left and left to right.
UX Notes
Reviewing the Prototype With Edraak
Every Comment Before the UI
In August 2017 the Edraak team reviewed a first prototype of the new site and wrote down their comments, from search to how school results should be grouped. Our wireframes followed that autumn, with our own notes on states such as error messages, inactive buttons and courses with no prerequisites. You can see some of the results below.
Final Showcase
The New Edraak Platform
