Experience Design & Research · SC Johnson

Mrs. Meyer’s
Clean Day

A company that is known for its scents.

Mrs. Meyer’s spring hand soap campaign with botanical illustrations on a coral background

My Role

Creative Lead

Researcher

UX Design

The Task

User Research

Experience Design

Commerce Launch

Brand

Mrs. Meyer’s Clean Day

SC Johnson

Recognition

W3 · 2020 Honoree

Webby · 2021 Honoree

01The Ask

Rooted in good. There is a scent for everyone. I mean… for you.

The original website was outdated and did not live up to the standard that Mrs. Meyer’s Clean Day had maintained for decades. We were asked to reimagine the commerce experience to better cater to their customers’ unique needs.

Mrs. Meyer’s redesigned commerce experience across desktop and mobile screens

02Research

Understand your users

Mrs. Meyer’s research slide: Objectives — Sample slide: Objectives

Mrs. Meyer’s research slide: Guiding principles — Sample slide: Guiding principles

Mrs. Meyer’s research slide: Understand your users — Sample slide: Understand your users

Mrs. Meyer’s research slide: User behavior analysis — Sample slide: User behavior analysis

Mrs. Meyer’s research slide: Primary personas — Sample slide: Primary personas

Mrs. Meyer’s research slide: Secondary persona — Sample slide: Secondary persona

Mrs. Meyer’s research slide: Primary persona description — Sample slide: Primary persona description

Mrs. Meyer’s research slide: Customer lifetime journey — Sample slide: Customer lifetime journey

03Navigation

Persona-based navigation design

The unconventional navigation design is inspired by the unique shopping patterns of the target audience, offering three distinct ways to explore the site.

Shop by Product

Explore the site’s offerings by product.

Shop by Scent

Discover products through their scents.

Content Discovery

The hamburger navigation serves customers who are primarily interested in content exploration.

Animated Mrs. Meyer’s navigation showing Shop by Product, Shop by Scent, and the content menu

Micro-animations and illustrations create a more intuitive navigational experience.

04Bundle Builder

Build your own bundle

How can we simplify the complex flow of building a bundle for customers who shop online?

Our approach is to mimic the in-store shopping experience: building a bundle is as simple as adding your favorite items to a basket.

Animated bundle builder demonstrating product tiles, quantity controls, and basket slots

Designed for mobile, easy across viewports

A contemporary tile layout makes choosing products easy for mobile users.
“+” and “−” buttons let users easily modify product quantities.
Empty basket slots indicate how many more products the user can add.

05 · Recognition

2020 Honoree

Webby

2021 Honoree