My Role
- Discovery Research
- Competitive Research
- UX/UI Design
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.
Reviewing the original site, we knew we had to ultimately build the new experience and quiz from the ground up – beginning to end.
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.
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.
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.
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.
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.
Learned from research and testing.
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 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.
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
Conversion: +4.63
Average Order Value: +1.55
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.
