Throughout my tenure at The Zebra, I've had the opportunity and privilege of creating a design system from scratch. In 2018, The Zebra underwent a rebrand, which became the perfect opportunity to invest time in developing such a critical piece of the design and development process.
Client:
The Zebra
My Role:
Lead designer and Design Director
⌛️ Let’s start with a timeline
2018 —-> The Zebra goes through a rebrand, creating the perfect opportunity to define the brand and ensure we’re following accessibility standards
2019 —-> The mobile a desktop web apps go through a complete re-design, allowing us to start implementing the new patterns. A challenge that developed during this time was balancing legacy components and styles vs. new ones.
2020 —-> We start spearheading an initiative to align our apps and code bases to simplify the way we build the product and create efficiencies
2021 —-> I built a business case to transfer the team to Figma and hired The Zebra’s first design system product designer to help us with the transition and own the design system as a unique product. We successfully created a team with 1 designer and 2 engineers.
2022 —-> We continue making strides at implementing the design system and creating universal documentation utilizing zeroheight
2023 —-> To be continued…
Creating a business case to invest in a design system
Over the years I’ve had multiple roles when it came to advocating for a design system. As a Senior product designer, I started creating our first libraries and split the work of updating older components with another designer on the team. As a design manager, I continued the efforts by teaching other designers in our growing team how to create components and started developing a process for creating new assets. Finally, as a director, I created a business case and presented it to the Zebra’s leadership team to create a design systems team, we hired a Senior product designer and two front-end engineers. This team was 100% dedicated to building accessible components and creating an easy-to-follow process for the design and engineering team.
As part of championing the design system for the company, I transitioned the team from Sketch to Figma and created a plan to successfully make this happen without disturbing any work.
Expected business impact of the Design System
Team efficiency
Measure how long it takes design and engineering teams to build a new product/feature using the organization’s design system
Speed to market
Measure how long it takes teams to build and test prototypes
Quality of work
Reduce visual and behavioral bugs found on our site
Bugs from existing components will be fixed quicker based on a dedicated process created for it
Brand consistency
Measure consistency across the Zebra’s ecosystem that involves development
Accessibility
Avoid possible financial penalties. Many federal and state laws require web content to be accessible to people with disabilities. It’s also the right thing to do!
Legacy product vs. new components, an ongoing challenge…
The Zebra product was not new and as a scrappy strat-up we took short cuts many times, or let’s be even more real, most of the time. This meant that we’ve had multiple libraries created over the years, and continuously created the same components over and over again. On the design and engineering side we worked on auditing and consolidating all existing assets to have a clear view of what exists vs. what needs to be created vs. what needs to be updated.Through utilizing audits done by the design and engineering teams, we were able to get a clear picture of what existed and what we still needed to build. Alongside the audits we also created a design systems roadmap to create visibility company wide.
