EdTech · Online School

Advance Learning World

It is a digital platform that provides students with a personalised learning experience as per the Saudi Embassy.

Timeline
Nov 2022 to Aug 2023
Role
Product Designer
Industry
EdTech
Client
Saudi Embassy
Advance Learning platform overview

Understanding the problem

The Challenge

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

  • No direct user access
  • Language differences
  • Limited development time

Crafting a better experience

The Solutions

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.

Redesigning the Signup & Trial Experience

We also introduced a 7-day free trial, providing users with immediate value and reducing friction.

Signup and trial flow

Dashboard Redesign (2 Iterations)

Two dashboard iterations

Design process

Research & Discovery

I started off by analysing top e-learning platforms (Moodle, Blackboard, Khan Academy, Coursera) to infer user expectations and best practices.

Competitive Audit

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.

Competitive audit grid

Shaping the solution

Ideation & Design

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.

User flows diagram

Wireframing

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.

Wireframes

Design System

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.

Design system overview

Step 1, Design Components Organization

I scheduled a team activity with the Engineers to list down the most common elements used in the platform.

Components inventory list

Step 2, Atomic Design

I organised the components as per the Atomic Design Methodology by Brad Frost.

Atomic design diagram

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.

Introducing Engaging Themes

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.

Theme variants for the dashboard

Redefining the experience

Validation & Iteration

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.

Collaboration with PM and Engineers

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.

Handoff documentation

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

Impact & Key Learnings

The project culminated in successful updates launched in December 2022, with the platform receiving official approval from the Saudi Embassy in January 2023.

Final approved UI

This rapid approval underscored the effectiveness and quality of the redesigned experience.

Valuable Takeaways for Future Projects

  • 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.