01 · Overview
Hired to rework Bear's site as the product line grew
Bear brought me on as Director of UX while the company was preparing to launch new mattresses, plus pillows, accessories, and a weighted blanket. The existing site supported 2 mattresses and a small accessories line, but it had cracks: a homepage CTA that wasn't converting, a compare page that couldn't hold more than 2 products, and an IA that couldn't fit the new categories. My job was to figure out what was actually wrong, prove it, and rework what mattered.
02 · Discovery
Reading the data, talking to users, and listening to what was coming
I had three places to work from: the data, user research, and conversations with leadership. Each one did a different job. The data showed where users were dropping off. The interviews told me why. The conversations with the CEO and VP of Product told me what was coming and what I could actually change without rebuilding the underlying systems.
Moderated user interviews
I ran moderated interviews with people who matched Bear's persona: 25 to 50, in the US, active or athletic, in the market for a mattress soon. I asked open questions about their last purchase. When they bought it. Why they picked the mattress they picked. What almost stopped them from buying. Two patterns came up across the conversations. People named reviews as a top factor in the decision. And nobody understood "Start Your Free Trial" on the homepage. A free trial of what?
Heatmaps and analytics
VWO and Google Analytics pointed at the same surfaces the interviews did. The homepage CTA was being scrolled past. The mobile menu wasn't getting clicks.
Conversations with the CEO and VP of Product
Bear was a 15-person company. Direction came directly from the CEO and the VP of Product. The CEO had built the business on what was already working and didn't want to change anything that didn't need changing. That set the rule for the rest of the work: every change I proposed would need data behind it before he'd sign off.
03 · Problem
More than just "add new products"
I noticed other cracks at Bear along the way, but my filter for what to prioritize was overlap across signals. Three problems showed up in all three sources at once: the data, the user voice, and the product roadmap. The rest went on a list for later.
Each of the three was already failing the products Bear had today. Adding new ones would only make it worse.
The homepage CTA was confusing
"Start Your Free Trial" wasn't reading as "shop mattresses" to anyone in the interviews. People weren't clicking through to browse the catalog at all. They were bouncing or scrolling past. The credibility signal they actually wanted (reviews) wasn't on the page either.
The compare page only fit 2 mattresses
Bear was launching new mattresses. The existing compare page held the original Bear and the Bear Hybrid, and that was it. Mobile was unusable even with those two.
The IA couldn't hold the new categories
Mobile menu engagement was already low before the new products. Stacking new categories on top of the existing IA would make it worse, not better. It needed a rebuild, not an extension.
04 · Process
The decisions behind each redesign
Sequencing the work
I worked the three in this order, on purpose:
- 1.Compare page first. Only one new mattress was coming online when I started. That was the right time to rebuild the destination, before there was traffic to mess up.
- 2.IA second. I had time while the next mattress was in production. Restructuring the nav with the team in parallel meant the IA would be ready when the rest of the catalog landed.
- 3.Homepage last. Fixing the top of the funnel before the destinations were ready would have driven traffic to broken pages. The homepage rework only made sense once compare and IA were solid.
How the work shipped
I was the only designer at Bear; one developer built everything I designed. That meant the design wasn't just visual. Every component needed a CMS structure underneath it so the CEO could edit content over time without me or engineering being in the loop. The design was the architecture for what could change later, as much as it was what shipped today.
Compare page
I rebuilt the comparison pattern to hold up to 4 mattresses on mobile (the CEO set the catalog; my job was to design the pattern to match it, not lobby for more). The first design decision was the most important: pills instead of a table.
Why pills, not a table
A comparison table is the conventional pattern, but tables break past three columns on mobile, and they signal "study this" when users are actually scanning for differences. Pills scale. A row of 4 becomes a pattern users can read across in one glance. The dash where a feature is missing carries as much information as the pill that's filled in.
To figure out what should go on each mattress's pills, I went to the CEO. But I didn't ask him about specs. I asked him what each mattress was for. What was the design intent? For the Bear Original he said it was meant to be entry-buyer friendly, so that became "Best Value." For the Bear Hybrid, he was thinking about people who needed support without giving up comfort. Each pill came from a sentence he could say off the cuff about what the mattress was supposed to do for the customer. Not a feature list. A use case.
The pills also needed CMS thinking. I designed the section as an editable module so the CEO could add, change, or remove pills per mattress as new mattresses launched, without design or engineering being in the loop. Each pill became a structured CMS field, not just a visual element.
A size selector at the top because people on this page were comparing price, and price changes with size. Without it they were bouncing between product pages to do the math.
Cutting the marketing descriptions
The CEO and marketing pushed back on cutting the long product descriptions. I argued they weren't being read. To back it up I ran usability tests: scroll maps showed users scanning past the descriptions, and in moderated sessions every participant skipped them and went straight to the comparison row. The pills carried the comparison. The descriptions just took up space.
IA and navigation
I ran a card sort with the entire 15-person company. The CS team in particular talked to customers all day; they had a clearer view of who our buyers were than anyone in design. Skipping them would have meant designing to my own assumptions. Every team member organized every link on the site from scratch.
The surprise from the card sort
"Visit a Showroom" kept getting grouped near the top of the list. I'd been thinking of Bear as an online-only company. The team knew customers were coming in to lie down on the mattresses before they bought. In the new IA I added a showcase area for the most-clicked link in the nav. Showroom went there.
From the team's groupings, the new IA emerged. From there, mobile-specific testing.
Why the MENU label first
Before testing the MENU label I had a list of bigger interventions: making the icon larger, adding color, animating it on load. The label was the cheapest possible change, so I tested it first. If it didn't move clicks I'd have moved up the cost ladder. It did, so I didn't have to.
On desktop, I A/B tested the position of the nav itself. Left vs. right. Right won; more clicks. I didn't dig into the why beyond the data. Product photos inside the menu, because retail navigation needs visual signal for the products people are trying to find. A textual list of categories is harder to scan than category plus thumbnail.
Homepage
I didn't ship the homepage as a single redesign. I A/B tested two changes in sequence so each one could be defended on its own data, not lumped together.
First was the review count next to the CTA. My hypothesis was that a trust signal adjacent to the click decision would give people more confidence to click. The test confirmed it, and that change shipped.
Convincing the CEO to change the button
The CEO didn't want to change "Start Your Free Trial." His logic was reasonable: it was already working, and you don't change something that's working. But the interviews had told me people didn't know what they'd be trialing, and that's the kind of cognitive friction you can quantify. I A/B tested "Shop Mattresses" against the existing copy, showed him the click-through delta, and he signed off. It shipped.
What I didn't ship
My first instinct as a designer was to fix the typography (inconsistent across pages), the colors (off-brand in spots), and a handful of interaction patterns that felt dated. User testing changed my mind. None of those things were stopping anyone from buying. Legibility was the only typography problem that mattered, and it wasn't broken. The rest was my taste, not a customer problem. I left it alone.
05 · Outcome
What shipped
Compare page
A scalable comparison pattern that held up to 4 mattresses on mobile, with editable pills per mattress. The pattern held as the catalog grew over the following years.
IA and navigation
A rebuilt IA that absorbed the new product categories. Mobile menu click-through went up after the MENU label A/B test shipped.
Homepage
Review count next to the CTA, and a new button. Both changes shipped through separate A/B tests. Click-through went up after each.
06 · Reflection
The biggest thing Bear taught me
When I joined Bear there were UI patterns on the site that made me cringe. Type choices, spacing, pages I thought looked dated. My designer brain wanted to fix all of it.
User testing rerouted that instinct.
Talking with prospective buyers showed me that most of the things bothering me weren't on anyone else's radar. People weren't picking Bear or not-Bear based on the patterns my eye caught. They were deciding on whether the site helped them trust the product and figure out which mattress was right for them.
The lesson, plainly: the research wasn't just for finding new problems. It was for filtering my own taste. Most of the work I would have spent time on first didn't matter to anyone but me. The work that did matter wasn't visible until I asked.