Hello there, welcome to this project’s Case Study! In this opportunity, I am going to tell you about an awesome time where my team and I decided to redesign Zara’s Website.
After completing my training on General Assembly as a UX/UI Designer, I wanted to further develop my skills and did so by getting together with ex-colleagues from the course to address the struggles users were experiencing on Zara’s Website. In a group of 3, for 3 weeks, we wanted to:
- Research in-depth what the users were struggling with,
- Redesign the Website’s interface and information architecture and
- Build a clickable Prototype, desktop-first approach.
Tasks I took care of
- Conducted Competitive and User Research.
- Synthesised data into concrete insights.
- Improved Visual Identity and User Interface to accommodate ease of use.
- Designed and iterated Wireframes and Prototypes.
The software I used
- Figma and Adobe Photoshop, for UX and UI design.
- Miro and Zoom, to collaboratively communicate.
- Google Suite, to research and manage information.
- Keynote, to present our work.
The design process
To start the project on a logical framework while maintaining the user's needs in our minds, we applied the Double Diamond structure, which is a framework that segments the design process into 4 stages: discover, define, develop and deliver.
Discovering what’s going on out there, and how the users feel
Zara competitor's Websites succeed because of their easy navigation
We compared the most relevant features for online retailers of 5 different competitors’ websites (direct and indirect) to Zara’s and found that:
- All competitors have easy and powerful navigation, with in-depth filters.
- Zara sets itself apart as none of them has a luxury aesthetic for a fast-fashion company.
We realized that there was a gap that had to be filled; Zara had to improve it’s poor navigation while maintaining its visual identity.
Users get frustrated because the Website doesn’t help them to find what they are looking for
We then had to get to know its users and their pain points; we created a Survey on Google Forms and distributed it online to gather quantitative research to have a preliminary perception of them and to recruit candidates to interview. From the 46 responses, we contacted 12 to interview.
Before we could synthesise the information, the website was updated to an even more difficult one to use; therefore, I decided to conduct 3 Usability Testing on the new website, to properly understand the situation.
After we concluded the User Research with the Usability Testings, we applied a technique called Affinity Mapping, to synthesise the information gathered, understanding that:
- Most users won’t buy from the website because it's hard to find products.
- Most users think that Zara focuses on aesthetics over ease of use.
- Users find the text-size and certain elements very small, the imagery too big and are frustrated by the lack of in-depth filters.
- Users want new features that add functionality to the website (i.e. Wishlist).
Defining the user’s problem
Who is our “user”? Well, meet Casey!
With the User Research insights gathered, we decided to represent them into a fictional character, a Persona, Casey, as we needed to have a common denominator to keep in mind during the process and to validate if the decisions that we were taking were aligned to most of the users’ goals.
The problem begins when Casey has to look up items
We represented on an Experience Map Casey’s (that is, most users) journey, actions and emotional state to determine where she struggles when using Zara’s Website: in this hypothetical situation, you can see the emotional decline starts to happen as soon as Casey begins to navigate through the website, because of missing elements and its overall complexity.
Casey’s Problem Statement
We decided to frame the previously described situation into a Problem Statement, so it would be easier to refer back to “the problem”, and it is:
Casey needs a better way to make an online purchase through the Zara website because she’s currently struggling to find specific products that she likes.
Putting our ideas on paper, we defined the concepts that would help Casey
Trying to address her problem, we applied a technique called How Might We, where we flipped the challenge of the problem into possibilities to design. After crafting multiple ones, we decided to focus on:
How Might We allow users to more easily navigate the Zara website and purchase their desired products?
We took this question and put our ideas as to how to solve it on paper, uploading them on Miro, to then vote on the best ideas (Design Studio), running two sessions, focusing on the Home Page and Product List Page since these are the ones that the users started to struggle with:
After the sessions ended, we consolidated the features that we were going to implement on the website, by prioritizing those that were ideal or essential for the users. They were:
- Implementation of a grid system for the main pages, to showcase featured content (e.g. Sales).
- In-depth filtering system on the side with added new categories (i.e. shop by Occasion).
- Inclusion of a wishlist and an icon on the product cards to add them to the wishlist.
We updated the Website’s structured to match with what users want: ease of use
We added (the Wishlist Page) and rearranged the necessary pages of Zara’s existing Site Map, to make for a less cluttered Global Navigation:
Afterwards, we represented Casey’s User Flow through the new website, as we needed to know all the different screens that she had to see in order to accomplish her goal, that is (aligning with most users) buying a clothing item (and we decided for it to be an occasion dress):
Developing the new Website
Having understood the pages that we needed to design, we quickly sketched the Home Page and Product (Dresses) List Page on paper to start refining the organization of features.
While designing the Website, users found the experience to be complex and aesthetically disjointed
We took our sketches and made them up digitally, creating Wireframes, and after having the needed screens, we assembled a Prototype, which was continuously tested and then iterated to higher fidelity: from Low to Mid to High fidelity. Ending up with 3 rounds of Usability Testing, performed by 6 participants in each case.
This iterative process helped us understand the users' mental models and what they were specifically struggling with, as well as what they liked. Below you will some of the main findings (left), and the iterated version designed to resolve those issues (right):
While designing and iterating, I was in charge of the layout, spacing and sizing of elements, typography and keeping Zara’s minimalist, with a touch of luxury, aesthetics.
Afterwards, we designed Responsive Design screens of the Home Page, to see if what we were designing was flexible enough to adapt to smaller screens, we found that the design felt indeed fluid! Below you will see the mockups I created:
Delivering the improved Zara Website
After implementing the necessary changes, I decided to assemble the final Prototype to showcase these iterations, and here are some of the screens we came up with:
If you want to experience the prototype, I’ve put the link right below, but just before you jump on it, here is the Scenario we crafted to put ourselves into Casey's shoes: Casey wants to buy an occasion dress for a friend’s virtual birthday party using a new payment card.
Finally, we can say that we did it! We did it, Joe! Okay, jokes asides, we ended up crafting a beautiful interface that carries on what made its predecessor formidable, aesthetics, but enhanced its ease of use, aligning functionality to users’ mental models to ultimately deliver the Zara experience that users would feel attracted to and wanting to come back to.
What’s next for this project?
If we were to continue working on this project, we would like to:
- Conduct more Design Studios to develop screens for the rest of the pages.
- Continue test and iterate accordingly to enhance the experience.
- Explore feasibility of features that support user’s trust and decision making when buying items (i.e. customers wearing the clothes).
Was the feedback good?
It was just great! After many midnight iterations, and a change of interface (due to the website’s unexpected update during this project), users liked how we managed to retain Zara’s minimalistic/luxury aesthetic while also making it really easy to use and navigate, even compared to the competitors (a.k.a. Asos).
The wonderful lesson I’m taking from this project
One interesting thing I am going to remember is that you need to know your audience, more specifically, the context from where they might speak and react to, for example, some users didn't understand the Occasion Dresses filter, because they come from a country where that would just be too general for a category.
Thank you for taking the time to go on this little journey of mine!