Ahmed, 13 year old student
“I quit when I saw too many choices on the signup page.”
Pain Points
Drop off rate
55% drop-off at 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
Streamlining Signup & Onboarding
We also introduced a 7-day free trial, providing users with immediate value and reducing friction.
Revamping the Student Dashboard
The main dashboard, previously a source of confusion, was completely reimagined.
Important sections were prioritized with clear visual hierarchy, making it easy for students to track their progress, access courses, and engage with content.
Competitive Audit
This involved examining other successful online learning platforms to understand their features, usability, and overall user experience.
e.g., I studied how they visually display information and guide users through each step.
With a clear understanding of the problems and market, our ideation phase focused on defining the core user journeys.
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.
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.
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 organized 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
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 customizable for different grade levels, enhancing the overall engagement and personalization for students.
Heuristic Evaluation
We identified additional design flows through the evaluation
Stakeholders Alignment
Multiple discussions with PM and the Client
Iterations
Technical feasibilities and improvements
Collaboration with PM and Engineers
In team retrospectives, Developers mentioned that they were facing difficulty to understand 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.
This rapid approval underscored the effectiveness and quality of the redesigned experience.
Valuable Takeaways for Future Projects
Early Engineer Engagement
Involving engineers during the ideation phase is crucial for ensuring technical feasibility and understanding constraints upfront.
Demo Videos & Prototypes
Creating quick overview videos or interactive prototypes can accelerate stakeholder reviews.
Detailed Design Handoffs
Preparing clear and comprehensive design handoffs, outlining all interactions and edge cases, significantly reduces discrepancies.
Jira Documentation
Thoroughly documenting Jira stories with design specifications helps maintain alignment and clarity across the team.