UX + Frontend Case Study
Concept rebuild 2024I rebuilt Zara's storefront as a React application to fix the navigation, readability, and product-discovery problems documented across published UX reviews of zara.com.
Independent concept project for portfolio purposes. Not affiliated with or endorsed by Zara or Inditex.
Zara runs one of fashion's most recognizable online stores. Its editorial style sets the tone for the industry. The same minimalism hides the controls shoppers reach for. I rebuilt the core shopping flow to test a more usable direction while keeping a fashion-forward look.
Independent UX reviewers report the same cluster of issues. Each card below cites a named source.
The primary navigation sits behind a small hamburger icon. Reviewers describe the drop-down menu as nearly invisible.
Product copy renders in small, low-contrast type. Reviewers call the result hard to read and inaccessible.
The interface gives little signal for what responds to a tap. Hover states are absent on key elements.
The store opens on a single product with no categories in view. One reviewer compared it to starting a book from the middle.
Reviewers note missing sort options and a filter control fixed in a small, transparent spot in the corner.
Several redesign reviews flag the absence of visible customer reviews and weak supporting detail on product pages.
A React single-page application with seven routes and a shared header and footer. The build covers the full shopping path. Home, product, search, wishlist, cart, login, and signup. A purple accent replaces the original monochrome to give every action a clear, high-contrast signal.
The schematics below illustrate the structural shift. They represent layout and hierarchy, not pixel screenshots.
Hidden menu. Centered wordmark. One oversized image. Faint, low-contrast text. No visible actions.
Persistent header. Visible search, wishlist, account, cart. Category row with SALE first. Clear hero action.
The menu hides behind a faint hamburger icon.
A fixed top header keeps search, wishlist, account, and cart in view, plus a secondary category row. A slide-out drawer expands full category trees on demand.
Low-contrast text and unclear actions.
High-contrast purple primary buttons. Shop Now and Add to Cart read as buttons at a glance. Dark text on white for body copy.
Few cues for what is clickable.
Hover and focus states on links, buttons, and product cards. A visible focus ring on the menu toggle and form inputs.
The store opens with no orientation.
A full-screen hero with one headline and one action, followed by a structured flow. New Collections, Join Life, Newsletter.
Missing sort and a buried filter.
A dedicated search page with live suggestions and a filter panel. Size, color, price, sort, gender, discount, and collection.
No visible reviews on product detail.
A product page with a rating summary, a review list, and a review form with star input that posts in real time.
Each screen below describes real behavior in the code.
The header fixes to the top across every page. It holds the logo, search, wishlist, account, and cart, plus a category row with SALE in red.
The product page pairs a thumbnail gallery with a main image, color options, price with a struck-through reference price, and specs.
A dedicated search route handles the entry zara.com lacks. Typing filters a product list and surfaces live suggestions below the field.
The cart lists each item with image, price, and size. Quantity steppers and a remove control sit on every row.
The front end runs on a component architecture with deliberate calls on performance, accessibility, and responsive layout.
A shared Header and Footer wrap every route. An AuthContext provider holds login state and exposes login and logout to any component through a useAuth hook.
The landing page wraps Hero, New Collections, Join Life, and Newsletter in React.lazy and Suspense. The bundle splits, and below-the-fold sections load on demand with a fallback.
Every icon-only button carries an aria-label. Images use descriptive alt text. A visible focus ring marks the menu toggle, the newsletter field, and the login action. Controls respond to the keyboard.
Product grids step from one column to four with Tailwind breakpoints at sm, md, and lg. The product layout stacks on mobile and splits into a 40/60 column on desktop.
A portfolio piece earns trust through candor. Here is the line between built and pending.
Product data, prices, and order totals use hardcoded sample values. There is no backend or product API.
Login checks one hardcoded account and stores state in memory. The session resets on refresh. No real auth or persistence.
The filter panel renders all seven controls. The matching logic needs the product model extended with size and color fields to honor every option.
The redesign responds to documented critiques. It carries no measured usability results. The improvement claims are design intent, not tested outcomes.
Run Lighthouse for performance and accessibility, plus a WAVE or axe scan. Compare against the WebAIM average of 56 errors per page.
Run task-based sessions with five users and an SUS questionnaire against a measured zara.com baseline.
Wire a product API, persistent cart, and token-based auth to replace the sample values.
Complete the filter logic, route every nav link, and remove console output left from development.