Serta sheep number 23 looks at an iPhone and MacBook with a webpage that reads “How we made the world Serta Comfortable.”
Serta sheep number 23 looks at an iPhone and MacBook with a webpage that reads “How we made the world Serta Comfortable.”

A new Serta.com for a new DTC approach

In 2018, Serta Simmons Bedding (SSB) merged with Tuft & Needle (T&N) to combine their extensive manufacturing knowledge with T&N’s direct-to-consumer (DTC) experience and customer-centric approach. After the merger, the T&N team was tasked with redesigning and relaunching Serta’s website in order to bring the brand into the rapidly growing DTC space.

The Challenge

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.

  • A tight timeline for the full redesign and relaunch; five months from the Design Sprint to the site launch.
  • The initial list of MVP pages that would be redesigned and developed by the T&N team was fairly short; however, a large amount of existing pages on serta.com still needed to remain active after launch, which required close collaboration with an external development agency to update and maintain these pages to match the new site styes and navigation.
  • The limited timeline did not allow time for early user research, so we needed to rely mostly on the customer research provided by SSB.
  • T&N had also redesigned and relaunched Beautyrest (prior to the relaunch of Serta). We needed to use the same codebase for Serta, and had to use many of the same modules/templates in order to stay on schedule for the relaunch.

Co-lead Designer with Rachel Rose
Wireframing
UX/UI Design
Art Direction
User Research

Step One

The first step in the process was identifying the scope of the relaunch both in terms of site architecture and product availability. Serta’s product line included thousands of products that would be impossible to include at first launch with the given timeline. The team decided to move forward with selling a single mattress line at first launch; the iComfort series. Though this decision simplified the site architecture that needed to be designed and developed by the team, it also introduced some constraints:

  • All of the other product lines still needed to be available online for customers to research and review. This meant that the existing development agency that was currently maintaining serta.com would need to continue to maintain and upgrade an extensive product catalog to match the new site styles and navigation.
  • Product lines would be gradually transferred from the product catalog to the new site over time, so the initial designs needed to consider future states to accommodate scaling without the need for redesign.
Image for post
Image for post
Initial sitemap for the relaunch of Serta.com

Sprint with focus

After the scope was finalized with all stakeholders, we kicked off a Design Sprint over the course of three days with the Design and Content Teams:

  • Day 1: In addition to doing a team audit of the existing Serta site, we reviewed Serta’s responses to a questionnaire we had provided to understand the primary problems they were trying to solve with this redesign (Site is “cluttered”, “difficult to navigate”, and “product-centric instead of benefit-centric”). We also reviewed the extensive customer segmentation research that SSB had provided, identifying our target audience (“Tuned-In Enthusiasts”).
    Takeaways: The redesign needed to radically simplify all aspects of the site, which was currently cluttered and difficult to navigate. Based on the customer segment profile/behaviors defined, the site also needed to feel modern and tech-focused, highlighting the benefits of the various upgrades to the iComfort as this specific customer segment tended to embrace online shopping and treat mattress shopping as an opportunity to splurge and pamper.
Screenshot of Serta’s existing homepage split into three sections showing the wide variety of content and layouts.
Screenshot of Serta’s existing homepage split into three sections showing the wide variety of content and layouts.
Serta’s existing homepage (and many other pages) were cluttered and had inconsistent content modules, creating a user experience that was not intuitive.
  • Day 2: After revisiting the MVP pages, we began brainstorming site architecture, navigation, homepage, and PDP strategies. After discussing, the team split into two to start refining strategies into wireframes.
    Takeaways: A finalized site map and wireframes of the site navigation, homepage, and PDP to be presented to the Serta Brand Team.
Whiteboard with a list of pages and sketches of the homepage and navigation states
Whiteboard with a list of pages and sketches of the homepage and navigation states
  • Day 3: Both the Serta & T&N team had upcoming photoshoots that would include the iComfort series. Though visual design had not begun on the pages, the team reviewed the wireframes and started to catalog the various shots that would be needed. We also pulled together photography styles to assist in the art direction of both shoots to ensure that the photography would feel consistent across the site.
    Takeaways: A guide to assist in art direction for both photoshoots.
Screenshot of a Dropbox Paper doc with a grid of warm lifestyle images and notes.
Screenshot of a Dropbox Paper doc with a grid of warm lifestyle images and notes.

Set clear lines of communication

