Open in Figma
Mattress Refresh
Overview
Buying a mattress online is a big, expensive decision - especially when you can’t try it first. This decision is one you might only make every ten years, and the idea of a return can feel daunting. I led a UX/UI redesign focused on clarifying product differences, reducing cognitive load, and helping customers feel confident committing to the right mattress.
Mission
Sales were starting to miss our quarterly targets, so the VP of eCommerce and CEO asked me and a small team to take a hard look at the mattress shopping experience. Our goal was to figure out where customers were getting stuck and redesign the product discovery flow to make it clearer and more compelling.
We uncovered a few big friction points along the way. Five mattress models were being grouped into three families, which made the lineup harder to understand. The experience didn’t clearly explain why each mattress was different or who it was for, visuals were reused across models in ways that blurred distinctions, and there wasn’t a clear story around why upgrading was worth it.
“It looks strange, everyone says it’s comfortable, and I still don’t know what I’m looking at.”
– Shopper at 11:41pm who has 4 comparison tabs open
With a full site redesign already scheduled six months out, we treated this as a fast, focused effort. We broke the work into four phases so we could quickly address these issues, improve clarity, and set the foundation for the larger redesign ahead.
Goals
Clarify differences between mattress models
Improve scannability and reduce redundant content
Increase user confidence during product comparison
Modernize the UI while working within existing patterns and constraints
Research & Discovery
I began with a combination of competitive analysis, stakeholder interviews, UX audits, and usability testing. In addition to traditional testing, I ran participatory design sessions where users collaborated live to help solve pain points in real time. This research surfaced consistent themes around confusion, lack of differentiation, and the need for stronger visual and social proof.
See How it Feels
One of the key solutions was a “See How It Feels” initiative, built to demystify Purple’s very confusing (but very comfortable) grid material. A lot of shoppers assumed it was just foam with holes, so we leaned into more immersive storytelling, adding videos and animations of uncovered mattresses being pressed and interacted with throughout the site. The goal was simple: help customers understand what makes the material different before they ever have to touch it.
Helping Users Choose
Next, we focused on helping users understand the differences across the product line, which largely came down to the thickness of the Purple Grid layer on each mattress. The challenge was that the material is intentionally both firm and soft at the same time, depending on how much pressure is applied, something that’s great in real life, but tricky to explain online.
Because of that, we ran into internal hesitation around using terms like “firm” and “soft,” even though those were exactly the words customers expected. To bridge that gap, we explored and tested hundreds of ways to communicate feel and support without oversimplifying the material. The final solution made it easier for users to compare options at a glance and drove a 68% increase in traffic to product pages, helping customers feel more confident moving forward.
