UX/UI Case Study E-commerce Web App 4-Day Sprint Shipped to Development

Rebuilding the lens checkout, one decision at a time.

Specscart's lens selection flow asked customers to make too many choices, too early, with too little information. I redesigned it so the right options find the customer — not the other way around.

The redesigned lens checkout — frame preview shown beside a clean lens-coating step
Role
UX/UI Designer
Company
Specscart
Timeline
4 days
Platform
E-commerce · Web
Deliverables
End-to-end checkout flow
0
Incompatible selections possible. Lens options now filter by prescription — the support tickets this used to create simply can't happen.
Each lens feature stated once. Anti-glare, UV and anti-scratch were repeated inside every option card. Now they appear once per step.
1-tap
Reorder for returning customers. Previous lens preferences apply directly to a new frame.
01The Problem

Buying lenses shouldn't feel like an exam.

Choosing a frame on Specscart takes seconds. But the moment a customer hit "Add lenses," the experience changed: four dense steps, repeated technical jargon, and a prescription form saved for last — after every decision that depended on it.

The flow asked customers to answer questions before giving them the information needed to answer them.
My Role

I owned this redesign end to end. I audited the live flow, studied how competitors handle the same steps, restructured the order of decisions, and handed finished screens with interaction specs to the developers. All inside a four-day sprint.

02Context & Competitive Landscape

How do the best eyewear checkouts behave?

Before redesigning, I audited how leading eyewear retailers handle lens selection — plus lens-technology positioning from premium lens brands.

Specsavers Glasses Direct EyeBuyDirect Mister Spex Ace & Tate Varilux · lens tech Zeiss · lens tech
Pattern 1 — Prescription comes early

Best-in-class checkouts ask for the prescription first, so incompatible lens options never appear. The customer only ever sees choices that work for their eyes.

Pattern 2 — Common features stated once

Shared lens features (anti-glare, UV, anti-scratch) are surfaced once per step — not repeated inside every option card, where they read as differences instead of constants.

Specscart's flow did the opposite on both counts — which shaped the two biggest structural changes in this redesign.
03The Challenge

Five points of friction, one exhausted customer.

Walking through the live flow, five problems kept coming back, contributing to cart abandonment. Each one is small on its own. Together, they turned a purchase into a chore.

1

Prescription entered last

Every lens decision came before the one input that determines which lenses are even possible. Customers could configure combinations their prescription didn't support.

1 Lens type 2 Coating 3 Package 4 Prescription ⚠ last
Error-prone by design
2

Features repeated in every card

Anti-glare, UV and anti-scratch appeared inside each option card, forcing customers to re-read identical text to hunt for actual differences.

✓ Anti-glare
✓ Anti-UV
✓ Anti-scratch+
✓ Anti-glare
✓ Blue light filter
✓ Anti-scratch
✓ Water repel
✓ Anti-UV
✓ Anti-scratch
Cognitive overload
3

Incompatible options selectable

Nothing stopped a customer from choosing lenses that didn't fit their prescription — a manual support intervention was needed to fix each order.

Super Ultra Thin · Index 1.74 Not suitable for this Rx — still selectable
Support cost
4

Key information buried

Subtotal, dispatch time and even the selected frame name were hidden or inconsistent across steps, so customers lost track of what they were buying and for how much.

Subtotal £—Dispatch: ?
Low visibility of status
5

Repeat customers started from zero

Returning buyers — the most valuable segment — had to rebuild their entire lens configuration from scratch for every new frame, re-answering questions the system already knew the answers to.

Lens type ↺ Coating ↺ Package ↺ Prescription ↺ re-entered every order
Recall over recognition
📌 Principle — Choice overload When every option carries redundant information and arrives before context, customers don't choose better — they abandon. The redesign's core bet: fewer, smarter decisions per step beats more options per screen.
04Primary Users

Two customers, two very different checkouts.

The same flow serves a first-time buyer who needs guidance and a repeat customer who needs speed. The old design served neither well.

The first-time buyer

Young professionals & students · affordable, stylish eyewear · needs confidence
  • Doesn't know lens jargon — reads everything, trusts little
  • Fears ordering the wrong thing for their prescription
  • Needs price and dispatch visibility to commit

The repeat customer

