Skip to main content

KPU coursework

Zara Website Redesign

A redesign of the Zara web experience focused on accessibility, intuitive navigation and a refined visual hierarchy.

Role
UI/UX Designer
Timeline
2025
Tools
Figma, Adobe Illustrator, Adobe Photoshop, AI tools
Type
KPU coursework
Open the Figma prototype(opens in a new tab)
Mid-fidelity wireframes of the redesigned Zara homepage, category, search and product pages on laptop and tablet

The problem

Users struggled with Zara’s complex navigation and an inconsistent experience across devices. The site also had accessibility hurdles, such as poor keyboard support and low contrast.

My role and constraints

I led the end-to-end redesign, applying UX laws like Hick’s and Fitts’s to simplify the interface while keeping the brand’s premium feel.

Process

Analysis of the existing site revealed the friction points: overwhelming choices and a lack of clear visual organization. Accessibility audits found contrast and navigation gaps.

From Miller’s Law for chunking information to Gestalt principles for visual hierarchy, each design decision aimed to reduce cognitive load and improve the shopping journey.

Key findings

  • Usability

    Navigation is hard on small screens

  • Usability

    Keyboard navigation is ineffective

    Selections are not properly highlighted.

  • Usability

    Search is hard to find

    It is the most effective way to navigate, but not easily visible.

  • Usability

    Weak mobile usability

    Small text and limited menu visibility.

  • Accessibility

    Low contrast

    Navigation menus are hard to see.

  • Accessibility

    Assistive tech struggles

    Screen reader support does not work well, and users cannot tab through elements effectively.

UX laws behind the decisions

  1. Hick’s Law

    Fewer choices at each step to cut decision time.

  2. Fitts’s Law

    Larger, closer targets for key actions.

  3. Miller’s Law

    Information chunked into digestible groups.

  4. Gestalt principles

    Grouping and alignment to build visual hierarchy.

Key findings: usability issues and accessibility challenges on the existing Zara site
Key findings from the usability and accessibility review.
Mid-fidelity mobile wireframes for the homepage, category, search and product pages
Mid-fidelity mobile wireframes.

The solution

A minimalist, functional redesign that prioritizes accessibility and responsiveness, with easier product discovery and a smoother checkout flow.

Mobile wireframes with product imagery for the redesigned shopping flow
The redesigned mobile shopping flow.

What I learned

Balancing a high-fashion, minimalist brand with the functional needs of a high-volume store comes down to visual hierarchy and small interactions; they are what make the experience feel premium.