Implementing a Design System
SUMMARY
From the moment I started at Persona I set out on a mission - to align the brand and digital platforms such that the customer experience was consistent. I created a design system that has improved design workflow, cut down on development time, and unified the brand.
ROLE
Product Design, Product Strategy, User Research, Interaction design, Visual design, Prototyping & testing, Cross-team collaboration, Stakeholder presentations
Background
Persona’s multiple digital and print platforms had all accumulated considerable design debt. Multiple designers contributed to different channels, including the website, email, paid social, organic social, packaging, and direct mail. Unfortunately, what remained was a disjointed brand with little direction on how to overcome these challenges. The user experience was fragmented and no matter how small it seemed, the disconnect accumulated in the subconscious of customers, harming the brand and degrading trust.
Usability testing backed this assumption and I discovered that people projected the quality of the interface of the website onto the brand and its products.
In addition, the design and development teams needed a way to replicate designs quickly and consistently.
PROBLEM STATEMENT
How might we create a unified language across design and development teams in a way that allows work to be duplicated at scale, creates visual consistency across products, channels, and departments, and increases consumer trust in the brand.
Think
RESEARCH
To better understand the current state of the existing design ecosystem, I ran an inventory of the site's CSS stylesheets.
There was a multitude of different colors, font sizes, spacing values, and CTAs across the site. Further research included conducting a UI inventory on typography styles, images, media, tables, buttons, forms, navigation, and components.
UI INVENTORY FINDINGS
Below are a set of images that details some of the inconsistencies found during the UI inventory.
INSIGHTS
The UI inventory audit, conversations with design and development teams, plus competitive analysis on user attitudes toward our experience versus our competitors yielded the following insights:
There is significant design debt as a result of turnover and different people developing the product across multiple platforms
Designers and developers need a way to share components, scale efforts, and improve product-development efficiencies
Users need to have trust in the brand prior to purchasing, a disjointed experience degrades trust
Designers and developers need a shared language to communicate and deliver products faster, and thus create better experiences for our customers
Make
With no previous design system in place, I focused first on the foundational elements, such as color palettes, fonts, grid, spacing, buttons, etc., and then moved on to more complex templates and pages.
DESIGN PRINCIPLES
I used these principles as the foundation for the Persona design system:
Customer-centric design: Our customers are at the heart of everything we do. We strive to make their everyday health goals easier to achieve, no matter who they are, where they are, or what platform they are using.
Accessibility: We design for everyone, regardless of ability. All components, colors, fonts, etc., must be WCAG 2.0 compliant.
Responsiveness: We optimize the user experience, regardless of device type. That means no matter what platform customers use, our site renders correctly.
Trustworthy: We constantly work to recharge our users’ trust batteries. We care about what they are putting in their bodies and as such we sweat the details. We’re genuine and transparent to show users that we’re always acting in their best interest.
BUY IN
In order to ensure the success of this project, it was important to get stakeholders on board before starting to build the design system. I presented the idea to the executive team and got engineering onboard from the start. This helped establish a shared goal and co-ownership between teams. Here's where "Unity", aka the Persona design system, stands today:
I went on to define the grid system on both desktop and mobile, and show examples of design elements in action.
The following is a list of the major components added to the design system.
-
Headings, subheadings, display text, captions, text containers, labels, quotations
-
CTA buttons, checkboxes, and radio buttons
-
Lists and tables
-
Navigation menus
-
Footers
-
Overlays
-
Forms, input fields, error states
-
Images, icons and illustrations
-
Discount bars and badges
-
Loaders and progress bars
Check
Implementing a design system is a lot of work and not without its challenges. Here's some of the issues I faced along the way.
Getting Executive Buy In: Persona was a rapidly growing startup and it was difficult to convince stakeholders of the ROI. I educated leaders on the time and money this would save in the long run. I also got one executive champion to advocate as well. The rest is history.
So. Much. Work.: Building a design system from scratch is a ton of work. If I had to do this again I would advocate for additional designers to help. I spent too many after hours working on it.
Ownership: I struggled to get development teams to share in the ownership of the design system. I hoped they would also feel comfortable going in and making suggestions / edits. The still prefer the design team own the system and to-date I have not convinced them to share the task.
KEY RESULTS
-
Faster workflow and less errors across the design team
-
A more consistent user experience across all platforms
-
Increased adoption across groups
-
Fewer deprecated or legacy components
-
A reduction in the count of specific CSS properties
WORK TO BE DONE
The design system is a living document. There is still work to be done, in particular with getting our development team to contribute code. The more they do so, the more they will trust the system.