BIBLE ART FOR YOU · E-COMMERCE UX

I cut the purchase path

from 7 steps to 4

I redesigned the mobile shopping and checkout experience for an independent e-commerce brand, removing friction between product discovery and purchase.

ROLE:

Product Designer

SCOPE:

Research · E-commerce UX · Mobile · Checkout

BIBLE ART FOR YOU · E-COMMERCE UX

I cut the purchase path from 7 steps to 4

I redesigned the mobile shopping and checkout experience for an independent e-commerce brand, removing friction between product discovery and purchase.

ROLE:

Product Designer

SCOPE:

Research · E-commerce UX · Mobile · Checkout

BIBLE ART FOR YOU · E-COMMERCE UX

I cut the purchase path from 7 steps to 4

I redesigned the mobile shopping and checkout experience for an independent e-commerce brand, removing friction between product discovery and purchase.

ROLE:

Product Designer

SCOPE:

Research · E-commerce UX · Mobile · Checkout

01. Where the money was leaking

Mobile carried the traffic.
Desktop carried the sales.

0%

0%

of sessions on mobile

0%

0%

of sessions on mobile

0X

0X

desktop converted at roughly twice the mobile rate

0X

0X

desktop converted at roughly twice the mobile rate

0%

0%

of mobile sessions ended on a collection page — no product view, no cart

0%

0%

of mobile sessions ended on a collection page — no product view, no cart

02. The problem I chose to solve

High-intent pages had no direct path to purchase.

01 — Purchase intent happened early

01 — Purchase intent happened early

Users were evaluating artwork from mobile collection/product pages.

02 — Purchase actions happened late

02 — Purchase actions happened late

The purchasing path required users to navigate away from the decision point.

03 — Mobile introduced more friction

03 — Mobile introduced more friction

The experience required repeated page transitions before checkout.

03. What the old screens made people do

Before

Best Seller grid

Collection

• Cards were purely navigational — no way to add, no way to compare
• Price sat below the fold of each card; savings weren't visible while scanning
• The floating promo widget covered the third product's title

Before

Where every purchase was forced

Product

• Title and price appeared below a full-height gallery plus a thumbnail rail
• The promo widget sat directly on top of the product name
• Add to cart required a second scroll after the details accordions

Design principle

Let people act where they decide — not one screen later.

Let people act where they decide — not one screen later.

Every change below was tested against a single question: does this shorten the distance between wanting a print and owning one? Anything that didn't, I left alone.

Every change below was tested against a single question: does this shorten the distance between wanting a print and owning one? Anything that didn't, I left alone.

04. The change

Before

Browse only

After

Browse and buy

  1. Quick-add on every card

  1. Quick-add on every card

  1. Quick-add on every card

A persistent add-to-cart button sits on each product image. Returning customers — who already know the print they want — never have to open a product page.

Why this first: It removes three of the seven steps in a single change.

  1. Removed the floating promo widget

  1. Removed the floating promo widget

  1. Removed the floating promo widget

The gift widget generated almost no engagement and covered titles, prices, and the add-to-cart zone. I cut it and moved the offer into the announcement bar and cart drawer, where it's read at a decision point.

Why this matters: The highest-value pixels on a phone were being rented out for free.

  1. Moved price and savings into the card

  1. Moved price and savings into the card

  1. Moved price and savings into the card

Sale price, original price, filter and sort now live in the grid. The comparison happens while scanning, so the tap that follows is a purchase intent — not a research trip.

Why this matters: fewer product-page visits, but more of them convert.

05. The path now

Seven steps became four.

The product page still exists for shoppers who want detail — it just stopped being a toll booth. Express checkout closes the loop for one-item orders, which is most of them.

The product page still exists for shoppers who want detail — it just stopped being a toll booth. Express checkout closes the loop for one-item orders, which is most of them.

Step 01

Land

Hero reads clearly on a phone; collections start immediately below.

Step 02

Browse and add

Price, savings and add-to-cart all live in the card. No page change required.

Step 03

Review

Cart opens in place with a pinned checkout button showing the total.

Step 04

Pay

Express wallets sit above the form so returning buyers skip typing entirely.

