ZARA
Web and Mobile Interface Design
Project Overview
This project aims to redesign Zara’s website to improve accessibility, navigation, and user experience. As a loyal customer, I've identified issues such as complex navigation and unclear design that disrupt the shopping process. The goal is to create a seamless, enjoyable experience for all users.
Goal
To create a user friendly redesgin of parts of Zara's app that improves accessibility, simplifies navigation, and enchances the overall shopping experience.
Design Analysis
Home Screen
Text legibility is poor due to low contrast with the background.
The text is barely visible due to its excessively small font size and thin font style, which disregard the fundamental principles of readability and accessibility.
Lack of Visual Hierarchy Caused by Overlapping Text and Image.
The logo is overlapping with the background image, affecting the clarity and balance of the design.
Navigation Screen
Violation of the Fitts' Law
The main navigation menu disregards The Fitts' Law, making it difficult for users to navigate through the list of categories effectively.
Text legibility is poor due to low contrast with the background.
The top right navigation is barely visible due to its excessively small font size and thin font style, which disregard the fundamental principles of readability and accessibility.
Browse Screen
Text legibility is poor due to low contrast with the background.
The text is barely visible due to its excessively small font size and thin font style, which disregard the fundamental principles of readability and accessibility.
Lack of Visual Hierarchy Caused by Overlapping Text and Image.
The filter navigation under the Logo is overlapping with the background image, affecting the clarity and balance of the design.
Product Screen
Lack of Content Hierarchy and Layout.
The text structure lacks a clear visual hierarchy, as all the text uses the same or similar font size and style, making it difficult to prioritize and distinguish key information.
Overuse of White Space.
While white space is an important design element, the large gap between the logo and the content creates a disjointed feel, disrupting the overall flow of the page.
My prototype
Learnings
Through this redesign project, I gained proficiency in Figma and learned the importance of time management, realizing how much effort and planning a project of this scope requires. I also deepened my understanding of color contrast, recognizing its role in ensuring readability and accessibility. These insights have shaped my design approach and will inform my workflow in future projects.
