Beautyrest
Nav Redesign
Mobile-first navigation redesign
How might we give equal importance to shopping online and trying mattresses in person at a retail partner?
In fall 2023, new leadership challenged our DTC team with aligning our site navigation to new company initiatives of being an omni-channel focused, cross-branded experience. Our goal was to not only support on-site conversion, but to equally serve and give prominence to being a research destination for users intending to purchase a Beautyrest mattress through retail partners. In this new approach, our navigation would create equal importance to shopping online and trying a mattress in store.
The Solution
A co-branded, interactive navigation that surfaces the content a mattress shopper needs to discover what mattress is best for their sleep style and supports their chosen purchase method.
The Process
Timeline
Nov 2023–Jan 2024
Tools Used
Figma
FigJam
UserTesting.com
Role
Sole UX designer
Collaborators
Payton Dunaway (UX Research)
Heather Keighley (Site Ops)
Lisa Haroldson (SEO)
UX Design Sprint Workshop
To kick off our navigation refresh, I organized and moderated a one-day collaborative DTC team workshop of 14 people at HQ in Atlanta.
The goal of this workshop was to quickly drive innovative design solutions that met business goals by bringing together cross-functional stakeholders, each with unique perspectives. This workshop was organized into 3 time-based, interactive sessions via FigJam to accommodate for in person and remote workers:
Lighting Demos: Collecting inspiring experiences in the marketplace (competitor analysis)
Sketching Activity: Bringing navigation ideas to life (rapid individual ideation and group sharing)
Voting: Each member selected their top 3 favorite sketches or elements of sketches from the sketching activity
As we wrapped up the day, I organized these ideas into possible design solutions to be incorporated into our navigation designs that would be put into user testing, while our UX Researcher worked with the team about research questions and/or hypothesis we need validated from navigation usability testing.
Pain points of the current navigation
Within our current navigation, our team worked within the Shopify native experience, which ultimately was a challeng faced, as this didn’t support our needs or allow flexibility:
Within mobile as users tap into the “drawer” experience to see sub-categories, the functionality is not user friendly, nor is it intuitive. This is our largest pain point, as most of our audience shops on mobile.
Within both desktop and mobile, we don’t have the capability to allow for multiple messages at one time (100-night trial, Affirm, promos, etc.) This is a hinderance, as we know these messages help users convert; they ease their mind knowing that there are warranties and more available if the mattress doesn’t fit their sleep needs.
Within both desktop and mobile, the team was limited to 4 main navigation categories, not allowing us to build in additional educational categories that may help users better understand how to shop for mattresses.
How might we statements
With this new navigation project, our team was excited to move away from the Shopify native experience with custom code. With this, we found these key opportunities:
Build Confidence
How might we build shopper knowledge for the average user who comes to our site knowing that they’d like to purchase a mattress but aren’t sure where to start?
Create Opportunities
How might we create an immersive customer journey that embraces the roles of both online and in store while not deviated too much from a typical e-commerce experience?
Simplify
How might we support the common user who is interested in purchasing a mattress but feel they are too busy?
Usability Testing
Objective
Through UserTesting.com, my UX Researcher, Payton, and I tested 2 design approaches of the future-state navigation against one another to better understand which approach is more helpful to users in their mattress shopping journey and identify any areas of confusion.
Methodology
Unmoderative, qualitative feedback
Leveraging lo-fidelity Figma prototypes
8 respondents total
4 evaluating desktop, 4 mobile
Each respondent shown both designs
