Led the company’s only eCommerce site through a multi-brand redesign
Role
Lead UX/UI Designer
What I did
Led the redesign that unified every brand into one eCommerce site for web and mobile, and built the design system every team and agency builds on
Impact
Five brands on one design system
Adopted by internal teams and agencies
Adopted by internal teams and agencies
Summary
Scotts Miracle-Gro invited me to lead the redesign of its eCommerce: the company’s only site, watched by the whole business.
Its brands, like Scotts, Miracle-Gro, AeroGarden, Ortho and Tomcat, were spread across different URLs because the old site couldn’t hold them all.
I led the work to bring every brand into one site on web and mobile, and built the multi-brand design system that every team and agency builds on.
Its brands, like Scotts, Miracle-Gro, AeroGarden, Ortho and Tomcat, were spread across different URLs because the old site couldn’t hold them all.
I led the work to bring every brand into one site on web and mobile, and built the multi-brand design system that every team and agency builds on.
One site for every brand
Before redesigning, I ran a full assessment of the old site and brand URLs:
01
Experience: Navigation, information architecture, key journeys and pages on web and mobile.
02
Components: What to reuse, what to improve and what was missing.
03
Needs of each area: The content each area, like Marketing, planned to publish.
That assessment became the plan. I took the redesign end to end, from wireframes to handoff, with alignment sessions across areas and design reviews with leaders from across the company.
A design system that speaks every brand
Areas like Marketing had their own content demands, produced by external agencies. The system had to handle all of them and still let each brand look like itself.
01
Foundations and brand theming: Color, type and spacing defined once; each brand applies its own tokens, so a change ships to every brand at once.
02
Flexible components: From buttons to banners, product cards and tables, ready for content demands no one could predict.
03
Documentation and enablement: Guidelines, best practices and hands-on guidance for teams and agencies.
04
AeroGarden rebrand: I also contributed to the redesign and rebrand of AeroGarden, from visual direction and wordmark to its theme in the design system. It launched on the same components as every other brand.
One corporate home leading to every brand home. Only the brand layer, highlighted, changes.
One home template, themed for each brand. Every brand gets its own color in the system: Plant, Light, Water and Control.
Product cards on the Scotts theme: the same component every brand uses, with its own color on the sub-nav and footer.
Image + text module, one of the flexible components built to carry content from every area.
Stories carousel: editorial content from each area, presented in the same card system across brands.
The wordmark on its construction grid, sized to work in the brand sub-nav.
Visual direction for AeroGarden: lifestyle photography centered on growing and cooking at home.
The new brand on the home page, built with the same components as every other brand.
AeroGarden product page, with video in the main media slot to show the product in action.
The new ScottsMiracle-Gro home on desktop and mobile: one site, built to welcome every brand.
New features, designed once for every brand
The assessment didn’t only show what to fix. Talking to each area about what they needed to publish revealed content the old site had no way to support.
Instead of building one-off pages, I turned these needs into new features and components in the design system, so every brand could use them across the site.
Instead of building one-off pages, I turned these needs into new features and components in the design system, so every brand could use them across the site.
01
Weather-based cards: Weather drives almost every lawn and garden decision, but the site treated every visitor the same. I designed a row of cards that adapts to the local forecast, with themed visuals, timely advice and the right products for that day.
02
Article pages: Teams had expert advice to share, but no page built for long-form content. I designed an article template that mixes editorial content with product cards, so a lawn care guide can lead straight to the right product.
Weather-based cards: the local forecast decides the advice and products each customer sees.
Article page on mobile. Editorial content and products share the same components, so a lawn care guide can lead straight to the right product.
Behind the product
How I worked as the only designer
The challenge of being the only designer on a company-wide site
Every area of the company had a stake in this site, and I was the only designer on the team, working remotely from Brazil. Owning every design decision meant I couldn’t wait for answers. I shared a direction early, aligned with product and stakeholders before going deep into specs, and broke bigger work into phases in Jira, from quick wins to deeper improvements.
Keeping many areas on the same page
With so many teams involved, alignment was part of the design work. I ran sessions with each area and design reviews with leaders from across the business, turning different requests into one direction for the site.
Teaching agencies to build with the system
Agencies produced most of the content for areas like Marketing, so the system only worked if they could use it on their own. I wrote guidelines for every module, with content limits, image cropping rules and step-by-step instructions, and walked the agencies through them.
Banner guidelines for agencies: content limits, image cropping across breakpoints, and how to replace an image.
Image + text guidelines for agencies: content limits and how the image crops from desktop to mobile.
Card guidelines for agencies: content limits for each card type, and how images crop when a story becomes a featured card.
Takeaway
A design system for many brands is less about components and more about agreement: getting every area, agency and engineer to build from the same base, while each brand still feels like its own.
Thanks for getting this far.
