Project Overview

As the Design System Manager for the next iteration of Zebra Technologies' design system, I oversaw all aspects of its development. This involved leading a cross-functional team of designers and developers, guiding the creation process for a comprehensive library of components, and ensuring alignment with business objectives.

The Challenge

The first version was initially developed in Sketch, which was sufficient at the time. However, the advanced creation and collaboration tools in Figma prompted our team to migrate. This transition presented a valuable opportunity to review existing components and assess their effectiveness in meeting the needs of our end-users. Upon closer inspection of the previous version, it became clear that a comprehensive, redesigned system of components and tools was necessary to address evolving requirements.

My Approach

I initiated a comprehensive overhaul of the design library, beginning with a foundational update to align with new brand guidelines. By integrating a refined color palette and introducing a system of design tokens, we were able to not only unify visual identity but also significantly accelerate the implementation process for the development teams.

Building The Library

I adopted IBM Plex Sans as the primary typeface. This strategic choice was made for its extensive language support and its ability to distinguish our applications from competitors who often rely on the ubiquitous Roboto typeface from Material Design, thus strengthening the unique brand presence of Zebra Technologies.

PLEX SANS
PLEX SANS
PLEX SANS

New Icons

The redesign of the design system provided a key opportunity to create a more cohesive visual language by overhauling the icon library. The previous collection was an inconsistent mix of 2D and 3D styles from various sources, lacking a unified identity.

To address this, I established a new design framework using a 32x32 grid and a consistent 2D frontal approach. This systematic approach was essential for creating a unified family of icons. It helped distill each icon to its clearest form, ensuring high visual impact and readability at all sizes.

Components

Recognizing the diverse needs of our products, I focused on building a flexible and scalable component system. This involved creating numerous variants for complex elements like buttons, text fields and tables to cover a wide range of use cases. The development of many of these complex components required building smaller, fundamental blocks from the ground up, ensuring every element was purpose-built and cohesive.

Accesibility

The user interface was designed with accessibility and clarity in mind. I increased the contrast ratios of all UI colors and key components beyond standard requirements. This makes content more readable and visually striking, which is critical for frontline workers who might be checking information in high-glare or low-light situations.

To further support diverse work environments and user preferences, the new design system also includes a dark mode.

Impact

The new design system significantly reduced development time for new applications. This modern look, with its distinct color palette and typography, not only sets Zebra apart from competitors but also addresses a critical need for a refreshed brand presence. The design system continues to evolve, ensuring the brand remains current and cohesive.