Project Overview
Zara, an internationally known retailer specializing in fast fashion, has in incredible in-store experience that helps their sales soar. But what lacks that same attention to the customer is their online experience. Their confusing interface that deviates from industry standards leads to below average online sales when compared to similar brands.
My team and I voluntarily redesigned their website, with a focus on creating an intuitive browsing experience to increase online sales.
Our redesign led to a 68% improvement in browsing, filtering, and checking out task when compared to their original site.
Tools
MY TEAM
TIME
Figma, Miro, Maze, Trello & Google Drive
5 Team Members
4 Weeks
What I Contributed
LEADERSHIP
- Lead mobile-first design
- Taught teammates how to use Figma
- Guided team to focus on design feasibility
- Led team through ideation activities
RESEARCH
- Wrote interview questions for shoppers, users and stakeholders
- Conducted interviews for shoppers, users and stakeholders
- Surveyed shoppers on their shopping habits
- Performed heuristic evaluation, accessibility testing
- Created user persona
- Conducted card sorting
DESIGN
- Sketched design for mobile
- Designed low- to high-fidelity prototype in Figma
- Organized and maintained design system
- Set up and conducted Maze usability testing and compiled findings
- Transformed usability test findings into areas to iterate on
The Short Version:
Problem, Solution & Impact
THE PROBLEM
THE SOLUTION
Online shoppers looking for quality and affordable fast fashion clothing abandon Zara’s site due to the confusing interface that deviates from industry standards, leading to their below-average online sales.
To raise online sales from 11% to 25% by restructuring the site’s content to align with industry standards and simplifying browsing by improving IA and product filters. This solution decreases browser frustration and, ultimately, bounce rates.
THE IMPACT
Backed by Maze test results, users found my design more simple, intuitive and easy to use.
90%
91%
83%
of users stated my new Create an Account user flow was easy
of users found the Guest Check Out flow I designed intuitive
of users said the menu and filters I designed were easy to navigate
1. Research
Zara's Current Site? A Heuristic Hellscape
CONSISTENCY & STANDARDS
Users navigate Zara's homepage variations by swiping or clicking left and right instead of scrolling up and down.
FLEXIBILITY & EFFICIENCY OF USE
The automatic vertical scroll on the homepage removes the user's ability to browse the way they want.
ERROR PREVENTION
Users can type in an incorrect card number during check out, and they get an error message only when they confirm the order on a different page.
RECOGNITION RATHER THAN RECALL
With no breadcrumbs or page titles, users have no sure way of knowing what part of the site they are on.
Zara's heuristic violations are a big reason why their online experience confuses and frustrates uses, ultimately forcing them to abandon the site. Discovering Zara's heuristic violations helped me decide what to focus on in the redesign. View full heuristic evaluation here.
Accessibility Ailments
It's almost like Zara asked their users what could make their site worse. Their site should meet the WCAG 2.1 and AAA compliance without needing to alter the text size and color with the accessibility tool. Zara's site fails WCAG 2.1 and AAA compliance in a few ways:
Overlapping copy does not provide an accessible contrast ratio
Bright yellow text against a white background also fails accessibility standards
Small, thin stroke text does not meet WCAG's recommendation that body text is 16 points or above
Overlapping copy does not provide an accessible contrast ratio
Bright yellow text against a white background also fails accessibility standards
Small, thin stroke text does not meet WCAG's 16 point font recommendation
Digging Deeper With User Research
With the help of Alex, I created a survey completed by 22 people. I also tested 7 people on mobile, tablet and desktop and interviewed 6 people on their shopping habits. Here is what we found:
45%
59%
12%
Said online shopping at Zara does not fulfill their needs because of sizing and quality concerns
Feel more confident when online shopping when they can read reviews; Zara doesn't offer that feature
of users were aware of the accessibility features that make the site much easier to browse
36%
96% of users tested have browsed Zara but 36% have never purchased from their website
Leading My Group to Focus on Feasibility
With a deeper understand of Zara's problems, then came the hard part: What do we focus on in order to help Zara reach their goal of increasing online sales from 11% to 25%?
At first, my teammates wanted to focus on Zara's sustainability, which they neglect on their site. But we tabled sustainability for a later addition to Zara's redesign, as I led them to decide we didn't have enough data to support a sustainability-focused redesign.
Next, my group considered featuring more inclusive sizes and models, another one of Zara's long-term goals. Considering that inclusive sizing was a big point for the users we surveyed and interviewed, this idea was a solid suggestion.
I was the only group member on the opposing side. I thought about this redesign like a real project. If this were a real project, manufacturing larger clothing, hiring and photographing plus size models, and advertising their new inclusive sizing is a gigantic undertaking for Zara, and not feasible for a design sprint.
By arguing this point, I was able to get my teammates on my side—making our redesign focus on addressing those big usability issues—with no fights or frustration.
Hypothesis & How Might We
With a clearer idea in mind, my group and I together came up with a UX hypothesis and How Might We Statement to help guide our redesign.
Meet Angela Edwards, User Persona & Fashionista
With questions and data in mind, it was time to create our persona to dig even deeper into our users. I iterated on our initial proto-persona and created Angela, a user persona who both feels like a real person and encompasses many Zara shoppers.
Angela Edwards
26-Year-Old Publicist by Day
Social Connoisseur by Night
About
Angela loves a good social event, and loves it even more when it comes together aesthetically. As she entertains, she is willing to sacrifice comfort on decor or clothing if it enhances the vibe.
NEEDS
- An easy browsing and check out experience
- Easy-to-use filters that show accurate results
- Confidence in the quality and fit of the clothing she’s buying online
Goals
- To be perfectly dressed for every event
- To find clothes that fit her budget
- To have the convenience of online shopping and home delivery
Pain points
- There are too many clothes to look through on Zara's site
- Cannot rely on pictures alone to see the quality and fit
- Navigating Zara in general is confusing
Let's Take a 4th Wall Break
If you've made it this far, thank you so much. Grab a snack, take a drink of water because we still have a little bit to go.
If you want to dig into Definition & Ideation then Prototyping, just keep scrolling! You don't want to miss the Maze results and my incredible prototyping. But if you're like "Jeeze, Carmen, you write too much," I get it.
Choose as you wish!
KEEP READING
SKIP TO PROTOTYPE
2. Definition & Ideation
Storyboarding Our Way to Success
Angela, put off the Zara's confusing interface and unreadable copy, feels frustrated when online shopping for economical yet stylish pieces.
She decides to shop in person before getting notified that Zara hired 6 talented student designers from UT Austin's UX/UI bootcamp to revamp the site.
She gives the site 1 more try, and is pleasantly surprised to find it intuitive, easy to browse, and seems to know her style.
What's the Best-Case (User) Scenario?
I then helped create a User Scenario to continue to build empathy for our user. Viewing the scenario holistically as part of a series of decisions leading Angela and users like her to the Zara site helped remind me that what I'm building is part of a larger experience for the user.
Angela wants a new trendy, affordable outfit for her friend's party.
She gets on Zara's site to browse the latest trends, all within her budget.
She quickly finds an outfit thanks to Zara's easy browsing, and it's under budget!
Her clothes arrive in time for the party, and she feels confident and fashionable at the celebration.
Finding Features With Imaginations Ignited
I kicked off the Definition and Ideation phase with the group with I Like, I Wish, What If followed by a Feature Prioritization Matrix, then Dot Voting to decide which ideas to include without any judgement or influence from louder voices.
Improve homepage layout to decrease bounce rate
Reorganize Zara's IA and filters for improved navigation
Increase text size and remove yellow color for accessibility
Enhance product pages for a better browsing experience
Streamline checkout process to reduce cart abandonment
Align navigation to industry standards to avoid confusion
Stacking the Card Sorting in Our Favor
Zara's poor organization made it difficult find specific clothing items. During card sorting, I focused on creating tertiary navigation categories and filters curated to each category to make finding what you're looking for much easier.
What's wrong with Zara's Current IA, you ask? Well let me tell you:
Confusing and unclear category names under primary navigation
No tertiary navigation to further refine your search
Additional navigation at the top of the page that's easy to miss
More categories way at the bottom of the products page you have to inconveniently scroll to
Let's Take a Breather
Congrats! You made it through Research and Definition & Ideation with only Prototyping left. While I love all the creativity in the previous parts, I absolutely adore prototyping. As Design Lead of this project, this is my time to shine.
So if you're enthralled, read on! But if you changed your mind about all the reading since the last break, no worries. Simply skip to my clickable prototype instead.
KEEP READING
SKIP TO PROTOTYPE
3. Prototyping
Sketching: Let's Call It a Draw
With our users and features clearly defined, it was my time to shine as Design Lead. After the card sort, I completed a task flow and sitemap. Then, it was time to draw. I wanted to focus on sketching the prototype before designing in Figma. I learned that taking the time to sketch the flows made prototyping go so much easier and faster.
Julian, Casey, and I worked on drawing for mobile, tablet and desktop, and took the best from those designs to create a sort of Frankenstein's monster of a first prototype.
Here are a few of my drawing for mobile. Sorry for all the smudges; I'm a leftie.
Mid-Fi in Figma
With paper prototyping complete, it was time to turn the pictures into prototypes. With our timeline short and our anxieties increasing, we quickly moved to mid-fi prototyping, and I helped my teammates master components and variants, instance swapping, horizontal scrolls, an accordion menu, spacing guidelines and more. We made 3 user flows for 3 different devices. Check them out on mobile below.
Flow 1: Create an account
Flows 2 & 3: Add to cart & Checkout
Sticking to the Style Guide
As Lead Designer, I wanted to create a style guide and help my group stick to it. I created the spacing guidelines before prototyping and set the expectations that everyone should follow them. This saved a ton of time as the due date drew closer.
I finalized my style tile and made it easier to create a consistent design as multiple designers worked on the prototype.
A-Maze-ing Usability Tests
I wanted strong data to back up my design decisions. To do so, I used Maze, a prototype testing tool that tracks users clicks. It was really cool to be able to see what common issues users had; many would have been missed without the click tracking.
My team and I found several problem areas with my original design to be iterated on:
Create an account
Only 70% of users created an account correctly, with 20% giving up completely
Just 50% of users tested found it easy to create an account
30% of users misclicked "sign in" instead of "sign up"
That 30% that misclicked "sign in" included all of those that gave up on the task
80% were confused why they were asked for their card and shipping info
75% said they liked Zara asking what products they were interested in
cHECKOUT AS GUEST
91% of users completed the “Check Out as Guest” task
Just 9% of users tested gave up on the task completely
91% of users rated the task as "easy" or "very easy"
Users reported disliking the shipping option under each item in their cart
Users scrolled past the continue button, resulting in increased checkout time
Some features overlapped when expanded, resulting in a poor user experience
Navigate & Filter
83% of users navigated to the correct page with our reorganized IA
83% of users successfully navigated my “Sort & Filter” feature
Only 67% rated the task of finding women’s jeans as “easy”
17% of users found the task difficult to complete
The 17% that found the task difficult did not navigate to the “Sort & Filter” menu
Users reported seeing prototyping bugs on the individual product page
"This is already, like, way better than Zara."
- Taylor Wright, frequent online shopper
Iterations for Improvement
Thanks to Maze's click tracking, I knew what usability issues my prototype had and had ideas on how to address them.
Here are a few of the low to high-fidelity changes I made based on what users said and where they clicked during the Maze usability testing:
MADE THE PROFILE MORE PERCEPTIBLE
Users spent too much time on the home page searching where to create an account before clicking on the menu. One person even clicked on the shopping bag. I moved the profile icon from the menu to the header to make it easy to find.
1st Iteration
2nd Iteration
SIMPLIFIED SIGN UP AND ADDED OPTIONS
When tested, users clicked "sign in" instead of "sign up" when tasked with creating an account. I corrected this usability issue by creating more contrast in the buttons using color and microcopy. Plus, I try to sell users on the benefits of creating an account by making the copy more central to the design.
1st Iteration
2nd Iteration
CONDENSED CART VIEW FOR SIMPLICITY
When checking out as guest, users disliked the shipping options under each item in cart. What if you were ordering a ton of items? That would get unnecessarily complicated, one user pointed out. I removed the options under each item to simplify the page.
1st Iteration
2nd Iteration
Final High-Fidelity Prototype
Check out my clickable prototype in Figma! I'm really proud of how it turned out. I think my obsession with standardizing the spacing, typography and sticking to the style guide made it a beautiful and functional app.
Due to time constraints, not everything on the menu is clickable. On the menu, you can click WOMEN'S then BOTTOMS then JEANS. Other than that, play around!
Final Thoughts & Lessons Learned
This was my second time being Design Lead, and I felt much more confident in my leadership abilities. I tried to allow the other designers creative freedom while steering them to create a cohesive, precisely-designed product. I was also able to teach my teammates different functions of Figma, how to follow spacing guidelines, and the importance of components. I'm thankful I got to play this role one last time with them; it gave me the opportunity to grow as a designer and leader.
WHAT I LEARNED
When to delegate vs. when to lead. I learned to lean on my teammates when I needed help but also took the time to teach them Figma tips and tricks and creating a prototype when necessary.
The more data, the better. I loved testing users with Maze to have data to back up our user insights. Next time, I would do more testing with Maze and dabble in eye-tracking, too.
Communication and collaboration is key. Whether I had a different opinion than others or felt overwhelmed, I knew that I needed to voice those things in a healthy, productive way.
I would have started testing earlier, testing different components of my design. That way, I would have menues, buttons, product pages, and more all tried and true (a.k.a. tested and iterated).
I would test and iterate on my current prototype to make it even more human-centered.
I would create a place to view and write reviews, as many people we interviewed rely on those to ensure their clothes' quality and fit.
WHAT COMES NEXT
Last Break, Best Break
Whether you stayed with me the whole time or just viewed my prototype, I'd like to thank you for taking the time to look at my portfolio.
Impressed with my work or think I'd make a good fit for your team? Contact me! I'd love to hear about your company and the position. But if you still need more convincing, feel free to view my next project, Meals on Wheels Waco.
CONTACT ME
VIEW NEXT PROJECT
