Creative Lead | Brand Design | Digital Product Design

Vanly

Creating an Instagram community and transferring it to a newly built van travel app where the community can plan and share natural and private camping spots.

Facts

Vanlifelocation

Nikita Helm

2017 - 2020

Project Duration | 3 years

Corporate Identity
Moodboards
Logo | Word
Logo | Image
Typography

Color
Brand Patterns
Style Guide
App & Website

Sitemap
Architecture
Wireframes
Visual Design
UI Library
Prototype

Motion Identity
Final Android App
Final iOS App
Final Website

Social Media
Print
Stickers
Postcards
Poster

Nadine

Design Lead, Brand, UX, UI, Social

Willze

Brand, Illustration, Animation

Nico

Strategy, UX

Theresa

Brand, Print

Juan

UI

Agnetha

Social

Nikita

Tech Lead

Christoph

Development

Felix

Development

Markus

Social

Sarah

UX

Kathrin

UX

What was the biggest challenge in this project?

Voluntary projects are always challenging. To keep the team spirit and motivation alive for more than three years is a huge thing.

Download

We published our app in the app store and google play store. Check it out!

Store Icon | iOSStore Icon | Android

Client

The German based start-up VanlifeLocation is founded
by Nikita Helm. Their goal is to further develop a community of vanlifers on Instagram where users can share camping spots in Europe‘s nature.

The spots are then transferred to a newly built van travel app for iOS and Android which can be used to find camping spots and plan vanlife journeys. In the time of COVID-19 the app offers private spots close to community members houses.

Vanly App Icon

App Icon

Finding the right motive for the app icon was a creative process in which we had a close look not only at competitors but also at other successful app icons in general.

This lovely app icon illustrates the core functionality of
the app and offers a first glimpse into the illustrative world we created within the app. Especially in comparison to competitors, who have their focus just on their data bench, the illustration based design is a clear USP for us.

Brand Colors

All brand colors are carefully chosen and are fulfilling common accessibility standards.

Vanly | Typography

Typography

When we selected the house font for the app we were searching for a font which is unique, magical, cute and fits the illustration style.

The selected font is Kurale – an open font designed by Eduardo Tunni, a type designer based in Buenos Aires. It is a serif typeface with soft shapes, and special terminal forms which are shaped like curls. They connect each letter to create attractive word shapes and text blocks with a fine texture. In small bodies of text she works well for reading, and in headlines provides interesting details to catch the eye.

Workshops

Living in four different cities, the whole team generally works remotely from home. Various team workshops per year (over the weekend) are added so we can ideate together in person. For the workshops an AirBnB or another locations war rented.

Idea Board

Workshop Results

The results of various workshops were a strategy, a feature list, user personas, user needs, user (task) flows, wireframes and much more. The best base to continue the project remote from home for each of us.

Screendesign | Onbaording

Scribbles

The app starts with onboarding screens highlighting the key functions of the app and introducing the visual world of the app furthermore.

Screendesign | Onboarding

Onboarding Screens

The final screens have colourful illustrations placed in front of a heaven with clouds and a minimalistic user interface added.

Pre Animation for Onboarding Screen

Scribbles for Animations

Those are the first steps for the final onboarding screens which will be loop animations.

Pre Animation for Onboarding Screen

Animated Heaven

All onboarding illustrations are placed in-front of an animated heaven, which is also the key background of the entire app.

All brand patterns

Flexible Visual Identity

For Vanly we created not only a corporate identity but a flexible visual identity (FVI). A smart system that can formulate different messages and adapt to different situations by offering various brand patterns.

Vanly | Mascot

Mascot

To reach the hearts of all vanlifers we created not only one but multiple mascots.

Screendesign

iOS App

The core product follows: a minimalistic, photo centered app supporting vanlifers with various features. Users can share information about spots, keep track of discoveries, save favorite destinations, read community based reviews and plan their next journey.

All photos within the app are taken by the community.

User Research | User Tests

Working at SinnerSchrader – a huge digital agency not only in Hamburg – enabled us to participate in the monthly users tests organized by SinnerSchrader employees. That way we learned a lot about our product and how to improve it.

Vanly | Camera

Visual Content

The core product can’t live from illustrations alone. As a community driven service it lives from the content of it’s users. While some wild camping spots have photos and videos some have not.

Wireframes | Camera

Wireframes | Camera | Portrait

The picture above shows a guided approach supporting the user while creating high quality photo and video content for spot profiles. Photo and video examples for six content categories are always available to give orientation.

The hypothesises behind this approach are:
– The spots need specific photo and video content
– The user needs guidance to create the right content
– The user creates the spot while being there

Wireframes | Camera

Wireframes | Camera | Landscape

With our camera feature we aim to motivate users to share their high quality photo and video content while creating a new spot. Starting with lot’s of questions we indicated not only the situations in which users are creating spots but also the relevant content categories and much more.

In which situations do users add spots?
On their journey | right in the moment at the spot + On their journey | right after visiting a spot + After their journey | e.g. at home

What does that mean for us?
Taking photos + choosing photos from the library

What kind of visual information do we need per
spot and in which order might we present them?
Accessibility | Size | Infrastructure | Van on Spot | Surrounding area | Activities | Legal information

User Experience Questions:
How can we motivate the user to add spots? How can we force people to upload images? How can adding a spot can feel smooth and fast? What steps can we drop? How can we trigger a high quality standard? How can we say thank you? How much technical possibilities do we want to offer? Do we offer photography and video advice too?
 Can the user choose between guidance and freedom?

Marketing Colors

For marketing purposes we defined an additional color palette which is predominetely used for the app preview screens, social media purposes and wireframes.

Screendesign | App Store

Preview Screens

Custom made preview screens, for the App and Google Play store, were designed for various languages and phone sizes.

Preview Screen of Instagram

Instagram

Users can join the Instagram community with more than 15k+ members. The account helps users to find new and interesting camping spots, which are also available in the app. Both plattforms are synchronised in both directions.

For the Instagram account we developed a new branding strategy by creating different content categories which are visually split by color. To give the user a better orientation the most important posts called spot posts are re-design and now easy to connect to the country of origin.

As an improvement we created post and story templates which are easy to use and make posting as easy as possible in the future.

Additionally we set-up a marketing tool called Later which can now be used to easily plan, manage and analyse future posts too.

Van surroundd by COVID-19

COVID-19

To support vanlifers best in COVID-19 times we offer private spots close to private homes for travellers who are already on the road. While camping groups are closed this might be a good alternative.

Van surrounded by street signs

Legal Information

A features following is about embedded legal information. The legal information will be country specific so the users learns were camping in the wild is legal and where not. The legal information feature is tasered with single posts on Instagram already.

Giphy AnimationGiphy AnimationGiphy AnimationGiphy AnimationGiphy Animation

Sticker Set

Designing a sticker collection was one of Willze's biggest dreams so far. And here we go: a set of five animated stickers is now available for users within e.g. Instagram. On Giphy the collection has around 4 million views on already. Check it out!

Postcards

Print

Eco-friendly printed brand products like stickers, postcards, posters and t-shirts.

How did you acquired this project?

When Nikita heard that I was travelling overland through Mongolia he wanted to get to know me better. The result: he asked me to set up a creative team for his app project – including six designers.