Middle-aged & senior buyers · prescription lenses · needs a guided, fast path
  • Has ordered the same lens setup before
  • Resents re-answering questions the system already knows
  • Buys more frames when reordering is effortless
05Restructuring the Flow

Move the prescription to the front — everything else falls into place.

One structural change unlocked the whole redesign: asking for the prescription earlier means every option shown afterwards is guaranteed to be compatible.

Before Prescription last

Lens type
Single VisionVarifocals → Innovator 4D / UHDNon-Prescriptive
Lens coating
ClearDigital BlueTints: Solid / Gradient / NU PolarTransitions: Signature Gen 8 / Genius Gen S / XTRActive
Lens package
Index 1.5 – 1.74
Prescription⚠ entered after every decision

After Prescription up front

Reorder with last-order options?
Yes
1-tap add to cartprevious preferences reused
No
Lens type
Single Vision → Distance / Reading / IntermediateVarifocals → Innovator 4D / UHDNon-Prescriptive skips Rx
Prescription
Enter newUpload photoSend laterUse saved
Only compatible coatings & packages shown
Review & add to cartsubtotal + dispatch always visible
06The Solution

Five fixes, each earning its screen space.

Every change below maps directly to one of the five pain points — nothing was redesigned for redesign's sake.

The prescription step, showing four ways to add a prescription including saved prescriptions
The prescription step — four ways to add it, including saved prescriptions
Fix 01 · solves Pain 1 & 3

Prescription first, options filtered

The prescription moved from last to second. Lens options now sort and filter based on what the customer's eyes actually need — incompatible combinations never render, and the manual support intervention they used to require is gone.

Impact · zero incompatible selections
Lens package screen with shared features stated once above the option cards
Lens packages — shared features stated once, so cards only show what differs
Fix 02 · solves Pain 2

Say it once, not five times

Common lens features — anti-glare, UV, anti-scratch — are stated once per step as a baseline, so option cards only show what's different. Comparison becomes glanceable instead of a reading exercise.

Impact · fewer decisions per step
Last order panel offering a one-tap reorder of previous lens preferences
The "Last Order" panel — previous preferences applied in one tap
Fix 03 · solves Pain 5

One-tap reorder for repeat customers

Returning customers can apply their previous order's lens preferences directly to a new frame. The system remembers, so they don't have to.

Impact · repeat purchase friction removed
Persistent bar showing subtotal, dispatch time and frame name at every step
A persistent bar keeps subtotal, dispatch time and frame name always visible
Fix 04 · solves Pain 4

The order is always in sight

Subtotal, dispatch time and frame name moved to persistent, prominent positions. At any step, the customer knows exactly what they're buying, when it ships, and what it costs.

Impact · visibility of system status
Lens coating upsell screen presenting upgrades on a compatible baseline
Coating upgrades presented as clearly-labelled options on a compatible baseline
Fix 05 · structural

Upsell without the ambush

Coatings and premium packages still get their moment — but as clearly-labelled upgrades on a compatible baseline, not as jargon walls blocking the path to purchase. Business goals and decision clarity stopped competing.

Impact · ethical upsell placement
07Results

From four steps of friction to a flow that filters itself.

The redesigned checkout restructured lens selection from four steps with late prescription entry into a prescription-second flow with dynamically filtered options.

0
incompatible selections possible — compatibility errors eliminated at the structural level
common features stated once per step instead of repeated in every option card
1-tap
reorder — previous preferences apply directly to a new frame
Always
visible subtotal, dispatch time and frame name at every step
The redesigned flow was approved and handed to the development team at the end of the sprint, with interaction specs for every step.
08Learnings

What this project taught me.

This project sharpened how I balance business goals against decision fatigue. Specscart needs to upsell coatings and packages; customers need fewer, clearer choices. The answer wasn't choosing sides — it was sequencing: establish a compatible baseline first, then offer upgrades that read as genuine value instead of obstacles.

It also proved the leverage of structural fixes over cosmetic ones. The single decision to move the prescription earlier eliminated an entire error class, a support workflow, and three UI patches that would otherwise have been needed downstream.

Thanks for reading

Every decision your user doesn't
have to make is a gift.

Want the full breakdown, the Figma file, or a walkthrough of the flow logic? Let's talk.

Get in touch