Step 1: File Structure

‍

To map the design system file structure for Newell Brands, it's important to consider the diverse portfolio and the scope of digital technology workstreams we manage. Newell Brands encompasses over 50 brands, with 30 offering site experiences, and out of those, 10 provide a direct-to-consumer (DTC) experience. Our digital technology team is responsible for three primary workstreams:

‍

1. ELF Program

2. SFRA (Global, white label), North Star Program

3. AB Testing (CRO)

4. Other Brands (limited support, such as third-party merchants like Amazon)

‍

While our primary focus is on five DTC brands, understanding the entire portfolio is vital for effectively implementing global enhancements. The three most profitable and flagship DTC brands are Marmot, Yankee Candle, and Graco Baby.

File Structure Map

‍

Our business strategy prioritizes our three most profitable and flagship DTC brands: Marmot, Yankee Candle, and Graco Baby. We are focusing on four key projects: SFRA, ELF, AB Testing, and MarTech. To effectively manage these priorities, I have mapped out two versions—one that prioritizes multi-brands and another that prioritizes key projects.At a high level, I have developed a white-label, global framework that includes primitive and semantic styles within separate files, along with assets and components. Separating primitive files from semantic styles provides extra flexibility for future needs. This dual approach ensures that while each brand maintains its unique identity and specific requirements, we can also implement consistent, global enhancements seamlessly across our portfolio.By maintaining this balance, we ensure that our design and development processes remain efficient and adaptable, supporting both individual brand differentiation and cohesive, overarching improvements.

Step 2: Color Palette

‍

Next, our design system already has built color variables based on the color palettes for Marmot, Yankee Candle, and Graco Baby. This color palette will be housed in a brand file alongside other semantic variables.

Step 3: Color Variables & Name Convention

‍

Our UX team has already started working on the primitives for Newell (white label), Graco, Marmot, and Yankee Candle. Additionally, we have systems in place for other variables such as radius, spacing, images, and breakpoints. At this stage, naming conventions are crucial.We have explored various approaches for using primitives and tokens. At the primitives level, we utilize values, primitives, and tokens. However, we still need a grace period to finalize and settle on the new naming conventions for tokens. This period will ensure consistency and clarity as we refine our design system.

Synchronizing color variables with design tokens

‍

After creating primitives for color, it’s now time to create tokens. Based on the primitives collection (styles), We have created a collection of semantic variables as tokens to complete the color variables.

Step 4: Typography Styles

‍

We have already defined the typography styles. Please see the details below:

Step 5: Number Variables & Grids

‍

We followed best practices for spacing and layout to organize our existing number variables into this new system. Here are a few examples:

Step 6: Icon Library

‍

Our existing icons are well-positioned. At this stage, all we need to do is add them to the new system.

Step 7: Building Components Using Variants & Properties

‍

We built out components using atomic components, nested instances, and private components. Using the atomic components as building blocks to build the molecule components for more advanced components such as buttons, radio buttons, and checkboxes.  The other technique we also used is the Boolean property to hide and show different states of each state.

Variable Color Modes

‍

We have set up variable color modes to support multiple themes and brands within a single file, allowing us to toggle between them seamlessly. This approach enables us to transform our designs swiftly without changing styles, significantly accelerating the design process.

Building Local Organisms with Global Atoms

‍

Use global atomic components in our design system to create larger molecule and organism components. By integrating local organisms, we ensure the team library remains truly global. These local organisms are easily accessible and editable, promoting consistency and efficiency in our design process.

Step 8: Building Templates Using Components

‍

In addition to building components, I can create templates for multiple brands. By using these components, I can style them to match each brand's theme and customize the components accordingly. This approach allows for consistency across brands while accommodating unique brand-specific needs.

Step 9: Building Pages

‍

Using the built templates, I created the product listing page for the Yankee Candle brand. This includes elements such as navigation, filters, and the footer. I used the white label of the PLP (Product Listing Page) from the ELF project and themed it to fit the Yankee Candle brand.

Step 10: Documentation

‍

We need to ensure everything is correctly documented in three areas: foundation, components, and design works. In the foundation, we've used a naming convention in the file/page organization with detailed notes. For the components, our team has annotated the details of each component, which can be found in more detail in dev mode. It is essential to continuously update this documentation while communicating with developers to understand how they prefer to receive information and gather the necessary details accordingly.

Next Step: Design System Governance Process

‍

One of the main issues we faced in the first version of our design system was the lack of a governance process. Often, we didn't correctly track where we left off, especially since we didn't have a dedicated team for the design system. Therefore, it is crucial to build a strong governance process from the beginning. Below is a chart I referred to from Brad Frost's article, illustrating how he used Yaili's general structure to refine his client's work. Here are some steps our team should consider:

‍

1. Involving the Product Team: Engage the product team to use the design system to help design and build new work. Ideally, the team should come to the library, find the component they need, and see that it fulfills all their requirements. This approach is especially beneficial for addressing additional requests while implementing the design in the sprint.

2. Handling Missing or Inadequate Components: Determine what happens when the design system's components don't exist or don't fulfill requirements.

3. Evaluating New Work: Assess if the new work is a one-off (snowflake) or part of the design system.

4. Prototyping Initial Concepts: Create prototypes for the initial concept.

5. Reviewing Initial Concepts: Conduct reviews of the initial concept.

6. Design/Dev Testing: Implement a formal design system design and development testing process.

7. Final Review: Conduct a final review with the product team.

8. Documentation and Staging: Document and stage the new design for release.

9. Releasing the Design System: Release the new design system.

10. Product Team Adaptation and QA: Ensure the product team adapts to the new system and performs QA processes.

11. Adapting and Evolving: Continuously adapt and evolve the design system.