Back

Back

[Case 01]

Making learning imperfect and fun

Online Learning

Playwise

A TLMS platform based on the Read-Watch-Play pedagogy for instructors and students

[Project Overview]

Playwise is a TLMS designed around the Read–Watch–Play pedagogy to support instructors and students in structuring and engaging with course content. When I joined the project, foundational research and early direction were already established. I focused on refining the scope, advancing the product through design system refinement, high-fidelity prototyping, and collaborating with the team to prepare and launch the MVP.

[Problem Statement]

The system needed to be engaging and motivating for students through light gamification, while remaining clearly structured to help instructors understand and apply the Read–Watch–Play pedagogy when creating course content.

Earlier design iterations leaned heavily on visual complexity and feature density, which reduced clarity and made the experience more difficult to use for both instructors and students. Additionally, they lacked gamification tailored to playfulness and experimentation.

[Industry]

Online Learning

[My Role]

UX/UI Designer, Project Manager

[Platforms]

Web

[Timeline]

Oct 2025 - Current

[Deliverables]

Web & Mobile MVP for Student View

Web & Mobile MVP for Professor View

Design System

View Live Project

View Live Project

Pending Style Guide

Pending Style Guide

[Persona]

Leo

[Student]

Leo is a motivated undergraduate student who wants learning to feel engaging, enjoyable, and rewarding rather than stressful. They are more likely to stay focused and complete coursework when the experience feels interactive and clearly structured, and when progress is visible along the way.

Age: 22

Location: Maryland

Tech Proficiency: Moderate

Gender: Male

[Goal]

Stay motivated and engaged throughout the course without feeling overwhelmed

Learn through a mix of reading, watching, and interactive activities in a way that feels enjoyable

Feel a sense of accomplishment through visible milestones and feedback

[Frustrations]

Learning platforms that feel overwhelming or stressful due to visual clutter or unclear structure

Switching between disconnected tools for reading, watching, and completing activities

Feeling unsure about what to do next or how tasks fit into the larger learning goal

[Process]

[01] Design Audit

Audited existing flows for students and instructors to assess clarity and pedagogical alignment

Evaluated visual complexity, color use, and interaction consistency

Identified moments where gamification could reinforce progress and engagement

[01] Design Audit

Audited existing flows for students and instructors to assess clarity and pedagogical alignment

Evaluated visual complexity, color use, and interaction consistency

Identified moments where gamification could reinforce progress and engagement

[01] Design Audit

Audited existing flows for students and instructors to assess clarity and pedagogical alignment

Evaluated visual complexity, color use, and interaction consistency

Identified moments where gamification could reinforce progress and engagement

[02] Insights

A mobile experience was not a priority for the MVP, enabling deeper focus on refining core learning flows

Student engagement required a clear, intentional gamification system rather than isolated or decorative elements

The original design closely resembled existing LMS patterns, limiting differentiation and pedagogical support.

[02] Insights

A mobile experience was not a priority for the MVP, enabling deeper focus on refining core learning flows

Student engagement required a clear, intentional gamification system rather than isolated or decorative elements

The original design closely resembled existing LMS patterns, limiting differentiation and pedagogical support.

[02] Insights

A mobile experience was not a priority for the MVP, enabling deeper focus on refining core learning flows

Student engagement required a clear, intentional gamification system rather than isolated or decorative elements

The original design closely resembled existing LMS patterns, limiting differentiation and pedagogical support.

[03] Design Solution

Used purposeful color and iconography for clarity, while reducing overall visual noise

Implemented a system moderated reward system to support gamification without adding instructor burden

Designed a drag-and-drop system for easy assignment customization and module reordering.

[03] Design Solution

Used purposeful color and iconography for clarity, while reducing overall visual noise

Implemented a system moderated reward system to support gamification without adding instructor burden

Designed a drag-and-drop system for easy assignment customization and module reordering.

[03] Design Solution

Used purposeful color and iconography for clarity, while reducing overall visual noise

Implemented a system moderated reward system to support gamification without adding instructor burden

Designed a drag-and-drop system for easy assignment customization and module reordering.

[04] Testing & Iteration

Worked with developers and professors to transition designs from low- to high-fidelity prototypes, ensuring feasibility and pedagogical alignment

Iterated on core student and instructor flows through continuous feedback and refinement

Launched the MVP to allow for in-semester testing and gather insights for future feature expansion

[04] Testing & Iteration

Worked with developers and professors to transition designs from low- to high-fidelity prototypes, ensuring feasibility and pedagogical alignment

Iterated on core student and instructor flows through continuous feedback and refinement

Launched the MVP to allow for in-semester testing and gather insights for future feature expansion

[04] Testing & Iteration

Worked with developers and professors to transition designs from low- to high-fidelity prototypes, ensuring feasibility and pedagogical alignment

Iterated on core student and instructor flows through continuous feedback and refinement

Launched the MVP to allow for in-semester testing and gather insights for future feature expansion

[Outcome]

Delivered a functional MVP supporting both student and instructor workflows
Balanced engagement through gamification with clarity and usability
Prepared the platform for in-semester testing and future iteration

[Key Learning]

Designing Within Constraints

Clarity and focus matter more than feature volume

Designing Within Constraints

Clarity and focus matter more than feature volume

Designing Within Constraints

Clarity and focus matter more than feature volume

Gamification Requires Restraint

Motivation works best when it supports learning, not distraction

Gamification Requires Restraint

Motivation works best when it supports learning, not distraction

Gamification Requires Restraint

Motivation works best when it supports learning, not distraction

Launching Is Part of the Design Process

Real-world use creates better insights than assumptions

Launching Is Part of the Design Process

Real-world use creates better insights than assumptions

Launching Is Part of the Design Process

Real-world use creates better insights than assumptions

Select this text to see the highlight effect