Pampered Chef
Design System

Company: Pampered Chef
Date:
May 18’
Platforms: Desktop, Tablet, Mobile
Role: UX Lead
Business: Design Ops
Tech: Zeroheight, Sketch Libraries, Abstract: Design Version Control, Storybook

 

Challenge:
I wanted to eliminate redundant efforts across both UX and Engineering by implementing a system of rules, constraints, and principles. The company needed a design system to improve consistency in our product experiences and improve velocity through the development life cycle.

- Process -

 

To support the project, I incorporated design version control, which aligned patterns and eliminated inconsistency and confusion after hand-off to development. I also established a common design library, built upon the Atomic Design method, that is shared between UX and engineering team members. By putting these new practices to use, we have sped up the design process and started to eliminate redundant efforts across all departments.

We have also launched internal style guides that provide both a foundation of rules and resources for both engineering and design teams. This has been shared with other departments in the organization, to make sure we are developing and growing a conformable design language.

 
Sketch Design Library - A common design library that is shared and updated between core team members.

Sketch Design Library - A common design library that is shared and updated between core team members.

Digital Style Guide - The collective pieces of the design system are supported through a hosted third-party tool for ease of access and resource retrieval.

Digital Style Guide - The collective pieces of the design system are supported through a hosted third-party tool for ease of access and resource retrieval.

UI Components - I oversee the process for establishing new components and patterns through the common UI library.

UI Components - I oversee the process for establishing new components and patterns through the common UI library.

Colors - The color palette is designed and implemented with a theme method. The global color variables are determined by common roles and usage; it is not based uniquely on a color value (i.e. unique hex code). The same color value may be assigned tâ€Ĥ

Colors - The color palette is designed and implemented with a theme method. The global color variables are determined by common roles and usage; it is not based uniquely on a color value (i.e. unique hex code). The same color value may be assigned to multiple variables in a theme's palette when the values have distinctly different roles.

Design Tokens - I exported and synced our colors, and fonts into design tokens.

Design Tokens - I exported and synced our colors, and fonts into design tokens.

 

- Results -

Results were seen almost immediately. Risk of inconsistency was eliminated much earlier on the design process, there were fewer questions after hand-off from design and engineering and redundant efforts were eliminated by better visibility into pattern usage and development.

 
Previous
Previous

Site Redesign & Content Migration

Next
Next

USA - People Search