UI/UX Case Study :- VANS

Published in

UX Diaries

10 min readSep 6, 2020

Being in the design field always keeps you on your toes. One can learn so much by just having an open mind and welcoming new ideas and concepts. As a design student, I’ve always been fascinated by everything that this field has to offer. This project is my first step towards exploring the field of User Experience and User Interface Design.

Working on this project was super fun and I had the best time collaborating on this with my friend Anusha Sarah!

Disclaimer :- This is not affiliated with the official website/organization of Vans. This case study is purely for educational purposes only. This is just a concept our team (Anusha Sarah and I) did under the guidance of our mentor Abhrojit Boral.

All images have been taken from the Vans official website / Instagram. All rights/credits go to the original owners of the images.

Brief: This was a classroom project in which we had to choose a brand, understand their current user interface and user experience and then see how we could improve upon it.

This case study will focus on the user experience of Vans as a brand in India. Based on the research we conducted the project highlights main problems faced by customers when attempting to buy the products and our proposed solution.

Vans as a brand:-

Vans is an American manufacturer of skateboarding shoes and related apparel, based in Santa Ana, California. The company also sponsors surf, snowboarding, BMX, and motocross teams. The purpose of the brand is to enable creative expression — and inspire youth culture — by celebrating and encouraging the “Off the Wall” attitude that comes from expressing your true self.

Vision and mission:-

We are DETERMINED — we have the Van Doren spirit. We’re scrappy and resourceful. We use ingenuity to tackle every challenge head on and find a path forward, even if it’s not a straight line.

We are CONNECTED — culturally, digitally, socially. We build lasting and meaningful relationships with our consumers, customers, partners and family, wherever they might be.

We are INCLUSIVE — We invite unique perspectives and value different experiences. We want to hear each other’s point of view.

We are vibrant and EXPRESSIVE in how we speak, interact and get our jobs done.

We have FUN working at Vans because we work hard and play hard in our pursuit of enabling creative expression.

Who are the Stakeholders and what are their needs?

1. Vans-

Increase in revenue.
Exposure in India.

2. Customers-

Quality products.
Timely delivery.
Secure/easy payment gateway.
Authenticity of the products.

3. Warehouse-

Sufficient space.
Inventory check.
Timely payment.
Safe work environment.

4. Retail-

Safe/healthy work environment.
Timely payment (salary).
Good communication skills (for employees, advertising, inventory).

5. Delivery executives-

Payment (salary).
Safe and regulated transportation.
Good system between warehouse personnel and delivery executives.

What insights could we gather?

Our initial plan was to create a social outreach program involving the customers which would encourage brand loyalty as well as increase the customer base. Upon doing some basic research we realised that the only way for customers to buy their products was through their retail stores and online MBOs. With their retail stores being sparse and generally housing only their shoes we realised there was a large gap in consumer reach which the brand needed to fill. The next step in our process was conducting a survey and some interviews to find out if there was really a need for an official Vans website.

From the survey we gathered:

The majority of the customers fall in the age range of 18–35 years, with over 95% of them aware of the brand. However, only half of the people who answered the survey were aware of the whole range of products that the brand houses.
A little over half of the people who took the survey said that they do not prefer to buy the products from online MBOs as they are not sure of the authenticity of the product.
Over 90% of the individuals who took the survey said that they would prefer if Vans had an official Indian website.

Target audience:-

Based on our survey, interviews and online reviews we were able to identify the target audience as men and women between the ages of 18–35 with the range 18–25 being the main target focus. We divided the target audience into two main cluster groups.

Illustrations:-

1. The Adrenaline Junkies:-

These customers in this cluster fall in the age range of 18–25 and are interested in apparel, shoes and accessories which are specific to their sport. They require high quality products which last for a while. It is also important that the products, especially shoes have features that will protect them, for example good cushioning in shoes.

The Adrenaline Junkie illustration created by us.

2. The Curious Case:-

These are the customers whose concern is finding comfortable and stylish products. They would also be the target group for a brand looking to introduce it’s products as they would be inclined to experiment and try new styles. This cluster would consist of the younger age group between 16–25.

The Curious Case illustration created by us.

This lead to our main insight

Vans needed an official Indian website where customers can buy their products, view upcoming events, watch their short films/documentaries and find out more about the brand. Also because the online MBOs house older ranges of products.

Who is Vans up against?

Puma stands first amongst the leading footwear brands in India in terms of sales for the fiscal year 2019. It is followed by Adidas, Nike and Liberty.

Brands like DC, Nike, Converse and Adidas also cater to a niche audience of extreme sports footwear like Vans. Although finding this specific range of products in India by these brands was hard. Nike, Converse and Adidas don’t generally carry their skateboarding and BMX shoes in retail stores. While DC shoes can only be found through online MBOs. In terms of price range we found DC shoes to be the most comparable to Vans.

