method unified store

streamlining the shopping experience + optimizing for scalability

Mobile devicde view of method navigation
Project Details
Role
UI/UX Designer
Tools
Figma
Duration
December 2021—February 2022
Team
Tammy Tran, Director of DTC
Amy Thompson, Digital Strategist & DTC Manager
Erica Reyes, Digital Design Manager
Jen Bhalla, Brand Voice Director
David Fullarton, Writer
Arctic Leaf, Engineering Team
Overview
What is mehod?
method is a CPG brand traditionally sold in big box retailers that expanded into dtc (direct-to-consumer) within the last three years. Building and designing an e-commerce platform, I was responsible for making sure customers could navigate and purchase products on our site easily.
As a digital designer, I led the design of the combined site navigation. Over the course of 3 months I worked alongside a product owner, engineers, writers, a UX designer, and my manager.
Why a redesign?
The main reasons for a redesign were that the fragmented stores were not optimized for cross-selling between brands - method body, method men, and eventually method. Despite frequent page visits and page jumps between brands from customers, users were not purchasing between all three brands and instead only purchasing from one store front.
Below is an overview of the old tabbed experience.
Desktop view of method men, method body, and method tabbed navigation
Goals
Our goal was to enable an easier shopping experience while identifying pain points for users and to create discoverability with our different household brands, ultimately bringing customers into entire method portfolio of products once other categories were brought over from the legacy methodhome.com website (dish, laundry, household, and refills).
By improving the shopping experience, making it easier for customers to connect with each brand, and updating the look and feel, we will have enhanced the customer's shopping experience online leading to increased conversion and checkout rates.
Research
I conducted a competitive audit to familiarize myself with different e-commerce shopping experiences; especially with sites that housed multiple brands under one website. We identified multiple ways which other direct-to-consumer competitors provide a better user experience than method:
1. Category structuring when it comes to products
2. Cross-selling between brands on PDPs
3. Clear navigation experience that showcases multiple brands in an easy to find, discoverable way
Hotjar heat map of previous method tabbed navigation experience
With input from internal stakeholders, I explored several different flow scenarios on how the user would navigate and shop throughout the site. I came up with three different navigation structures and broke down how each category could potentially be listed.
I explored options where the navigation structure could go three levels deep but eventually we came to a decision that going two levels deep would suffice due to how some product categories only house 1-3 products. Filtering on secondary PLPs (shop all personal care, for example) would aid the user in drilling down to the product they were searching for.
User map of potential method navigation experience
Solution 1: navigation structure goes three levels deep to PLPs with no filtering.
User map of potential method navigation experience
Solution 2: navigation structure goes two levels deep for certain categories with filtering, while others go three levels deep with no filtering applied.
User map of potential method navigation experience
Solution 3, final solution: navigation structure goes two levels deep for all category PLPs with filtering.
Combining method men products under the new personal care category proved to be a subject of discussion over many meetings with internal stakeholders and business leaders. Since method body only offers body wash, deodorant and lotion while method men only offers body wash, deodorant, face care, and grooming we decided that all men's products would be housed under men's grooming.
Our reasoning was that if the nav were to broken down into separate hair and face categories, users would abandon the personal care category upon finding that there are no method body products in face and hair.
Results
Increase in user engagement
- average site session length went from 2 mins to about 4-5 mins
- bounce rate dropped from 67% to 27%
- pages per session went from 2 to 3.8 pages
Increase in checkout conversion
- more cross-selling opportunities/product discovery in unified store
- average order value went from $15 to $33
Desktop view of new navigation experience with perosnal care drop down