Given the extremely tight deadline, the team knew that clear communication was absolutely necessary across all teams. The team pulled together a weekly meeting cadence that kept the cross-functional teams aware of all progress and any blockers. All meeting notes were documented in a single Paper doc to provide the entire team with visibility into progress.

  • Serta and T&N Touchbase
    Weekly meeting with the T&N Design & Content Team and Serta Brand Team (the primary site stakeholders) to present new designs each week for feedback and approval.
  • Design and Development Sync
    Weekly sync with the Design Team & Development Team to discuss each team’s progress and identify any critical needs or blockers.
  • Tagrem and T&N Touchbase
    Weekly meeting with the external development agency, Tagrem Corp, to keep track of progress on the product catalog.
  • Design and Content Sync
    Bi-weekly sync with the Design Team & Content Team to discuss progress and any updates to design or content.
  • Rachel:Darin 1:1
    Daily pairing session to pair design, provide feedback, and discuss progress.

Wireframe the experience

Grayscale mobile & desktop wireframes of the new Homepage, About Page, and Product Detail Page.
Grayscale mobile & desktop wireframes of the new Homepage, About Page, and Product Detail Page.

As our Serta stakeholders were brand focused, they had limited experience with UX design and were looking to us for our expertise in this area. In order to focus our initial meetings on the experience only, we made sure to walk through all pages and interactions clearly, and removed any branding or detailed visuals to target feedback on the experience itself. The Content Team also began to use the wireframes as a content outline to refine the copy to be included in the final comps for review. We were able to move through this phase fairly quickly (within three weeks), which allowed us to spend a bit more time on visual explorations.

Create a digital brand extension

We began our visual design stage by reviewing the existing Serta brand guidelines, which introduced a few challenges for digital design:

  • A limited color palette
    The palette only consisted of Serta’s trademark dark blue and bright yellow, and two additional shades of a medium blue. This palette made the existing site feel monotonous and made it difficult for users to find critical information and actions.
  • A single typeface
    Serta’s primary typeface was GT Walsheim, which worked well with larger type, but its strong geometric form made it challenging to read when used in smaller body copy.

Before working on any page designs, we developed an expanded brand palette strategy that would address these challenges and also respond to the problems identified by the Serta Brand Team in the Design & Content initial questionnaire.

  • Serta said:
    “The website looks dated”
    We recommended:
    An expanded palette to make the site feel more modern and fresh.
  • Serta said:
    “Website is not intuitive/Difficult to navigate”
    We recommended:
    An expanded palette to create a better visual hierarchy on the page and identify important elements for the user, creating a more intuitive experience for the user.
  • Serta said:
    “looks like any other website”
    We recommended:
    An expanded palette to 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 extended palettes.

Knowing there would be hesitancy to make changes to a globally recognized brand, we created a series of diagrams to clarify the usage across the site:

Three diagrams explaining the usage of the expanded digital color palette.
Three diagrams explaining the usage of the expanded digital color palette.
Color: The new palette introduced three new colors to the Serta brand, a light blue (Sky), a warm neutral (Wool), and a deep red (Terracotta). Sky and Wool would primarily be used as background colors, and Terracotta would be used only for primary CTAs to help them stand out from the mostly blue palette. To reinforce Serta’s existing palette, all typography would be in Serta Blue (with some Support Blue accents), and Serta Yellow would be used to highlight specific elements of headlines to highlight important information and to highlight custom icons.
Diagram showing two sets of typography; one using all GT Walsheim, and the other using a mix of GT Walsheim and Benton Sans.
Diagram showing two sets of typography; one using all GT Walsheim, and the other using a mix of GT Walsheim and Benton Sans.
Typography: The new palette introduced Benton Sans to pair with the existing brand typeface, GT Walsheim. Benton Sans would only be used for body type due to its increased legibility in smaller body contexts.

Though the brand extension required extensive conversations and feedback loops, the Serta team approved all recommendations for the new site. This allowed us to quickly pull together a UI Kit to start the final design comps.

Build (and document) the visuals

Image for post
Image for post
Screenshot of a Sketch file showing all of the comps for the new Serta site.

We began designing and presenting the final comps for all pages, within the same tight schedule of weekly turnarounds of full pages. To ensure efficient design to development communication, we documented as much as possible in our Sketch documents; including type styles, padding, and detailed interaction notes.

Image for post
Image for post
Screenshot of a Sketch file showing documentation for a section of the homepage; including vertical padding, interaction notes, and type styles.

Navigation (Lead Designer: Darin)
In order to drive DTC sales, the iComfort was given greater hierarchy in the expanded mattress navigation, and the links to the full Serta product catalog and retailers were designed as secondary actions. The three column grid of the navigation allowed flexibility for including additional product lines over time.

Responsive comps for the expanded navigation menu
Responsive comps for the expanded navigation menu
Two desktop comps; the first has two images and a text column, the second has three images and stacked text below the images.
Two desktop comps; the first has two images and a text column, the second has three images and stacked text below the images.
The evolution of the expanded mattress navigation for future mattress line launches.

