Dress Code Design System
Team
Hannah Shwartcz | UI DesignerJustin Lowerly | Frontend ArchitectRole
Senior Product DesignerTimeline
8 MonthsOverview
I helped develope a unified design system to address inconsistencies across our digital products. This comprehensive solution enhances accessibility, streamlines development, and maintains brand integrity while delivering measurable business value through improved user experiences and accelerated time-to-market.
Impact
Highlights
Problem Statement
How might we streamline our existing components to make our designs more consistent and easier to iterate faster.
Strategic Approach
From concept to launch, our game plan
Audit Components
01
Take an inventory of all of our current components used across all touch points.
Consolidate & Analyze components
02
Review components for use, frequency and accessibility.
Organize in figma
03
Break up files by styles, components, icons, and more.
Documentation
04
Document best practices for each component, do's and don't. As well as measurements in dev mode with annotations for easy dev handoffs.
Present to gain adoption and alignment
05
Getting other teams aligned for the need of a design system is important but even more important is to use the new components
Audit Components
A deep dive into the existing components
Throughout our applications we found a lot of repeated components, Many with sublet changes.
60+
50+
30+
2000+
Documentation
Documenting the building blocks
Documentation ensures consistency and efficiency across products. Our comprehensive documentation guides designers and developers through component usage, specifications, and functionality—creating a shared language that streamlines collaboration and maintains design integrity throughout the product ecosystem.
Build out
Every great design system starts with a solid foundation
We started by setting up foundational elements, dividing our Figma file into Styles, Icons, and Components. This allowed us to use these as libraries for easy access and modifications. Additionally, separating the files helps maintain performance, as large files can slow down the design process.
Accessibility
Inclusive design for everyone
Accessibility is a top priority in our design system. After noticing inconsistencies with our primary buttons and brand colors between web and print applications, we standardized on black (#000000). This simple change not only created consistency across platforms but also significantly improved contrast ratios from 2.97:1 to 21:1, exceeding WCAG accessibility standards while solving our orange button's accessibility issues.
Design system alignment
Building Cross-Team Buy-In
Our team alignment strategy ensures successful design system adoption through quarterly cross-departmental reviews where stakeholders provide feedback to optimize the system for all applications. These sessions showcase new updates, provide documentation training, and demonstrate how the system delivers consistent experiences, accelerates development, reduces time-to-market, enhances customer satisfaction, and scales with organizational growth.
