Website
Web App
Dashboard
User flows, Wireframing, UI design, Prototyping
Problem
The client wanted to create an all-in-one learning management system that would go beyond traditional course platforms. The vision was to combine:
Courses for structured learning
Private classes for personalized guidance
Clubs for peer-to-peer engagement
The challenge was to design a scalable cross-platform system that worked equally well on desktop and mobile, in both English and Arabic, while making the complex booking logic intuitive.
Challenges
Multiple service types – Courses, private sessions, and clubs each required their own booking and management flows.
Cross-platform scope – Designs were needed for website, web dashboards, mobile web, and mobile apps for both learners and instructors.
Bilingual layouts – Supporting both left-to-right (English) and right-to-left (Arabic) designs without breaking usability.
Complex logic – Defining a consistent but flexible system for scheduling, payments, and community features.
Evolving requirements – Client feedback often involved scope changes mid-design phase, requiring quick iterations without disrupting progress.
Solution
1. Discovery & Alignment
Used Sand & Bricks exercises to capture client’s design preferences.
Defined the core goal: a unified LMS ecosystem with clear navigation and streamlined booking.
2. User Flows
Built comprehensive user flows for learners and instructors.
Focused on ensuring the booking logic was airtight across courses, private sessions, and clubs.
3. Wireframing
Developed wireframes for six platforms: website, instructor panel, learner panel, mobile web (both user types), and mobile app (both user types).
Prioritized clarity and hierarchy, keeping each platform’s role distinct but connected.
4. Visual Design
Pitched two design directions, refined one into the final visual system.
Designed bilingual interfaces, solving for RTL/ LTR layout challenges.
Delivered clean, modern visuals with emphasis on readability and trust.
5. Collaboration & Handoff
Worked closely with the client to refine logic, especially for booking and payments.
Supported developers with detailed explanations, schema references, and updates.
Actively managed design handoff to ensure smooth build progress.
Key Features Designed
Course Marketplace – Browse and filter structured courses.
Private Classes – Dedicated booking system with availability, time-zone clarity, and reminders.
Clubs – A separate space for learners to join interest-based communities.
Instructor Dashboard – Tools to manage courses, availability, bookings, and clubs.
Learner Dashboard – A hub for courses, private sessions, and club memberships.
Cross-Platform Consistency – Unified design system across web and mobile.
Bilingual Support – Designed in English & Arabic with mirrored layouts.
Gamification elements to drive learner engagement.
Impact
System logic fully defined and approved, giving developers a clear foundation.
Wireframes and UI designs delivered across all six platforms, ensuring consistency.
Enabled learners to seamlessly enroll, book, and engage in clubs in one ecosystem.
Handled scope changes during design phase without delays, strengthening client trust.
Created a scalable LMS design system adaptable for future growth.
The mobile app was designed by my peers, based on the finalized wireframes, branding, and design system established during the web phase.
Disclaimer: The project discussed herein was undertaken as a part of the Code Experts team. The rights to this project are jointly owned by the client and the studio. This case study is presented solely to showcase my individual contributions to the project.
