UX Design Case Study
Teaching Design System through Interactive models & LXD Integration
Education
Design.IO: Teaching Design System Through Interactive Model & LXD Integration
An Interactive Platform for Immersive Design Learning
Project Overview
Design.I0 is an interactive e-learning platform crafted to make UI design system education more engaging, practical, and learner-centered. It tackles key challenges of passive online learning such as low retention, lack of interactivity, and one-size-fits-all formats by integrating Learning Experience Design (LXD), gamification, and cognitive learning principles. Through modular lessons, drag-and-drop activities, audio explanations, and a gamified UI, the platform transforms theoretical concepts into hands-on experiences.
Problem Statement
Design education in its current digital, self-paced form often leads to passive learning through static content and lacks hands-on engagement. This results in low retention, minimal interactivity, and poor motivation among learners to complete courses
Industry
Education
Client
IIT Delhi
My Role
Lead UX -UI Design
Platforms
Mobile Application
Timeline
January – May 2025
Process
01 Empathize & Discover
To build a strong theoretical foundation for effective design learning, I conducted an in-depth study of pedagogy, Learning Experience Design (LXD), gamification principles, and instructional models
I analyzed leading design education platforms such as UXcel, Coursera, and NNG to uncover gaps in interactivity, usability, and learner engagement.
I conducted a comprehensive user survey with over 40 design learners, along with 6–8 in-depth interview sessions involving students, educators, and mentors across varying levels. These insights helped identify core motivations, common barriers, and learner expectations in the context of online UI design education
02 Define & Synthesize
Defined the challenge of passive, one-size-fits-all content in current design education platforms and created two key personas-Curious Beginner and Motivator Dropout to reflect learner archetypes
Mapped out emotional and learning journeys to uncover critical pain points, such as drop-off moments, engagement gaps, and areas of confusion throughout the user experience
Reframed the problem into a central design challenge: “How might we make UI design education more interactive, personalized, and engaging?
03 Ideate & Prototype
Designed structured learning paths that guided users from concept introduction to final assessmentt, focusing on clarity and reducing cognitive load in the form of task flows
Developed a comprehensive curriculum featuring key platform elements such as drag-and-drop activities, modular lessons, gamified UI components, a feedback wall, and progress-tracking analytics to promote active engagement
Created low to high-fidelity wireframes leading to interactive UI screens in Figma, incorporating playful and intuitive interfaces. Developed the platform’s name, logo, and visual language
04 Test & Refine
Conducted usability testing with six design students from Class 12 in a controlled environment to assess the platform’s functionality, clarity, and overall user experience
Developed a feedback grid to map feedback into actionable areas: what worked, what confused users, and what needed simplification
Planned next steps including better animations, interactive video content, certification pathways, and bootcamp partnerships
Key learning models Used
Learning Experience Design (LXD)
Gamification in Learning
Project-Based Learning (PBL)
Cognitive Load Theory
Interviews
To gain a deeper understanding of the problem, initial interviews were conducted with stakeholders: learners and mentors in the design field & Users : Students. Providing valuable insights into their experiences with online learning and the challenges they face.
Persona
Archetypes were created from two distinct types of people one with individuals who are new to design or exploring it as a career shift and individuals who have previously enrolled in online courses but discontinued them due to lack of engagement interactivity, or real-world application
Arjun Mehta
Design Researcher
I don’t just want to learn; I want to apply it too
Age: 25
New Delhi, India
Tech Proficiency: Moderate
Gender: Male
Goals
To stay motivated and engaged throughout the course duration
To apply theoretical concepts practically and get instant feedback
To learn at your own pace
Frustrations
Finds content boring and flat; prefers practical, hands-on learning
Difficulty navigating dashboards; lacks real-time feedback on progress
Cognitive overload from text-heavy courses without enough interactive elements
Have less time to contribute to a course due to hectic schedule
Aanchal Shoba
Class 11 Student
Age: 16
Ludhiana, Punjab, India
Tech Proficiency: Moderate
Female
Goals
Grasp the basics of design to prepare for entrance exams
Learn UI design in an engaging and memorable way
Create posters and digital artwork for school contests
Grow her confidence in creative abilities
Frustrations
Loses interest in long, text-heavy lessons
Struggles to apply concepts to real-world projects
Has difficulty remembering terms like Padding or kerning
Cognitive overload from text-heavy courses without enough interactive elements
Task Flows
Stylesheet
Stylesheet contain font , font size, colour scheme and layout/grid used in the application to design.
Mockups
Testing and Feedback
The objective was to evaluate how students interacted with the interface, understood the content, and engaged with the gamified learning elements. Total of 6 government school students from Class 12 (design stream) 1 boy, 5 girls took part in testing
Feedback was captured in feedback capture grid system
Testing Metrics & Outcomes
Approximately 80% of students completed the module without assistance
Key Learnings
Designing for Learning Is Different as Pedagogy shapes experience
Learned that good UI isn’t enough-impactful educational experiences require integrating instructional design models like LXD and cognitive load theory to enhance comprehension and retention.
Gamification boosts engagement
Badges and XP motivated learners, but needed balance to avoid replacing intrinsic curiosity
Interactivity aids retention
Visual learners responded best to hands-on tasks like drag-and-drop and live design kits