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.
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.
Role & Responsibilities
Co-lead Designer with Rachel Rose
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.
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.
- 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.
- 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.
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
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”
An expanded palette to make the site feel more modern and fresh.
- Serta said:
“Website is not intuitive/Difficult to navigate”
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”
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:
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
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.
Select Page Designs
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.
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.
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.
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.
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.
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