EdTech · Online School
It is a digital platform that provides students with a personalised learning experience as per the Saudi Embassy.
Understanding the problem
Students often left the platform before finishing the sign-up process, and 60% of new users dropped off after signing up and never reached their courses.
“I quit when I saw too many choices on the signup page.”Ahmed, 13-year-old student
Drop-off rate
55% drop-off at the registration form.
Bulky UX
Menu labels too vague. Students couldn't find My Courses.
Complex dashboard
Dashboard overload, no clear next-step button.
My role
As a Product designer, my responsibility was to understand the user pain points, research competitors, and propose solutions to stakeholders.
Constraints
Crafting a better experience
To combat the high drop-off rate, we drastically reduced the number of required steps during signup. Essential information was prioritised, while additional details were moved to the user's settings page, allowing for a quicker entry into the platform.
We also introduced a 7-day free trial, providing users with immediate value and reducing friction.
Design process
I started off by analysing top e-learning platforms (Moodle, Blackboard, Khan Academy, Coursera) to infer user expectations and best practices.
This involved examining other successful online learning platforms to understand their features, usability, and overall user experience. For example, I studied how they visually display information and guide users through each step.
Shaping the solution
I crafted user flows to map out every key step a user would take, and how these steps interconnected throughout the product. This ensured a logical and intuitive navigation experience.
With a clear understanding of the problems and market, our ideation phase focused on defining the core user journeys.
Following user flows, we moved into wireframing. This crucial step involved close collaboration with the Product Manager and Engineers. This early engagement was vital to ensure that our design concepts were technically feasible and could be implemented within the given time constraints, preventing costly reworks later in the development cycle.
Previously, the platform suffered from numerous inconsistencies, making it very difficult to track and manage individual components across different screens and features. To address this, I proposed and led the initiative to establish a comprehensive design system.
Step 1, Design Components Organization
I scheduled a team activity with the Engineers to list down the most common elements used in the platform.
Step 2, Atomic Design
I organised the components as per the Atomic Design Methodology by Brad Frost.
Step 3, Creating Design System
I built components from the ground up. Our inspiration was drawn from leading industry standards like Human Interface Guidelines, Atlassian Design System, and Material Design.
As a key client requirement, we integrated various themes into the platform. This feature allowed the platform to be visually appealing and customisable for different grade levels, enhancing the overall engagement and personalisation for students.
Redefining the experience
Our designs underwent rigorous validation to ensure their effectiveness. We conducted heuristic evaluations to identify usability issues based on established principles, such as Nielsen's 10 Usability Heuristics.
Heuristic Evaluation
We identified additional design flows through evaluation.
Stakeholders Alignment
Multiple discussions with the PM and the client.
Iterations
Technical feasibility checks and improvements.
In team retrospectives, developers mentioned that they were facing difficulty understanding edge cases of a flow and some user interactions, so they developed a few things as per their assumptions.
I scheduled a meeting with the Engineers and Product Manager and addressed all the concerns, listened to their feedback, and improved the design process. I started creating handoffs afterward.
Outcome
The project culminated in successful updates launched in December 2022, with the platform receiving official approval from the Saudi Embassy in January 2023.
This rapid approval underscored the effectiveness and quality of the redesigned experience.
Early Engineer Engagement
Involving engineers during ideation is crucial for technical feasibility and understanding constraints upfront.
Demo Videos & Prototypes
Quick overview videos or interactive prototypes accelerate stakeholder reviews.
Detailed Design Handoffs
Clear handoffs that outline interactions and edge cases significantly reduce discrepancies.
Jira Documentation
Thoroughly documenting Jira stories with design specifications helps maintain alignment across the team.
Next Case Study
A polished e-commerce platform curated for skincare lovers in Pakistan featuring Western brands, intelligent product selection by skin type and concerns.
An ancient board game similar to Chess. Players can register for free, chat, and play against other players.
