Zara (Redesigned)
Revamping the popular consumer app to provide a more streamlined shopping experience.
Overview
-
​​Timeline: Fall 2022 | Responsibilities: Wireframing, UI Design, and Prototyping | Teammates: Anannya Bhagat & Sophia Cruz
​
-
Goals:
-
Simplify the shopping experience by replacing Zara’s unconventional navigation with intuitive, industry-standard UI patterns.
-
Create a cohesive browsing experience by standardizing visual elements like image sizing and menu layouts.
-
​
-
Outcome (KPIs):
-
Standardized Navigation: Successfully transitioned from confusing multi-directional swiping to a familiar side-sliding hamburger menu.
-
Visual Consistency: Restructured the product display to use uniform image sizes, eliminating visual clutter and browsing fatigue.
-
The Redesign
Proposal
With countless apps to choose from, my teammates and I landed on the Zara app after a unanimous agreement: shopping on the app was needlessly complicated and left us feeling frustrated more often than satisfied.
From its cluttered layout to its unintuitive navigation, the Zara app presented a prime opportunity for improvement. We envisioned a redesign that would not only resolve these pain points but also create a seamless, enjoyable shopping experience.
How Zara Looked Previously
Home screen
Menu
Products page
User Research
Methods Used: Quantitative Surveys and Competitive Analysis of popular consumer apps.
Why: Because Zara is a well-known app, we needed to quantify user frustration to prove that its "artistic" navigation was actively hindering the shopping process.
Key Insights:
-
Non-Standard Placement: Users found icons like the search bar and menu (placed at the bottom) confusing because they deviated from typical mobile app mental models.
-
Navigation Confusion: The home screen's multi-directional swiping lacked clear visual cues, leading to accidental clicks and user drop-off.
-
Cluttered UI: The absence of a structured menu led to scattered text and overwhelming visuals on the main landing pages
Some of the Survey Responses
User Findings
Original Home Screen - Confusing Navigation
The app's UX is not intuitive for shoppers. The home screen can be swiped in multiple directions which makes it confusing. The icons such as search bar, menu, etc. appears on the bottom of the screen, unlike any other popular consumer app.
Original Menu - Cluttered
The absence of a hamburger menu led to scattered text and overwhelming visuals, while icons like the search bar and menu were awkwardly positioned at the bottom of the screen.
Original Shopping Screen - Inconsistent Visuals
The lack of clear instructions for different shopping sections complicates the user experience. Further, the different sizes of the displayed images makes it confusing to navigate.
Original Product Screen - Limited Feedback
No clear feedback about the product listed. The different sizes aren't properly visible and the varying pictures are hard to examine.
Design Process
Ideation
Before working on the wireframes, my team and I brainstormed ideas to make the app more user friendly while continuously referring back to our research.
For the design process we decided to focus on simplifying the features of the app. We primarily focused on the home screen, the product page, and the check-out page in order to ease the shopping experience of the app.
Wireframing
I was solely responsible for redesigning the hamburger menu as well it's slide-in & out, and pop-up page. I also designed the main product's page that had all the sections listed out in a clear-cut, easy to understand fashion.
UI Design
To bring our wireframes to life, I took charge of the UI design process. Drawing inspiration from Zara’s existing branding, I curated a color palette of black, gray, and beige to maintain consistency with the brand’s aesthetic while introducing a modern and minimalistic touch.
Key design updates included:
-
Onboarding Pages: I designed sleek, welcoming onboarding pages with smooth transitions to guide new users into the app seamlessly.
-
Consistent Branding: I ensured Zara’s logo remained visible across all pages, reinforcing brand identity throughout the user journey.
-
Redesigned Navigation: I restructured the navigation page to display product images in uniform sizes, eliminating confusion and creating a cohesive browsing experience.
Redesigned Screens
-
Home Screen: The original home screen showed just one model, offering limited category context. Our redesign created a dynamic display of Zara's clothing sections, providing users quick access to their preferred areas.
-
Menu: I redesigned the cluttered original menu into a side-sliding hamburger menu, organizing options into logical drop-down categories for and visually appealing navigation.
-
Products Page: I improved product pages by adding a carousel feature for easy swiping through images, while prominently displaying key details like size, color, and price, resulting in a more browsing experience.
1. Previous home page
1.Redesigned home page
3. Previous Products Screen
2. Previous Menu
2. Redesigned Menu
3. Previous Products Page
3. Redesigned Products Page
3. Redesigned Products Page
Prototyping
I was primarily responsible for prototyping the redesigned Zara application, I focused mainly on the motion design. Unlike the original application, which made the user swipe in multiple different directions, I ensured that the user was only able to swipe up & down to avoid confusion. While the rest of the app was kept in line with the original Zara app, I maintained similar pop-up screens and transitions from one screen to the next.
Reflections & Next Steps
What I Learned:
-
The Conflict Between Art and UX: This project taught me that while "unique" design can be artistic, it should never come at the cost of usability in a high-intent environment like e-commerce.
​
-
Standardization as a Feature: I learned that by simply adhering to "Standard Mental Models" (like the hamburger menu), you can significantly reduce a user’s cognitive load.
Next Steps:
-
Checkout Optimization: While we focused on the browsing experience, the next phase would involve a deep dive into the checkout flow to reduce cart abandonment.
​
-
Accessibility Audit: Ensure the redesigned "uniform image grid" remains accessible for users with visual impairments by testing color contrast and screen-reader compatibility.
​
-
User Testing on New Navigation: Conduct moderated usability testing on the new hamburger menu to ensure the category nesting is intuitive for all shopper demographics.