Celebrating Off The Wall.
Promotional Site for Vans Focusing on Their History.
PROJECT TYPE: Web/Interactive YEAR OF COMPLETION: 2016 DURATION: 5 weeks
Vans, an iconic skate shoe company, needs to constantly expand and innovate their brand to stay relevant. The main audience for this are trendy individuals, aged 16-31, who are a part of the skate culture or enjoy Vans' edgy style. Vans needed a promotional website as a way to generate interest about the history of their most popular shoes and how they connect to skate culture.
This new responsive website shines light on information that the main website keeps hidden, including the history of the iconic shoes. Importance is placed on customer stories and social media. Personas were developed to help optimize the information architecture for a strong user experience. The website commemorates the Old Skool and Sk8-Hi shoe that has the iconic Vans sidestripe. The website is full of hand-drawn doodles that reference the shoe stripe and create movement. The website's styling and personality is in line with the grungy look of skateboard culture. To maintain consistency with the brand's style and core website, red, black and white from the brand were used along with textural elements.
Skater Girl Jennifer
- 22 years old
- Loves skating
- Loves going to concerts
- Dislikes uncomfortable shoes
- Dislikes obnoxious people
- Goals to graduate college
- Goals to join skate competitions
- User goal to learn more about things she already enjoys such as Vans
Cool Dad Ryan
- 36 years old
- Art Director and father
- Loves family outings
- Loves drawing
- Dislikes lazy workers
- Dislikes no family time
- Goals to keep traditions rooted
- Goals to do great at his job
- User goal to know the history of Vans to pass down to his son
Vans seeks to generate more business through the concept of storytelling by chronicling the historical development of the brand to interest and promote repeat customers.
JENNIFER (red line)
landing page > timeline > pros > shoes > women's > detail page
RYAN (grey line)
landing page > timeline > detail page > my vans > detail page