ZillyPlanet

Role

Role

UX/UI Designer

Platform

Platform

Responsive Web Design

Duration

Duration

Ongoing

Year

Year

2026

Designing a Scalable Learning Platform for Students, Parents, and Educators

As the product evolved, ZillyPlanet needed a scalable design system that could support three distinct user groups—students, parents, and educators—without sacrificing consistency or speed.

I partnered with the co-founder and product manager to build the design system, design new product experiences, and establish reusable patterns that now support more than 100 components across 27 product surfaces.

Challenge

Students need playful, engaging interfaces that encourage exploration, while parents and educators need products that feel trustworthy, organized, and efficient. The challenge wasn't simply creating reusable components; it was building a system flexible enough to support very different mental models without fragmenting the product experience.

Understanding the Users

Designing for three audiences required balancing competing priorities:

  • Students needed motivation, simplicity, and large touch targets.

  • Parents needed visibility into progress.

  • Educators needed efficiency and classroom management.

These competing needs informed every component and workflow in the design system.

Progress Dashboard

Problem: Users needed clarity on what they'd completed and what remained to master a skill.


Research & Collaboration: Conducted competitor analysis, reviewed company personas, and collaborated with the co-founder and product manager to align on a simple, mastery-focused experience.


Iteration: Early concepts emphasized gamification through streaks and coin rewards. During review with the founder and PM, we realized these elements competed with the primary goal: helping students understand what to learn next. I removed unnecessary rewards and simplified the experience around mastery progression.


Solution: A clean visual hierarchy surfacing completed concepts, remaining concepts, and unlock conditions across practice and challenge modes.

Problem: Users needed clarity on what they'd completed and what remained to master a skill.


Research & Collaboration: Conducted competitor analysis, reviewed company personas, and collaborated with the co-founder and product manager to align on a simple, mastery-focused experience.


Iteration: Early concepts emphasized gamification through streaks and coin rewards. During review with the founder and PM, we realized these elements competed with the primary goal: helping students understand what to learn next. I removed unnecessary rewards and simplified the experience around mastery progression.


Solution: A clean visual hierarchy surfacing completed concepts, remaining concepts, and unlock conditions across practice and challenge modes.

Problem: Users needed clarity on what they'd completed and what remained to master a skill.

Approach: Conducted competitor analysis on existing learning progress patterns, reviewed company personas, and collaborated with the founder and PM to align on core priorities: simplicity, time-of-need information, and a less-is-more approach.

Iteration: Early concepts emphasized gamification through streaks and coin rewards. During review with the founder and PM, we realized these elements competed with the primary goal: helping students understand what to learn next. I removed unnecessary rewards and simplified the experience around mastery progression.

Solution: A clean visual hierarchy surfacing completed concepts, remaining concepts, and unlock conditions across practice and challenge modes.

Result: Shipped and now powering progress tracking across math and science domains, with the same pattern being applied to additional subjects in development.

Result: Shipped and now powering progress tracking across math and science domains, with the same pattern being applied to additional subjects in development.

Constraints

Because the platform was actively evolving, components needed to support new learning modes and subjects without requiring redesign. This required balancing immediate product needs with long-term scalability.

Design System Development

  • Audited the existing UI to identify inconsistencies across product surfaces

  • Expanded the existing design foundations—including color, typography, spacing, and tokens—to support new features.

  • Designed 100+ reusable components with scalable variants, interaction states, and documentation

  • Established implementation guidelines to improve the designer–developer handoff and consistency

Button System

Problem: Students needed large, obvious actions that were easy to identify and tap, while the interface still needed to feel credible for parents and educators.


Design: Three button variants with consistent interaction states, generous touch targets, and typography optimized for developing readers.


Why: Large touch targets accommodated developing motor skills while consistent interaction patterns reduced cognitive load across the platform.

Problem: Students needed large, obvious actions that were easy to identify and tap, while the interface still needed to feel credible for parents and educators.

Design: Three button variants with consistent interaction states, generous touch targets, and typography optimized for young readers.

Why: Reduced cognitive load for students while maintaining a scalable interaction pattern across every product surface.

Designing the Core Learning Experience

I designed the core student learning flow that guides users through STEM missions. The flow needed to accommodate multiple entry points (Challenge Mode, Practice Mode, MathLab, Mastery Missions) while maintaining clear progress and motivation throughout the learning journey.

Key Considerations:

  • Age-appropriate navigation with minimal cognitive load

  • Multiple entry points for different learning styles

  • Clear progress indicators and motivational checkpoints

  • Seamless error handling and recovery paths

Key Considerations:


  • Age-appropriate navigation with minimal cognitive load

  • Multiple entry points for different learning styles

  • Clear progress indicators and motivational checkpoints

  • Seamless error handling and recovery paths

Key Considerations:


  • Age-appropriate navigation with minimal cognitive load

  • Multiple entry points for different learning styles

  • Clear progress indicators and motivational checkpoints

  • Seamless error handling and recovery paths

Component Library: Selected Examples

Cards: Large typography, clear state differentiation, and visual rewards that communicate progress at a glance.

Cards: Large typography, clear state differentiation, and visual rewards that communicate progress at a glance.

Role

UX/UI Designer

Platform

Responsive Web Design

Duration

Ongoing

Year

2026

Navigation: Modular navigation that adapts to different learning contexts while maintaining familiar interaction patterns.

Navigation: Modular navigation that adapts to different learning contexts while maintaining familiar interaction patterns.

Accessibility: Large touch targets, high contrast, and scalable variants that reduce design debt while supporting young learners.

Accessibility: Large touch targets, high contrast, and scalable variants that reduce design debt while supporting young learners.

Impact

Product Impact

  • Designed and shipped the Progress Dashboard, now powering mastery tracking across math and science.

  • Created a scalable system supporting students, parents, and educators across web and mobile.

Team Impact

  • Built 100+ reusable components across 27 product surfaces.

  • Reduced design inconsistencies through standardized documentation and component usage guidelines.

  • Enabled 20% faster development through implementation-ready component specifications.

  • Built 100+ reusable components adopted across 27 product surfaces

  • Reduced design inconsistencies through clear documentation standards for component usage and variants

  • Enabled 20% faster development cycles through comprehensive component specs and usage guidelines

  • Designed and shipped the Progress Dashboard, now powering mastery tracking across math and science

  • Created a scalable system supporting three distinct user types (students, educators, and parents) across web and mobile

  • Built 100+ reusable components adopted across 27 product surfaces

  • Reduced design inconsistencies through clear documentation standards for component usage and variants

  • Enabled 20% faster development cycles through comprehensive component specs and usage guidelines

  • Designed and shipped the Progress Dashboard, now powering mastery tracking across math and science

  • Created a scalable system supporting three distinct user types (students, educators, and parents) across web and mobile

Reflection

Working on a live product taught me that a design system isn't just a library of components, but a product that evolves alongside the software it supports. Every new feature challenged the system in different ways, requiring close collaboration, thoughtful prioritization, and a balance between consistency and flexibility.

Working on a live product taught me that a design system isn't just a library of components, but a product that evolves alongside the software it supports. Every new feature challenged the system in different ways, requiring close collaboration, thoughtful prioritization, and a balance between consistency and flexibility.

other projects

other projects

other projects

Classpass

Feature Addition

Ripple

Responsive Web Design