Pure’s Design System
Evolving Pure’s design system to accommodate a fast-growing team.
Summary
In 2020 I led the UX for a global rebrand at Pure Storage. This rebrand encompassed everything from the layout grid to the interaction design.
I led the design-to-dev handoff process and established an atomic-level Design System, and the rebuild of a completely new set of AEM Components.
Objective
Pure’s brand needed an upgrade.
The creative was often recycled and the brand felt restricting; Pure’s primary orange color and icon was well-known within the industry but beyond that the brand was pretty restrictive.
This rebrand initiative was led by our VP of Brand, Sun Lee.
Sun thinks big and initially wanted to change the company name, the logo, the stock ticker etc.
Due to a number of things (e.g. COVID), we settled on a more modest version of a rebrand, focused on design/fonts/components.
Foundation
Colors & Fonts
The design team worked with some outside agencies to help settle on a color palette. We also moved from Proxima Nova and opted to stay within what was available with Google Fonts for a number of reasons.
We ended up with Inter and Space Mono.
Grid
Through years of exponential growth we’d accumulated a lot of technical debt which was slowing us down.
I advocated for a 12-column grid implementation with the dev team and was able to get this prioritized; I considered it foundational to all the other parts of the system we were building.
We created global shared styles in Figma so that all our designers could work on the same grid to ensure consistency.
Design
Components
We spent a lot of time with messaging, deciding how to best present content from a system-level that aligned to our brand principles and supported our content and narratives.
Initially we started with some atomic elements but then quickly jumped in to some of our most-used primary components; we wanted to establish design patterns at this level and base other components off of this.
We scaled up and down from a Micro, atomic level to a Macro, template/system level.
Templates
As we progressed, design patterns began to emerge and we began to construct Page Templates, ensuring they worked together as a group of components visually and technically, as well as ensuring that they worked as a storytelling mechanism.
Designing a system requires many considerations that Dev, Brand & Design, UX, SEO, Publishing, Content and Stakeholder teams all want to prioritize.
To meet our deadlines we opted to only loosely organize the system on the first pass.
Design documented each component for handoff to Dev, but formalizing documentation was deferred until post-launch and the system was more stable and established.
Organization
The work was not over once the site launched and the dust settled. We broke down our back log into 3 separate buckets:
- Documentation/Organization
We needed to document these freshly-built components in the system and organize the files into a coherent structure. - Consolidation
Many components ended up solving the same problem, or the mobile view on two different components ended up being very similar.
In these cases we merged the components into different variants or aligned different mobile views to simplify the experience. - Iteration
We had a decent amount of design debt due to reducing scope to meet our deadline. Additionally, once stakeholders got their hands on the system they wanted improvements & additional features.
The system is broken down into Assets, Visual Attributes, Components and Layouts. Each Components’ Figma file contains the following:
1. Title Page — Consists of the thumbnail, readme and change log.
2. Components Page — The components to be published to the shared library.
3. Documentation Page — This is primarily documentation for the Dev team and a list of the different variants to be referenced by the Design team.
Colors, Grid, Typography are all turned on by default at the team level for each project.
Figma
I generally try to be tool-agnostic and use the best tool for the job; I won’t hesitate to consider new software tooling if something better comes along.
Recently, Figma has turned me into a loyal fan. It’s fantastic and this project was made 10x easier with Figma than without.
Shared Libraries, Auto-Layout, etc. have changed so much about how design and dev stay in sync, it’s definitely a game-changer.
The Future
A design system needs to be treated like a product, without constant improvement and iteration it quickly shows signs of neglect.
There’s a backlog a mile long for feature requests, but thus far it’s been a very successful launch.
Originally published at https://jareds.myportfolio.com.
