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 create a better visual hierarchy on the page and identify important elements for the user, creating a more intuitive experience for the user.
“Looks like any other website”
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.
“The website looks dated”
An expanded palette would make the site feel more modern and fresh.
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.
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.
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.
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.
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.
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.
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.
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.
The expandable value props section uses custom iconography to introduce some of the DTC experience's unique benefits to users.
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.
The top of the About page features the iconic Serta sheep front and center along with a brief brand narrative.
The interactive timeline includes high-level brand milestones and provides flexibility for adding future items with minimal development effort.
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.
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
