PROJECT OVERVIEW
CLIENT
Edraak
MY ROLE
Design Lead, via Plexable
SCOPE
Wireframes for every page, two design directions, and final UI in Arabic and English for three screen sizes. Plexable's developers then built the approved screens.
VALIDATION
The Edraak team's written comments on a first prototype in August 2017, and the design running on edraak.org from March 2018.
TIMELINE
Prototype review in August 2017, wireframes that autumn, live by March 2018
TEAM
Delivered through Plexable with the Edraak team
The context
Edraak's catalog was built around free courses for adults, from universities and other institutions. A school section would bring students, parents and teachers onto the same site, and courses there were already hard to find.
That meant giving school learning a visible home while the adult catalog kept working, in Arabic and English, on three screen widths.
My responsibility
Wireframes came first, then the final UI in Arabic and English across desktop, tablet and phone. Each stage had to hold in both reading directions before it moved on. Plexable's developers built the approved screens for the main site and its new school section from that work.
The visual language had one test to pass before any other. A direction that worked in Arabic and broke when mirrored into English was not a direction.
The same test applied to structure. If a page needed a different skeleton in English, the skeleton was wrong.
CONSTRAINTS & TRADE-OFFS
Nothing could be gained by taking space from the course catalog, because the catalog was the product. School learning got a parallel entry beside continuous education instead of a slot inside it, which is why the two branches split at the very first click.
● RESEARCH & CONTEXT
What the review notes asked for
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. Those notes set what the wireframes had to answer that autumn.
The old site supplied the rest of the evidence: icon categories and course types like self paced or ended were confusing the people trying to find a course.
● PRODUCT DECISIONS
From wireframes to a built site
Three moves carried the work: wireframe the whole site with its states, settle the visual language on the main pages, then hand the approved screens to Plexable's developers to build.
Putting it in that order meant the structural arguments were won on grey boxes, and the visual work never had to carry them.
● PRODUCT ARCHITECTURE
One platform, two kinds of learner
Everything splits in two at the top level and stays split downward: header, home page, search results. Below that the catalog runs on tabs and filters, and each course card declares itself as current, upcoming, ended or self paced.
The school branch nests differently: topic and grade first, country second, lesson last.
● PROCESS & EVIDENCE
The awkward cases are where a design file earns its keep. Error messages, inactive buttons and courses with no prerequisites all got drawn rather than described.
Empty states got the same treatment, including the search that finds nothing and has to send the reader back to the catalog.
OUTCOMES
Live on edraak.org
The new design was live on edraak.org by March 2018, with the school section marked New in the main menu.
Plexable delivered the front end for those screens as well, not only the design files.
150
Screens and states
Drawn in the final design files, in both languages.
3
Screen sizes
Desktop, tablet and phone layouts of the main pages.
2
Languages
Arabic right to left and English left to right, mirrored page for page.
WHAT I’D IMPROVE
What I would change
Only math was ready at launch. I would have drawn one other subject alongside it, to prove the layout was not shaped around a single one.
I would have put the country menu in front of a few students before fixing its position, rather than settling subject over country on one read of the audience.
WHAT I LEARNED
What it taught me
An English twin mirrored from Arabic is not a translation job. Icons, menus and reading order all change hand, and the layout has to be drawn knowing it will flip.
Course type was the real problem on the old site, not the categories. Saying current, upcoming, ended or self paced on the card did more than any new taxonomy.
More work
HIRING A HEAD OF PRODUCT DESIGN?