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 closely with the co-founder and product manager to evolve the product, expand the design system, and design end-to-end experiences for students, parents, and educators. My work now supports more than 100 reusable 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.

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.

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.

Designing the Science Learning Journey

Building on the existing Math experience, I designed the Science learning architecture to support additional modules, flexible navigation, and new progression states. Students could enter lessons from multiple entry points, revisit completed activities, or explore content out of sequence, so I created a navigation model that encouraged a recommended learning path without limiting exploration.

Building on the existing Math experience, I designed the Science learning architecture to support additional modules, flexible navigation, and new progression states. Students could enter lessons from multiple entry points, revisit completed activities, or explore content out of sequence, so I created a navigation model that encouraged a recommended learning path without limiting exploration.

Key Considerations:


  • Designed age-appropriate navigation with clear visual hierarchy and minimal cognitive load for students ages 7–13.

  • Encouraged a recommended learning sequence without restricting students who wanted to explore lessons in a different order.

  • Supported first-time and returning learners by adapting entry points based on each student's progress.

  • Made learning progress recoverable, allowing students to resume lessons where they left off seamlessly.

  • Aligned engineering and product requirements by documenting navigation paths, edge cases, and progression states before implementation.

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

From Workflow to Interface

The final interface translated the workflow into a flexible learning experience, guiding students through each stage while maintaining consistent navigation and visual patterns across modules.

The final interface translated the workflow into a flexible learning experience, guiding students through each stage while maintaining consistent navigation and visual patterns across modules.

Science Navigation

Science Navigation

Science Navigation

Field Notes

Field Notes

Field Notes

Vocabulary Lab

Vocabulary Lab

Missions

Mission

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.

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