GOLD Design System is StockX first Design System.
This was one of my first projects I began working on, that was ongoing until I left. I learned how significant Design Systems are to a product team - to both designers and developers.
Designing for accessibility and inclusivity.
Timeline
May 2022 - June 2023
Team
Tools
I led the design and collaborated with the rest of the Product Design team and the developers across all experiences to implement it.
Figma
Lots of Google Meets
Storybook
When creating new components for the design system, I would start with an audit of any instances already in production. Then, after research for best practices and accessible design, I would redesign the component, implementing it in Figma with variants and auto-layout.
Quick Look at Audit
Example of audit of buttons on desktop web.
Component Documentation
Example of an overview of components. Each component is created with variants and auto-layout.
They are each documented with rules and descriptions, ux + functionality, specifications, and interactivity.
Example of component documentation and specifications shared with developers.
Example of Variants
Color Audit for Accessibility
Here’s an example of the Design System being implemented to refactor old designs in Sell Checkout.
Previous Designs
These are screenshots from the Sell Core Checkout flow on different platforms. The text is inaccessible, at under 12px for iOS, and is too light of a grey hue.
Updated to Design System
In this refactor, I focused on maintaining consistency across platforms and improving accessibility, while still keeping important information “above the fold.” I built out these new pages using the same components with different variants.