Case Study: Redesigning the Zara app as stunning as their outfits
Overview
In the age of new media, digital content creators have been increasingly influencing the beauty and fashion space. Hundreds of Youtube and Instagram posts unravelled my love for classy and fashionable clothes, and when it comes to fashionable outfits, Zara had to be on my list. I tried to use their app to shop. However, despite using the app religiously, I had trouble navigating through it.
Zara happens to be one of those apps that I as a user could not connect to. To buy online, I am always looking for some sort of immersive experience to feel confident about my choice before placing the order. The experience with Zara felt distant and made me unsure of my decision to make a purchase. After observing that other people also experienced issues with the app, I pursued this redesign as an opportunity to improve the experience in any way I could.
Through usability testing, I discovered that many users struggled with navigation within the app and even some basic features like editing the bag. Based on my research findings, I designed some solutions and validated them further with additional usability tests.
Disclaimer: I am not affiliated with Zara in any capacity and the views catered for this case study are strictly my own.
Personal Objectives
I had two main motives for this case study:
- Facilitate a better user experience for Zara’s app by improving its UI.
- Take full ownership of the various roles involved in designing a product such as a User Researcher, User Experience Designer, Product Designer.
Research
Guerilla Usability Testing
To test the app’s user experience, I surveyed people in the Zara store and asked them to perform a few predefined tasks in the Zara app as I recorded their actions and took notes. Some of the tasks/questions were:
- Save a product you like but don’t want to buy right away.
2. Try to add any clothing to your bag and after that change the size of the product in the bag.
3. After adding 2 items to your bag, try to remove one.
4. Navigate to the wish list.
5. Logout of the app and log in again.
This is what users had to say during the usability tests:
“I know it is on here…not sure where”
“Uhh…don’t know”
“How do I go back?”
“I don't remember my password”
User Survey
I carried out a user survey; to help me with user empathy. I set myself a goal before doing the interviews; to get an understanding of how users feel about the app and get an idea of how we can improve it for them.
Below are some of the main findings of the survey.
During surveys, I tried framing my questions as open-ended as possible and let interviewees openly express what they felt about the current Zara app.
Play Store and App Store Reviews
To get more depth in the study of what the app is lacking. I also got through the user reviews on the Google Play Store and the App Store. Given below is the result. Here are some of the most common challenges faced by the users.
Define & Analyse
Affinity Map
From All the data collected through user interviews, Play store and App Store reviews, and usability testing, I laid out the problems and pain points. I then used affinity mapping to organise and group these pain points into categories.
2x2 Matrix
Another tool I utilized was 2x2 matrices. They help designers better understand the relationships between two things on a spectrum.
I used it in my research findings to map issues important to Zara’s customers versus Zara’s business, Assuming that the main business goal for the app is to drive up business on the app. It also helped me prioritize which issues to tackle first.
Identifying the Problem
The following issues stood out the most:
- 5 out of 6 users had a problem navigating through the app.
- 4 out of 6 users did not remember their credentials.
- All the users wanted to have a “sort by” feature.
- 6 out of 6 users had difficulty editing the quantity and size in the cart.
- 3 out of 6 users wanted the “save for later”/ wish list option directly on the listed products page.
The persona of a typical Zara user
I created a user persona to put a face on Zara’s target user and visualize various aspects of their behaviour, core needs and frustrations. This persona was roughly based on the users interviewed during the usability testing.
Competitor Analysis
Before moving into developing sketches and wireframing of the design, I wanted to do some competitor research to identify some of Zara’s competitors, see what they do well, don’t do well, and use it to influence my design decisions.
Understanding the Business
I also wanted to better understand Zara’s brand so that I can create something that bridges the gap between Zara’s business with its target audience.
The first Zara store in 1975 in central A Coruña, Galicia, Spain.
Zara’s Target audience is people with limited income, but they want to be interpreted as, wearing a top luxury designer brand.
From the extravagant stores to the classy models wearing fashionable clothes, Zara wants their customers to know they can look and feel like a sexy model without having to make a big hole in their pockets.
To align with their brand’s mission, Zara’s user interface should look and feel like a top luxury designer brand application.
Here are some of the things I took into consideration after the competitor analysis:
- Users prefer logging in through Google/Facebook because it is hard to remember the credentials of every other app.
- Organising the bottom navigation bar. Bringing uniformity with icons and bringing important icons within the thumb heat zone.
- Giving the option to the user to choose between ‘product’ and ‘model’.
- Some design opportunities would help Zara’s app; such as reducing the clicks that it takes to complete an action. The competitor apps do this very well; which makes it easier for users to use the app from start to finish and reduce the drop-off rate.
Ideate & Create
Lo-Fi UI Sketch
These are the initial sketches that I prepared before designing high fidelity interfaces.
Hi-Fi Mockups
Before diving directly into prototyping my design, I performed preliminary validation by walking through the Lo-Fi UI sketches with a few more online shoppers. I received some good insight and incorporated them into the final design.
Please see my proposed solutions below:
1. Login Page
The first thing I decided to revamp based on guerilla usability testing and user feedback was the login page. The current Login page does not have one tap login options through google and Facebook. Users have trouble recalling their credentials every time they try to log in. Therefore, I added the one-tap login options through Google and Facebook. I looked at the design guidelines of the platforms I used for the social media log-ins. For Facebook and Google’s sign-in features, I checked on their developer websites for the required fonts and styling guide.
2. Bottom Navigation Bar
The next thing I redesigned was the bottom navigation bar. The current bottom navigation bar has a cluttered design, with both text and icons. The Menu button has a text and no icon and it takes the user to the home screen.
I tried to establish uniformity amongst the icons with labels below them. I renamed the “Menu” to “Home” for a better understanding of the user. I also changed the wish-list icon to a heart-shaped icon that users are more familiar with.
3. Categories Page
The current UI shows all product categories as one long list without the use of any visual guides to ease the navigation process. This seems tedious for a user looking for a specific product. Hence I added images in the sub-sub categories to enhance the user experience and help users make an informed choice.
4. Product Listing Page
Here, I removed the horizontal scroll bar which created confusion among some users. I even added a sort button which was required by every user. I moved the Filter button from the top right corner to the bottom centre by using a noticeable call to action button. I also made a clear wishlist button to wishlist a product directly on this page rather than opening the product and then choosing to wishlist. Also gave an option to choose between viewing Model and Product through which users can make an informed choice regarding a product. I also added the option to view colours rather than just text saying “3 more colours”.
5. Product Page
“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”
-Jakobs Law
Focusing on the above law, I decided to change the vertical image carousel to a horizontal image carousel. Moreover, my main aim here was to reduce the number of times a user has to tap to reach the desired output. As earlier, a user has to tap add to bag and then he is shown the list of available sizes. Furthermore, to select/view the available colours, a user has to tap “3 more colours” which unnecessarily increases the number of clicks. Hence, I tried to improve the user experience by adding available colours and available sizes directly on the same page without having to click anywhere extra. The red coloured sizes clearly indicate out of stock items.
6. Bag
As every user faced a problem regarding how we cannot edit size or colours in the bag. I decided to give the user, the freedom to edit quantity/size/colours without having to tap any edit option hence reducing the number of clicks to complete the task.
Validation Testing
To validate my app, I surveyed 6 people with my prototype. This was mainly done on video calls.
I asked the same questions from my initial tests and recorded their behaviour and feedback.
Here’s what people had to say about the redesign:
“Did you make this app? This is great.”
“I like this, It is so much better.”
“The changes you made to the bag are a life savour.”
Results from validation testing:
As a result of the redesign, the success rate for tasks increased to 100%.
Now:
1. 6/6 users were able to wishlist product they liked but don’t want to buy right away.
2. 6/6 users could add any clothing to their bag and change the size later, in the bag.
3. All the users were able to add 2 items to their bag, and easily remove one later.
4. Every user was able to navigate to the wish list.
5. With the help of one tap Google and Facebook Login, every user could log in without any hassle.
Reflections on my work here
I was both excited and nervous about this project — excited because I was doing something I love and nervous because I knew this was going to be a lot of work. Despite my fear and nervousness, I knew this was the perfect opportunity for me to sharpen my design skills by making my way through the messy design process.
And the basic thing that stands true throughout is :
Users will always be the centre of every design decision ever made.
