Mattress Shop Redesign

Ashley Furniture

My Role


  • Discovery Research
  • Competitive Research
  • UX/UI Design



  • Adobe XD
  • Axure


Building credibility as a Sleep authority outside a wheelhouse of brands, my main goal is to provide a mattress recommendation that fits users’ specific needs.


During a website redesign, we started noticing the following problems:  Low UX Maturity and poor cross-team collaboration affected the process and design of the Mattress Shop experience, causing a significant drop in their sales and user satisfaction, especially for mobile users.


Design Inconsistencies: Non-UX architects, designers, testing, research, and developers teams recreated common elements (such as buttons and fields) and user flows each time needed, leading to inconsistent design and usage.  All design elements were arbitrarily implemented and didn’t follow a design process to get cross-team alignment.  They didn’t follow a style guide or brand aesthetics, which caused a dated look & feel, and didn’t include the UX team, causing a poor User Experience, especially for mobile users.


Divided efforts: Low UX maturity leads to disjointed cross-team communication and slower development, hurting the User experience, company credibility, and KPI.

  • Complicated CJM (Customer Journey Map
  • No personalized approach for customers
  • Wrong micro-flow structure, very confusing
  • Lack of essential functionality for mattress quiz
  • Not mobile friendly
  • Lacking of learning and support material
  • High-Fidelity Axure Designs
  • Poor UI Design


Reviewing the original site, we knew we had to ultimately build the new experience and quiz from the ground up – beginning to end.


  • We started by doing discovery research and competitive analysis to determine competitors and gather comparative market information.
  • We defined our goals and objectives.
  • We identified the key features.
  • We developed a redesign strategy.
  • Created a learning material to help the organization understand and elevate its UX maturity.



We carried out some research/strategy tactics while routinely running new UX ideas through Ashley’s marketing team.  As a result of our deep dive and users’s constructive feedback, we were able to build a foundational page/information architecture system that would support both a new design and new technical requirements.

The research uncovered valuable learning while providing critical insights into user expectations, website structure, functionality, and the shopping experience.

What we did:


  • White Paper Research: Extensive Product Page best practices research with Baymard Institute
  • Competitive Research: The research helped us understand industry standards and identify opportunities for the Mattress category.
  • Heuristics: Audited the old Product Page and established assumptions and best practices for improved experience.
  • Business Requirements: Stakeholder and Leadership meetings to nail down desired functionality and gather insights
  • Usability Testing: Moderated and Unmoderated



  • We defined our goals and objectives.
  • We identified the key features.
  • We learned from Users and created user personas to help understand and align our design strategy to the target market based on the data and analytics.
  • We developed a redesign strategy.

Discovering what Ashley Mattress Shoppers aspire to be and do


We learn that Ashley Mattress Shop’s target audience consists mainly of two groups: millennials who view themselves as young and progressive individuals and Comfort Kings (35s – 50s)who look for the best option to solve their sleeping problems. The first group,20-somethings, looks for a personalized experience where they can shop for products tailored to their needs while simultaneously establishing the brand as cutting-edge and trendy. In contrast, the second group is very quality-oriented and wants to buy the best option to satisfy their needs.

Both groups ask for a personalized experience where they can share their needs and, as a result, obtain a selection of options just for them.

What are their pains?


People never know what they need exactly. Navigating between different features, sizes, and prices is challenging for users. On the other hand, the brand knows what they need to complete the order: mattress size, user weight, temperature, and any medical requirements, and how much they are willing to pay.  This served as a baseline for designing the Shop Sleep experience and the Mattress Quiz.


We didn’t have a Style Guide or any creative direction to take from; most of the previous design was created by a non-creative team, causing a disconnection between the brand and the UI. Because of this, we focused on cleaning up the Product Page with an updated color palette and elements. I was in charge of ideating the Creative Recommendations based on research brand guidelines and partnered with the Creative Team to elevate the overall experience UI.

We kept the Sleep Shop and Mattress Quiz streamlined to be accessible quickly through the website, gaining visibility and exposure.
For transparency and to nurture cross-team collaboration, I connected the UX, the Design, and the Dev teams to define basics such as grid and breakpoint usage, and developed the handover process and the design concept.

Improvements Based on Research and Testings

Product Image


The major limitation of online shopping resides in the impossibility of seeing and feeling before purchasing. When shopping online, users rely on product images to get a better idea of the product’s color and texture.

We switched to a hover-based zoom instead of a click-based zoom.  Hover-based zooms require less effort from users to initiate and, therefore, have a higher utilization rate than click-based zooms, as Baymard Institute recommends.

Baymard Institute recommends that visually-driven products have large default images on the product page to support better users’ desire to perform a detailed visual product inspection. Since rugs are a visually-driven product, we increased the default image size by 60%.
Learn and Shop


The Shop Call-To-Action is present throughout the page; from Bed Pillows to Mattresses, they can go directly to each Category while learning about them with one click.  This solved two problems with our old design.  In our internal user testing, we realized users scroll between the product variations and the specifications, looking for options, but didn’t have the direct action to shop for those products.  With the “Shop…” Call-To-Action present on each module, we direct users to the shopping funnel efficiently and without distractions.

Quick Quiz Module Based on most common Users’ requests

Learned from research and testing.

Old Quiz Design


Quick Quiz Design Proposal

With a few questions, we can direct users to their options.

This module is present on the main page for the Shop Sleep page, allowing users to define a quick list to start their shopping experience in case they aren’t sure about suitable options for their needs.  If no choice is accepted, the final item in the grid will invite users to take the complete quiz, which has more dedicated questions such as sleep posture, etc.  In the old version, Users were stressed by the amount of questions and the dated UI.

The complete Mattress Quiz is presented to users as a Wizard experience that can be accessed from any module that contains the Mattress Quiz Call To Action.
Size Options


The original design showed sizes without shapes in the size carousel. In our internal user research, we learned users would get confused when reviewing the available sizes. To solve this, we included shapes in its carousel.

Checkmarks Vs Slider
Upsale Options


To increase the average order value, we implemented an Upsale module. If upsells aren’t implemented correctly, users will feel like they’re being shaken down, leaving without purchasing the main product.  We also included Upsale options when adding items to the cart.


“By showing the product with other appealing products you can implicitly associate their use and values.”
Baymard Institute

7 in 10 Mattress Buyers include bedding accessories along with a new mattress as follows (2018):


  • 34% Sheets
  • 36% Pillows
  • 23% Comforters and Duvets
  • 27% Mattress Protectors
  • 21% Mattress Pads
  • 20% Bed Covers and Decorative Pillows
  • 19% Mattress Toppers
  • 66% Mattress Foundations


Old Sleep Shop Page

Proposed Sleep Shop Page




Conversion: +4.63

Average Order Value: +1.55

Lessons Learned

User Testing
We must test current experiences and new concepts to keep learning and improving experiences. We did this on a small scale, but now we must add a robust methodology to the design process.
Data Analysis
Analyzing page usage data closer will help us catch what interactions are correlated with higher usage and conversions.
Project Scale
We must scale back the size of our projects. Instead of an entire Product Page redesign, we should have swapped the old Product Page out with new features piecemeal and tested our most important hypothesis.
UX Maturity
Nurtured the organization's UX maturity by creating learning material and organizing small chats with key stakeholders and teams to share and establish new working methods.

What’s Next?


Here are a few Product Page features we designed and plan to develop and A/B test in the future.

One-Click Purchase | This option eliminates the biggest problem facing e-commerce: Shopping cart abandonment. Amazon had the patent for 1-click purchasing until it expired in 2017, allowing other companies to implement it. Past studies estimate this option increased Amazon sales by 5%.

‍Enhanced product overview | Our current Product Overview doesn’t provide the user with a comprehensive overview. Furthermore, users will likely skip past it since it’s a wall of text. We want to liven up the overview and include more helpful information. This design concept for an enhanced Product Overview packs a comprehensive summary in a relatively small footprint. It has redesigned specs, a highlighted review, helpful images, color breakdown, and Q&A.

Thanks for reading!