Homepage (Lead Designer: Darin)
At first launch, the homepage was focused heavily on the benefits of the iComfort series, and was built using modules that could be easily updated and still remain relevant as the product line scaled up.

Cropped comp of the homepage hero section with an image of a woman laying on an iComfort mattress looking out the window.
Cropped comp of the homepage hero section with an image of a woman laying on an iComfort mattress looking out the window.
The hero section of the homepage uses engaging lifestyle photography and bold headlines that can be easily swapped out during product launches or promotional periods. On the existing site, the homepage hero often included sheep within the imagery, which detracted from the product itself. The new homepage (and all other pages on the site) decouples the sheep from lifestyle and product imagery, and places them throughout the site to reinforce brand recognition and create visual breaks throughout.
Cropped comp of the homepage with three cards side by side, each with a mattress image, details, and CTA.
Cropped comp of the homepage with three cards side by side, each with a mattress image, details, and CTA.
Clickable cards allow the user to compare the benefits across the various upgrades of the iComfort. Each card directs the user to the product detail page with the upgrade model pre-selected. As more mattress lines are added to the site, these cards can be repurposed to introduce and compare the lines.
Cropped comp showing a section with icons and a cutaway showing the expanded state of the icon.
Cropped comp showing a section with icons and a cutaway showing the expanded state of the icon.
The expandable value props section on the homepage introduces the unique benefits of the iComfort series, and is a module that is also repeated on the product detail page. As these benefits will also be applicable to future product lines, it can remain evergreen for future launches. The History module directly below can also be evergreen, and is a content template that is repeated throughout the site.
Cropped comp of homepage with final CTA and footer.
Cropped comp of homepage with final CTA and footer.

About Page (Lead Designer: Darin)
The existing Serta About page was split into many sub-pages, which hid much of the content and made for difficult navigation for the user. The new About page condensed all of the critical Serta story items into a single page for users to explore.

Cropped comp of About page hero section with three Serta sheep laying on top of a headline with body copy below.
Cropped comp of About page hero section with three Serta sheep laying on top of a headline with body copy below.
The Hero story section brings the iconic Serta sheep front and center along with a brief brand narrative.
Cropped comp of the About page showing a horizontal scrolling timeline of individual text blocks.
Cropped comp of the About page showing a horizontal scrolling timeline of individual text blocks.
The interactive timeline includes high-level brand milestones and provides flexibility for the addition of future items with minimal development effort.
Cropped comp of the About page showing an expandable section with categories related to safety & sustainability.
Cropped comp of the About page showing an expandable section with categories related to safety & sustainability.
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.
Cropped comp showing final CTA and footer of About page.
Cropped comp showing final CTA and footer of About page.

As each of the pages were approved, they were shared with the Development Team to begin production. During our weekly syncs, we would discuss progress on all pages and identify areas that could start to be QA’d for visual design. The continued communication and incremental QA reduced the amount of items that needed to be fixed in a the final QA review.

Design & development beyond the MVP

After the design of the MVP pages on the new site was complete, we explored how to efficiently update the full product catalog and all of the remaining pages that needed to stay live on Serta’s site to be visually consistent with the new site styles. These pages would be maintained by Tagrem Corp, as they currently managed serta.com, and would need to be updated in a short amount of time.

For many of the pages, Tagrem was able to use our provided UI kit to update global styles. However, some pages did need design revisions, including minor updates to the product and product listing pages, and a complete reworking of the navigation and footer to match the new site. Once Tagrem began work, we had a weekly sync to keep communication open.

One last look

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

The Result

We launched the new serta.com with all required functionality on schedule without any major complications.

  • More user research was needed before scope definition
    After launch, we began to review Hotjar sessions to identify any problematic areas on the site. Many users appeared to be searching for Serta’s full product line and were struggling to find it. Though the goal of the new site was to increase DTC sales of a single product, it was still causing frustration for a large number of users.This research was documented and shared with the team to help define next steps.
  • Consistent communication is key
    At first, we thought the multiple weekly meetings between different teams could inhibit productivity. However, the open dialogue in all of the meetings allowed us to work both smarter and faster.

Development
Jackson H. Front End Developer
Colin D. Front End Developer
Johnson T. Front End Developer
Kevin B. Back End Developer
Jayson V. Back End Developer
Tan D. Back End Developer
Tagrem Corp External Development Agency

Content & Design
Rachel Rose Co-Lead Designer
Darin Barnes Co-Lead Designer
Erin C. Copywriter
Breanne D. Copywriter
Amber A. Head of Design
Gary S. Head of Content
Geoff P. Multimedia
Kyle N. Multimedia

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store