ZillyPlanet
Building Scalable Design System for for Multi-User STEM Platform
As a UX/UI Designer at ZillyPlanet, I'm building a design system for an AI-powered STEM learning platform serving students (ages 7-13), educators, and parents. I've created 50+ scalable, accessible components that maintain consistency across student portals, parent dashboards, and educator tools.
Outcome
Expanded design system with 50+ new components, improved documentation for developer handoff, and ensured consistency across multiple product surfaces.
Challenge
ZillyPlanet needed a scalable design system to maintain consistency across three distinct platforms: student portals, parent dashboards, and educator tools. The unique challenge was balancing playful, engaging design for kids with the credibility and clarity parents and educators expect.
Design System Development
Audited existing components to identify inconsistencies
Established foundational systems (color, typography, spacing)
Created reusable components with clear variants and states
Documented usage guidelines for design and development teams
Button System
I established three button variants to create a clear visual hierarchy that guides users toward important actions without causing overwhelm.
Design Rationale
When designing for 7-13-year-olds, I prioritized clarity over subtle interactivity. The button system uses consistent visual treatment across idle, hover, and active states, with only the disabled state differing (reduced opacity). This intentional simplification reduces cognitive load and keeps young users focused on the action.
The 50px corner radius balances playfulness with credibility, while Poppins (24px Semibold/18px Medium) ensures readability for developing readers. Large buttons feature 60px horizontal padding to accommodate less precise motor control, and all color combinations meet WCAG AA contrast ratios.
Student Mission Flow
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.
Component Library: Selected Examples
Cards: Progress Mission cards adapt across five states with distinct visual treatments. Mission Cards and completion rewards use large typography and bright colors to reinforce achievement.
Navigation: Created modular nav bars that adapt to learning contexts while maintaining familiar patterns. Each provides contextual actions with prominent coin rewards to support gamification.
Communication: Inbox cards and mission messages use conversational copy and clear hierarchy to present information without overwhelming young users.
Design Principles: Large touch targets for young users, high contrast for readability, gamification through progress indicators and rewards, and scalable variants that reduce design debt.
Impact
Built 50+ reusable components adopted across 27 product surfaces
Reduced design inconsistencies through documentation standards for component usage and variants
Enabled 20% faster development through comprehensive component specs and usage guidelines
Created a scalable system that supports three distinct user types (students, educators, parents) across web and mobile
