Serta.com Redesign

A new Serta.com for a new DTC approach.

role
Co-lead Designer; Wireframing, UX/UI Design, User Research
In 2018, Serta Simmons Bedding (SSB) merged with Tuft & Needle (T&N) to combine their extensive manufacturing knowledge with T&N's customer-centric approach and experience in the direct-to-consumer (DTC) space. Our challenge was to redesign the site architecture, UX, and visual design of serta.com to simplify the eCommerce experience for customers and ultimately increase Serta's online sales. The project had a tight timeline; five months from the Design Sprint to the site launch. Serta's extensive product line would be impossible to include at first launch with the given timeline, so we also had to coordinate with an external development agency to maintain a product catalog with all models that would not be available at launch.

Sprint with Focus

We kicked off the project by sending a survey to the Serta Brand Team to understand the fundamental issues they were trying to solve with the site redesign beyond increasing revenue. After reviewing their responses and their customer segmentation research and existing site, it was clear that the redesign needed to radically simplify all aspects of the site. With a clearer understanding of the challenge, the Design & Content Teams brainstormed site architecture, navigation, homepage, and PDP strategies. We then developed those into wireframes in a three-day Design Sprint.

After the sprint, we continued to develop wireframes and content strategies for the entire site. The tight timeline constrained us to utilize some essential elements from the existing Tuft & Needle codebase. Still, we used this as an opportunity to focus on the simplified experience and visual design strategy. Using insights and best practices from Tuft & Needle user research, we created modular designs that could be easily updated as Serta's DTC lineup expanded.
Each week, we presented our wireframes and facilitated discussions with the Serta Brand Team for feedback and design approval. We completed the wireframing stage three weeks early, allowing us a bit more time to focus on the new site's visual design.

A digital brand extension

We began our visual design stage by reviewing the existing Serta brand guidelines. The color and typographic palette were limited, creating several challenges for digital use. Working with the team, I began to develop an expanded type and color palette for the new site using Serta's existing palette as a foundation. Knowing there would be a hesitancy to make changes to a globally recognized brand, I created a series of diagrams to clarify the purpose and usage across the site.

A responsive palette

We wanted to show Serta how a simple palette extension could respond to specific concerns they had with their existing site, so we began by responding directly to key problems that they had identified.
“The website is not intuitive/difficult to navigate”
An expanded palette would make the site feel more modern and fresh.
“Looks like any other website”
An expanded palette would create a better visual hierarchy on the page and identify important elements for the user, creating a more intuitive experience for the user.
“The website looks dated”
An expanded palette would make Serta stand out from competitors while also making it feel part of the DTC space. Many of Serta’s competitors (Tempur-Pedic, Sealy, Stearns & Foster) are using a monotone blue palette throughout their sites, while many DTC brands use richer, expanded palettes.

Typography

Serta's primary typeface, GT Walsheim, worked well with headlines, but its strong geometric form made it challenging to read when used in smaller, long-form body copy. After exploring several options, the team landed on Benton Sans; this tall and narrow typeface contrasted well with GT Walsheim and made the descriptive body copy throughout the site more legible for users.
Diagram showing several typographic pairing options for a headline, body copy, label, and small body copy. One grouping is highlighted with a red dashed outline.Typography diagram showing headlines in GT Walsheim and body copy in Benton Sans. The diagram is highlighted with a dashed red line.

Color

The existing palette consisted of several shades of blue with a single accent yellow. This limited palette made the current site feel monotonous and difficult for users to identify primary actions. The new palette introduced three new colors to the Serta brand, a light blue and warm neutral for background colors, and a deep red for primary CTAs. This expanded palette creates a better visual hierarchy on all pages and identifies essential elements for the user, creating a more intuitive experience. We developed a series of diagrams to clarify the color distribution and usage across the site to ensure this new expanded palette would not distract from the foundational palette.
Serta's color palette in circle swatches with three circles highlighted with a dashed red line.
Stacked horizontal bands of color from the Serta palette with heights indicating relative color distribution on the site.

A comprehensive system

Once Serta approved the new palette, we developed a basic UI Kit using Tuft & Needle's kit as a roadmap. The UI Kit allowed us to quickly move through comps and let the Development Team start building components before final page designs were complete. We also shared this UI Kit with the development agencies working on the external Product Catalog and Blog to ensure a consistent experience across all platforms.
Screenshot of Serta's UI Kit Sketch file.

Design Development

Now that we had finalized our UX and UI strategy, we developed and presented the final designs for all pages within the same weekly review schedule. As Serta approved designs, they were shared with the Development Team to begin work. To ensure efficient Design to Development communication, we met weekly with the Development Team to check on progress and identify any blockers. We also did "rolling" design QA instead of an overwhelming sitewide QA right before launch. Though some items needed to be fixed by Development before launch, the early and consistent communication between all teams had significantly reduced the amount of QA items that our team had typically identified on previous projects.

