01 · Featured

eCommerce redesign · Self-initiated concept

Zara, a quieter
way to shop

Zara’s site felt like a maze. I redesigned it to feel like its stores: calm, well lit, product first.

Role

Research, IA, art direction, UI, motion

Scope

Home, category, product, basket

Methods

Heuristic analysis, user testing

Note

Concept. Not affiliated with Zara

The redesigned Zara screens arranged around a laptop
00

Motion

See it move.

The intro and a walk through the redesigned pages.

IntroWordmark, gallery light, homepage
Demo: the redesigned Zara pages shown on a monitor, tablet and phone
DemoThe redesign across devices
01

Context and challenge

Strong brand.
Tiring site.

Zara’s eCommerce is known worldwide. Its usability breaks the shopping journey.

Pain point audit of four Zara pages with red dots
Fig 1.1Red dots mark what to redesign
  1. ClutterAutoplay videos fight the product.
  2. NavigationShoppers lose their place.
  3. HierarchyBackgrounds outshine products.
  4. ToneCold, unlike the stores.

“A design should guide users, not challenge them.”

On the user journey

“When the background is more engaging than the products, the design has lost its purpose.”

On product focus

“Good design helps you find what you need. Bad design makes you question if you’re on the right page.”

On navigation

Quotes from my critique of the live site, lightly shortened.

02

Research and insights

Where shoppers got stuck.

Heuristic analysis and user testing of the digital flow.

  • “Am I on the right page?”Users lost track of where they were.
  • Heavy path to checkoutBrowsing to buying felt slow.
  • Flat product hoverLittle interaction. Low engagement.
Sitemap of the Zara homepage and Woman category
Fig 2.1Existing IA, mapped first
03

Design goals

Three principles.

01

Empathy

Simpler navigation. Less cognitive load. Supported, not overwhelmed.

02

Ethical innovation

Transparent product info. WCAG AA. Join Life eco collection made visible.

03

Systems thinking

Modular grid, consistent navigation, a system that scales across the catalog.

04

Inspiration

Bring the store’s light online.

LEDs, track light and accent spots make Zara stores feel inviting. The site had none of it.

A Zara storefront glowing at night
Fig 4.1Flagship at night
  1. Accent lightBecomes a soft hover glow.
  2. Warm and cool mixBecomes a dual-tone backdrop.
  3. Open floorBecomes generous whitespace.
Lighting concept slide with store photo and light accents
Fig 4.2From store fixtures to screen effects
05

Direction

Cool clarity, warm light.

Two mood boards. One merged system.

Mood board: minimalist and clean
Direction 1Minimal and clean. Every product the hero.
Mood board: warm, chic and dewy
Direction 2Warm, chic, dewy. Luxury with warmth.
Lighting effects and dual-tone style overview
Fig 5.1The merged system
  1. Dual toneHalf grey, half warm. Sleek and approachable.
  2. Soft spotlightEach product lit as it opens.
  3. Silver grainDepth without decoration.
06

Key solutions

Homepage. Product. Basket.

Homepage

One bold centrepiece. A fixed, high-contrast nav.

Original Zara homepage beside the redesigned homepage
Before / AfterA cluttered hero becomes one sculptural image

Category

Two columns to five. Images and prices only.

Original two-column page beside the five-column grid
Before / AfterMore product in less time. No boxy buttons.

Product

Product page for a round basket with lid
Fig 6.1Product detail
  1. Lighting effectEach product glows softly when opened.
  2. 3D hoverA slight zoom adds depth.
  3. Clear filtersSize, colour and price, easy to scan.

Basket and checkout

Basket page original vs redesign
Fig 6.2Basket, before and after
  1. Vertical dropdownEasier to read, less to process.
  2. Clear delivery and returnsFewer, transparent steps.
  3. Mobile firstLarger touch targets.
Soft spotlight on grey
SpotlightText and button hover glow
Fine silver grain texture
GrainTactile, never flat
Product page original vs redesign
ProductBefore / After
07

Screens

A gallery, screen by screen.

Homepage with oversized wordmark
LandingWordmark as architecture
Home menu with diffuser
MenuA list beside the object
Basket category grid
CategoryFive calm columns
Product detail page
ProductSimpler add to cart
Woven basket lit by spotlight
SpotlightProduct as hero
Woven bowl lit by spotlight
SpotlightSame light, new object
Striped basket lit by spotlight
SpotlightConsistent staging
08

In context

Calm on every screen.

Redesigned Zara pages arranged around a laptop on a dark ground
Fig 8.1The full system
Redesign on a desktop in a bright room
DesktopHome, in a real setting
Redesign on a laptop on a desk
LaptopThe centrepiece at home
09

Reflection and learnings

Brand and usability, in balance.

ProblemA mazeClutter, lost shoppers
InsightStores sell with lightAnd with space
DesignDual tone, spotlightFive-column grid
OutcomeProduct firstA flagship feel online

What I learned

  • BalanceeCommerce UX must serve brand and usability together.
  • Luxury is subtractionEach removal made products feel more valuable.
  • Systems lastEmpathy, ethics and scale make it future proof.

Next

  • TestThe grid and hover light with shoppers.
  • ExtendThe same language into print, case 02.