Schoox Design System
Schoox Design System
I helped build the Schoox Design System from the ground up to support a company-wide product and brand redesign. Creating a shared visual language and unified components for web, iOS, and Android.
I helped build the Schoox Design System from the ground up to support a company-wide product and brand redesign. Creating a shared visual language and unified components for web, iOS, and Android.
I built the Schoox Design System from the ground up to support a company-wide product and brand redesign, creating a shared visual language and unified components for web, iOS, and Android.
120+ Components Delivered Across Web and Native Mobile
120+ Components Delivered Across Web and Native Mobile
120+ Components Delivered Across Web and Native Mobile
120+ Components Delivered Across Web and Native Mobile
Expedited Engineering Handoff Cycle by 30%
Expedited Engineering Handoff Cycle by 30%
Expedited Engineering Handoff Cycle by 30%
Expedited Engineering Handoff Cycle by 30%
Met Q3 Goal of Unifying Supporting Teams Under Schoox Design System
Met Q3 Goal of Unifying Supporting Teams Under Schoox Design System
Met Q3 Goal of Unifying Supporting Teams Under Schoox Design System
Met Q3 Goal of Unifying Supporting Teams Under Schoox Design System
Role
Product designer
Visual designer
Writer
Timeframe
6 months
Team
Me - Product Designer
Paul H. - Director
Cliff M. - Manager
Alyssa V. - UX Writer
Michalis T - Frontend Lead
120+ Components Delivered Across Web and Native Mobile
Expedited Engineering Handoff Cycle by 30%
Met Q3 Goal of Unifying Supporting Teams Under Schoox Design System
Problem
Problem
A full audit of the legacy product revealed deep inconsistencies across platforms: misaligned styles, undocumented patterns, and accessibility gaps. Web and mobile felt like separate products, weakening the brand and degrading the overall user experience. Teams were working in silos with no centralized source of truth, creating confusion and rework.
A full audit of the legacy product revealed deep inconsistencies across platforms: misaligned styles, undocumented patterns, and accessibility gaps. Web and mobile felt like separate products, weakening the brand and degrading the overall user experience. Teams were working in silos with no centralized source of truth, creating confusion and rework.
Target Goals
Target Goals
Working cross-functionally with branding, engineering (web, iOS, Android), our CEO, and the Experience Design team, we set out to:
Create a scalable, unified design system
Establish 1:1 parity across platforms
Build a clear, consistent handoff process between design and engineering
Working cross-functionally with branding, engineering (web, iOS, Android), our CEO, and the Experience Design team, we set out to:
Create a scalable, unified design system
Establish 1:1 parity across platforms
Build a clear, consistent handoff process between design and engineering
Variant sticker sheets for Text field and Dropdown components
My Contributions
My Contributions
As an individual contributor, I led efforts to:
Audit design files and identify reusable patterns
Research component behavior across platforms to guide API design
Create high-fidelity designs and specs in Figma
Collaborate with engineers through handoff, testing, and iteration
Write system documentation to guide adoption and use
As an individual contributor, I led efforts to:
Audit design files and identify reusable patterns
Research component behavior across platforms to guide API design
Create high-fidelity designs and specs in Figma
Collaborate with engineers through handoff, testing, and iteration
Write system documentation to guide adoption and use
Sample of our documentation website
Design Tokens
Design Tokens
We discovered major gaps in brand consistency: incorrect hex values, uneven application of styles, and inaccessible theming practices. I implemented a token system based on Amazon’s Style Dictionary, with layered support for web, iOS, and Android. This enabled deep theming while ensuring AA/AAA accessibility, regardless of a customer’s brand palette.
We discovered major gaps in brand consistency: incorrect hex values, uneven application of styles, and inaccessible theming practices. I implemented a token system based on Amazon’s Style Dictionary, with layered support for web, iOS, and Android. This enabled deep theming while ensuring AA/AAA accessibility, regardless of a customer’s brand palette.
Component Swap
Component Swap
To keep components flexible but maintain library integrity, I introduced a "surface" class (modals, cards, sheets, etc.) with instance swap zones. Designers could inject custom content locally without detaching from the library. Dramatically reducing maintenance issues and increasing consistency.
To keep components flexible but maintain library integrity, I introduced a "surface" class (modals, cards, sheets, etc.) with instance swap zones. Designers could inject custom content locally without detaching from the library. Dramatically reducing maintenance issues and increasing consistency.
Component swap process
Figma variables based on our tokens
Future Improvements
Future Improvements
Expand education and onboarding efforts to close remaining knowledge gaps
Continue refining version control processes across design and engineering
Expand education and onboarding efforts to close remaining knowledge gaps
Continue refining version control processes across design and engineering
Role
Product designer
Visual designer
Writer
Timeframe
6 months
Team
Me - Product Designer
Paul H. - Director
Cliff M. - Manager
Alyssa V. - UX Writer
Michalis T - Frontend Lead
