Al Diwan: From a Course Catalogue to a Learning Journey
Redesigning an Arabic learning platform around the learner, from first visit to certificate.
Company
Al Diwan
Role
Senior Product Designer
Expertise
UX Strategy, Learning Experience, UX/UI, Design Systems
Timeline
2026
Al Diwan is an Arabic learning platform where professionals learn practical skills from people who work in the field, from marketing and sales to management, HR and design. As Senior Product Designer I redesigned it end to end: the landing page, course catalogue, course page, checkout, a new learning dashboard, the lesson player and certificates, on top of a new design system.
The Challenge
The old al-diwan.net was a marketing page with a long grid of course posters. It explained the brand, but people could not filter by field or level, could not see how a course was taught before buying, and once they paid there was no experience to come back to. The brief was a redesign; the real problem was that the product stopped at "buy".
From a Course Catalogue to a Learning Journey
I benchmarked the existing site and eYouth, a leading Arabic learning platform, and mapped what a learner actually needs before, during and after a purchase. That turned the redesign into a new experience with six stages: discover, choose, try, pay, learn and prove. Every stage hands the learner to the next one, and three of them did not exist before.
Decision 01: Start From Where the Learner Is
The landing page leads with three paths by career stage (just starting, running a business, growing at work) instead of a wall of courses. Best sellers are grouped by field, and the catalogue adds filters for level, price, length and rating. Every course card shows the instructor, hours, rating, learners and price, so comparing never needs a click.
Decision 02: Let People Try Before They Pay
A poster cannot show teaching quality, so the first lesson opens free in the real lesson player, with the full curriculum beside it and one button to unlock the path. The course page backs it up with outcomes, requirements, who the course is for and a refund promise next to the price.
Decision 03: Three Steps to Pay, With the Order Always in View
Checkout is review, pay, confirm. The order summary, discount code and refund promise stay fixed on the side, cards sit next to Apple Pay and Google Pay, and the success screen sends the learner straight into lesson one instead of back to the homepage.
Decision 04: Give Learners a Reason to Come Back
"My Journey" replaces a static list of purchases. It shows paths in progress with the next lesson, upcoming live sessions, recent activity, a learning streak and a weekly goal that learners set themselves (hours, lessons or a full course), with recommendations based on what they are learning.
Decision 05: A Certificate People Can Verify and Want to Share
Each certificate carries a verification ID, the skills earned and the course details, with one-tap PDF download, LinkedIn sharing and a public link. It is proof for the learner and free reach for Al Diwan.
The System: Navy for Trust, Gold for Progress
The new design system keeps Al Diwan's navy and gold and makes them work harder: navy for structure and primary actions, gold for progress and highlights, Cairo for right-to-left Arabic type, and shared components for course cards, buttons, inputs and states.
The Outcome
Al Diwan moved from a brochure with a course grid to a complete learning product: 13 key screens across six stages, a three-step checkout, a learning dashboard built around weekly goals, verifiable certificates and a design system the team can build on.
