BAckground

Saatva disrupted the mattress industry in 2010 by becoming the first company to exclusively sell a mattress online directly to consumers. It quickly became America’s best reviewed luxury mattress brand, recording revenues of $275M in 2018. As the number of products on the company’s roadmap grew, Saatva needed to redesign its core site experience. I joined the team in September 2018 as a UX designer ahead of major product initiatives and launches.

Problem

When I joined the team, desktop and mobile conversions rate were .72% and .33%, respectively. Over 90% of users were dropping off before reaching the shop page where product configuration occurred. The legacy experience needed to be updated to improve a number of KPIs including conversion rate, average time on page and drop-off rate. (See below for mobile funnel of legacy experience)

Main funnel User Flow

We started by redesigning the legacy user flow. Our goal was to reduce the amount of clicks it takes a user to get to checkout while also providing a more robust content experience overall. Some of the changes we made included:

1. We combined the mattress, comfort zone, and shop pages together and made this content more interactive.

2. We simplified the shop page and brought all mattress configuration options into a panel above the fold.

3. Based on interviews with previous customers, we decided to direct users to a bed style one click into the process: “Standard” or “Adjustable.” Our insights showed these were two fundamentally different customers. By doing this, we tailored the following content on the shop page to a specific customer and reduced the amount of clickable elements. (See below for user flow and mockups)

Prototype & User Testing

To test our hypothesis, we brought 11 people into the office for moderated user testing. We ensured all users were either in the market for a new mattress or had purchased one within the past 6 months. What we found was surprising. Almost all users were confused by the term bed styles. Most desktop users did not scroll and as a result missed key information needed to make a purchase decision. Some users were confused by the terms foundation, frames and bases. (See below for moderated user testing with Lookback.io and synthesis of results)

Design Iteration

After synthesizing our test results, we made the following changes:

1. As we knew scrolling was an issue for desktop users, we reduced the size of hero images on all pages and placed indicator arrows to promote information below the fold.

2. We decided to separate the mattress and comfort information from the shop page and move them back to a dedicated ‘Mattress page’ as the user’s first click into the journey. We added an interactive mattress diagram and comfort instructional videos to provide more content to the user earlier in their journey.

3. Since choosing a bed style was confusing to most users—and as we learned—a secondary decision in the purchasing process, we decided to eliminate the bed styles page altogether, and move the foundation choice to the shop page in a simplified tabbed format tucked into a drawer. (See below for updated design)

Additional Research & Analysis

Before launching the new experience we wanted to really understand our customer. We used Google Analytics to export a large data set for every key page in the legacy funnel. We focused on two important metrics—page value and page views—and the correlation between them. We analyzed each page by percentage rank and plotted them on the following matrix. We ensured the redesign would address our findings below.

Furthermore, we analyzed 1,500 chat transcripts to see common questions our customers had. We wanted to be proactive and correct these issues on site so we could reduce the total time our customer service reps spent addressing them. What we learned aligned with our user testing above. 21% of customers were confused by the terms foundations, frames and bases.

To address our customer’s questions, we designed a foundations and bases page that detailed each of our offerings. We even included an interactive component that allows users to input their height and see how tall their configuration would be in relation to their size.

New Main Funnel experience

After months of research, analysis, competitive audits, prototyping and user testing, we finally launched our new experience. (See below for legacy and new experience comparison)

Results

We accomplished our initial goal. The redesign widely outperformed the legacy site and we improved a number of KPIs.