SMILE
SMILE
SMILE
Clarifying Core UX Flows and Designing for Scalability in a Complex Legacy Education Platform
Clarifying Core UX Flows and Designing for Scalability in a Complex Legacy Education Platform
Clarifying Core UX Flows and Designing for Scalability in a Complex Legacy Education Platform
Team Project
Team Project
Team Project
Subin Choi (UX/UI Designer)
Dr. Paul Kim (Former Associate Dean, Stanford GSE)
Yuha Kim (UX/UI Designer)
Emma Park (Back-end Developer)
Justine Kim (Data Scientist)
Jiyae Choi (Product Manager)
Subin Choi (UX/UI Designer)
Dr. Paul Kim (Former Associate Dean, Stanford GSE)
Yuha Kim (UX/UI Designer)
Emma Park (Back-end Developer)
Justine Kim (Data Scientist)
Jiyae Choi (Product Manager)
Subin Choi (UX/UI Designer)
Dr. Paul Kim (Former Associate Dean, Stanford GSE)
Yuha Kim (UX/UI Designer)
Emma Park (Back-end Developer)
Justine Kim (Data Scientist)
Jiyae Choi (Product Manager)
DURATION
DURATION
DURATION
OCT 2025 - DEC 2025
OCT 2025 - DEC 2025
OCT 2025 - DEC 2025
TOOLS
TOOLS
Lovable, Claude.ai, Storybook, Visual Studio Code
Lovable, Claude.ai, Storybook, Visual Studio Code
Project Context
Project Context
Project Context
SMILE (Student-Made Interactive Learning Environment) is a global K–12 platform where AI facilitates inquiry-based learning. While the platform boasted 30,000+ registered users, its Daily Active Users (DAU) remained below 100.
SMILE (Student-Made Interactive Learning Environment) is a global K–12 platform where AI facilitates inquiry-based learning. While the platform boasted 30,000+ registered users, its Daily Active Users (DAU) remained below 100.
SMILE (Student-Made Interactive Learning Environment) is a global K–12 platform where AI facilitates inquiry-based learning. While the platform boasted 30,000+ registered users, its Daily Active Users (DAU) remained below 100.
Design team was tasked with diagnosing this friction. We moved beyond surface-level UI fixes to perform a root-cause analysis of the legacy architecture, ultimately redefining the core UX flows and designing a token-based system for long-term scalability.
Design team was tasked with diagnosing this friction. We moved beyond surface-level UI fixes to perform a root-cause analysis of the legacy architecture, ultimately redefining the core UX flows and designing a token-based system for long-term scalability.
Design team was tasked with diagnosing this friction. We moved beyond surface-level UI fixes to perform a root-cause analysis of the legacy architecture, ultimately redefining the core UX flows and designing a token-based system for long-term scalability.
Why Redesign Was Needed
Why Redesign Was Needed
Why Redesign Was Needed
30K+ users, but fewer than 100 daily actives due to fragmented UX.
30K+ users, but fewer than 100 daily actives due to fragmented UX.
30K+ users, but fewer than 100 daily actives due to fragmented UX.
Despite over 30,000 registered users, internal tracking showed fewer than 100 daily active users, signaling a significant drop-off after initial adoption.
The issue was not technical infrastructure, but UX/UI: inconsistent UI patterns and an unclear interaction model increased cognitive load and blocked repeated use.
Despite over 30,000 registered users, internal tracking showed fewer than 100 daily active users, signaling a significant drop-off after initial adoption.
The issue was not technical infrastructure, but UX/UI: inconsistent UI patterns and an unclear interaction model increased cognitive load and blocked repeated use.
Despite over 30,000 registered users, internal tracking showed fewer than 100 daily active users, signaling a significant drop-off after initial adoption.
The issue was not technical infrastructure, but UX/UI: inconsistent UI patterns and an unclear interaction model increased cognitive load and blocked repeated use.
In this legacy education platform, Groups and Activities contained SMILE’s core learning flow—question creation, participation, and feedback.
Instead of redesigning the entire system, we focused on these high-impact areas first to clarify UX structure and UI rules.
In this legacy education platform, Groups and Activities contained SMILE’s core learning flow—question creation, participation, and feedback.
Instead of redesigning the entire system, we focused on these high-impact areas first to clarify UX structure and UI rules.
In this legacy education platform, Groups and Activities contained SMILE’s core learning flow—question creation, participation, and feedback.
Instead of redesigning the entire system, we focused on these high-impact areas first to clarify UX structure and UI rules.
Validating the Problem Through User Interviews
Validating the Problem Through User Interviews
Validating the Problem Through User Interviews
“Users were motivated, but unclear about what to do next after feedback.”
“Users were motivated, but unclear about what to do next after feedback.”
“Users were motivated, but unclear about what to do next after feedback.”
To validate whether our UX analysis aligned with real usage, we conducted short interviews with SMILE’s primary student users.
To validate whether our UX analysis aligned with real usage, we conducted short interviews with SMILE’s primary student users.
To validate whether our UX analysis aligned with real usage, we conducted short interviews with SMILE’s primary student users.
Key insight: Students did not drop off because the feedback lacked value, but because the system failed to suggest a clear next best action after feedback.
Structural issue:
The same functionality was presented differently across pages, preventing users from trusting interface rules and forcing them to relearn interactions repeatedly.
Key insight: Students did not drop off because the feedback lacked value, but because the system failed to suggest a clear next best action after feedback.
Structural issue:
The same functionality was presented differently across pages, preventing users from trusting interface rules and forcing them to relearn interactions repeatedly.
Key insight: Students did not drop off because the feedback lacked value, but because the system failed to suggest a clear next best action after feedback.
Structural issue:
The same functionality was presented differently across pages, preventing users from trusting interface rules and forcing them to relearn interactions repeatedly.
These insights reinforced that the core issue was not missing features, but unclear flows and UI structure.
These insights reinforced that the core issue was not missing features, but unclear flows and UI structure.
These insights reinforced that the core issue was not missing features, but unclear flows and UI structure.
Understanding the Existing Experience
Understanding the Existing Experience
Understanding the Existing Experience
01
01
01
No Clear Action Hierarchy
(UI-Level Issue)
No Clear Action Hierarchy
(UI-Level Issue)
No Clear Action Hierarchy
(UI-Level Issue)
Actions and buttons with different priorities were presented at the same visual level.
Without a clear visual hierarchy, users could not easily identify the primary next step, increasing cognitive load and hesitation.
Actions and buttons with different priorities were presented at the same visual level.
Without a clear visual hierarchy, users could not easily identify the primary next step, increasing cognitive load and hesitation.
Actions and buttons with different priorities were presented at the same visual level.
Without a clear visual hierarchy, users could not easily identify the primary next step, increasing cognitive load and hesitation.
This revealed the absence of consistent UI rules for action emphasis and prioritization.
This revealed the absence of consistent UI rules for action emphasis and prioritization.
This revealed the absence of consistent UI rules for action emphasis and prioritization.
02
02
02
No Priority-Driven UX Structure
(UX Structural Issue)
No Priority-Driven UX Structure
(UX Structural Issue)
No Priority-Driven UX Structure
(UX Structural Issue)
Across the product, actions and information were organized without regard to importance or usage frequency.
The system did not guide users toward repeatable, goal-oriented behavior, forcing them to interpret what mattered at each step.
Across the product, actions and information were organized without regard to importance or usage frequency.
The system did not guide users toward repeatable, goal-oriented behavior, forcing them to interpret what mattered at each step.
Across the product, actions and information were organized without regard to importance or usage frequency.
The system did not guide users toward repeatable, goal-oriented behavior, forcing them to interpret what mattered at each step.
This revealed a deeper UX issue: the absence of a structure that supports decision-making and habit formation.
This revealed a deeper UX issue: the absence of a structure that supports decision-making and habit formation.
This revealed a deeper UX issue: the absence of a structure that supports decision-making and habit formation.
Strategic Focus: Prioritizing the Core Domain
Strategic Focus: Prioritizing the Core Domain
Strategic Focus: Prioritizing the Core Domain
We determined that restructuring the entire sitemap at once would increase complexity rather than reduce it.
We determined that restructuring the entire sitemap at once would increase complexity rather than reduce it.
We determined that restructuring the entire sitemap at once would increase complexity rather than reduce it.
Instead, we focused on the Groups and Activities area, where SMILE’s core learning flow takes place: creation, participation, and feedback.
This was a progressive UX strategy rather than a full redesign. We first established clear UX rules within the core flow and then planned to scale outward.
Instead, we focused on the Groups and Activities area, where SMILE’s core learning flow takes place: creation, participation, and feedback.
This was a progressive UX strategy rather than a full redesign. We first established clear UX rules within the core flow and then planned to scale outward.
Instead, we focused on the Groups and Activities area, where SMILE’s core learning flow takes place: creation, participation, and feedback.
This was a progressive UX strategy rather than a full redesign. We first established clear UX rules within the core flow and then planned to scale outward.
A focused sitemap highlighting the core learning flow we prioritized.
A focused sitemap highlighting the core learning flow we prioritized.
A focused sitemap highlighting the core learning flow we prioritized.
Rather than restructuring the entire platform, we narrowed the scope to the flows that define how users actually engage with SMILE.
Rather than restructuring the entire platform, we narrowed the scope to the flows that define how users actually engage with SMILE.
Rather than restructuring the entire platform, we narrowed the scope to the flows that define how users actually engage with SMILE.
Reframing the Problem
Reframing the Problem
Reframing the Problem
Initially, we attempted to directly modify existing UI screens. However, we quickly recognized a structural limitation.
Initially, we attempted to directly modify existing UI screens. However, we quickly recognized a structural limitation.
Before changing screens, we needed to understand what rules the product was implicitly built on.
Before changing screens, we needed to understand what rules the product was implicitly built on.
Instead of making shallow changes across the entire site, we prioritized the Groups and Activities areas, where user retention was most strongly influenced.
Instead of making shallow changes across the entire site, we prioritized the Groups and Activities areas, where user retention was most strongly influenced.
Our goal was not simple surface-level fixes, but to extract and formalize the implicit rules that already existed within the service.
Our goal was not simple surface-level fixes, but to extract and formalize the implicit rules that already existed within the service.
A structural wireframe created in Lovable to redefine hierarchy and core flows before visual refinement.
A structural wireframe created in Lovable to redefine hierarchy and core flows before visual refinement.
Team Role & Scope
Team Role & Scope
Team Role & Scope
This project was not about creating a new system from scratch, but about imposing order on an existing, unstructured UX/UI.
This project was not about creating a new system from scratch, but about imposing order on an existing, unstructured UX/UI.
This project was not about creating a new system from scratch, but about imposing order on an existing, unstructured UX/UI.
Design team responsibilities (Executed)
Design team responsibilities (Executed)
Design team responsibilities (Executed)
Redesigned and improved core UX flows centered on Groups and Activities
Identified layout-level structural issues and redefined them from a UX perspective
Audited the existing UI to uncover implicit patterns and behaviors
Defined the foundational structure and tokenization logic for a future design system
Design team responsibilities (Proposed)
Design team responsibilities (Proposed)
Design team responsibilities (Proposed)
Designed the design system structure by extracting repeatable patterns from the legacy UI
Defined token standards for color, typography, spacing, and component roles
Proposed implementation strategies: gradual refactor vs. new frontend layer
(Final implementation decisions were left to engineering capacity and product strategy.)
01
Exploring Vibe Coding — and Its Limits
“Fast to explore, hard to scale.”
“Fast to explore, hard to scale.”
For rapid validation, the design team set up a local Lovable-based prototyping environment and integrated Claude AI MCP to explore UI changes and flow variations.
While AI-based prototyping enabled fast exploration, its limitations in a legacy environment led us to prioritize scalable UX structure and system design over implementation speed.
Key UX Structure Changes
Key UX Structure Changes
Key UX Structure Changes
Re-establishing UX Logic
Re-establishing UX Logic
Re-establishing UX Logic
Actions were reorganized based on priority and usage frequency.
The most important action was surfaced as the primary CTA, while secondary or administrative actions were grouped into overflow menus to reduce visual noise.
Actions were reorganized based on priority and usage frequency.
The most important action was surfaced as the primary CTA, while secondary or administrative actions were grouped into overflow menus to reduce visual noise.
Actions were reorganized based on priority and usage frequency.
The most important action was surfaced as the primary CTA, while secondary or administrative actions were grouped into overflow menus to reduce visual noise.
This strengthened visual hierarchy and enabled users to anticipate and perform their next action more confidently.
This strengthened visual hierarchy and enabled users to anticipate and perform their next action more confidently.
This strengthened visual hierarchy and enabled users to anticipate and perform their next action more confidently.
Navigation&Context Consistency
Navigation&Context Consistency
Navigation&Context Consistency
Previously, the same functionality appeared differently across pages, preventing users from trusting interface rules and forcing repeated relearning.
Previously, the same functionality appeared differently across pages, preventing users from trusting interface rules and forcing repeated relearning.
Previously, the same functionality appeared differently across pages, preventing users from trusting interface rules and forcing repeated relearning.
We unified navigation and interaction rules across pages to eliminate confusion and establish consistent expectations.
We unified navigation and interaction rules across pages to eliminate confusion and establish consistent expectations.
We unified navigation and interaction rules across pages to eliminate confusion and establish consistent expectations.
02
Design System PoC (Proof of Concept)
Through this process, the design team shifted direction.
Vibe coding was retained for exploration, but we identified the need for a design system to support consistent updates and future growth.
Design Tokens standardized core UI attributes for consistency
A Storybook PoC validated a Single Source of Truth
We proposed a scalable implementation strategy to the engineering team
Why Implementation Stopped at This Level
Why Implementation Stopped at This Level
The reason implementation did not proceed further was clear.
The reason implementation did not proceed further was clear.
Engineering resources were limited, and a product-level decision was required on whether to incrementally refactor the existing service or build a new frontend shell connected to the backend.
Engineering resources were limited, and a product-level decision was required on whether to incrementally refactor the existing service or build a new frontend shell connected to the backend.
The design team determined that leaving behind a correct UX structure and system foundation was more valuable than shipping partial code.
The design team determined that leaving behind a correct UX structure and system foundation was more valuable than shipping partial code.
Outcome
Outcome
Outcome
Clarified structural issues in the core UX flow
Established structural consistency by defining a continuous learning loop that addressed the gap after feedback
Validated the feasibility of design-system–driven refactoring
Proposed a scalable UX structure suitable for future expansion, including B2B SaaS use cases
Reflection
Reflection
Reflection
This project reinforced that UX design is not about making screens look better, but about deciding what to change and what to preserve within complex systems.
This project reinforced that UX design is not about making screens look better, but about deciding what to change and what to preserve within complex systems.
This project reinforced that UX design is not about making screens look better, but about deciding what to change and what to preserve within complex systems.
By defining a continuous learning loop, the redesign enabled clearer decision making after feedback and laid the groundwork for sustainable growth.
By defining a continuous learning loop, the redesign enabled clearer decision making after feedback and laid the groundwork for sustainable growth.
By defining a continuous learning loop, the redesign enabled clearer decision making after feedback and laid the groundwork for sustainable growth.
Read more of my other projects
Read more of my other projects
Read more of my other projects
