Website Redesign:
Zara.com
Details:
Role: UX/UI Designer, Interviewer, Researcher
Duration: 2 weeks
Team Style: team of five
Tools: Adobe XD, Miro, InVision, GitHub, HTML, CSS, JavaScript
Project Overview:
Although online shopping is convenient and fast, sometimes the expectation of an item online fails to meet the reality of the item when delivered in-person.
From the runway to your closet with a click of a button, we redesigned the Zara.com to help customers have a personalized shopping experience.
Research
The Problem: As a Zara customer, I experienced difficulties using Zara.com first-hand. However, I didn’t realize that my struggles were more than a personal problem until I read similar comments on Tik Tok. The most common issues mentioned were the lack of reviews, unrealistic images and disorganized layout.
The Goal: We believe that balancing aesthetics and practicality of the website would provide online-shoppers a convenient shopping experience. How might we restructure the navigation and add product features in a way that makes Zara customers feel confident in their online purchases?
The Interviews: We conducted four user interviews to better understand customer pain points. Our questions focused on the online shopping experience as well as online shopping features and filters.
The Insights: Our Interviewees shared three common desires when it came to online shopping: a review section, realistic images, and a convenient shopping process. Reviews and realistic product images build trust in the item purchased, while being able to find items and purchase them with ease increases customer loyalty.
User Persona
Storyboard
Definition & Ideation
User Insight Statement: Kyra, a social media manager, depends on detailed reviews and realistic images when shopping online, because of how her expectation of the item differs from the reality of the quality/fit of the items received.
Feature Prioritization: Based on our interviews and analysis, we decided to focus on the homepage and product page, which includes a review section. We determined that updating those pages would have the highest impact on Zara customers.
Low-Fidelity Wireframes
Each member of the group put forth ideas into digital wireframes informed by research and inspiration. In true Frankenstein manner, we fashioned the final wireframe from the best aspects of our respective designs.
Aesthetics & Style
Design Vision:
Sleek and minimalistic while still keeping a high fashion aesthetic. We didn’t want to change the tone of the site, rather we wanted to elevate the overall design. One piece of feedback that we kept hearing was that the design of the current Zara website was overwhelming, so our group strived to incorporate a minimalistic design that would simultaneously delight and calm Zara shoppers.
Color Palette:
Earth toned neutrals instead of Zara’s original black, white and red. We made this change because the contrast is easier on the eye and a neutral background acts as a blank canvas for any kind of clothing or collection. Color psychology also influenced our palette, as brown is associated with sincerity and trust and orange gives off an energetic and engaging feel that matches Zara’s trend setting reputation.
Typography & Buttons:
We decided to add an element of contrast to our design by choosing a serif header, FreightBig Pro and a sans serif body, Lato. Our icons are minimalistic to match the overall aesthetic, and they are in the darkest color in our palette so that they catch the eye. We also strategically and minimally used the orange in our design so that the pop of color draws in customers.
UI Style Guide
User Testing
User Interviews:
We tested 3 people to see if we achieved our core redesign objectives and met user expectations when it comes to product transparency. We also wanted to check if the redesign introduced users to features that make the online shopping experience easier.
Key Insights:
Overall, we received a warm reception to our pages. The users felt like the website was fresh, honest and easy on the eyes. We did receive some feedback regarding the responsiveness of our design, so we made sure to adjust our code so that the design would match across a variety of screen sizes and devices.
Final Deliverables
Homescreen:
Right away you can see the introduction of the newest Zara collection. Keeping up to date with the seasonal collections and trends was important for our users to clearly see. Zara’s original navigation was difficult to sort through, so we simplified our menu items with dropdown content triggered by a hover. One user insight we received was that “the bigger the discount the bigger the high.” We took this feedback and made discounts a small but powerful section of the homepage.
Product Page:
We wanted to show all of the product images, details, and CTA buttons above the fold to minimize the amount of scrolling for the user. We utilized the orange color in our palette to encourage users to add an item to cart or favorite it for a later date. We also emphasized that items are securely purchased, delivered for free and easily returned.
Reviews Section:
We provided information about customers physical measurements and realistic product images. Reviews can be organized by height, weight, size and age, as well as by highest or lowest rating. Based on user testing, the reviews portion of our redesign was the most valuable feature.
In the Future
As far as next steps, we would like to explore the following features:
Create a browsing page to give users more variety
Implement a paperless return system
Emphasize more on the checkout process
Develop a virtual mirror to “try on” clothes online