Back to blog

NatureHills.com: A Data-Driven UX Case Study

UX Case Study: Nature Hills

Most UX audits start with an opinion. Ours started with data.

When we sat down to audit NatureHills.com, America's largest online plant nursery, we didn't begin by listing what "felt off" about the site. We pulled Shopify analytics and ran Microsoft Clarity session recordings and heatmaps across their highest-traffic pages - homepage, product detail pages, and search - and let real shopper behavior point us to the friction.

What we found wasn't broken design. It was small, specific gaps between what shoppers were trying to do and what the site was letting them do easily. Here's some of what we saw, what we changed, and why.

1. A Hero Section With No Next Step

The problem: Clarity recordings showed visitors landing on the homepage, reading the hero copy, and then... scrolling past it without engaging. The messaging was solid: it had trust signals and the brand's value prop, but there was no clear action to take once you'd read it.

Before

The mobile hero was a clean text block: headline, guarantee copy, supporting paragraph. No button. Session recordings showed users pausing, then just scrolling on to find their own way into the catalog.

old hero image with no call to action

Old hero section - no call to action

After

We added a prominent "SHOP ALL PLANTS" button directly beneath the copy - giving the hero an actual job to do instead of just setting a mood.

new hero with shop all plants call to action

New hero section with clear CTA

Why it matters: A hero section that only informs is a missed handoff. Once we could see shoppers reading the message and then hunting for navigation on their own, adding a direct path forward was an easy call - not a guess, a confirmed gap.

2. Product Pages That Buried the Sell

The problem: Screen recordings on product detail pages (PDPs) showed attention going straight to price and the Add to Cart button, then bouncing up and down - like shoppers were looking for reassurance that wasn't there. The old layout jumped from product photo and title straight into price, with no scannable reason to trust the plant was right for them.

Before

The above-the-fold PDP led with image, title, and price, but key selling points were buried further down the page, past the point where a lot of visitors were dropping off.

product page with no specs

Old PDP - no scannable selling points above the fold

After

We pulled the plant's key selling points such as bloom characteristics, hardiness zone, fragrance, and use case into a highlighted bullet block right under the title, above the price and Add to Cart button.

specs added above the fold on product page

New PDP with highlighted key features

Why it matters: Heatmaps and session recordings don't lie about attention - they show you where customers actually spend time. Shoppers were scanning for confidence signals before price. Giving them that information earlier meant fewer people needed to scroll around looking for reassurance that was already on the page, just in the wrong spot.

3. Product Info That Required Digging

The problem: NatureHills' catalog includes deep planting and care detail - necessarily so, since specs like mature height, sun needs, and hardiness zone genuinely change a purchase decision. But the original PDP tabs only split content into three broad buckets (Specifications, Description, Planting & Care), so finding one specific fact meant reading through paragraphs to find it.

Through recorded sessions, we found that customers would open up the customer chat to ask questions to get information that was available to them on the very section of the page they were currently viewing - but it just wasn't easy enough to find.

Before

Three tabs, no way to jump to a specific spec. If a shopper wanted to know mature height, they had to open a tab and scan.

old product page tabs

Old PDP tabs - three broad buckets, no way to jump to a spec

After

We restructured into five tabs (Specifications, Description, Planting & Care, Delivery and Shipping) and added a "Find on Page" search tool. Now a shopper can type "mature height" and jump straight to the answer instead of scanning.

new product page tabs
New PDP tabs with Find on Page tool

new product page find on page

Find on Page in action - searching "mature height" jumps straight to the answer

Why it matters: This one came straight from session recordings - we could watch people re-reading the same tab content multiple times and then open up a customer service chat asking about basic information, which shows us that they were clearly looking for one specific data point buried in a paragraph. That's a signal that the information architecture, not the information itself, was the problem.

4. Search That Hit a Wall

The problem: The search function runs semantic matching under the hood - but Shopify's predictive search (the dropdown that fires as you type) cannot leverage this. Predictive only surfaces exact or partial text matches, so a query like "large strawberry plants" could come up empty in the dropdown even though the same search, run in full via hitting Enter, would return real results. The fix was semantic search all along - shoppers just had no way to know they needed to hit Enter to reach it

Before

Searching "strawberry plant large" returned "No results found" with nothing else offered - not even a prompt to try the full catalog. 

search bar before with no results found

Old search - dead end, no fallback

After

We added a fallback: when an exact match isn't found, the search now prompts "Press Enter to search the full catalog for [term]" - turning a dead end into a next step.

new search notice - hit enter to see results

New search - fallback prompt to search the full catalog

Why it matters: Of everything in the audit, this was the least ambiguous. A dead-end search is one of the most direct ways to lose a shopper who was actively trying to give a site their money. The fix wasn't clever - it just needed to exist.

5. 404s That Left Shoppers Stranded

The problem: With a catalog this large - and several rounds of restructuring that reorganized how products were categorized and linked - 404s were inevitable. That's not unusual for a site this size. What mattered was what happened after a shopper hit one. The old 404 page didn't provide many opportunities to move forward: a generic "Back to Home" button and a handful of unrelated "top picks" that had nothing to do with what they were originally looking for or where they were gardening.

Before:

The 404 page offered few ways forward - back to the homepage or  a generic product carousel with no connection to the shopper's growing zone or what they'd been browsing.

404 with no recommendations
Old 404 page - one way out (Back to Home) and a generic product carousel unrelated to the shopper's growing zone


After:

We rebuilt the 404 page to give shoppers three real ways forward instead of one dead end: a search bar right on the page, a button to return to the last page they were viewing, and a link back home. We also added a "Plants for Your Zone" section - and called it out by name - so shoppers immediately understood the recommendations were tailored to their specific growing zone, not just a generic grab bag.

updated 404 with shopping pathways

New 404 page - on-page search, a return-to-last-page button, and plant picks called out specifically for the shopper's growing zone.

The Takeaway

None of these changes were dramatic redesigns. No new color palette, no rebuilt navigation, no reimagined homepage. Every fix here came from watching real behavior - heatmaps showing where attention actually went, session recordings showing where people got stuck or gave up - and then closing the specific gap the data pointed to.

That's the difference between a UX audit built on opinion and one built on evidence: the recommendations aren't about what looks better. They're about what the data already told you was broken.

Want a UX audit for your Shopify store, backed by real shopper behavior instead of guesswork? Get in touch with The Pages Media to see what your heatmaps and session recordings are trying to tell you.