Back

Back

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

Download Case Study

Download Case Study

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

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

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?

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?

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

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

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

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

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.

Stakeholder Interview Findings

Design is best learned by doing

Learners get overwhelmed easily

Interactivity drives engagement

One-size-fits-all doesn’t work

There’s a disconnect between course content and industry needs

Stakeholder Interview Findings

Design is best learned by doing

Learners get overwhelmed easily

Interactivity drives engagement

One-size-fits-all doesn’t work

There’s a disconnect between course content and industry needs

Stakeholder Interview Findings

Design is best learned by doing

Learners get overwhelmed easily

Interactivity drives engagement

One-size-fits-all doesn’t work

There’s a disconnect between course content and industry needs

User Interview Findings

I forget theory after watching videos

I wish there were more challenges

Static content feels boring

Feedback is missing

I learn best when I can try and have hands on experience

User Interview Findings

I forget theory after watching videos

I wish there were more challenges

Static content feels boring

Feedback is missing

I learn best when I can try and have hands on experience

User Interview Findings

I forget theory after watching videos

I wish there were more challenges

Static content feels boring

Feedback is missing

I learn best when I can try and have hands on experience

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.

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.

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

Gamification boosts engagement

Badges and XP motivated learners, but needed balance to avoid replacing intrinsic curiosity

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

Interactivity aids retention

Visual learners responded best to hands-on tasks like drag-and-drop and live design kits

Interactivity aids retention

Visual learners responded best to hands-on tasks like drag-and-drop and live design kits

Next Project ›

Select this text to see the highlight effect