ZARA NAVIGATION
REDESIGN
As an online shopper, I want to navigate through Zara's website so that I can browse and confidently make my purchase.
Objective:
Improve Zara’s primary navigation to create a seamless browsing experience, ensuring users can confidently navigate and make purchases.
How might we enhance Zara's navigation to improve users’ findability and success paths?
Key Question
Role & Tools Used:
Role:
- UX Designer
- Figma
- Salesforce Lightning Design System
- Teams
- Outlook
- Microsoft Word
- Zoom (for user interviews)
Market and Industry Research:
Competitive Analysis:
User Polls:
Site Mapping:
User Journey Mapping:
Moderated User Testing:
- Studied navigation best and worst practices, focusing on luxury e-commerce metrics that highlight the importance of intuitive navigation.
Competitive Analysis:
- Evaluated navigation structures from CHANEL, Rolex, GUCCI, Baccarat, and Zara, noting Zara’s aspiration for a luxury e-commerce experience.
User Polls:
- Investigated user preferences for hover menus vs. click-through navigation.
Site Mapping:
- Created a detailed site map of Zara’s current navigation to identify the structure of primary and secondary menus.
- Documented the current user experience from first interaction to checkout.
Moderated User Testing:
- Conducted interviews to gather insights on navigation expectations and pain points.
Research and Discovery
Designed high-fidelity mockups for the following pages:
- Introductory landing page
- Main landing page
- Product catalog pages
- Product detail pages
Prototyping
Tested users’ ability to locate specific items:
Key Findings:
Quotes:
"I wanted to get there fast."
"Does the age need to be determined here?"
"Outerwear would be a great category."
- Men's pants
- Women's coats
- Women's accessories (scarves)
- Boys’ tops
Key Findings:
- Landing Page: Users immediately focused on "Search," "Location," and "Shopping Bag."
- Filters: Filters were the most-used feature on the product catalog page.
- Categories: Confusion arose from redundant categories, such as two “Boys” menus, and unclear placement of items like "Coats."
Quotes:
"I wanted to get there fast."
"Does the age need to be determined here?"
"Outerwear would be a great category."
Usability Testing
Navigation Improvements:
Design Refinements:
Further Investigation:
Stakeholder Collaboration:
- Remove the introductory landing page to streamline the user experience.
- Consolidate the “Boys” categories into one and allow age selection within filters.
- Create a distinct "Outerwear" category or include coats within "Tops."
- Rename ambiguous products like “Scarf Coat” to improve clarity.
Design Refinements:
- Highlight active filter categories in bold.
- Consolidate product detail pages, offering multiple navigation paths.
Further Investigation:
- Metrics: Pilot test or A/B test the revised design to assess its impact on sales, customer satisfaction, and navigation efficiency.
- Sustainability Integration: Investigate why Zara's “Join Life” sustainability initiative is underemphasized and propose design solutions to increase visibility.
- Brand Hierarchy Analysis: Evaluate the prioritization of Massimo Dutti and Zara Home in navigation, ensuring alignment with Zara’s brand identity and user needs.
Stakeholder Collaboration:
- Understand constraints and stakeholder requirements to align designs with business goals.
Recommendations &
Next Steps
Next Steps
