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.

Mobile app screens showing a furniture store's website menu, mattress selection, support options, and promotional content, all with minimalistic design and black-and-white text.

The Process

A flowchart showing a collaborative process with research, SEO, and site operations teams for UX design and testing, including workshops, competitor analysis, wireframes, prototypes, user testing rounds, and final design handoff.

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:

  1. Lighting Demos: Collecting inspiring experiences in the marketplace (competitor analysis)

  2. Sketching Activity: Bringing navigation ideas to life (rapid individual ideation and group sharing)

  3. 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.

A digital project board with multiple columns, including a welcome page, warm-up activities, consumer insight presentations, and next steps, used for a design sprint workshop.

Pain points of the current navigation

Display of a mobile and tablet website for a mattress store, showing mattress categories and collections including Black, PressureSmart, Harmony, and Select collections, with a bed image and a woman and child lying on the bed.
Screenshots of the Beautryest online mattress store showing menu for mattress types and pillows, and a promotional image of an older man relaxing with a pillow on a bed.

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:

  1. 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.

  2. 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.

  3. 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

Icon of a light bulb above an open book, representing ideas or learning.

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?

Icon of a smartphone with a storefront awning, representing mobile or online shopping.

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?

Line drawing of a sponge with a textured surface and layered base.

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

Screenshot of a video or app featuring furniture options, showing two beds named Harmony and Black from Beatyrest, with prices and descriptions, alongside a feedback or review section.

Final Designs

A green and black McLaren 600LT sports car parked inside a large industrial warehouse with sunlight streaming in.

McLaren Automotive

A birthday invitation featuring a photo of a smiling black and tan dog, surrounded by purple confetti pattern on a pink and purple background. The invitation includes event details and a playful dog-themed message.

Passion Pit