Reimagining the Off The Wall attitude

A case study on Vans.

Published in

Bootcamp

10 min readSep 6, 2020

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 (Vidhita Chonkar and I) did under the guidance of our mentor Abhrojit Boral. All images have been taken from the Vans official website / Instagram unless mentioned otherwise. All rights and 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 the 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?

Vans-

Increase in revenue
Exposure in India

Customers-

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

Warehouse-

Sufficient space
Inventory check
Timely payment of salary
Safe work environment

Retail-

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

Delivery executives-

Timely payment of 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 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 than half 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.

The Adrenaline Junkies

The 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, to have features that will protect them, for example good cushioning in shoes.

Customer cluster 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.

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.

Who is Vans up against?

Puma stands first among 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.

We realised that compared to it’s competitors Vans is known for having good quality, relatively accessible and affordable products as compared to their competitors.

How would Vans fair in the ring?

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 mens US 13) 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.

Vans has a lot of strengths and a great opportunity to create an impact in the Indian market with their products. Having already sponsored skateboarding events in the country it’s time to take the next step and bring the brand to a whole new level.

The existing interface

By this point it was abundantly clear that what Vans needed was an official Indian website. So our solution was to do just that; since we had an idea of Vans as a brand and their competitors, we decided to look into the interface of the already existing website of Vans America.

The undercover customer

We approached the website as a new customer looking to buy a product so that we understand the navigation and how easy the website was to understand. Overall, we found the website to be easy to understand and navigate but there were definitely some elements that stuck out to us.

The header- It layed out all the information about the products and other aspects of the website without being overwhelming.
Reviews- The review section was really helpful especially the ratings distribution, pros and cons section. Although, the sorting option for the reviews was a bit hard to find.
The sticky cart- This allows the customer to access their cart from any page while remaining on the page itself
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.

The designer detective

The next approach was as designers, what did we think could have been done better or didn’t make sense?

The icons weren’t consistent: The website had filled as well as outlined icons used in different places with no discernible reason.
Unnecessary text: The text above the header showing the cart, account, favourites etc was unnecessary and could be placed somewhere else.
The header wasn’t sticky: Although this isn’t necessarily a bad thing it did make the navigation require more effort.
The reviews: We actually really liked the way they were except for the wastage of space. The review was on the left and the reviewer’s info was all the way on the opposite side of the screen, leaving an odd gap in the middle. We realised this was probably done so the responsiveness of the website would be better.
The size chart: Upon first glance we found the chart to be a bit overwhelming.
Button hover animations lack consistency: The same button hovers in some areas but not in others.
Gallery: 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.
In-store pickup: This option only appears once you view your cart, when it could be placed in the product detail page as well.

After analysis the website from the view of a designer I realised that most of our changes would be made to the micro interactions. But you know what they say, small things matter the most.

We’re here to shake things up

Before we made any changes, 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.

Information hierarchy

Navigation flow

Using the information hierarchy we created the navigation flow of the website

Style guide

What we changed

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 also colour coded the size chart to make it easier for customer to read.
In the category page, we changed the title from “Show off your Vans” to “Shop this Look” and created a hover button so customers have the option to buy the products displayed in the image with just one click.
We made all the icons consistent by making them all outlined and soft edged.