iOS & Android applications ∙ Design System
Design System
Improving on Developing Workflows
Project Timeline: 4-month project
Core Responsibilities: End-to-end design process
Collaboration: Worked with a cross-functional team of 5 engineers and 1 PM
Deliverables: Design system components, Documentation, Prototypes
Clarifying
the system’s purpose
To guide every component and pattern we built.
Results & Impact
This taught me how a well-structured design system can drastically reduce friction for developers.
• 40% decrease in UI-related bugs
Well-structured design system can drastically reduce friction for developers and help ship quality code faster.
• Improved Velocity & Consistency
With a unified design library, developers cut down time hunting for specs or reinventing UI. We saw a notable reduction in code duplicates and a significant increase in feature delivery speed.
• User & Brand Cohesion
App ratings went up as our interface became more accessible and consistent across web and mobile, directly supporting Numerade’s mission to democratize STEM education.
The Problem
The brand and user experience
is fragmented across web and mobile.
Multiple one-off features, uncoordinated updates, and inconsistent UI patterns slowed down development.
The Goal
Create a unified design system that reduces UI-related bugs,
accelerates development velocity and consistency, and
delivers a cohesive brand experience across web and mobile
Ultimately elevating user satisfaction and advancing Numerade’s mission to democratize STEM education.
Key Design Decisions
Establish user flows
as foundation
Working closely with our engineers, I mapped out user flows for the primary features, identified friction points.
Create sets of
reusable patterns
Throughout this process, I facilitated workshops and open office hours to ensure everyone—from PMs to developers—had a voice in shaping the system.
Contribute to
detailed documentation
As result, having highly detailed documentation for each platform with examples and prototypes that we we tested.
Reuse Tokens & Theming Structure
I used a token-based approach for colors, spacing, and typography, making it simple to adapt the UI for different features or even dark mode—without rewriting code.
Establish Developer-Friendly
Documentation
We set up coding standards, version control for UI changes, and a clear contribution guide so developers could propose improvements or new components.
Results
Well-Defined Interfaces
& Patterns
By clearly defining how components interact, we eliminated hidden dependencies and made everything more predictable.
Reusable Components
Developers then reused these patterns, which not only sped up coding but also reduced the chance of new bugs.
Clear, Consistent Coding Standards
I created system to support consistent naming, formatting, and organization patterns make code more readable.
Results & Impact
This taught me how a well-structured design system can drastically reduce friction for developers.
• 40% decrease in UI-related bugs
Well-structured design system can drastically reduce friction for developers and help ship quality code faster.
• Improved Velocity & Consistency
With a unified design library, developers cut down time hunting for specs or reinventing UI. We saw a notable reduction in code duplicates and a significant increase in feature delivery speed.
• User & Brand Cohesion
App ratings went up as our interface became more accessible and consistent across web and mobile, directly supporting Numerade’s mission to democratize STEM education.