Project Scope
Overview
Zara is an international fashion company focused on quality customer service and responsible fashion. Zara sells various fashion items from clothing, beauty products, to home decor for a wide demographic of women and men typically in their early twenties to late thirties.
Problem
Due to the unique layout of Zara’s checkout experience, there are some functions that are not intuitively presented to the customer, which causes several pain points.
Goal
Conceptually design and develop a smoother checkout flow that offers clear direction for customers to increase engagement and the fulfillment of purchases.
Tools Used:
Figma
Skills Used:
User research
Wireframing
Prototyping
Role
As a UX/UI Designer and Zara customer, I found an opportunity to improve the cart checkout flow by building an experience that engages customers and encourages them to fulfill purchases to completion with user-friendly navigation.
Discovery Insight
Defining the Problem
In order to validate these problems, I conducted user interviews and usability testing on the current site. Through research, I found critical barriers to the online shopping and cart checkout experience.
The user research identified these most common pain points for users:
Unclear direction when checking out. I found that users consistently struggled to move to the next step due to poor CTA placement. In addition, it was often unclear what information was required to move forward.
Inability to go back and make changes without losing information already input. When a user needed to make a change in their information, they would have to start over from the beginning which frustrated the customer.
Price change visibility was lacking. When a user chose their shipping method, viewing the changes was not intuitive as the placement of the information was obscure. This shocked users when seeing the final price, which discouraged them from fulfilling the purchase.
Why is it a Problem?
These issues can discourage future customers from continuing their shopping experience and fulfilling their purchases, which can potentially affect sales negatively and lower optimal website performance and engagement.
Solution
Re-design and develop an intuitive checkout flow using the agile method and visually prioritize important CTA buttons, hierarchy, and optimize the experience to be web accessible for the user when editing their cart or fulfilling a purchase.
Define & Understand
User Research
After gaining insight through extensive user research, I further identified potential pain points users may encounter during their cart checkout experience through user flow, user personas, and analysis of the current site’s checkout flow.
Using screenshots of the current website layout, I identified the specific areas that would cause users to stumble during the checkout process.
Zara Checkout Flow
Zara Checkout Pain Point Analysis
User Personas
I created user personas to have a better understanding of the possible customers that would interact with the Zara website. Understanding their goals and possible tendencies helped me create solutions to the current issues on the site that would be relevant and useful for potential users to accomplish their goals.
Competitive Analysis
I gathered information on Zara’s major competitors H&M and UNIQLO. This helped me identify Zara’s strengths, weaknesses, and potential opportunities I can adopt to create user-centric solutions.
Click here to view an in-depth competitive analysis.
Wireframing
I created a low-fidelity wireframe for the mobile version of Zara.com to consider the different breakpoints for responsive design that would facilitate the most optimal checkout flow experience.
Low Fidelity Wireframe
High Fidelity Wireframe
To view the UI design system, click here.
Prototype
After various tests and iterations, I created a prototype showcasing the newly designed cart checkout flow. Below is a limited prototype.
Click here to view the prototype or expand the frame below.
Retrospective Takeaway
While re-designing a specific area of an existing website’s flow has the bare bone structure already laid out, I found it essential to keep in mind that there is always room for improvement and what may be utilized in a design does not necessarily mean it works well. The best evidence to validate a design is whether the user can achieve their goal. This project expanded my understanding of designing with the user in mind while incorporating business goals.
Some major takeaways from this project are:
Integrating business & user goal: While designing the user's experience, it is also important to include business goals. For example, after researching Zara's checkout process, it was brought to my attention that the cart lacked a call-to-action if the customer’s cart was empty. In order to integrate the business goal of keeping the customer engaged, I decided to add a "You Might Also Like" section to keep the shoppers interested.
Always remember why the user is there—what is the priority goal for the user as well as the business? It was easy to create designs that distracted the user from their ultimate goal: fulfill purchase. By creating too many elements or conflicting hierarchies, the user can lose sight of what they are there for. It is necessary to keep the most important goal at any stage of checkout visible at all times, whether that is filling out a form or placing an order.
Always keep web accessibility in mind. During the design process, there were times I overlooked the text sizes or contrast of the text or icons. Keeping web accessibility in mind helps keep the design accessible for a wider range of users.