The Zoe Report Design System
Building the design system from the ground up.
When I started at BDG, I noticed there was no true documentation of the site designs. The final handoff files lacked any text or color styles, or components. And when designs shifted, there was no documentation of any changes. The designers and engineers were designing from scratch, recreating each page every time a new feature was designed.
The article page layouts are composed using an extensive card system with dynamic layouts and varying type sizes – 20 different card variants, articles, feature articles, card stories, each with 5 different font sizes, and up to 20 different color palette options.
Design Process
Building from the ground up, I was responsible for recreating each card to the pixel, and all the foundational elements – color, typography, and basic components. Then organizing all the components in an easily digestible manner.
Once there was a source of truth, I could finally see that there weren’t obvious systems connecting all the pieces together. I worked on removing unnecessary design and type variations, consolidating components, and bringing consistency across the entire site. Below, I was able to identify redundant type styles and consolidate.
I ran all the colors through a Contrast Checker to make sure all the color pairings met the accessibility guidelines. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. I found several of the colors did not meet the requirements, and made the necessary adjustments.
Outcome
The design system was super quick and easy to use – designers were no longer spending time and resources recreating pages. I was able use the design system to onboard new designers and product managers, helping navigate an extensive system. By being intentional about the choice of photography, not only is this a tool for designers and engineers, but also a visual brand guide.