H&M vs Zara - A Controlled Experiment
Izaz Zubayer
School of Interactive Arts & Technology
Simon Fraser University
April 17, 2023
Introduction
In this study, I am comparing Zara's website with another e-commerce website (H&M) in the fashion industry to understand the strengths, weaknesses, and opportunities for improvement in user experience (UX) and user interface (UI) design. As the online presence of a brand plays a crucial role in customer engagement, sales, and overall brand perception, it is essential to evaluate the effectiveness of e-commerce platforms and identify areas that can be optimized for better performance. I focused on several key factors that contribute to an engaging and efficient online shopping experience, including website layout, navigation, search functionality, and the overall purchasing process. By analyzing these aspects, I identified best practices and potential areas of improvement for Zara's website compared to H&M. To gain insights into user behavior and preferences, I have conducted a mixed-methods research approach, utilizing both quantitative and qualitative data, which includes conducting usability tests and gathering feedback from users through surveys and interviews, and recording the time needed to make a purchase. This report will provide actionable recommendations for Zara's website, ensuring that it offers a seamless and enjoyable online shopping experience that meets customer expectations and aligns with the brand's objectives. By understanding how Zara's website compares to H&M, I have identified opportunities for enhancement and drive growth in the increasingly competitive online retail landscape.
Goal: The study aims to assess and compare Zara's website UX/UI design satisfaction with competitors, identify strengths and weaknesses, and provide insights to improve design and user experience, ultimately driving high sales.
Study Methods
Participants: The participants in this study consist of a diverse group of 16 individuals, primarily university students, with age group ranging from 20-25, male and female, from different cultural backgrounds, who have a common interest in fashion and online shopping. All participants have at least 2 years of experience in online shopping on both desktop and mobile devices, ensuring their familiarity with navigating e-commerce platforms. Relevant attributes of the participant group include their frequency of online shopping, preferred fashion brands, and familiarity with Zara and H&M websites, as these factors may influence their perception of the user experience and design.
Hypothesis: Zara's website provides lower usability compared to H&M's website due to inferior design.
Rationale: Based on user feedback and statistical evidence, it is suggested that Zara's website may not be user-friendly or visually appealing as H&M's website. This may result in a less satisfactory user experience for visitors to Zara's website, which could negatively impact online sales and brand perception.
Null Hypothesis: There is no significant difference in usability between Zara's and H&M's websites.
Independent Variable: Layout of website (Zara / H&M).
Dependent Variables: User experience satisfaction, which includes factors such as time to find the appropriate product, ease of use, visual appeal, navigation, purchase, and overall functionality of the website.
Control Variables: The type of device (desktop or mobile) used to access the website, the browser used, network conditions, and the fixed amount of time provided for completing tasks.
Confounding Variables: Participant demographics (age, gender, shopping preferences), prior experience with Zara and H&M websites, and individual differences in online shopping habits or preferences. These variables are controlled for through random assignment, collecting pre-study demographic information, and analyzing the data accordingly.
Method: A controlled study was conducted to compare user experience satisfaction between Zara's and H&M's websites. The study was designed with a series of steps and tasks - The experiment allotted 30 minutes for each participant, dividing the time equally with 15 minutes spent on Zara's website and 15 minutes on H&M's website. The participants were tasked with browsing and making fake purchases based on their preferences within the given time frame for each website. The study employed three distinct tasks (navigate, search, and purchase) to test the effectiveness of the websites' design choices.
Participants completed a pre-study questionnaire to collect demographic information and their prior experience with Zara and H&M websites. To ensure internal validity, the study carefully controlled potential confounding variables by randomizing the order in which participants evaluated the websites and providing clear instructions for the tasks to be completed. Additionally, the study employed a within-subjects design, which involves each participant evaluating both Zara and H&M websites, thereby reducing the effects of individual differences and allowing for a more direct comparison of the user experiences. They were then provided with a list of tasks to perform on the assigned website which included browsing for specific products, navigating through various website sections, adding items to the cart, and going through the checkout process. These tasks aimed to assess the website's ease of use, visual appeal, navigation, and overall user experience satisfaction. Upon completion of the tasks, participants filled out a post-study questionnaire. The questionnaire consisted of Likert-scale questions and open-ended questions to evaluate their satisfaction with the website's user experience, design, and overall functionality. Statistical tests were conducted to compare the results and to test the null hypothesis.
Environment: The study was conducted at the WAC Bennett Library at Simon Fraser University, where a study room on the ground floor was reserved for the experiment, which is specifically designed for evaluating user experience and interface design. The environment was set up to minimize ensure consistent lighting and provide comfortable seating and workstations for participants. To control the environment and account for the control and confound variables. All participants used the same type of device (MacBook Pro 14) and the same browser (Safari) to access the websites. This controlled for any variations in website display or functionality due to different devices or browsers. Network conditions were kept consistent by providing a stable, high-speed internet (120MBps) connection for all participants. This ensured that loading times and website performance were not affected by varying network conditions. Participants were given a fixed amount of time (15 minutes) to complete the tasks on each website. This ensured that time pressure did not influence their experience or task performance.
To control for confounding variables such as participant demographics and prior experience with the websites, pre-study questionnaires were administered to collect relevant demographic information and online shopping habits. Participants were then randomly assigned to either Zara or H&M's website to minimize any potential bias. Data analysis accounted for these confounding variables by including them as covariates in the statistical models, allowing to identify and control for their potential impact on the dependent variables. By conducting the study in a controlled environment and addressing control and confounding variables, the research aimed to ensure the internal validity and reliability of the findings.
Image: Environment where the study was conducted
Data collection: The data collection process involved a combination of quantitative and qualitative methods to obtain comprehensive insights into user satisfaction and preferences.
1. Task Performance & Usability Metrics: Participants were asked to complete a series of tasks on each website, such as navigating through different sections of the site browsing for the right products, adding items to their shopping cart, and then exiting to checkout page. The time taken to complete each task was recorded. The participants were then asked to assign score to various usability aspects of the site.
2. Quantitative & Qualitative Feedback: After completing the tasks and usability questionnaires, participants were asked to rate their experiences (using a Likert Scale) and a provide open-ended feedback on their experience with each website in the post-test. This qualitative data allowed for a more in-depth understanding of users’ preferences, likes, dislikes, and suggestions for improvement.
By measuring multiple aspects of user experience and using a combination of quantitative and qualitative data collection methods, the study aimed to provide a comprehensive understanding of the strengths and weaknesses of Zara and H&M's website designs, as well as actionable insights for improvement.
Validity: In the study, several steps were taken to ensure validity and address potential concerns related to different types of validity. For face validity, I ensured that the tasks assigned to participants were appropriate and relevant to the study's objective of comparing user experience between Zara and H&M's websites.
To ensure construct validity, I carefully designed the study, focusing on variables that directly corresponded to user experience and satisfaction, such as navigation ease, visual appeal, and task completion time.
I took several measures to control for potential confounding variables and biases, ensuring a strong causal relationship between the independent and dependent variables. For instance, I randomized the order in which participants used Zara and H&M's websites to mitigate any carryover effects or learning biases, maintaining a consistent environment for all participants during the study.
Although the sample size was limited, I tried to include a diverse group of participants with varying demographics and shopping experiences to enhance the generalizability of our findings. Efficiency and study fatigue were also considered in our study design.
I limited the duration of each session to 30 minutes, with 15 minutes for each website, ensuring that participants could maintain focus and engagement throughout the study without experiencing fatigue.
To mitigate potential biases from prior memory, I made sure participants did not use both Zara and H&M websites back-to-back. By implementing a break or a buffer task between the two websites, I reduced the risk of immediate comparison or recall influencing the participants’ perception and evaluation of the second website.
Results
Descriptive Statistics: From Table 1.1 the data shows that participants took an average of 11.05 minutes to make a purchase on Zara's website and 9.66 minutes on H&M's website. This suggests that, on average, users took less time to complete a purchase on H&M's website compared to Zara's. The standard deviation for Zara (2.02) is higher than for H&M (1.45), which indicates that there is more variation in the time taken to make a purchase on Zara's website compared to H&M's. In simpler terms, the results reveal that it generally takes users longer to make a purchase on Zara's website than on H&M's website. Additionally, there is more inconsistency in the time it takes for users to complete a purchase on Zara's website, which could suggest that the user experience is more variable for Zara compared to H&M. These findings imply that H&M's website provides a more efficient and consistent user experience compared to Zara's website.
Table 1.3 > This data presents a comparison between Zara and H&M in terms of ease of use, navigation, visual appeal, and overall satisfaction as rated by the participants. Each rating ranges from 1 to 10, with higher scores indicating better performance. In simple terms, the data reveals that participants generally found H&M's website to be easier to use, more visually appealing, and provide better navigation than Zara's website. This is reflected in the higher scores for H&M across all categories. For example, participant 1 rated H&M's ease of use as 8 compared to Zara's 3, and Participant 3 rated H&M's visual appeal as 9 compared to Zara's 4. Additionally, the overall satisfaction ratings for H&M are consistently higher than those for Zara. For instance, participant 2 rated their overall satisfaction with H&M as 8, whereas they rated Zara as only 3. In summary, the data suggest that users generally had a better experience with H&M's website, as it was found to be more user-friendly, visually appealing, and easier to navigate compared to Zara's website. This is supported by the higher scores for H&M across all categories and the higher overall satisfaction ratings.
Usability Metrics: This table below displays the usability metrics for each participant on both Zara and H&M websites, including ease of use, navigation, visual appeal, and overall satisfaction. The results indicate that participants rated Zara's website poorly in comparison to H&M's website on all metrics. (1 = Poor, 10 = Excellent)
| Participant | Ease of Use (Zara) | Ease of Use (H&M) | Navigation (Zara) | Navigation (H&M) | Visual Appeal (Zara) | Visual Appeal (H&M) | Overall Satisfaction (Zara) | Overall Satisfaction (H&M) |
|---|---|---|---|---|---|---|---|---|
| 1 | 3 | 8 | 4 | 9 | 5 | 9 | 4 | 9 |
| 2 | 4 | 7 | 3 | 8 | 6 | 8 | 3 | 8 |
| 3 | 5 | 9 | 5 | 9 | 4 | 9 | 5 | 9 |
| 4 | 3 | 8 | 4 | 7 | 6 | 7 | 4 | 7 |
| 5 | 4 | 9 | 3 | 8 | 5 | 8 | 4 | 9 |
| 6 | 5 | 8 | 5 | 9 | 4 | 9 | 5 | 9 |
| 7 | 2 | 7 | 7 | 10 | 5 | 9 | 4 | 10 |
| 8 | 5 | 9 | 3 | 5 | 7 | 8 | 3 | 8 |
| 9 | 5 | 6 | 5 | 9 | 4 | 9 | 5 | 9 |
| 10 | 4 | 8 | 4 | 7 | 6 | 7 | 6 | 7 |
| 11 | 3 | 6 | 1 | 7 | 7 | 8 | 8 | 9 |
| 12 | 1 | 6 | 5 | 7 | 5 | 9 | 5 | 7 |
| 13 | 7 | 8 | 2 | 9 | 5 | 9 | 6 | 9 |
| 14 | 2 | 7 | 3 | 6 | 8 | 8 | 3 | 7 |
| 15 | 3 | 6 | 3 | 9 | 4 | 9 | 4 | 8 |
| 16 | 4 | 8 | 4 | 7 | 9 | 7 | 4 | 7 |
Usability Metrics Graph Charts
Post-test Questionnaire: The post-test questionnaire contains 10 questions, including Likert scale and multiple-choice questions to access how the users felt about the UI, and things they found easy or hard to do. The responses from 16 participants are shown in a table, favoring H&M. The Likert scale questions indicate that participants have a higher preference for H&M's website over Zara's website. The multiple-choice questions also show a clear preference for H&M in terms of search functionality, product information, and likelihood to recommend.
(1 = Poor, 5 = Excellent)
(A = H&M, B = Zara)
| Question | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 | P9 | P10 | P11 | P12 | P13 | P14 | P15 | P16 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Rate the overall design of Zara's website | 2 | 5 | 3 | 2 | 2 | 3 | 3 | 3 | 3 | 2 | 3 | 2 | 2 | 3 | 3 | 3 |
| Rate the overall design of H&M's website | 4 | 5 | 4 | 5 | 4 | 4 | 4 | 4 | 4 | 5 | 4 | 5 | 4 | 4 | 4 | 4 |
| How easy was it to navigate Zara's website? | 2 | 3 | 2 | 3 | 2 | 3 | 3 | 3 | 2 | 3 | 2 | 3 | 2 | 3 | 3 | 3 |
| How easy was it to navigate H&M's website? | 4 | 5 | 4 | 4 | 5 | 4 | 4 | 4 | 4 | 5 | 4 | 4 | 5 | 4 | 4 | 4 |
| Which website's search functionality did you prefer? | A | A | A | A | B | A | A | A | A | A | A | A | B | A | A | A |
| Rate the checkout process on Zara's website | 3 | 2 | 3 | 3 | 2 | 3 | 3 | 3 | 3 | 2 | 3 | 3 | 2 | 3 | 3 | 3 |
| Rate the checkout process on H&M's website | 4 | 5 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 5 | 4 | 4 | 4 | 4 | 4 | 4 |
| Which website provided better product information? | A | A | B | A | A | A | A | A | A | A | B | A | A | A | A | A |
| How likely are you to shop from Zara's website? | 2 | 3 | 2 | 2 | 3 | 2 | 2 | 2 | 2 | 3 | 4 | 2 | 3 | 5 | 2 | 2 |
| How likely are you to shop from H&M's website? | 4 | 5 | 4 | 4 | 4 | 4 | 4 | 4 | 4 | 5 | 4 | 4 | 4 | 4 | 4 | 4 |
User Feedback (Suggestions): In a nutshell, the user feedback suggests that Zara's website suffers from poor navigation, cluttered design, slow loading times, and confusing layout, making it difficult for users to find and compare products. On the other hand, H&M's website is praised for its easy navigation, clean design, fast loading times, and intuitive layout, providing a more user-friendly experience with efficient product filters, well-organized options, and a smooth checkout process.
| Participant | Zara Feedback | H&M Feedback |
|---|---|---|
| 1 | Difficult to navigate, cluttered design, slow loading times. | Easy to navigate, clean design, fast loading times. |
| 2 | Confusing layout, hard to find specific products, not visually appealing. | Intuitive layout, easy to find products, visually appealing. |
| 3 | Product filters not working well, too many clicks to reach desired product, poor mobile usability. | Efficient product filters, quick access to products, good mobile usability. |
| 4 | Inconsistent design elements, lack of product information, not user-friendly. | Consistent design, comprehensive product information, user-friendly. |
| 5 | Overwhelming number of options, not easy to compare products, search function not helpful. | Well-organized options, easy product comparison, helpful search function. |
| 6 | Poor image quality, cluttered product pages, slow checkout process. | High-quality images, clean product pages, fast and easy checkout process. |
| 7 | Unorganized layout, small text, hard to find categories | Easy to navigate, well-structured layout, clear categories |
| 8 | Hamburger menu difficult to use, thin fonts, unclear pricing | Intuitive menu, legible fonts, visible pricing information |
| 9 | Not structured, hard to detect buttons from the background | Organized design, clear call-to-action buttons, user-friendly |
| 10 | Poor navigation, hard to find products, cluttered design | Smooth navigation, easy product search, clean design |
| 11 | Inconsistent design elements, small texts, confusing categories | Consistent design, readable text, well-defined categories |
| 12 | Difficult to compare products, unorganized layout, thin fonts | Easy product comparison, organized layout, appropriate font size |
| 13 | Hard to detect price from background, unclear menu, cluttered design | Clear pricing information, intuitive menu, visually appealing |
| 14 | Slow loading times, unstructured layout, hard to navigate | Fast loading times, structured layout, seamless navigation |
| 15 | Unappealing visual design, hamburger menu, small texts | Visually appealing design, user-friendly menu, large text |
| 16 | Hard to find specific products, unclear pricing, not user-friendly | Easy product search, visible pricing, highly user-friendly |
Task Performance: The table below illustrates the time taken to complete tasks which denotes the difficulties encountered and the success rate of task completion for each participant on both the Zara and H&M websites. The results indicate that participants took longer to complete tasks on Zara's website, encountered more errors, and had a lower success rate compared to H&M's website.
Table 1.1: Overall Statistical Data from Task Performance & Usability Metrics
| Parameters | Stats on Zara | Stats on H&M |
|---|---|---|
| Mean | 11.05 | 9.66 |
| Standard Deviation | 2.02 | 1.45 |
| Standard Error of the mean | 0.50 | 0.36 |
| Number of Samples N | 16.00 | 16.00 |
| Degree of freedom | 15.00 |
T-Test (Type-2 Unpaired): 0.0326
As the value of p<0.05, hence Null Hypothesis is rejected.
Table 1.0: Task Performance
| Participant | Purchase Time Zara (mins) | Purchase Time H&M (mins) |
|---|---|---|
| 1 | 11.35 | 9.5 |
| 2 | 9.2 | 11.12 |
| 3 | 10.12 | 10.22 |
| 4 | 13.2 | 9.34 |
| 5 | 8.23 | 8.53 |
| 6 | 13.5 | 10.55 |
| 7 | 12.45 | 8.45 |
| 8 | 10.12 | 7.34 |
| 9 | 8.05 | 9.88 |
| 10 | 12.89 | 10.8 |
| 11 | 13.35 | 8.12 |
| 12 | 10.98 | 9.2 |
| 13 | 12.56 | 12.5 |
| 14 | 8.22 | 11.33 |
| 15 | 9.39 | 10.23 |
| 16 | 13.2 | 7.4 |
Inferential Statistics: Based on the inferential statistical analysis o Table 2, I have calculated the t-value for the comparison of Zara and H&M. The t-value, which represents the difference between the two-sample means, has been calculated using a Type-2 Unpaired t-test. With a degree of freedom of 15, the t-value obtained is significant, and the corresponding p-value is 0.0326. Since the p-value is smaller than the commonly used significance level of 0.05, we can reject the null hypothesis, which states that there is no significant difference between the means of the two groups. In this case, the results indicate that there is a statistically significant difference between the error rates of Zara and H&M, with H&M having a lower error rate than Zara.
Discussion, Conclusion & Future Work
Discussion: The results from our study, including the t-values, average times, and usability scores, indicate that Zara's website has several usability issues compared to H&M's website. These issues, such as the hamburger menu in the desktop version, thin fonts, disappearing fonts, difficulty in finding and interacting with visual elements, and non-distinct CTA buttons, are reflected in the longer time taken to make a purchase on Zara's website and lower usability scores. These findings align with the data and suggest that Zara's website could benefit from design improvements to enhance the overall user experience. Moving forward, designers should focus on addressing the identified usability issues, such as:
1. Replacing the hamburger menu with a more user-friendly navigation system in the desktop version.
2. Adjusting font sizes and weights to improve readability.
3. Ensuring fonts have sufficient contrast with the background colors.
4. Making visual elements like the search function more accessible and prominent.
5. Designing distinct and easily recognizable CTA buttons.
6. Given the data, the interpretations are reasonable and suggest that addressing these usability issues could significantly improve Zara's website performance and user satisfaction.
Conclusions: The interpretations are reasonable as the data shows that Zara's website has longer purchase times, lower usability scores, and more reported issues compared to H&M's website. This indicates that there are usability problems with Zara's website that negatively impact the overall user experience. The suggested design improvements are based on the issues identified in the data and aim to enhance the user experience on Zara's website. In conclusion, it is crucial for Zara to address the design problems identified during the evaluation process. Some of the key design implications include improving the website's navigation, enhancing the visual appeal, and optimizing the website's performance for both desktop and mobile devices.
Future Work: There may be a need for future work in this area to better understand the impact of specific design changes on user experience and to identify any additional issues that were not captured in this study. Further evaluations could include A/B testing of different design variations, in-depth qualitative interviews with users, and additional quantitative measurements such as click-through rates and bounce rates. The small sample size of the study might not be representative of the larger population, and additional demographic factors should be considered in future research. To further understand the differences between the two websites and obtain a more comprehensive understanding of the user experience, it is recommended to conduct follow-up studies with a larger and more diverse sample size. Additionally, future studies could explore specific design elements in greater detail and examine how they impact user satisfaction, engagement, and conversion rates. Employing other evaluation methods, such as eye-tracking or A/B testing, could also provide valuable insights and help identify the most effective design solutions for improving Zara's website.
Appendix
Picture 1: Use of hamburger menu, overlapping texts, and background missing search box.
Picture 2: Small texts, overlapping Zara logo, and texts, lack of icons.
Picture 3: Very small text. Chat box overlaps. Buttons have no contrast. The font is unclear.
Picture 2: H&M’s takes advantage of the screen resolution to lay out navigation options.
Picture 6: Nested navigation allows for more comprehensive and focused options.
Picture 7: H&M allows apparel preview, colors, and reviews, CTA buttons have contrast, and important messages are in red (uses color psychology).
