Universal Design System
As the organization continues to grow its portfolio, products become increasingly complex and difficult to manage. As more features and iterations are added, the overall experience of the products become fragmented and inconsistent. In return, each new version is increasingly time consuming and cost inefficient. A new design system is needed to prevent future frictions.
.png)
Problem
The business needs a new cost effective way to standardize the experience of all products to improve productivity, maintain consistency, while decreasing development time.
Identifying the needs
- A source of truth
Instead of a fragmented system where designers and engineers have to access multiple files to get the answer; all design elements and components will reside in the same place.
- Consistency
All product features utilizing the design system will be able to share the same consistent user experience from brand to brand
- Reusability
Having products that partially share the same highly reusable and modular user experience allows for a faster turnaround time on both design and engineers.
The Challenge
Creating a one brand design system can already be complex. To build one that can embody 4 brands and potentially more is increasingly so. Many things needed to be considered:
- What part of the product can and will share the same experience?
- How much flexibility does each component need to have?
- How do we maintain and manage such a design system?
The Approach
The hardest question to answer is how do we identify the components that we want to build first without overwhelming the design system? To do that, we had to take a holistic look at the existing portfolio.
- Identify shared experiences between products.
- Measure frequency of use, impact, and level of effort to determine its priority.
- Think and re-think about modularity.
The Audit
We browsed through each brand portfolio and dissected the products into bite sized components. With the plethora of atomic, molecular and organism level modules side by side, we were able to determine any commonalities.
After the audit, we had an extensive list of components that can be universalized and reused. However, given the limited bandwidth of both design and engineering teams, we understood that it would still be costly, time consuming, and impractical to design and develop every single component. We needed to reconsider and prioritize our findings.
Narrowing the Scope
It is always good practice to involve the engineering team as early as possible. Our case was not any different. We created a prioritization tool to share with the engineering team and held working sessions to narrow the scope. We used 3 metrics for this tool:
- Frequency of use
How often is the component used throughout every brand?
- Impact
How valuable is the component to the overall efficiency of both teams?
- Level of effort
How difficult is it to develop?
With this document, we were able to quickly prioritize the long list of components into 3 project phases. Components with high frequency of use, impact, and low level of effort will be prioritized first and completed in phase 1. Those with low frequency of use, impact, and high level of effort will be backlogged for re-evaluation. Everything that falls in-between the scale would be broken up into phase 2 and phase 3.
Think and Rethink Modularity
Design systems are more than just colors, typography, icons, and components. We also had to ensure that these components can be easily reused and flexible enough to allow for different use cases and variations across all brands. Few things we needed to consider:
- Complexity of a component
A component can house multiple sub-components within that can be utilized depending on the use case.
- Toggles
Building toggles for certain sub-components that allows them to be switched on or off.
- Conditional Logic
Define conditions where no two conflicting sub-components can be active simultaneously.
- Guidelines and documentations
Creating a semi-restrictive guideline and documentation to demonstrate use cases and ensure integrity.
Version 1.0
As we inched closer to the end of phase 1, we took a closer look at it from a birds eye view. With version 1.0, we will be able to power around 25% of all of our site experiences. We will continue to build on top of this foundation to further improve our efficiency across all the cross functional teams.
Version 1.0 is currently used in Brita, Objective wellness, Clorox DTC, and parts of Burt's Bees. The goal is to ultimately be able to extend its use across all of Clorox portfolio.
Future State
A design system is a project that is forever evolving and adapting to changes. As the company continues to shift all the other brands under the same tech stack, the design system will also scale accordingly. With more brands utilizing the same system, new documentation will also need to be considered to avoid confusion and unnecessary complexity.
