REDESIGNED LANDING PAGE

The Story

I had Zara in mind while I was seeking for branded clothing, so I considered purchasing clothing from Zara. Since there was no store nearby, I considered ordering online, which is where the concept for the redesign originated due to their lack of usability on their website.

The Goal

The main goal of the project is to improve the current usability of the official landing page of Zara.

The Process

Since this is only a small redesign, the method I often utilize is the DESIGN THINKING PROCESS. I started by evaluating the landing page's usability using heuristics evaluation. The ten principles can both be used to assess an existing design and be taken into consideration while creating a brand-new design.

  1. Usability Heurstics Evaluation
  2. UX Fundamentals & Principles
  3. Wireframe
  4. High Fidelity Designs

The Problems

The website Zara is currently using is shown in the screenshots below, and the main issues that I have noticed while evaluating the landing page are

ITERATED WIREFRAMES

After analyzing and understanding the problems with the current website, and after multiple iterations based on preexisting mental models, I started sketching and wireframing and the reason behind the iteration are based on the UX principles and business metrics etc..

The Solution

The Why Behind The Solution

  1. By implementing a suitable layout for easy navigation and scannability, the navigation issue has been resolved.
  2. Changes in font style, font weight, and color contrast according to WCAG standards
  3. included a CTA to direct users to a specific task and enhance the company's conversion rates.
  4. The core role of a website is to provide users with information about the products or services that a company offers, so I included the key sections up front with images and buttons. Users will be able to obtain what they were looking for, and conversion rates will rise as a result.

The Why Behind The Solution

  1. Instead of the hamburger menu, I added a drop-down menu by breaking down the complex list into smaller lists by categorizing them to decrease cognitive load. The reason for providing this solution is based on a law called Hick's Law .
  2. Black backdrop was used so that users may concentrate on the task rather than glancing elsewhere.
  3. A clear hovering state so users get visibility of system status

Mockups

THANK YOU FOR READING

SAURAV SURENDRAN