01 The Redesign That Backfired
This store didn't have a traffic problem. It had a trust problem, and it was self-inflicted.
A four-year-old home decor Shopify store came to us three months after a theme "refresh" done by a previous freelancer. Traffic was stable. Ad spend hadn't changed. Product lineup was the same. But conversion rate had dropped from roughly 1.9% to 0.8%, and monthly revenue was down almost half. The owner's first instinct was to blame the ads, then Google, then the season. The analytics told a different story: the same visitors were arriving and simply not buying anymore.
This is one of the most common patterns we see in ecommerce. A redesign gets treated as a visual makeover, colors and fonts and a trendy layout, while the things that actually drive purchases get broken in the process: page speed, product photography hierarchy, mobile usability, and the small trust signals buyers scan for before entering a card number. Research backs up how much this matters. Stanford's Web Credibility Project found that around 75% of users judge a company's credibility based on its website design, and first impressions form in a fraction of a second, driven almost entirely by visuals.
This case study walks through exactly how we diagnose a conversion drop after a redesign, which pages we rebuild first and why, and what the numbers look like once design starts working for the store instead of against it.
The core ecommerce design insight: shoppers don't consciously evaluate your design. They feel it. A slow page, a cluttered product photo, a buried add-to-cart button, each one silently answers the question "can I trust this store with my money" with a no. Design isn't decoration on an ecommerce site. It is the sales floor.
02 What the Design Audit Found
Before touching anything, we ran a full UX and design audit: heatmaps, session recordings, funnel analytics, speed tests, and a manual walkthrough of the buying journey on desktop and mobile. Here's what the data showed:
VISUAL & LAYOUT PROBLEMS
New theme prioritized full-screen lifestyle banners, pushing products below the fold on every page
Add-to-cart button restyled to a thin outline that visually disappeared against product photos
Low-contrast gray text on white failed basic readability, price and shipping info hard to scan
Three competing font families with no consistent hierarchy across pages
UX & NAVIGATION PROBLEMS
Mega menu with 40+ links replaced a simple 6-category navigation, session recordings showed visible hesitation
Collection filters removed by the new theme, users scrolling through 120+ products with no way to narrow
Cart drawer replaced with a full-page redirect, breaking the browsing flow on every add-to-cart
Search moved behind an icon with no visible field, search usage dropped 70% after the refresh
PERFORMANCE PROBLEMS
Mobile load time of 6.1 seconds, Google's research shows 53% of mobile visits abandon pages that take over 3 seconds
Uncompressed hero images, some over 4MB, shipped to mobile devices at full desktop resolution
14 third-party apps loading scripts on every page, several no longer in use
Layout shift during load, buttons moving as users tried to tap them
TRUST & CONVERSION PROBLEMS
Product reviews widget broken by the theme swap, 2,300+ reviews invisible to shoppers
Shipping and returns info removed from product pages, buried in the footer
Payment method icons missing at checkout entry points
Checkout abandonment at 81%, well above the ~70% industry average Baymard Institute reports
03 Our Ecommerce Design Approach
Ecommerce design is different from brand design. A portfolio site can afford to be beautiful and slow. A store cannot. Every design decision on a Shopify store either moves a visitor closer to checkout or further from it, and the data tells you which. So we never redesign on taste alone.
Our approach for store redesigns follows three phases in order:
Always first
Funnel analytics, heatmaps, session recordings, speed tests, and a manual purchase walkthrough on real devices. We map where users actually drop off, not where anyone assumes they do. On this project the audit killed the owner's original plan, which was a new homepage. The data showed the homepage was fine. The product page and mobile experience were bleeding the revenue.
Highest leverage first
Pages get rebuilt in order of revenue impact: product page first, then cart and checkout entry, then collections, then homepage. Most agencies work in the opposite order because homepages are what owners look at. But shoppers arriving from ads and search mostly never see the homepage. They land on product pages, and that's where the buying decision happens.
Data over taste
Each rebuilt template goes live as soon as it's ready, with before/after metrics tracked per template. Nothing waits for a "big reveal" launch. This means the store starts recovering revenue in week two instead of month three, and every design decision gets validated or corrected by real shopper behavior before we build on top of it.
04 Page-by-Page Priority
Here is how the rebuild was sequenced, and why. The order is driven by one question: how much revenue flows through this template, and how badly is it leaking?
| Template | Rebuild Order | Why This Position | Main Fixes |
|---|---|---|---|
| Product page | Week 1–2 | 68% of paid traffic landed here. Highest revenue per visit | Gallery, buy box, trust block, reviews restored |
| Cart & checkout entry | Week 2 | 81% abandonment. Every visitor here already wants to buy | Cart drawer restored, payment icons, shipping clarity |
| Collection pages | Week 3 | Main internal browsing path, filters were gone | Filters rebuilt, product cards redesigned, grid density |
| Homepage | Week 4 | Brand entry point, but lowest direct revenue impact | Products above the fold, single hero, clear category paths |
| Navigation & search | Week 4 | Touches every page, but fixes depend on final structure | 6-category menu restored, visible search field on mobile |
The key rule: redesign where the money already flows, not where the site looks worst. A homepage that's 20% better moves almost nothing if 68% of buyers never see it. A product page that's 20% better moves everything.
05 Rebuilding the Product Page
The product page is where ecommerce design earns its keep. Baymard Institute's large-scale UX research consistently finds that most ecommerce sites have mediocre or worse product page UX, and this store's refreshed template hit almost every known failure pattern at once.
We rebuilt the template around a simple principle: everything a buyer needs to say yes should be visible without scrolling, and nothing that creates doubt should be missing. Here's the before and after at the structural level:
BEFORE: AFTER THE FAILED REFRESH
Above the fold (mobile)
One oversized photo, product title, nothing else. Price required scrolling
Add to cart
Thin outline button, low contrast, below two paragraphs of brand copy
Trust signals
Reviews broken, shipping info in footer only, no payment icons
Result: 0.8% conversion, 81% checkout abandonment
AFTER: REBUILT TEMPLATE
Above the fold (mobile)
Swipeable gallery, title, star rating, price, and add-to-cart all visible on load
Add to cart
Solid high-contrast button, sticky on mobile scroll, one tap always available
Trust signals
2,300+ reviews restored, shipping/returns accordion, payment icons under the button
Result: product page add-to-cart rate up 74%
One detail worth calling out: the sticky add-to-cart bar on mobile. Session recordings showed shoppers scrolling deep into reviews and photos, then scrolling all the way back up to buy. Some gave up on the way. The sticky bar means the moment of decision and the ability to act on it are never separated. It was a two-day build and it alone measurably lifted mobile add-to-cart rate.
Product Imagery and Graphics
Home decor is a visual purchase. Nobody reads a spec sheet to buy a throw pillow. The product photography was actually decent raw material, but the way it was prepared and presented was working against the store.
We reworked the image system across the catalog. Not new photoshoots, better use of what existed:
| Change | What We Did | Why |
|---|---|---|
| Gallery order | First image: clean product on neutral background. Second: in-room lifestyle shot. Third: scale/dimension graphic | Buyers need to see the product clearly first, imagine it in their space second, and confirm it fits third. The old galleries opened with moody lifestyle shots where the product was barely visible |
| Dimension graphics | Designed a consistent dimension overlay template applied to every product | "Will it fit" is the top pre-purchase question in home decor. Answering it visually cuts hesitation and reduces returns |
| Compression & format | Entire catalog re-exported to WebP with responsive sizes, 4MB heroes cut to under 200KB | Largest single contributor to the 6.1s mobile load time. Image weight is a design decision, not just a dev issue |
| Collection thumbnails | Standardized crop ratio, lighting-matched backgrounds, consistent margins across the grid | A ragged, inconsistent product grid reads as amateur. A uniform grid reads as a real brand. Same products, different perceived trust |
| Promo graphics | Rebuilt sale badges and banners in the brand palette with one accent color, replacing red-on-yellow starburst graphics | Discount graphics that look like clip art cheapen the product next to them. Restraint sells at higher price points |
The imagery rule: in ecommerce, image consistency is a trust signal and image weight is a conversion factor. A beautiful photo that takes four seconds to load loses to a good photo that appears instantly, every time.
06 The Mobile-First Rebuild
78% of this store's sessions were mobile. The refreshed theme had clearly been designed and approved on a desktop monitor. This mismatch is where most of the lost revenue lived: mobile conversion had fallen to 0.5% while desktop held near 1.6%.
Every template was rebuilt mobile-first and only then adapted up to desktop. The specific changes:
6.1s → 2.4s
Image compression, lazy loading below the fold, removal of 9 unused app scripts, and a single font family with two weights instead of three families. Layout shift eliminated by reserving space for every image and embed. The design brief for every section included a weight budget, if a section couldn't justify its kilobytes, it got simplified.
Ergonomics
Sticky add-to-cart bar in the bottom thumb zone. All tap targets at 44px minimum. Variant selectors converted from tiny dropdowns to tappable swatches. Cart drawer slides in without leaving the page. The pattern: a shopper should be able to complete the entire purchase one-handed on a phone without a single precision tap.
Trust
Baymard's checkout research attributes a large share of abandonment to costs appearing late and trust doubts. So: shipping cost shown on the product page and in the cart drawer, not revealed at checkout. Payment icons and return policy one tap from the buy button. Express payment options (Shop Pay, Apple Pay, Google Pay) surfaced at the top of checkout. No surprises between "add to cart" and "order confirmed."
07 Results: Recovery in 8 Weeks, Then Growth
The rebuild shipped template by template over 4 weeks. By week 8, with traffic and ad spend essentially unchanged, the store had not just recovered its old conversion rate but passed it:
| Metric | After Bad Refresh | 8 Weeks After Rebuild | Change |
|---|---|---|---|
| Overall conversion rate | 0.8% | 2.1% | ↑163% |
| Mobile conversion rate | 0.5% | 1.3% | ↑2.6x |
| Product page add-to-cart rate | 4.2% | 7.3% | ↑74% |
| Checkout abandonment | 81% | 68% | ↓13pts |
| Mobile load time | 6.1s | 2.4s | ↓61% |
| Bounce rate (paid landing traffic) | 64% | 47% | ↓17pts |
Metrics from GA4 and Shopify analytics, comparing the 4 weeks before the rebuild started against weeks 5–8 after completion. Traffic volume and ad spend were within 5% across both periods. No new marketing campaigns ran during the measurement window.
Context: the honest framing is that roughly two thirds of this result is recovery, getting back what the failed refresh destroyed, and one third is genuine improvement over the store's old baseline of 1.9%. Both matter. The store was losing an estimated five figures in monthly revenue to design problems alone, with zero change in traffic.
08 Why It Worked
Three things specifically drove the recovery, and they apply to any Shopify store that redesigned and saw sales fall.
The audit pointed the work at the right pages Biggest lever
The owner wanted a new homepage. The data wanted a new product page. If we had spent the budget where instinct pointed, the store would have a prettier homepage and the same 0.8% conversion rate. Heatmaps, session recordings, and funnel data cost a few days up front and saved the entire project. Every redesign should start by finding where the revenue actually leaks, because it's almost never where it looks like it leaks.
Restoring trust signals released demand that already existed Trust
The store had 2,300+ real reviews that shoppers couldn't see, shipping policies buried in the footer, and no payment icons at the moment of decision. None of this required creating anything new. The trust existed, the design was hiding it. Making earned trust visible is the cheapest conversion work there is, and it's the first thing a bad redesign tends to break because trust elements look like clutter to a designer chasing a minimal aesthetic.
Mobile-first wasn't a slogan, it was the build order Where the buyers are
78% of sessions were mobile, so every template was designed on a 375px canvas first and approved on a real phone over 4G before desktop was even discussed. Speed was treated as a design requirement with a per-section weight budget, not a dev afterthought. The mobile conversion rate went from a third of desktop's to nearly matching it, and that gap closing is where most of the recovered revenue came from.
09 Key Takeaways for Store Owners
Same traffic plus falling conversion equals an on-site problem. Before blaming ads, algorithms, or seasonality, compare your conversion rate before and after the design change went live. The date usually tells the whole story.
Most shoppers from ads and search never see your homepage. The product page is where the buying decision happens, so it gets the design attention first. This single prioritization decision changes what a redesign returns.
Reviews, shipping costs, return policies, and payment icons belong next to the buy button, not in the footer. Minimal aesthetics that hide earned trust cost real money. Design around the trust signals, don't design them away.
Every hero image, font family, and app widget is a choice with a millisecond cost. Google's research shows the majority of mobile visitors abandon pages that take over 3 seconds. Approve designs on a real phone on a real connection, not on a designer's monitor.
A big-reveal relaunch means you can't tell which changes helped and which hurt, which is exactly how this store got into trouble the first time. Shipping in stages starts the recovery earlier and turns every template into its own measurable experiment.
Did a Redesign Hurt Your Store's Sales?
We'll audit your store's UX, find exactly where the revenue is leaking, and show you what to fix first, backed by your own data.
Reading Time: 9 minutes · Category: Ecommerce Design · Shopify Redesign · Conversion UX