ZARA: A STORY ABOUT THEIR ONLINE PRESENCE
Background
One of the biggest retailers in the world, Zara, which is a global fashion brand, operates both online and offline. However, its parent company Inditex experienced a considerable financial setback in 2020 as a result of the pandemic (Inditex, 2019).
It’s been years now, the company’s net sales are not that much despite being a global brand which everyone knows make one of the best premium apparels. Is it because of their not so strong online presence?
Before moving forward, let’s understand ZARA’s two biggest competitors, H&M and SHEIN.
E-Commerce net sales in 2022:
- SHEIN : $18 million (Industry Rank 1)
- H&M: $5.8 million (Industry Rank 3)
- ZARA: $5.5 million (Industry Rank 4)
As all the brand creates fast-fashion clothing and sell their products on their respective websites. Shein topped the chart in just last two years.
But Why? How?
As Shein is an online fashion retailer that operates primarily through its e-commerce website. So maybe they have better online presence which might include website engagement, social traffic etc.
Before going towards ZARA’s website engagement, I wanted to know about the psychology of making it online. So, I started scrutinizing the web and found this:
Zara’s management was initially hesitant to launch online due to concerns about being able to recreate online the store experience, which management thought was central to its value proposition. Alvarez argued:
“We needed the internet purchase path to be as comfortable as possible. You don’t want a customer to go through 20 clicks to purchase a pair of trousers.”
Here we can see, how they were so skeptical about how they would replicate their seamless in-person shopping experience to online shopping. And one thing which they want to do is, online shopping with ease & comfort (with minimum clicks and thereby getting more conversion rate). However, the question:
Is the website really that easy to use?
Before jumping to do any more research…
What’s my value as a designer if I don’t do some heuristics of my own?
Here were a few problems that I faced when I did some analysis of my own.
- Poor Usability. There were text and images all over fighting for attention.
- Confusing product images. In many product pages, I could barely figure out what they were selling.
- Checkout process could be simpler. They provided a guest checkout, however, no third-party quick sign in option given. No 1-tap payment option like Apple Pay, Klarna etc.
- Overall, it felt that the website needed some improvement.
Aesthetic Usability Effect
It refers to user’s tendency to perceive attractive products as more usable. People tend to believe that things that look better will work better — even if they aren’t actually more effective or efficient.
One of the easiest ways to make the users feel that any product or service is legit, reliable and worth the money, is to make it feel premium. So by having a website that has really good aesthetics, you can make the user feel that the product/service is premium.
Although I am not certain about the usability and user experience of their website, one aspect that stands out as premium is the selection of photographs used throughout the site.
All of them are amazing!
But let’s not talk good things about them and check back their website engagement numbers.
What is the real problem here:
The image above shows the visits over time between January 23 and March 23, and it indicates that Shein is outperforming ZARA by 2.35 times in terms of traction. H&M is also gaining ground, albeit with a small margin. However, it is important to note that having more visits over time does not necessarily equate to doing more business. To gain a more comprehensive understanding of the situation, it is crucial to analyze the average order value (AOV) and conversion rate. Therefore, based on the insights gained from this chart, I delved deeper into the AOV and conversion rate to paint a more complete picture of the situation.
Average order value:
Average Order Value (AOV) is a key performance indicator (KPI) commonly used in e-commerce to measure the average monetary value of orders placed by customers on a website. Monitoring AOV over time allows e-commerce businesses to track the effectiveness of pricing strategies, promotions, cross-selling or upselling techniques, and overall customer satisfaction.
Conversion Rate:
Conversion Rate (CR) is a key performance indicator (KPI) used in e-commerce to measure the percentage of website visitors who complete a desired action or goal, typically making a purchase. By analyzing the conversion rate, businesses can identify bottlenecks or barriers in the conversion process and implement strategies to optimize conversion rates.
To gain a more comprehensive understanding of the situation, I utilized a platform to create a performance matrix that compared the average order value (AOV) and conversion rate (CR) of the three companies. Upon analysis, it became evident that both ZARA’s AOV & CR values are lower than those of Shein.
So, from above analysis we got two main Key performance indicators to work on i.e., AOV and CR.
Although the analytics suggest that ZARA’s website may have some issues, I did not want to jump to conclusions without hearing directly from users. While analytics can provide valuable insights, gathering feedback from users can shed light on potential bottlenecks that they may be experiencing. Therefore, it is important to gather user’s perspective to gain a better understanding of the situation.
What users think about ZARA’s website
Participants feel frustrated and irritated with the current website.
I created an online questionnaire to understand Zara’s existing customers’ opinions about its current website and better understand their shopping habits.
Pain points:
- Difficulty navigating through the site.
- Confusing product images.
- Difficulty reading texts/information.
So, the above analysis led me to understand the current website buying flow without getting to know too much on the interface end. For that, I went through the steps and created a simple flow chart as shown below.
To better asses the problem in this flow, I went ahead and created a buyer journey map. This would help me understand the psychographics and behavioral pattern of the users of how they interact, think and feel.
This gave me a couple of points to look at. We can see problem in three stages i.e., Selection, Checkout, and Post-purchase.
I know all three are important in their own way. But the stage which can lead to more conversion rate is at the checkout stage. So, prioritizing that and moving on.
For the Checkout stage: Currently, there is no 1-tap payment option like Apple Pay, Paypal, Klarna etc. Because of this process, there is drop-off rate at this step which ain’t adding up in the conversion rate. So, I simply added single tap payments at the checkout step as seen below.
This reduces the friction of going through the account creation or sign in through their account.
So, as we can see how CR, AOV metrics led me to analyze the buyer flow first. Now as it has been updated, I’ll move forward to analyze the User Interface.
But again…
Instead of directly moving to just ZARA’s website. I wanted to know first where do they lack in front of their competitors. So, I picked up H&M and moved further to understand the usability and their web presence. I conducted an analysis and assessment of the effectiveness and user-friendliness of Zara’s website, with particular attention to its desktop homepage, product page, and individual product checkout page. Despite Zara’s website not meeting several WCAG guidelines and usability principles, the significant violations are summarized in the table below.
As we saw in the prioritization matrix that H&M had more conversion rate than ZARA and now through this above image, we can see how ZARA is not up to the mark in terms of web presence & usability.
Let’s audit ZARA’s website
Before I begin, let’s hear this fun fact:
“E-commerce sites lose almost half of their potential sales because users cannot use the site. In other words, with better usability, the average site could increase its current sales by 79%.”- Jakob Nielsen
- Poor Usability
- Its hamburger menu hides the primary and secondary navigation.
- Browsing products is not a straightforward experience on the Zara website.
2. Accessibility issues:
- Violation of Jakob’s law, texts in all caps, low contrast colours for small-sized fonts are some of its accessibility issues.
As in the above images, it becomes evident that a substantial portion of the visual content is oriented towards the enhancement of the information architecture. Consequently, my initial focus lies in the revision of the navigation header and footer, as these elements persistently permeate the entirety of the interface.
Mockups
- Navigation Header
After I looked carefully into the navigation header, these were the problems I found:
- Not enough contrast between foreground and background in text and icons
- No hover/scroll interaction which decreases the accessibility of it
- No visual consistency; at some place text is used and at some icons are used
- Footer
Although Zara is famous for its minimalistic design, the proposed design is just a mockup that can be iterated over in terms of design. However, I have made an effort to ensure its usefulness.
With some clarity, I moved on to designing the mockups in Adobe Xd.
This was one of the most important stages in my exercise, as I took a bunch of design decisions.
- Homepage
The homepage is without a doubt the most important view of the site. Currently, it was just having a vertical image carousel. As the primary and secondary navigation is sort of hidden in the menu and there is no other option to explore. So, that is why it was getting difficult for users to navigate through the categories.
Hence, I added vertical scrolling to the page with call to action in different categories of products.
- Product Page
Despite ZARA’s claims of valuing and supporting website accessibility, their current page design blatantly disregards Jakob’s Law of UX. The violation is evident through their use of all caps, small text, and low contrast.
However, in the new design, I have made a conscious decision to retain the all caps typography in order to maintain the brand’s consistent visual identity, as it is utilized across their platforms. Nevertheless, I have made significant improvements in terms of text size and contrast to enhance accessibility for all users.
- Checkout Page
For this one, I changed the flow a little bit.
Current flow,
(Not logged in) Product page > Shopping Cart > Log in/ Sign up/ Guest checkout > Review order > Select payment > Final Checkout screen
Every step depicted in the flow diagram corresponds to a distinct screen. To complete a purchase, individuals must navigate through the stages of logging in, signing up, or opting for guest checkout.
Now that’s a lot of steps!!
So i tweaked this flow to:
(Not logged in) Product page > Shopping cart > Review + Checkout > Final Checkout
In addition to enhancing the UI, I’ve made the steps in this flow condensed which does not require too many separate screens. Furthermore, individuals who prefer not to log in have the convenience of utilizing 1-tap payment options (like Paypal, Apple Pay, Klarna) for a swift checkout process. Overall, this reduces the cognitive load of the checkout process.
Prototype
How working on KPIs can change the business?
The business is being negatively affected by the ongoing poor experience. Repeating the aforementioned suggestions has the potential to enhance the following areas:
- Increased Revenue: Focusing on improving the overall UX and working on these KPIs i.e., conversion rate and average order value, ZARA can significantly impact its e-commerce business by generating higher revenue. A higher conversion rate means more visitors are making purchases, leading to increased sales. Additionally, by encouraging customers to increase their average order value through upselling or cross-selling strategies, ZARA can maximize each transaction’s value and ultimately boost overall revenue.
- Enhanced Customer Loyalty: ZARA can create a more personalized and engaging shopping experience for its customers. By understanding their preferences and behavior, ZARA can tailor its product recommendations and offers, driving customer satisfaction and loyalty. Higher average order values indicate that customers are finding value in ZARA’s products and are willing to spend more, which can lead to repeat purchases and long-term loyalty.
- Improved Profit Margins: ZARA can increase its average transaction value without significantly increasing operational costs. This approach allows ZARA to leverage its existing customer base and increase profitability without relying solely on acquiring new customers. Ultimately, the improved profit margins can provide the company with more resources for growth and innovation.
Conclusion
During my research for this project, I gained an understanding that even with widely recognized and highly sought-after products, there can be UX shortcomings if we thoroughly examine user flows and pain points. Often, we tend to assume that everything is satisfactory and proceed without much consideration. However, with a substantial sample size, it becomes apparent that these seemingly insignificant UX gaps can present significant challenges.
Hoping to do more user or product research. Till then…
