OVERVIEW
Zara is a Spanish apparel retailer that is high-end with affordable pricing. Its beautiful, edgy, and editorial looks attract millennial men and women looking for high-quality clothing. Quick to follow current fashion trends, they are a brand that is always changing and adjusting to consumer interests.
About the Project: This case study was conducted after my own research on e commerce websites and accessibility. Once I saw Zara's different and editorial style product pages and small font sizes, I wanted to investigate user perceptions and use that data for a redesign of Zara's website. Over the course of two months, I conducted heuristic testing, administered user surveys, created personas, drew wireframes, and developed an interactive prototype in Figma.
This project used: Figma, Adobe Illustrator, Adobe Photoshop
*This project is a case study
Project Outline:
•Heuristic Evaluation Spreadsheet
•Information Architecture investigation and Site Mapping
•Persona Creation
•User Surveys
•Drawing conclusions from data
•Wireframes
•Clickable Figma Prototype
•High Fidelity Mockups
•Discover pain points and common complaints of Zara users through surveys to lead to a usable and accessible redesign of Zara's website as a clickable prototype and high fidelity mockup.
•My hypothesis was that text visibility, navigation, and large imagery is hindering users' ability to complete tasks in a simple manner and may be interfering with conversion rates for Zara's site.
Heuristic Evaluation
I conducted a heuristic evaluation of Zara's website using a spreadsheet that has hundreds of questions that rate the usability of each applicable webpage as a score of +1 (meeting) 0 (neutral) and -1 (not meeting) with comments on why these were or were not meeting usability standards. For the pages of the questions I used, Zara's website was determined to have a usability score of 64%. This means that in places with low raw scores like Navigation and Information Architecture, and Page Layout & Visual Design, the usability issues are the worst. This continued to strengthen my hypotheses on the issues Zara is having with their text visibility, page layouts, and navigation.
Condensed data from the spreadsheet that only includes data from the pages used for heuristic evaluation.
Personas were created from user survey data and Facebook analytics data that targeted Zara as an interest. The age group was overwhelmingly in the 25-34 year old age group. Using this insight data, I kept my user surveys to this age group range as well as keep it exclusive to people who use the Zara website.
User surveys were sent out via Google Forms to collect quantitative and qualitative data.
The survey was 13 questions long, with opportunities to provide longer answers for users to elaborate based on previous answers and provide additional insights.
The questions focused on the usability, interface, and overall experiences users have on Zara's website.
Methodology
•10 participants were surveyed
•13 Questions in total, some were short answer and Likert scale questions were asked to get participants to share how they feel about Zara's site
• All users were within the age group of Zara's target audience, and were all Zara shoppers
•Only 20% of users were completely satisfied with Zara's features on their site
•The 80% of participants who did not answer that they were satisfied all had negative follow up comments as to why they answered "somewhat satisfied", "neither satisfied or dissatisfied", or "dissatisfied"
•4 users made comments on how the navigation was awkward or hard to use
•50% of users mentioned the font size being too small and wishing it was larger
•40% of users mentioned wishing that product images were closer together on shopping pages (less white space)
•50% of users had a negative experience when using Zara.com despite being regular users
User Quotes
• "Stop trying to be so editorial. I am not looking for a magazine experience when I'm trying to buy clothes online."
• "I find the site very awkward to navigate. The images are haphazardly placed and differ largely in size. Most of the photos are so lifestyle-focused that it is actually hard to see how the clothes fit."
• "Zara has horrible UI, it's hard to find anything you want right away."
• Users top complaints were the random white space on pages between pictures, how the editorial feeling of the site was confusing, the font size being too small or unreadable, gray font being used too much in the filter section, and general navigation issues within the site.
"I am not looking for a magazine experience when I'm trying to buy clothes online."
Based on my hypotheses and user survey data, my recommendations for Zara's website are:
• Less white space and condensed product pages so items are closer together and free of too much white space that may be considered a scroll stopper
•Reconfigure filter and navigation setup for easy readability and use
• Change font sizes to be more readable and accessible (in color as well)
•Reformat pages to be more intuitive as far as object placement
Quick wireframes were developed as the process went on to gauge how product pages and home pages should look.
Design Decisions
Homepage
•Homepage only contains one carousel of images with dot icons to change the images
• Font size is significantly larger
•Search bar is bigger and more prominent, is intended to be able to type on page before taking you to a search results page
• All icons are larger to assist view and clickability, the cart icon is 45 px to meet WCAG 2.0 guidelines for touch targets as well as the checkboxes for email subscribers
• Navigation scrolls along with user and is across the top of the screen, which is also more in line with competitor website setups, making it easier for users to learn
•Side menu slides out and is more organized by pressing the + icon
•Info page is more organized and put at the very bottom of the footer
•Main navigation states turn gray when clicked
•Homepage only contains one carousel of images with dot icons to change the images
• Font size is significantly larger
•Search bar is bigger and more prominent, is intended to be able to type on page before taking you to a search results page
• All icons are larger to assist view and clickability, the cart icon is 45 px to meet WCAG 2.0 guidelines for touch targets as well as the checkboxes for email subscribers
• Navigation scrolls along with user and is across the top of the screen, which is also more in line with competitor website setups, making it easier for users to learn
•Side menu slides out and is more organized by pressing the + icon
•Info page is more organized and put at the very bottom of the footer
•Main navigation states turn gray when clicked
Product Pages
•All product pages now contain images that are smaller, more cohesive, and show off how the clothes look instead of an editorial look with confusing images without product information
•Product descriptions are prominent and centered within the images
•Scroll to see more button was added to assist users knowledge of if there is more content to be seen within each clothing section
•Page organization is clearer when clicking into a specific product. Sizing is prominent and changes color when clicked, the size guide and find your size options are easy to find. Other information is placed under the product images
•Match With and You May Also Like sections are directly below product pages, containing centered text with prominent add to cart buttons
•The editorial looks are gone, and when pages such as “New” are displayed, they are displayed by each collection with labels and prices to maintain a cohesive look without the issues of an editorial style
•All product pages now contain images that are smaller, more cohesive, and show off how the clothes look instead of an editorial look with confusing images without product information
•Product descriptions are prominent and centered within the images
•Scroll to see more button was added to assist users knowledge of if there is more content to be seen within each clothing section
•Page organization is clearer when clicking into a specific product. Sizing is prominent and changes color when clicked, the size guide and find your size options are easy to find. Other information is placed under the product images
•Match With and You May Also Like sections are directly below product pages, containing centered text with prominent add to cart buttons
•The editorial looks are gone, and when pages such as “New” are displayed, they are displayed by each collection with labels and prices to maintain a cohesive look without the issues of an editorial style
Filters
•Filter button is now bigger and more prominent on the page
•Filters are arranged so that the sizing isn’t confusing, adding a separate shoe section to keep shoe sizes out of clothing sizing
•Checkboxes appear when a filter is clicked, and gives an option to clear or close the filter
•You can easily close filters by pressing close or clicking out of the image
•Filter button is now bigger and more prominent on the page
•Filters are arranged so that the sizing isn’t confusing, adding a separate shoe section to keep shoe sizes out of clothing sizing
•Checkboxes appear when a filter is clicked, and gives an option to clear or close the filter
•You can easily close filters by pressing close or clicking out of the image
Side Navigation
•Side navigation pops out from the left of the screen with bigger, black, readable fonts
• When something is selected it is now grayed out and underlined to aid in visibility and interactivity
•You can easily close navigation by pressing close or clicking out of the image
•Side navigation pops out from the left of the screen with bigger, black, readable fonts
• When something is selected it is now grayed out and underlined to aid in visibility and interactivity
•You can easily close navigation by pressing close or clicking out of the image
