Project Overview
Our Role as a UX Team was to assess the current state of Zara's mobile shopping app and create a new feature that aligned with both Zara's business goals and the goals of the user.
Project Type
My Roles
2.5 weeks conceptual design sprint
3 person team
User Researcher
UX Designer
Tools
Deliverables
Asana
Figma
Adobe Illustrator
Maze
C&C Analysis
High Fidelity Prototype
​
What is Zara?
Zara is one of the largest international fashion companies. They boast being customer-centric and keep their customers at the heart of their business model.
Design Process
In our project, we adopted the Double Diamond process for UX design. In the "Discover" phase, we empathized with users, understood their shopping app pain points, and defined a problem statement based on insights. Then, in the "Define, Develop, and Deliver" phase, we brainstormed and prototyped solutions, iteratively testing and refining them with user feedback. This structured approach ensured our final UX design was user-centered, effective, and aligned with our project goals, resulting in an improved and satisfying user experience.
DISCOVERY
Research and Discovery
Our journey began with deep industry research, uncovering trends like augmented reality, sustainability, and personalization. We also noticed Zara's focus on customer centricity. This set the stage for us to envision a feature that resonated with both users and Zara's ethos.
Competitive Analysis
We conducted a feature inventory analysis on competitors like MANGO, Abercrombie & Fitch, and Nordstrom. Some notable takeaways are below:
A&F Rewards
Abercrombie has a loyalty program that allows you to earn points as you shop, download the app, check in at the store, etc. This promotes gamification, customer loyalty, and a feeling of exclusivity.
Nordstrom Reviews
Nordstrom has multiple places for you to read reviews from other customers. They even include customers photos.
.jpg)
MANGO Combines Perfectly With
MANGO features a section beneath the product that gives items that you could combine to form the perfect outfit.
Based on the feature inventory findings, some feature opportunities include reviews, loyalty program, and style guides. We kept these ideas in mind as we learned more about our target user.
Understanding the User
Through eight user interviews, we gained insights into what users sought in a shopping app – style inspiration, confidence in their purchases, and seamless navigation.
DEFINE
Persona Development
With insights gained during the research phase in mind, we introduced Isabella, a 26-year-old Social Media Manager, as our target user. Isabella needed a feature that would help her find stylish outfits for work events.
Isabella Brown
"I have an influencers taste on a working girls budget"
Behaviors:
-
Looks for lower price items that feel upscale
-
Follows trends
-
Shops by specific occasion
Wants and Needs:
-
Wants style inspiration
-
Wants products that fit her personal style
-
Needs items that are versatile​
Frustrations:
-
Finding an item she likes and not knowing how to style it
-
Scrolling endlessly on shopping apps without finding what she needs
Defining the Problem
Isabella needs to feel inspired finding a new outfit that fits her personal taste so she can feel confident at her upcoming work event.
The Design Question
How might we recommend products that fit Isabella’s style so that she can easily purchase an entire outfit to wear to her upcoming work event?
DESIGN
Design Studio
We collaboratively designed the "Complete The Look" feature, strategically placing it on the product page. This seamless integration aimed to enhance the user's shopping journey.
Once the sketches were finalized, we created grayscale wireframes and then a functional 1st iteration prototype.
Final Sketches
.jpg)
Wireframes
1st Iteration Prototype
Validation Through Testing
Our first iteration faced usability testing. We gave 8 participants 2 tasks to complete to test the functionality of the feature
Takeaway
Users expressed confusion about the copy “Complete the Look”
Recommendation
Change “Complete the Look” copy to “How we Style It”
Takeaway
Users did not initially notice the new feature while completing the task
Recommendation
Add function-oriented onboarding
​
Move feature above ‘Add to Cart’
Takeaway
Users want more product options along with the different looks
Recommendation
Add shuffle button to give users more options for looks
Notable User Quotes
“Wow I didn’t realize how much this influences me on other apps”
​
“This reminds me of how magazines used to show different ways to wear an item.”
A/B Testing for Refinement
Based off user feedback, we changed the copy of the feature to “how we style it”. We added a complete the look style guide based on users initial assumptions that “complete the look” would show what is on the model in the product image. We also relocated the feature to be directly above the 'Add to Cart' line.
Feature Placement and Copy
We updated this feature in the second iteration based on feedback from our usability study. Users have the ability to shuffle more outfit options within the specific occasion. We also removed the swipe feature and added indications above the looks to discover more occasions.
Shuffle Looks Within an Occassion
In response too the usability test results, we conducted A/B testing to measure the effectiveness of our proposed changes.
Overall, the feedback gathered during the A/B testing phase was positive and confirmed that the changes made to the 2nd Iteration enhanced the user experience.
Effective Onboarding
To ensure users discovered the feature, we introduced onboarding elements on Zara's homepage and product pages.
The ‘How We Style It’ feature will be introduced to the user in 2 places:
​
1. On the home page at the very end of the image slideshow(left)
​
2. As an overlay the first time the user selects an item and navigates to a product page(below)
DEVELOP
Final Design
Next Steps
High-priority next steps included monitoring key metrics like click-through rates and multi-product purchases. We aimed to achieve a 60% click-through rate and a 25% increase in multi-product purchases within the next 3 months. Low-priority steps included exploring product reviews, loyalty programs, and optimizing navigation.
Conclusion
This UX case study encapsulates our intensive 2.5-week journey to create the "Complete The Look" feature. Our user-centric approach and iterative design process aimed to enhance the Zara shopping experience while aligning with the brand's goals.