S.W.O.T

Strengths

It is a well-known brand and is one of the main brands promoting skating/surfing/BMX in India.
Their price range makes their shoes affordable to most people.
They have a variety of styles and shoes for different purposes (sports, casual/everyday, skate, BMX). Their skate shoes are also the easiest to find in India.
The brand collaborates with a lot of different designers/brands/artists to create unique and innovative designs. This also translates to their customer engagement with their line of custom shoes.
They have high product quality in a huge range of sizes (upto 13 mens) and strong brand reputation.

Weaknesses

Unsuccessful repositioning (the brand has always been associated with skating/bmx/snowboarding/surfing and has found it hard to reposition themselves, especially with the ‘off the wall’ slogan). This has led to an inability to penetrate successfully in emerging markets in India and China where extreme sports are still not mainstream.

Opportunities

To create awareness of different sports in emerging markets by sponsoring sporting events and collaborating with artists/brands. This can help them become the first mover in extreme sports exclusive shoes made professionally (especially in a country like India where extreme sports like skateboarding and BMX are picking up).
To increase their online digital presence in India through a website as well as social media.

Threats

Competition from other brands in the same footwear segment.
Counterfeit products.

Existing interface:-

Now that we had a good understanding of Vans as a brand and their competitors, we decided to look into the interface of the already existing American website of Vans.

We approached the website as a new customer looking to buy a product so that we understand the navigation and whether it is easy to understand the interface.

Here’s what we understood :-

1. The good:-

With keeping the needs of the users in mind, the website is well designed and navigating through the website was easy and user friendly.
One feature that we found very interesting was the Cart icon that is made sticky on the extreme right of the page besides the scroll. This makes it very convenient to access the cart irrespective of what page you are on.
Vans is a youth centric brand and the interactions through the website are very interesting.
Just like the brand’s vision, the website also depicts stability through it’s simplistic and minimal designs.
Everything was easy to locate on the website including looking up for specific products.
The website has good responsiveness and the layouts change accordingly.
All the elements that were added were confusing or difficult to understand.

2. The bad:-

The way the shoe sizes are arranged in the size chart is very confusing.
The layout for the reviews section wasted a lot of space and was a little confusing to find some features.
There is no gallery for the images that are uploaded by the customers in the reviews section. The sort review option was located at the very right and was hard to find, since it didn’t look like it was part of the reviews section.
The section just above the header which is in light grey looks unnecessary and can be either removed or placed elsewhere.
The header isn’t sticky, which means if you wish to access it again you’ll have to scroll all the way to the top of the page every time.
Hover animations are not consistent for the buttons, some have a hover effect while others don’t and there’s no clear indication why. For example some ‘view more’ buttons have a hover effect while others don’t.
They have pictures of customers using products which you can click on to buy the product but this isn’t indicated anywhere so the user assumes it’s just a gallery and doesn’t interact with it.
Reserve a product.
Customs page- The navigation on this page didn’t highlight its purpose well enough. The users don’t see what shoe styles they can customize right away.
Free Pickup option is only available once you view the product in the cart.

Here’s where we stepped in:-

So what did the website need to have?

Before we made any changes though, it was important for us to understand what the website needed to have. We based this on the survey/interview responses and our understanding of what aspects of the website we should highlight. Since it would be a website launch we thought that the shoes would be the product to feature. This led to us creating our information hierarchy.

Once we knew what needed to be included in the website we moved onto the navigation flow.

Based on our understanding of the website and the problems we found we redesigned some aspects of the website. Maintaining the overall structure and look of the website was important as we wanted to keep the cohesive theme of the brand. We focused on the micro interactions and as the website would be launched for India we wanted to make sure the content was relevant to the country. From the feedback we received from the survey and interviews we learnt that the customers wanted Indian representation on the website.

We removed the unnecessary text above the header as well as a few categories which can be added once the brand/website is well established.
In the Reviews section we the sort by option more prominent so that it’s easier to locate and also changed layout for the reviews so there isn’t any space that’s being wasted and for responsive resize it will automatically go from two columns to one column.
Customs page layout was changed so that the customer can see all the shoe styles (step one) when they open the page. From there they can choose the customize option and move onto the further steps. This also allows for more banners on the page to better highlight the collaborations/ designs by customers.
When the customer goes to the view cart page they have the option for either in-store pickup or online delivery. We decided to create the option of “reserve a pair” in the product detail page.
When buying products online, size is the one aspect that one cannot be sure of, so we decided to add the feature where customers could compare their shoe sizes with other brands which would help them find the perfect fit. We color coded the size chart to make it easier for the customs to understand.
In the category page, we changed the title from “Show off your Vans” to “Shop this Look” and created a hover button so customers could view the product directly from this section.
We made all the icons consistent by making them all outlined and soft edged.