Tuft & Needle / 2019

A new direct-to-consumer priority for Serta

A man and woman drinking wine on an iComfort mattress in a bedroom

Traditional retail sales tactics were causing lackluster results in a competitive, modern ecommerce space.


A wholly revamped ecommerce experience increased conversions by 116% and ecommerce revenue by 48% year-over-year while aligning the site with UX best practices.

My Role

Strategy, Leadership, Creative Direction, UX Direction, Mentorship, Project Management

Tuft & Needle merged with Serta Simmons Bedding in 2018. One of the critical objectives post-merger was relaunching a custom e-commerce site for Serta to increase conversions and allow for future direct-to-consumer growth. The team was given four months to completely overhaul the Serta.com experience.

Old homepage
The old serta.com homepage
The old homepage. Inconsistent styles and multiple, competing calls-to-action created a confusing, chaotic user experience.
New homepage
The new serta.com homepage after the redesign
The new homepage. We wanted to simplify the homepage experience and focus on a clear, benefits-based information hierarchy.

Choosing a team with complementary strengths

Given the workload and the pace, I chose two designers for the project who would compliment each other’s skillsets. While both had great UX and visual design skills, each had his/her strengths. The timeline dictated that the work needed to be divided, but I established a process of pair-designing whenever possible and several weekly team check-ins to ensure seamless output. The pair functioned exceptionally well together, supporting and gut-checking each other when needed.

The other team challenge was working with the Serta brand team. Steeped in the old traditions of mattress retailers, they considered their primary customers to be their retailers, not the customers using their products. This lead to several fundamental disagreements with the UX of the site that the team navigated with patience and empathy. Trying to shift their mindset to a customer-centric approach was a consistent challenge. However, I’m happy to say that we were able to make substantial headway over the course of this project.

A designer and copywriter laugh at some of their brainstorming sketches
Dot voting to evaluate brainstorm ideas.

Gaining insights through UX research and site data

Once the team was selected, the first step was analyzing the site and audience data. While Serta had a high volume of direct, unaided search traffic, website sales were disproportionately low.

The team also conducted 15 in-depth user studies on Serta.com. We wanted to understand current site behaviors and gain insights into what information was meaningful and what was superfluous. Our findings included:

  1. Users were disoriented by the fact that most products were not available to purchase online.
  2. Users were typically intimidated by the vast number of products; however, the “mattress finder” and comparison functions helped narrow down options.
  3. Several users had trouble finding critical pieces of information or knowing “where to go next.” A few users noted that the website was “cluttered.”
  4. Almost all users noted positive or neutral sentiment for the Serta Sheep that have been the brand mascot for 20 years.

A design sprint to quickly align the team on the core UX of the site

Once the initial research was complete, I lead the team in a 3-day multidisciplinary design sprint. We used our research and empathy-building techniques to keep our customers in mind as we laid out user stories, flows, site architecture, and initial wireframes. The team then fleshed out the initial wires into high fidelity wireframes and comps, getting approvals from the Serta brand team at each phase.

4 sheets of paper with brainstorm sketches and various colors of dot voting stickers
Several sketches from our design sprint.

A tailored experience for two very different audiences

Based on our analysis of traffic and user journeys, we hypothesized that the site audience mainly fell into two use cases:

  1. People in the early stages of mattress shopping: researching and classifying based on price, features, and brand
  2. People in a retail showroom trying to compare prices before making a purchase
The serta.com navigation drawer opens because the mouse is hovering over the mattresses link
The top navigation bar on hover. There is a clear delineation between what can be purchased online versus in-store.

Maximizing timelines & collaboration with an agile workflow

At each phase of the project, design, copy, and engineering collaborated and worked in parallel. Design would hand off pages to engineering in the wireframe stage and then would go back to add refinement with the comps. This created a quick, iterative process that allowed all teams to maximize timelines.

Creating an effective design system

One of the site redesign challenges was creating an effective design system using Serta’s existing brand colors. The blues and yellows were overutilized and mostly not accessible on white. This made finding a noticeable call-to-action (CTA) color challenging. This effect was compounded by the fact that the Serta team had developed an art direction strategy that relied heavily on blue. So our team set out to find a CTA color that would work well with the existing palette and draw users’ eyes toward making a purchase. We settled on a bright terracotta color to complement the existing blues and yellows while standing out nicely on the page.

A comp of the new Serta product detail page viewed at 1024px wide.
A product detail page. A new, configurable product detail page that allows users to easily choose between benefits to find the right product for their sleeping styles.

A new, rolling QA process

We implemented a rolling QA process to help lessen the QA load at the end. Initially, I was a little worried that this would mean double work for the design team. But it ended up keeping the QA load to a consistent, manageable level and allowed the teams to work concurrently and meet the deadline. This will definitely be a process that I use on future projects.

Checkout: delivery options. We chose a stepped checkout approach that has been effective for Tuft & Needle. Using a similar design means that we can easily make improvements across all brands based on new learnings.
A comp of the 3rd step of checkout on serta.com. This step collects delivery information.

A photoshoot focused on the needs of a modern, responsive website

Serta’s previous photography didn’t take into account things like responsiveness in a website hero. We also felt that the styling, lighting, and talent direction were not in line with the “elevated, high-tech luxury” vibe of the iComfort sub-brand. So while the UX team worked through various use cases, I led the multimedia team in a photoshoot for the website and ad creative. We’re currently testing the impact of the new photos in A/B tests on the site and ads, and early results show success.

A designer and copywriter laugh at some of their brainstorming sketches
A designer and copywriter laugh at some of their brainstorming sketches

The site launched on schedule on December 16. Since then, we’ve seen the conversion rate increase by 116%, which has led to a 48% increase in ecommerce revenue year-over-year.

Thank Yous

Darin Barnes & Rachel Rose UX & Visual Design

Erin Cline & Breanne DeMore Copywriting

Kyle Niemier & Geoff Parker Production & Photo Editing

Colin Darland & Jackson Hardaker Front-End Development

Shay Arnett & Jayson Virissimo Back-End Development

Anna Wolf Photography

More work