Navigation Design

As the site's primary goal was to drive DTC sales of the iComfort, we gave this product line greater hierarchy in the expanded mattress navigation. The links to the full Serta product catalog and retailers became secondary actions. The navigation's simple three-column grid allowed flexibility to update this hierarchy and include additional product lines over time.
Mobile & desktop comps of the new Serta navigation menu. On mobile, elements are stacked vertically with the iComfort at the top of the stack. On desktop, the expanded navigation menu is divided into three columns, with two dedicated to the iComfort.
Two desktop wireframes of the navigation menu showing potential future states. In the first, two of the columns have an image with a label below, and the third column has descriptive text with two text links. In the second, all columns have an image with a label below it. Below the three columns, there is a section with two text links.

Homepage Design

The existing homepage was cluttered and had inconsistent content modules, creating a user experience that was not intuitive. Extensive content and excessive typographic styles made it difficult to focus on and understand the product benefits.
Screenshot of existing Serta homepage.
At first launch, the new homepage focused on the benefits of the iComfort series only. The design included a series of modular layouts that simplified the UX and allowed for concise content. These modular designs allowed us to move quickly when the available product lines scaled up, as we placed all of the content modules into our CMS for quick modifications.
Mobile and desktop comps of the new Serta homepage hero, featuring an image of a woman laying on a mattress in a bedroom looking out the window. In the section below the hero, a sheep sleeps on top of a cloud adjacent to a body of text.
Previously, the homepage hero used unrealistic settings, CGI sheep, and excessive typography. We learned from customer research and performance data that users preferred imagery that shows people interacting with products in a more realistic bedroom setting. The new homepage hero uses engaging lifestyle photography and straightforward typography to convey the comfort of the product. Sheep are decoupled from product photography and placed throughout the site to reinforce brand recognition and create visual breaks.
Mobile and desktop comps of the new Serta homepage mattress compare section, with three cards including an image and descriptive copy below.
Clickable "cards" allow users to compare the benefits across the various upgrades of the iComfort. Each card directs the user to the product detail page (PDP) with the upgrade model pre-selected. When we launched additional mattress lines on the site, the cards were updated to reflect individual product lines.
Mobile and desktop comps of the new Serta homepage value props section. The section includes four line icons with labels and a large plus icon below.
The expandable value props section uses custom iconography to introduce some of the DTC experience's unique benefits to users.
Mobile and desktop comp of final CTA and footer of the new Serta homepage.

About page Design

On the existing site, the Serta story lived across several sub-pages, which essentially hid much of the content from users. The new About page condensed all of the critical Serta story items into a single page for users to explore.
Mobile and desktop comps showing the top of the new About Page. Three sheep lay above a headline that reads "How we made the world Serta Comfortable."
The top of the About page features the iconic Serta sheep front and center along with a brief brand narrative.
Mobile and desktop comps featuring a horizontal timeline with vertical lines adjacent to a date and brief description of a milestone. A horizontal scroll bar with two arrows sits directly below the timeline.
The interactive timeline includes high-level brand milestones and provides flexibility for adding future items with minimal development effort.
Mobile and desktop comps of the safety & sustainability section of the About page. The section has a blue background and four expandable accordion sections related to safety and sustainability topics.
The expandable safety and sustainability section allows the user to do a deeper dive into Serta's practices. Previously, each of these categories had been a separate URL with a relatively small amount of content. By placing this content into expandable accordions, we could use heatmaps to track the content that users found most engaging.
Mobile and desktop comp of final CTA and footer of the new Serta homepage.

One last look

Before launch, Rachel and I took one final design QA pass through all of the pages from both development teams. Though some items needed to be fixed before launch, the early and consistent communication between all teams had significantly reduced the amount of QA items that our team had provided on previous projects.

The new Serta.com

We launched the new serta.com with all the required functionality on schedule without any significant complications. Though online sales remained relatively low at first launch, the new site began to show consistent year over year growth in online sales for Serta. Since launch, we have added four additional product lines to the site with minimal design effort needed.

Lessons Learned

More early customer research would have helped define a more useful site architecture and navigation.
After launch, we began to review Hotjar sessions to identify any problem areas on the site. Many users appeared to be searching for Serta's full product line and were struggling to find it. Though the new site's goal was to increase DTC sales of a single product, the lack of product selection on the main site appeared to frustrate many users.
Consistent communication is critical.
At first, we thought the multiple weekly meetings between different teams could inhibit productivity. However, the open dialogue in all of the sessions allowed us to work both smarter and faster.

Project Team

Development
Kevin B, Colin D, Tan D, Jackson H, Johnson T, Jayson V
Design & Content
Amber A, Darin B, Erin C, Breanne D, Kyle N, Geoff P, Rachel R, Gary S