Not another Zara’s Website Redesign project

Well hey, this one is on the new website!

Project Overview

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

H&M’s Website, with plenty of help (filters) for the users to find what they want. H&M is also a prime example of a direct competitor.

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.

Conducting a Usability Testing with Paola on the current Website. A Usability Testing is when you test a product with a user to find what’s working and what isn’t.

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).
Affinity Mapping is a technique used to organize ideas or insights. Here the post-its are interview insights.

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.

A Persona is a fictional character based on research that reflects different users that would use a product.

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.

An Experience Map is a visualization of an experience that a user goes through with a product to accomplish a goal.

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:

A Design Studio is a technique where each of the participants tried to come up with possible solutions for a problem, by illustrating their ideas.

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:

A Site Map is a representation of the website’s skeleton (the pages within.)

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):

The User Flow is a representation of the actions and screens that the user would take and see to accomplished a goal.

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):

Iterations on the Product List Page.
Iterations on the Checkout Payment Page.
Iterations on the Checkout Summary Page.

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:

Responsive Design on an iPad Pro 11", a MacBook Pro 16", and an iPhone 11 Max Pro.

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:

Home Page (Global Navigation open), Product List Page (Filters open), Individual Product Page, Shopping Bag Page, Checkout (Sign In / Guest) Page, Checkout Shipping Page, Checkout Payment Page and Order Confirmation Page.

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.

Link: https://bit.ly/3tJ27v6

Conclusion

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!

Hi, thanks for stopping by! I’m a 21 y.r. UX/UI Designer living in London. I’m trying to start my career to work with an amazing team and in awesome projects!