UX well done #1 | Zara

There are many cases where user experience or UX has been implemented in a great way. One such example is the fashion store Zara. Zara has combined the look and feel of a physical fashion magazine with a web shop. When your eye catches a piece of clothing or an accessory in the digital magazine, you can buy it right away. This process is almost flawless and that’s why it serves as a good example of digital usability optimization. See it with your own eyes here:

https://www.zara.com

General Design

The graphical design of the application is minimal but still very functional. It has a basic grid-like structure and this gives it that distinct magazine look and feel. Still it has on every page a functional and prominent navigation and search box. At the bottom right there is a small chat button and the footer contains the usual footer stuff like social links, support and legal things.

Zara uses big, stylish magazine-like images, but enriched with video here and there. Adding video makes an already lively display even more energetic. It gives the feeling there is a lot to discover, which makes users curious and works engaging because of that.

The only colors used in the palette are black and white. The design puts emphasis on user interface elements by making them bold when appropriate. It’s a minimal design done well, so the focus of the user is drawn to what matters: the clothes.

The Home Page

When a visitor enters the website, he sees a big full screen image slider. Every slide contains clear call to actions, which is good. There is a big navigation at the left and some functional UI elements at the top.

Because the background of the menu, top search and login button is transparent, it might get hard to read when placed on top of certain backgrounds. They do change the text color to white or black to better contrast the image though.

The Shopping Pages

Zara really reinvented the web shop concept by breaking loose from the traditional design. A user has more the feeling of looking at a magazine than at a web shop. They succeeded in doing it well and keeping it functional, despite using very large images. The thing is that the products, the clothes, are displayed very nicely. Rather small below the image stands the price tag, but it remains clear and attracts the attention despite heavy graphics.

When using the search functionality, the result are displayed in a grid. But not a simple grid. Some images are bigger than others, some are videos, some are put into columns of 5 items, while others in columns of only 2 items. It really gives a nice dynamic magazine look. And while hovering the items, no visual cues are there that it’s a clickable item, apart from the hand cursor and underlining the price on desktop. We believe this is a good design choice as well, because we assume the majority of the visitors are using mobile. Also, providing visual cues, like zooming in the pictures for example, would feel a bit much on these already visually heavy pages.

The Product Pages

The single product pages are super minimal, which is great. It only shows the image, some info and the only things clickable are the size selection and the buy button. Other things, like more information about the item is better hidden but still accessible though an component that is displayed when clicking on it.

When scrolling down, the page also provides accessories and other clothing pieces that match the outfit. These are easy to add to the shopping cart. This is a good example of showing the right stuff at the right time on the right place. They do not push recommendations through your throat, but allow you to scroll down for it. That’s the thing you would be doing anyway when you’re curious for more. It also further helps to let the user discover new things on their own. When doing this, Zara sets no clear boundaries on its web shop. The user will think there is much more to discover than there really is.

Another neat feature that was build with the human in mind is the sizing tool on the product pages. The system assists you in determining the best size for you, based on the info you want to provide and the methods that best work for you. This is a great way to address an important challenge of many online fashion stores: determining the size. This extensive sizing tool creates certainty for the user, which is a very important part in driving the sale.

Order Checkout

When checking out the purchase another great thing happens to the customer. Zara presents him with a very simple, minimal and clean version of the return policy. A clear communication is an important thing to do when driving the sale, because it shows that the store cares enough to present complicated legal stuff in human language.

Another nice touch about the checkout process is that you do not need an account if you don’t want to have one. Returning customers can use their existing account, but it’s just as easy to checkout as a guest.

Still, let’s say a user decided to in fact have an account. The design they created to manage this account is also very minimalistic. It’s functional, clear and user friendly. It’s nice to see they limited every single feature on their website to what is actually creating value. Feature creep can be worse then hell.

Support & Customer Care

It’s easy to find a store near your current location, which obviously helps to attract more customers to the physical stores. The visitor’s location is automatically determined using the device’s location service.

Zara also made sure that on every page, there is an unintrusive support chat button. Many other websites do this wrong. For a visitor, it’s more enjoyable to get hit with a chair in the face than to be hit with a chat window that’s not only unwanted and visually intrusive, but also even comes with an annoying notification sound. Once again, Zara let’s us explore their digital magazine on our own terms. It’s very clear that this was their goal all along, since they also do not ask you to subscribe to in an annoying popover dialog.

Suggestions & Improvements

Zara shows us how to create an out of this world web shop. Still we would make these recommendations:

  1. A loyalty program has proven efficient on many other web shops. A system where the user gets incentives to buy more would be a nice addon for the web shop.
  2. Gamification: use fun, but unintrusive ways to get more personal user data to be able to do better recommendations. The implementation of a loyalty program in a way that it rewards the user in gamified ways is something we would recommend.
  3. Because user research for other webshops show that they love a way to add products on a favorites list for later purchasing, we would also recommend Zara to implement this.

Conclusion

Zara has built a unique web platform that is a crossover between a web shop and a digital magazine. The minimal styling and visual focus has allowed them to strip everything that did not add to the value they want to add. The customer, or the human, is placed central and that is shown by not making them do anything, but rather letting them explore the web platform freely, much as they would do in a physical shop.

Because the web shop is so graphical and alternative, it’s possible that users have to search for some functionalities they are used to. They can find them, but often after some exploration. And that’s not necessarily a bad thing.

A visitor needs to take some time to get used to the web shop, but Zara is consistent with design choices. They in fact succeed in educating their users by letting them free, which turns the unexpected into the expected. And all this on the customer’s terms.

Interested in learing more? Contact our team at Canyon Clan.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *