SZN4.DESIGN

CASE STUDY / ECOMMERCE + CRO

Deals vs.
Discovery.

Same store. Two very different reasons to shop.

I wanted to know whether a fragrance shopper responds more to finding a really good deal, or feeling confident they’ve found the right scent. So I designed two homepage directions to test that question.

EXPLORE THE CASE STUDY
A / DEAL-LED
B / TRUST + DISCOVERY
Top of the deal-led FragranceBuy homepage concept
Top of the trust and discovery FragranceBuy homepage concept
ROLE Product / UX/UI Designer FOCUSEcommerce · CRO · Concept design TYPE Independent concept study BUILT WITH Figma · HTML · CSS · JavaScript · Vercel
SELF-INITIATED CONCEPT / NOT A COMPLETED A/B TEST

A and B are two design directions. No live experiment was run; the measurement sections describe a proposed test plan.

AT A GLANCE

The problem
FragranceBuy wins on price, but many shoppers don’t know which fragrance they want, only how they want it to smell.
My role
Solo: research on the live store, strategy, wireframes, UI and both coded prototypes.
What I built
Two complete, responsive homepage prototypes, each with its own hypothesis and measurement plan.
Key decision
Design two deliberately different directions to test a strategic question, instead of one “best” redesign.
Skills shown
Ecommerce UX · CRO + experiment design · Wireframing · Front-end build

01 / THE STARTING POINT

FragranceBuy already has a strong reason to shop there: the deal.

Its value proposition is pretty clear: authentic fragrances, a huge catalogue and warehouse-style pricing. That works beautifully when you already know which bottle you want.

But sometimes I know I want something warm, sweet, clean, sexy or summery… and I have absolutely no idea what that perfume is called. That tension is where this project started.

This is an independent exploration inspired by FragranceBuy’s live store ↗. It was not commissioned by FragranceBuy.

02 / THE QUESTION

What if I explored two different reasons to click?

A / DEAL-LED

“That price is too good to pass up.”

B / DISCOVERY

“Wait… I actually want that.”

03 / TWO DIRECTIONS

Two homepages.
Two hypotheses.

PROTOTYPE A / DEAL-LED

Make the value impossible to miss.

If savings, urgency and product access are front and centre, shoppers with buying intent may reach products and the cart faster.

DEAL → URGENCY → PRODUCT → CART
Look for: hero clicks · quick-add · add-to-cart · revenue per visitor
PROTOTYPE B / TRUST + DISCOVERY

Make choosing feel easier.

If shoppers can explore by scent and get answers to their questions early, they may browse deeper and feel more confident buying.

DISCOVER → LEARN → TRUST → PRODUCT
Look for: scent finder · education · reviews · conversion

04 / MAPPING THE EXPERIENCE

Designing the conversion logic before the UI.

Before getting into visual design, I mapped what every section needed to do: catch attention, create urgency, answer a question or move someone closer to the cart. Each page needed its own rhythm.

A / DEAL-LED WIREFRAMEVIEW FULL IMAGE ↗
Annotated deal-led wireframe showing hero, deal cards, brand shortcuts, format navigation, shipping incentive and trust sections
Every section gives the shopper another shortcut to value.
B / DISCOVERY WIREFRAMEVIEW FULL IMAGE ↗
Annotated trust and discovery wireframe showing scent finder, authenticity, format education, reviews, shipping and FAQ
This one slows down just enough to help people choose with confidence.

05 / DIRECTION A · DEAL-LED

What happens when I turn the deal all the way up?

I leaned into what FragranceBuy already does well: warehouse pricing, visible discounts and fast ways into product. This direction is deliberately louder.

Deal-led prototype hero with warehouse pricing and up to 70% off messaging
01 / FIRST IMPRESSION

Make the value obvious immediately.

Authenticity, warehouse pricing and the discount are visible before the first scroll. There’s no mystery about why you’d shop here.

I’d expect more hero CTA clicks from shoppers ready to buy.

Deal-led prototype product cards with sale badges, prices and quick-add buttons
02 / DEALS + QUICK ADD

Shorten the path from “good deal” to cart.

What it is, what it costs, what you’re saving and how to buy it sit together. Shoppers can act without opening every product page.

I’d watch quick-add clicks and add-to-cart rate, then check whether that intent survives checkout.

Deal-led prototype sections for trending products and shopping by format
03 / SHOPPING SHORTCUTS

Give different kinds of shoppers a way in.

“What the FragComm is buying” answers what’s popular. Shop by format helps someone go straight to boxed bottles, testers, gift sets or decants.

I’d track product clicks and products viewed per session by entry point.

Deal-led prototype free shipping progress section
04 / CART BUILDING

Make free shipping feel within reach.

Instead of keeping the threshold tucked away until checkout, a progress bar makes it tangible: “You’re $53.18 away.”

I’d test whether this lifts revenue per visitor without creating more cart abandonment.

Want to click through the real thing?

EXPLORE PROTOTYPE A View the code ↗

06 / MEASURING A

If A works, I’d expect faster commercial behaviour.

The core signals are hero CTA click-through, product and quick-add clicks, add-to-cart and revenue per visitor. I’d also watch cart abandonment so an easier add doesn’t just move friction downstream.

My expectation: A may work harder for shoppers who already know what they want.

MEASUREMENT PLAN / DIRECTION A

Primary metric
Revenue per visitor
Supporting signals
Hero CTA click-through · product and quick-add clicks · add-to-cart rate · products viewed per session by entry point
Guardrail
Cart abandonment: an easier add shouldn’t just move friction to checkout
Best fit
Returning shoppers and anyone arriving with a specific bottle in mind

07 / DIRECTION B · TRUST + DISCOVERY

What if I make choosing the fragrance easier instead?

Sometimes the sticking point isn’t price. It’s “Will I like it? Is it real? What’s a tester?” This direction tries to answer those questions before asking for a purchase.

Discovery prototype hero and scent finder with mood-based categories
01 / SCENT FINDER

Start with what the shopper knows.

Not everyone knows a fragrance name. They might know they want fresh and clean, or warm and spicy. So discovery starts in language people actually use.

I’d look for scent finder and quiz starts, then follow those sessions into products.

Discovery prototype authenticity reassurance and fragrance format cards
02 / AUTHENTICITY + FORMATS

Answer the slightly awkward questions early.

Why is it cheaper? Is it real? What’s a tester? I made those answers part of the shopping journey instead of hiding them in a help page.

I’d compare engagement with these explanations against downstream product and cart behaviour.

Discovery prototype best blind buys product cards with scent descriptions
03 / BEST BLIND BUYS

Make a scent easier to imagine.

Warm, fresh, floral and sweet cues give each product a little more meaning. They help bridge “I’ve never smelled this” and “Actually… this sounds like me.”

I’d measure product discovery clicks, PDP visits and add-to-cart from this module.

Discovery prototype education, customer reviews, shipping reassurance and FAQ
04 / EDUCATION + REASSURANCE

Confidence comes from more than one place.

Some shoppers need fragrance basics. Others need reviews, authenticity proof or a clear return policy. B layers those signals throughout the journey.

I’d watch education, review and FAQ engagement alongside eventual conversion.

Curious which scent you’d find?

EXPLORE PROTOTYPE B View the code ↗

08 / MEASURING B

B should tell a different story in the data.

Scent Finder clicks and quiz starts tell me if the new entry point is useful. Education, reviews and FAQs tell me whether shoppers use the reassurance. Add-to-cart and conversion tell me whether any of it actually helps people buy.

My expectation: B may create deeper engagement for people who are still figuring out what they want. Bounce rate is a guardrail for shoppers who simply want a deal.

MEASUREMENT PLAN / DIRECTION B

Primary metric
Conversion rate for new visitors
Supporting signals
Scent Finder clicks and quiz starts · education, review and FAQ engagement · product discovery clicks · add-to-cart from discovery modules
Guardrail
Bounce rate, for shoppers who just wanted the deal
Best fit
First-time buyers and anyone still figuring out what they want

09 / THE FINAL DIRECTIONS

Same catalogue. Different shopping psychology.

Here are both complete homepage concepts, exactly as designed. Open either image to see the full page at its original proportions.

10 / IF I COULD SHIP THIS

I wouldn’t ask which looks better. I’d test what actually creates value.

TEST 01

Current site vs. A

Does amplifying the existing deal behaviour help high-intent shoppers move to product and cart more effectively?

TEST 02

Current site vs. B

Does guided discovery and visible reassurance help browsing-led shoppers choose and purchase?

THEN SEGMENT

Who needs which?

Look at acquisition source, new vs. returning shoppers and whether someone arrives with a specific product in mind. Set a primary outcome and sample size before running each test.

These are proposed experiments. Neither concept was run against live traffic, so this project does not claim measured conversion lifts.

11 / WHAT I LEARNED

Sometimes CRO isn’t about making one button perform better.

This started as a homepage redesign and got much more interesting once I asked, “Why is this person here in the first place?” The same person might want a screaming deal when they know the fragrance, and a little guidance when they don’t.

So the question I’d really want to test is: when does a shopper need each one?

Open original ↗