LensesOnline
A full UI redesign of an online contact-lens retailer — rebuilding a dated, cluttered storefront into a clean, trustworthy shopping experience across 18+ page types.
ROLE
UI/UX Designer
TIMELINE
Redesign Project
TOOLS
Figma
CLIENT
LensesOnline (NZ)
lensesonline.co.nz
19
Desktop pages
Every core shopping page
19
Mobile pages
A layout for each page
13
Components
Cards, navigation, buttons
13
Overlay screens
Login, cart slider, pop-up
2
Breakpoints
Desktop and mobile
01 / OVERVIEW
OVERVIEW
An online contact-lens shop should feel as calm and trustworthy as an optician, not like a clearance flyer.
LensesOnline is a New Zealand contact-lens retailer. The existing storefront stacked promotional strips, uneven product cards and long text lists. I redesigned the whole experience as one UI system: 19 desktop pages and 18 mobile pages, built from 13 reusable components.
01
Build trust early
Delivery, guarantee and reviews sit in the layout itself, so the shopper is reassured before they are asked for anything.
02
Make prescriptions easy
The most demanding step of buying lenses becomes a clear, guided form instead of a wall of dropdowns.
03
Speed up reorders
Accounts, subscriptions and a cart slider keep repeat purchases to a few taps.
02 / BRIEF AND ROLE
BRIEF AND ROLE
The brief: make a dated, cluttered storefront feel modern and safe to buy from, on desktop and mobile.
The brief
Redesign the LensesOnline storefront end to end, keeping the products and the shopping journey but replacing the interface and its patterns.
My role
UI/UX designer. I audited the old site, defined the page structure, designed every screen, built the component library and drew the mobile layouts.
Scope
Home, category, product, cart, checkout, account, calculator, help, blog, reviews and more: 18+ page types in Figma.
This is a design project. Screens use placeholder content where needed, and no live performance figures are claimed.
03 / THE STARTING POINT
THE STARTING POINT
The old site worked, but almost every page asked the shopper to do extra work.
BEFORE / HOME
Three stacked strips before any content
A promo bar, a header and a rating strip come before the hero, and the hero itself is a rotating slider of photos that say little about the brand.
BEFORE / PRODUCT CARDS
Uneven cards, repeated buttons
Product images come in different sizes and the same "Enter Prescription" button repeats on every card, so nothing stands out.
BEFORE / CATEGORY
A text list instead of filters
Browsing relied on a long sidebar of plain text links, with no visual way to narrow down by brand, type or price.
BEFORE / PRODUCT FORM
Six dropdowns and a quantity of 0
The prescription form opens as six "Choose Options" dropdowns with a quantity of 0 for each eye, so nothing is pre-filled.
04 / PRINCIPLES
PRINCIPLES
Four rules kept every screen consistent, from the home page to the last checkout step.
01
Trust is part of the layout
Delivery, guarantee and review signals are placed where doubt appears, not hidden in the footer.
02
Prescription first
Lenses are useless without the right prescription, so that step gets the clearest, calmest form.
03
Calm, consistent components
One button, card and nav system replaces one-off styles, so pages feel related.
04
One system, two breakpoints
Every desktop page has a mobile layout built from the same components.
05 / MOBILE EXPERIENCE
MOBILE EXPERIENCE
The same system on a phone: scroll inside the device and switch pages with the chips.
Home
The hero, brand shortcuts, featured lenses and articles stack into one thumb-friendly column.
Scroll inside the phone. The navigation stays pinned, as it would on the live site.
06 / A NEW TOOL
POWER CALCULATOR
A small tool with a real job: turning a glasses prescription into a contact-lens power estimate.
01
Two eyes, one glance
Right and left eye sit side by side with SPH, CYL and AXIS labelled, so entry mirrors a real prescription.
02
Result in the same shape
Results reuse the layout of the input in green-tinted cards, so the shopper compares like with like.
03
Honest by design
A note says the result is an estimate to confirm with an eye-care professional, and a short guide explains each term.
07 / EVERY PAGE
EVERY PAGE
19 desktop pages and 18 mobile pages, designed from the same components.
DESKTOP / 19 PAGES
Product detail
Home
Category
Account
Cart
Checkout
Contact
Power calculator
Shipping rates
Blog
Blog post
Terms and privacy
Reviews
About
Money-back guarantee
Brand not listed
Help
Help article
Subscription
MOBILE / 18 PAGES
Home
Category
Product
Cart
Checkout
Contact
Power calculator
Shipping rates
Blog
Blog post
Terms and privacy
Reviews
About
Money-back guarantee
Brand not listed
Help
Help article
Subscription
08 / OVERLAYS AND STATES
OVERLAYS AND STATES
Account, cart and newsletter moments are designed too: every state a shopper can land in.
DESKTOP LOGIN / STATES
Default
Wrong password
Email exists
Forgot password
Create account
MOBILE LOGIN / STATES
Default
Wrong password
Email exists
Forgot password
Create account
CART SLIDER AND NEWSLETTER POP-UP
Cart slider, desktop
Cart slider, mobile
Latest news bottom pop-up
09 / COMPONENTS
COMPONENTS
Thirteen reusable pieces carry every page, so a change in one place updates the whole store.
Footer, product card, button set, benefit bar, sub-page menu, category card, slider buttons, testimonial card, product-page card, cart cards, navigation (desktop and mobile) and featured lenses. Scroll the board to see them all.
10 / OUTCOMES
WHAT THIS SHOWS
A complete storefront, designed as one system instead of a set of one-off screens.
This is a design case study, not a shipped product, so there are no live conversion or traffic figures to quote. What it demonstrates is the work itself.
01
Retail UX
Trust signals, prescription entry, filters, cart and checkout designed for a shopper who is careful about what goes in their eyes.
02
Systems thinking
13 components and shared patterns drive 19 desktop and 18 mobile pages, plus login, cart and pop-up states.
03
Responsive design
Every page has a mobile layout with a pinned, compact navigation and the same components at phone scale.
04
Attention to detail
Error states, an honest calculator disclaimer, hover-ready cards and consistent spacing throughout.