Zara Mobile Site Design
Redesigning Zara’s mobile site to improve the user experience.
Project Objective
This project aims to improve the user experience for the retail site Zara through a redesign using human-centered design principles. Using Figma I created a User Journey Map showing the customer’s thought process and experience throughout the journey and a prototype for the newly designed Zara mobile site.
The Problem
Zara was the first website I thought of when I was thinking of websites with a bad UX design and it is not very user-friendly. I was
supposed to select one specific touch point for this project and focus on that. I ran into two issues, the first was Figma, I had used
it briefly once and was struggling to get familiar with the functions of the design software. The second was how to create a journey
map, I had never done so before and there were so many different approaches to it that I was a little overwhelmed and unsure which
would best represent my project.
When I was looking at Zara’s site there were so many things I had wanted to change but I chose to
focus on the site's navigation. I also needed to create a digital customer experience journey map that showed the customer’s thought
process and experience throughout this journey.
![logo mark](/portfolio/images/zara-image/zaramobile1.png)
![logo mark](/portfolio/images/zara-image/zaramobile2.png)
I also made changes to the filter option. Initially, Zara only allowed customers to sort by color and size and you can also narrow down the tops by using a slider. I redesigned it to allow it to narrow down by trends, type, colors, sleeve length, neckline, and length as well as sorting in alphabetical order or by pricing.
![logo mark](/portfolio/images/zara-image/nav1.png)
![logo mark](/portfolio/images/zara-image/nav2.png)
![logo mark](/portfolio/images/zara-image/nav3.png)
The last change I implemented was related to the navigation bar at the top of the page. In the original, the navigation bar at the top of the page would disappear while you were shopping and in order to make it reappear you would have to scroll up. In the prototype that I created the navigation bar stays fixed, ensuring easy access to filters or to different clothing options.
![logo mark](/portfolio/images/zara-image/navpage.png)
Now onto the journey map; as stated before I had never done a journey map before so I was unsure of what it would entail. After reading This Is Service Design Doing, looking at some online sources, and previous projects I got an idea of what I wanted to do. I decided to use one of the templates in Figma and I wanted to create a persona to make the project seem more personable.
![logo mark](/portfolio/images/zara-image/userpersona.png)
I then created two journey maps to show how the user’s journey will change with the redesign in place. It also helped me to identify the pain points and points of opportunity for the site redesign. The main pain point was that it is difficult for users to navigate through the site and see everything that it had to offer.
![logo mark](/portfolio/images/zara-image/beforeuserjourney.png)
![logo mark](/portfolio/images/zara-image/afteruserjourney.png)
Results
After completing this assignment I have become more familiar with working a retail interface, things to look out for, and what to expect of them. The metrics for success would depend on how the user feels navigating through the site. I also learned about how important a customer journey is and how every step of it should be done intentionally. While this project addressed specific aspects of Zara’s site, there are still many other areas that require improvement. In the future, I aim to explore those aspects further and propose solutions to enhance the overall user experience.