Role
Impact
Overview
As Numerade expanded across platforms like AI tutoring, collaborative learning, and educator tools, the product experience became increasingly inconsistent. UI patterns were duplicated, visual standards drifted, and teams lacked a shared system for building new features efficiently. Bungalow was created to establish a scalable design foundation by standardizing components, defining visual and interaction principles, and aligning design and engineering around a unified system that could support rapid product growth.
Problem
When I joined Numerade, the product UI was inconsistent across surfaces. Components were duplicated, styles drifted, and engineers were recreating patterns from scratch. As we expanded to new features, the design debt compounded:
Inconsistent typography and spacing
Multiple button styles across flows
Lack of a brand identity
No shared token system
Slow design-to-dev handoff
Increased QA cycles due to UI inconsistencies
The Opportunity
Build Bungalow, Numerade’s first centralized web design system, a scalable foundation for product consistency and speed.
Scope & Reach
Launch Size
Rolled out to 54 internal team members (4 product designers, 30+ engineers, PMs, Marketing, Growth & QA)
Product surfaces served
Student learning flows, Ace AI Tutor, Study Groups, Flashcards, Educator Dashboards, Onboarding & Paywalls
Teams Impacted
Product, Engineering, Growth & Marketing
What I built
Designed & Documented
60+ Core components
200+ variations (states, sizes, interactions)
Color System (Palette Structure & Color Strategy)
Responsive Typography Scale
System Architecture
Verbal Design
Including…
8pt spacing grid
Buttons
Fields
Dropdowns & Drawers
Modals
Cards & Lists
Navigation Systems
Tags & badges
Progress indicators & Pagination
Empty States
AI Response containers
Notifications, Banners & Tooltips
Color System
Core Colors
Primary Brand Color
Implemented with graded swatches to support hover, active, disabled, and background states.
Secondary Core Color
Used for lighter UI treatments, background accents, and layered depth.
Neutral Foundation
Scaled grays, white, and black, Structured for typography hierarchy, backgrounds, dividers, and elevation layering.
Decorative Colors
Tangerine (Decorative)
Saffron (Decorative)
Phlox (Decorative)
Emerald (Decorative)
The decorative palette adds expressive range across both marketing and feature level branding within the product. Each includes graded swatches for flexible use across backgrounds, tags, highlights, and feature differentiation.
System colors
Success States
Error States
Warning States
Informational Feedback
System colors are reserved exclusively for product state communication and should not be used in marketing or decorative contexts. These colors prioritize contrast, immediacy, and semantic recognition to support user comprehension and accessibility.
Cross Functional Collaboration
Before building 📋
60+ Core components
200+ variations (states, sizes, interactions)
Color System
Responsive Typography Scale
System Architecture
Verbal Design
Throughout the process 🚆
I ran weekly syncs with engineering
Defined naming conventions
Ensured token structures mapped to CSS variables
Partnered on phased rollout
I presented 📊
Efficiency projections
Maintenance reduction analysis
Before/after UI comparisons
Long term scalability roadmap
I secured buy-in from 🤝
Product leadership
Engineering leads
Executive stakeholders
Workflow Efficiency
Designers could now...
Reduced design iteration cycles by 30%
Build new flows using existing components
Reduced time to create new screens by 40%
Focus on solving problems instead of redo UI
Decreased QA UI bugs by 30%
Prototype significantly faster
Operational Leverage
Engineering Velocity
Reduced dev handoff by 35%
Decreased component build time significantly
Cut duplicate UI implementation across teams (Engineers were no longer rebuilding patterns from scratch)
Business Impact
Faster launch cycles for new features (Study Groups, AI features, Educator Dashboard)
Increased UI & Brand consistency, which improved user trust
Reduced design debt
Created foundation for scale as MAU grew
What this says about me
No one handed me a brief that said "build a design system." I just couldn’t ignore the inconsistency anymore. As we scaled, things were starting to feel messy with the duplicated components, slightly different button styles and engineers always rebuilding patterns from scratch. So I decided to fix it.
In a fast moving environment with no extra resources, I took the initiative to create the structure we were missing. What started as a side effort became foundational infrastructure that made our work faster, more consistent, and way more scalable.
