ZARA REDESGIN

UX/UI DESGIN

ROLE

Visual Designer

TIMELINE

Jan 2025 - Feb 2025

PROJECT TYPE

Group

Linear Background

WHY ZARA'S SITE WAS CHOSEN

Well Known Retail Site

Known for high traffic and global reach, making usability crucial for sales.


Common Complaints
Users frequently report difficulty navigating, especially when searching for a specific items.


Balance of Aesthetics and Accessibilty

The website prioitizes visual desgin, but contrast between text and image are overlapping, making it hard to read

PROBLEMS

Overall Layout

Reorganizing the layout of the overall site into a clear and consisten layout that is easy to navigate around.

Overall Layout

Reorganizing the layout of the overall site into a clear and consisten layout that is easy to navigate around.

Accessibility

The font size is low in contrast and there are overlapping images behind text.

Accessibility

The font size is low in contrast and there are overlapping images behind text.

Category Navigation

Simplify browsing by organizing products into clear categories like Women, Men, Kid and Beauty, making it easy for users to find relevant sections.

Category Navigation

Simplify browsing by organizing products into clear categories like Women, Men, Kid and Beauty, making it easy for users to find relevant sections.

COMPETITIVE ANALYSIS - NAVIGATION

ZARA

Complicated navigation with hidden menus and redundant dropdowns, creating confusion and making it hard to locate specfic items.

ZARA

Complicated navigation with hidden menus and redundant dropdowns, creating confusion and making it hard to locate specfic items.

ARITIZA

Detailed navigation with mega menus, and strong filters.

ARITIZA

Detailed navigation with mega menus, and strong filters.

H&M

Simple, intuitve navigation with clearly labeled categories, easy to find items.

COMPETITIVE ANALYSIS - VISUAL HIERARCHY

ZARA

Poor readability due to overlapping text on images, lacks clear selection and visual emphasis on key sections.

ARITIZA

Strong visual hierarchy with bold text, clear sections and high redable fonts.

H&M

Balanced visuals and text, clear visual hierarchy guides users smoothly

DESGIN ANALYSIS

To create a user friendly redesgin of parts of Zara's app that improves accessibility, simplifies navigation, and enchances the overall shopping experience.

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.

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.

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.

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.


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.

Let’s
Collaborate

Book a call with me -

Instagram

Linkedin

Email

LINDA