Product Design · Internship · e-Commerce · 2023
Improving eCommerce experiences and customer conversion by prompting shopping of adjacent product categories.
Defining the Problem Space
Category Navigation
What is it?
Category Navigation allows users to move between related furniture classes within a category while browsing.
For example, moving from “sofas” to “chairs” to “sectionals” all within the parent category “Living room furniture”.
Why does it matter?
Simultaneously shopping multiple furniture classes within one category, i.e. "cross-shopping" increases conversion.
Category navigation facilitates cross-shopping but isn't present on the mobile web experience.
How does it impact business?
Multi-class browse sessions show 2x the conversion rate of single-class, accounting for 22% of Desktop sessions but only 15% of Mobile Web.
Increasing the percentage of multi-class Mobile Web Sessions to match desktop has the potential to generate $2.5 million in GRS.
The Solution
Image Based Navigation Carousel
"Related Categories" navigation feature is located below breadcrumbs to associate it with other nav elements.
3.5 card carousel is consistent with pattterns seen in competitive audit. Serves to optimize options presented while limiting visual clutter.
Stacked image (background circle with class image overlay) and title on each card improve visual search.
The background circle and image overlay create visual consistency across varied class images.
Current class is dropped from the carousel to reduce redundancy and prevent user error.
Gathering Context
The Starting Point
Desktop VS Mobile Experiences
Desktop Category Navigation: Single Step Process
Moving between furniture classes requires a single user action.
The navigation feature that allows travel between classes is clearly presented on the page.
Mobile Web Category Navigation : Multipath, Multistep Process
Multiple interactions along indirect pathways are required in order to change classes.
Features indicating the necessary actions to change classes are not clearly presented on the page.
Understanding Best Practice
Competitive Analysis
11 e-Commerce Platforms Audited
100%
Of competitors audited had mobile category navigation,
9
Competitors used carousel based category navigation.
8/9
Carousels features product imagery or illustrations.
Early Design Iteration
Painting in Broad Strokes
Sorting Out The Spacing
I explored a number of patterns with the knowledge that carousels were a user friendly and recognizable way to implement category navigation on screen.
A central focus was to minimize distractions from browsing, while clearly presenting the option to shift course.
Optimizing for Images
In-house research and my competitive analysis both showed that imagery was critical for customers while shopping. Reflecting these findings I focused on the use of existing product imagery in the carousel.
Considering Page Intent
Cross functional partners from the data analysis team emphasized the importance of product grid visibility, and keeping images above the fold.
Led to exploration of compact linked "action card" design.
Due to the amount of mid-fidelity exploration , I created my own component library to expedite iteration. This allowed me to increase the range of my exploration and make the most of my time in the early design phase.
Aiming the Right Direction
User Testing Prep
Prototypes
I created 3 prototypes following the initial research and design iteration I conducted.
Key Research Quesations
Engineering team signed off on design feasibility and I proceeded to deploy two A/B tests with 6 users each on usertesting.com
Key questions were
Is the carousel or linked action sheet pattern more effective at presenting the opportunity to switch categories?
Is positioning a navigation element at the top of the page or below the current class title more intuitive?
Which card format is most effective at leveraging visual assets in the category navigation process?
Finding Where Value Lies
User Testing Insights
Findings: Test 1
Top of Page Carousel VS Linked Action Sheet
VS
Users favored the carousel over the action sheet
100% of users selected the carousel over the action sheet as a better experience.
Discoverability lead to high engagement
The action sheet suffered as category navigation was one level down from the browsing surface.
Swiping interaction and images simplified navigation
Users felt the visually searchable carousel and swipe interactions lead to an efficient navigation expereince.
Findings: Test 2
Top of Page Circular Image Carousel vs Mid Page Horizontal Card Carousel
VS
Top of page position clarified function
Positioning the carousel top of the page with other nav communicated it's purpose clearly.
More visually represented classes added value
One user noted the utility of having more classes exposed at once in the circular image carousel.
Category nav is used as a means to narrow search
Subjects used the carousel to narrow search before filtering, and weren't surprised by page redirect.
Insights Applied
Evidence Based Final Design
Based on the findings from my user tests the data indicated I should iterate on the circular image based carousel placed at the top of the page, I refined details and presented at final rounds of crit.
With the results of my test and prototype demos I was able to win buy in from cross disciplinary partners previously opposed to the use of a carousel design.
Crossing t's and dotting I's
The Handoff
Important lessons from my time at Wayfair
Key Takeaways
Work is just work, unless it's socialized.
Just because work is done doesn't mean that it will earn buy-in from other team members. Keeping partners in the loop on your work, where it's going, and how it fits in the bigger picture is a good way to maximize impact
Be Transparent. Have conversations in the public square.
Being open with the how and where you have conversations increases the visibility of your work and can often expose you to helpful perspectives from others within your organization.
Work to understand the why.
It's invaluable to understand how your project fits into the organizations goals and what it's intended impacts are from the start. Find and connect with SMEs early and dig for existing research.
Iterate quickly and with intention.
Iteration is important in any design process, It's also important to ensure that it has an objective. No wheel spinning for the sake of it. Feedback is critical in making iterative exploration productive.
