Scotts Miracle-Gro Design System

Role: Lead UX Designer, Librarian
Tools Used: Figma, Sketch, Abstract

Overview

After successfully establishing our first design system and migrating our core sites to the Salesforce CC platform, the opportunity to migrate and optimize our design system from Sketch to Figma became a priority.

Additionally, Scotts conveniently planned to utilize Salesforce’s Page Designer, a B2C Commerce feature that supports standard development processes and tools for creating reusable page types and component types. As components were rebuilt in Figma, they were also being rebuilt in Page Designer, ensuring that Figma designs were the one source of truth.

Rhizome Design System V1 (Sketch and Abstract)

Established in early 2022, Scott’s first design system provided simplicity of implementation while attempting to simultaneously migrate 12 unique websites (7 brands) to a new platform. Post-migration, however, several key points of friction continuously slowed design production and ultimately development:

  1. Abstract to Sketch complexity and efficiency

  2. Sketch/Development naming convention misalignment

  3. Lack of automation

  4. Agency partners inaccessibility

Rhizome V1’s structure created unnecessary layers of complexity which often slowed efficiency.

Goals

While leading this project, it was my goal to improve:

  1. Consistency:

    • Eliminating redundancies or misalignment from design to production creates component consistency

  2. Efficiency:

    • Condensing from two tools (Sketch and Abstract) to one (Figma) significantly improves design speed and overall production

    • By streamlining design/development processes and providing additional design documentation, our design system can help ensure development efficiencies

  3. Collaboration:

    • Cross-functional collaboration between designers, developers, and other stakeholders results in a unified understanding of design principles

    • Changes and updates to designs can be implemented more efficiently across various teams and projects

Rhizome Design System V2 (Figma) - Team, Project, and File Structure

Teams

It was crucial to thoughtfully plan and setup our Figma team structure and organization because this arrangement directly influences the access and permissions users have to files within the team. Each team has the flexibility to manage its unique projects, documents, and shared libraries. Mobile app projects were separated from web projects because they do not share the same design system or development teams.

Projects

Through experimentation, we discovered that organizing projects with core designs works best when categorized by platforms. This approach simplifies collaboration, facilitates easy navigation, and speeds up task completion for everyone involved. Additionally, research and archive projects ensured that there is a space for any related file.

It is important to note that the long term goal is to migrate all Scotts Miracle-Gro brands to SFCC. Currently, there are sites that remain on Shopify. Once those sites eventually migrate as well, future iterations of this space may take place.

Files

Each file currently corresponds to each brand/website that lives under the Rhizome Design System umbrella. Initially, it was ideated that each project would represent each website, creating a space for files to be more granular. Working with each brand as a file proved to simply better align with the way we work and the resources we have. All granular, site-specific designs or relevant documentation lives within each file as a page.

Design System Elements and Components

It was determined that utilizing pages to categorize different elements and components within our updated design system made the most sense. Previously, each component type was separated into separate files which ultimately meant separate libraries for each component type. Given our limited resources, managing many libraries within many files added unnecessary complexity which led to the decision to condense all previous libraries into a single library where all parts and pieces could be found.

Summary

Leading this project has helped me better understand design systems and their importance to the overall success of a brand/product. Without proper organization, processes are difficult to maintain and even establish. As our design system continues to expand and evolve, change and evolution is guaranteed. Design systems are always growing and always changing as new features, teams, or processes are created and established. Thank you to the team around me that trusted me to re-establish Rhizome Design System.