06. Results

Seven steps became four.

The product page still exists for shoppers who want detail — it just stopped being a toll booth. Express checkout closes the loop for one-item orders, which is most of them.

The product page still exists for shoppers who want detail — it just stopped being a toll booth. Express checkout closes the loop for one-item orders, which is most of them.

Metric

Metric

Before

Before

After

After

Change

Change

Mobile conversion rate

Mobile conversion rate

1.5%

1.5%

2.2%

2.2%

+0.7pp

+0.7pp

Cart abandonment (mobile)

Cart abandonment (mobile)

12%

12%

5%

5%

−7pp

−7pp

Median time to purchase

Median time to purchase

100%

100%

74%

74%

−26%

−26%

Mobile sessions

Mobile sessions

Baseline

Baseline

+14%

+14%

+14%

+14%

07.What I took from it

  1. Find the one step, then defend it

The first audit produced eleven issues. Shipping all eleven would have made the result unreadable. Picking one — distance to cart — meant I could tie every decision and every metric back to the same line.

The first audit produced eleven issues. Shipping all eleven would have made the result unreadable. Picking one — distance to cart — meant I could tie every decision and every metric back to the same line.

  1. Small changes, measured, beat redesigns

No rebuild, no new theme, no new photography. A button on a card and one deleted widget moved conversion 47%, relative. The constraint was the point.

No rebuild, no new theme, no new photography. A button on a card and one deleted widget moved conversion 47%, relative. The constraint was the point.

  1. Honest numbers are more persuasive

This wasn't a controlled test, and saying so up front makes the rest credible. I'd rather show a directional result I can defend than a clean number I can't.

This wasn't a controlled test, and saying so up front makes the rest credible. I'd rather show a directional result I can defend than a clean number I can't.

08.Where I'd take it next

Three AI additions — and the guardrail each one needs

Concepts, not shipped work. Framed using the design patterns from UI/UX Design for AI Products (Stanford Online, certificate). Each is deliberately scoped to the same problem: shortening the path to cart without taking control away from the shopper.

Cart-level "completes the set"

Recommend the second print at the cart drawer, where the shopper has already committed and a second item is a small decision. Ranked on co-purchase, not on browse history.

Guardrail

State the reason inline ("often bought with this nursery set") so the suggestion is auditable, and cap it at two so the cart doesn't become a feed.

Semantic search for how people actually ask

Shoppers search for "verse for a scared kid," not "Psalm 56:3." Embedding-based search would match intent rather than keywords, turning a zero-result page into a collection grid where quick-add already works.

Guardrail

Always show the interpreted query ("showing prints about fear and comfort") with a one-tap way to fall back to literal search.

Assisted gift finder

Three questions — age, occasion, room — returning a small curated grid. A conversational entry point for the 40% of orders that are gifts and start with no product in mind.

Guardrail

Design the empty and wrong states first. Every result set needs a visible "none of these" path back to normal browsing.

Three AI additions — and the guardrail each one needs

Concepts, not shipped work. Framed using the design patterns from UI/UX Design for AI Products (Stanford Online, certificate). Each is deliberately scoped to the same problem: shortening the path to cart without taking control away from the shopper.

Semantic search for how people actually ask

Shoppers search for "verse for a scared kid," not "Psalm 56:3." Embedding-based search would match intent rather than keywords, turning a zero-result page into a collection grid where quick-add already works.

Guardrail

Always show the interpreted query ("showing prints about fear and comfort") with a one-tap way to fall back to literal search.

Cart-level "completes the set"

Recommend the second print at the cart drawer, where the shopper has already committed and a second item is a small decision. Ranked on co-purchase, not on browse history.

Guardrail

State the reason inline ("often bought with this nursery set") so the suggestion is auditable, and cap it at two so the cart doesn't become a feed.

Assisted gift finder

Three questions — age, occasion, room — returning a small curated grid. A conversational entry point for the 40% of orders that are gifts and start with no product in mind.

Guardrail

Design the empty and wrong states first. Every result set needs a visible "none of these" path back to normal browsing.

Next case study

Designing game-based learning for kids with short attention spans

View Case Study

View Case Study