Rhizome Design System for the Scotts Miracle-Gro company

UX Design, Design System Creation & Governance

Project Takeaways

  • A multi-brand design system that delivers the promise of a single unified integrated platform, that will grow and evolve over time with our business and user needs.
  • A universal catalog of reusable components, documented for cross-functional collaboration.
  • Boilerplate requirements and UX criteria for new site launches.
  • Contribution and governance processes that anticipate scale and maturity, as we incremental building toward our north star.

Rhizome is a multi-brand scalable design system.

Rhizome is the design system for the Scotts Miracle-Gro brands on a unified and integrated platform. It is a universal catalog of reusable components, the organizational source of truth for design that will grow and evolve over time with our business and user needs.

Rhizome delivers on our enterprise platform promise and enables efficiency through continuity & reuse. It accelerates speed to market, while focusing on our north star strategic next steps, to build incrementally.

🌱 Rhizomes spread by growing horizontal underground stems. Unlike many plants, the growing point is not at the top but below ground. This means they can withstand wear & changes without damage to the growing point.

— from Botanicum by Katie Scott and Kathy Willis

Challenges

The Scotts Miracle-Gro company has a diverse range of products and customers. While many of Scotts' brands have had an eComm presence online for some time, behind the scenes there was tech debt and inefficiency. These challenges set the stage for our organizational digital transformation:

  • Multiple platforms, disparate systems of various quality and available features
  • Little reusability, making it difficult and costly to manage and maintain in designs and code
  • Inability to easily share innovation across brands/systems
  • Siloed system, duplicative problem solving “from scratch”
  • Little continuity for teams to build efficiently

Our Way Forward

Reuse translates to cost savings over time. Rhizome was created to enable design teams to work quickly and efficiently, reducing redundancy, creating consistency.

  • Create a reusable component catalog, scalable access the unified multi-brand platform, with documentation for use and contribution guidelines
  • Support strategy and experience innovation — minimize time spent recreating common products from scratch. Build efficiencies that give us the ability to focus our efforts and budget on custom experiences, key features, and functionality that support our business goals and user needs
  • Dual track approach — accelerate our ability to speed to market, while focusing on our north-star strategic next steps, to build incrementally
  • Document and share — eliminate the need to repeatedly communicate design decisions that are documented and implemented.
  • Implement contribution processes that anticipate scale and maturity, as we incremental building toward our north-star visions

Designing the Right Thing & Designing Things Right

Our UX team works across all of our brands to support, create, optimize, and rebuild our digital experiences across web and app platforms.
From concept to mock up to prototype to launch — our team ensures our work is grounded in becoming a digital partner for our consumers no matter where they are in their lawn care and gardening journey.

We’re focusing on not only removing friction from their shopping experience, but also supporting them when using our products or when planning future projects. This user-centered approach is how we hope our sites and apps can help create lifelong lawn and garden enthusiasts.

Our digital products allow our brands to exist and be a part of consumer lives when and where our physical products aren't. With our digital products, we can be a part of a consumer's journey much more frequently, helping them solve problems they face in their outdoor spaces all year long.

Methodology & Scale

The design system was created with inspiration from Brad Frost’s Atomic Design, building reusable patterns of component to create efficiency and continuity.

Rhizome is the platform system supporting all SMG brands so we architected a model for design that mirrors the brand theming environments in code. We create continuity from Design repository to spec delivery to documentation through naming conventions. Version control and themeing tools allow us to easily iterate templates and pages using our kit of parts with any brand theme applied.

We’re not designing pages, we’re designing systems of components.

— Stephen Hay

Theming Process at scale and at the component level.

Dual Track Approach to Implementation

We don't ever start from scratch. We leverage the tools of the platform to build our MVP for efficiency & agility, while planning for the future.

We build strategically, contributing incremental changes over time that benefit people and add value to the business.

With an MVP in place we build and design for the future. We identify contributions that support our vision and add value to our business, working iteratively to support business need.

Contribution Model

Beyond the design system operations & governance, we created a contribution model for the consideration of additions to the system and platform.

The intent is to provide a democratic transparent process for vetting and approving proposed design, functionality, integration, feature, enhancement, etc.

Proposed contributions are assessed to understand the type of change. Based on that we apply strategy to identify what problem we are solving, for who, and the value proposition.

🤝 Cross Discipline Collaboration

Collaboration is vital to the success of our collective goals. Rhizome documentation provides transparency to our various teams and partners and encourages adoption.

Socializing system documentation with designers, engineers, product & marketing teams, content authors, etc. guides best use practices and holistic problem solving.

My Role / Teamwork Makes the Dream Work

None of this work comes to life without teams of people working together. The opportunity to contribute to the design system creation has been a labor of love and a team building experience.

Our UX team was a willing bridge-builder in the design system creation process. We worked with different groups to identify the right things to build, and provided documentation for transparency for best use practices, and holistic problem solving.

The UX team continues to support cross-discipline and cross-functional team collaboration, it is vital to success and maintenance of this work. We contribute to governance processes that help maintain our system and support contribution for growth as needs and strategy evolve.

I was the UX Design Lead for the project, responsible for creating the design system architecture, designing components, naming convention taxonomies, managing designers and production, creating governance and contribution processes, training designers, socializing for colaboration and adoption.

We could not have been successful without the collaboration of these folks: Jess Bailey, Hailey Schraer, Ethan Beverly, Emily Reagh, Katie Riccardella, Corey Michalek, Patrick Locy, Javier Acuna, Veronica Jimenez, Chase Spencer, Joe Keyes.

Tools & Ecosystem

Sketch, Abstract, Zeplin, Zeroheight, Invision, Whimsical, Salesforce Storefront Reference Architecture