Unwander: new branding, new landing page

An online app for the super organized traveler
I was approached by the founder of Unwander who wanted to finally test his app idea with the masses. The landing page needed to clearly depict the value of Unwander to the target audience to gauge potential interest before launching the app to the world. I was given complete design freedom in order to make the branding of the app interesting and different.

 
 

The problem

Unwander had a positioning and branding problem. The app idea was great and it did solve a difficult problem for travels in the target audience. But, the founder needed to validate it further and generate a lot more interest before moving forward with the whole idea.

 

The goal

The goal was simple: to generate enough interest in the product through email sign ups in order to validate the product idea. In other words, gain interest and gain traction. 

 

The target audience

The great thing about this project was how specific the target audience was. The target audience included any traveler who is obsessed with details of their trip. The type of trip didn't matter, could be for business or pleasure. Unwander was targeting a personality type and wanted to make the planning aspect of a trip easy and painless.

Unwander is for people who:

  • love planning details itineraries

  • love rearranging and optimizing their itineraries

  • need to keep details of the suggested places to visit, see, experience or dine at

  • want input from their friends

 

The discovery process

User mindset

“I am planning a trip, I need to stay organized.”

 

User research and interviews set up

The research part was already conducted by the founder through his beta testers. I was given access to their notes, surveys, transcripts and finding. After reviewing their current findings, I had some follow up questions. We sent them out through email for the newest beta testers to answer. In short, the data was straightforward and quite informative.

 

User research and interviews findings

The research gave us insight as to how to best position the landing page. Below are some of the most recurring insights.

  • I want to collect things to do from any site with just one click.

  • Another positive is being able to throw in everything you'd like to do and then sift through it in one place.

  • It grabs the info I need for my trip from any site with one click , which I can then use to customize each day of my trip and (very exciting) also see it all on a map.

  • Most of my planning happens on the go, I need an app that lets me easily update my plans.

  • I like to look through ready made itineraries for ideas and show them to people who have been to those places.

  • I love the idea of knowing when things open and for how long, this way I say we are having breakfast at 9am here and then we are going to this museum at 11:30am because it's near by.

Along with some good feedback and reviews of the beta app we did find some uncertainties which were extremely helpful in defining Unwander's positioning. For example:

  • I can do all the same stuff right now on google maps, how is this any different exactly?

  • Can I edit this stuff on the go? Will it know where I am and suggest ideas? Will there be a mobile app for Android soon?

  • Will the app work with TripAdvisor or other trip planning apps, like Google Flights maybe?

 

The design process

Content creation

Thanks to the user research, it was clear which value propositions we needed to showcase. My vision for this landing page was to have little bits of the app's UI sprinkled throughout the landing page to accompany and support the text. I've created a page layout based only on text and content/image descriptions. In total, we went through 3 revisions before any visual design was touched. This ensures the direction of the landing page was solid and agreed upon, which would later lead to less revision down the road.

Brainstorming and style exploration

Just like with any new design, we had to explore a new visual style. With this project, I was trusted to choose the best design direction myself. Speaking with the client, he had some guidelines. I kept the visual design tied to these three adjectives that the client wanted to resonate with his target audience:

  • smooth

  • bold

  • interesting/intriguing

Because this was a brand new design from scratch, I decided that there will be four key design elements that will help this design stand out from the crowd and intriguing to the visitor:

  • typography

  • colours

  • off-grid layout

  • unboxed graphics

With the above items defined. I went to Dribbble for inspiration to create a moodboard for Unwander. You can take a look at it yourself too. As you can see in the screenshot below, it's filled with vibrant colours, unique layout solutions and good examples of animation too.

 
 
 

Wireframes

Thanks to the agreed upon content and moodboard, I was able to find a good layout direction. At this point, the landing page consisted of four value props - two of them grouped together - an intro section and a footer section. All of the sections were going to have a CTA for signing up for the beta.

The value prop sections were looking text heavy at this point but that was mostly due to the style of the wireframe. Sure enough, we cut down more copy to be more direct and precise. I've created two wireframes, desktop and mobile version. There was no need for a tablet version as it was going to be a combination of both mobile and desktop designs; the wireframes were low fidelity and didn't identify too many details. The wireframe serves as a way to show flow and let the client see a simple visual that let them imagine how their visitors would engage with their landing page.

UI design and iterations

Like with any project, nothing is perfect on the first try. Because the client signed off on different elements one by one (such as content, style, flow, etc.) we were able to work out the final design pretty quickly. Below are a few examples of different sections changing from first design to final deliverable.

 
 
 

Delivered designs

 
Landing page - Mobile 375px.png
 

 

Would you like us to get started on your project?