Roam — UI / UX Case study for a travel advisory app

Just the right app for roaming.

Introduction

My friends and I love to travel and explore travel ideas, sights in a country, a particular state, places around the world just anywhere that tickles our fancy when we get the chance to do so. The challenge is there is no one place to search, we end up moving around the internet and eventually lose track of our findings.

Problem & The Challenge

Searching around the internet for travel ideas, new and exciting sights around the world can be time-consuming and unending and some of the resources can end up getting lost. The challenge here is to build a simple, easily navigable app that provides a user with travel ideas, all in one place, and features to be able to share findings with friends for contribution.

Research Methods

Survey

I started off by doing a survey and gathering information about what target users like and don’t like about the travel process. The purpose was to determine the basic ‘pain-points’ of travelers or travel enthusiasts when it comes to searching for places to travel most especially when doing a ‘party’ trip. Working with real-world data improves decision-making and eliminates guess works and presumptions.

Here is a list of prominent pain points that I put together after the survey;

  1. Searching in different places is time-consuming.
  2. Loose track of ideas since you can’t save for later.
  3. Unlikely to get ideas from one source.
  4. Unable to easily share findings with friends for contributions.

From the research, it revealed that these app features were desirable ;

  1. Directory of travel sights and places around the globe.
  2. Save ideas and findings for later.
  3. Share travel ideas and findings with friends for contribution.

User Personas

I developed user personas to help visualize the understanding of users

Persona 1
Persona 1
Persona 2
Persona 2

User Flowchart

After thorough research, I had ideas on how the flow of the app should be for a user. To eliminate assumptions I mapped out a basic user flow of the app to help figure out the steps a user will take to reach a solution or satisfaction.

User flow chart

Wireframes

I created paper prototype wireframes and later translated them into low fidelity wireframes. This visual design of the skeletal framework of the app, allowed me to think about the flow and functionality of the app. It also gave me the possibility to test my ideas without thinking about aesthetics.

Wireframe image 1
Wireframe image 2

Visual Research

Design Inception

I brainstormed about how the app should look and feel for a travel-related app. I explored the potential moods and appearances individually. Putting the ideas together suggested :

Mood: Friendly, minimal, personable.

Space: Simple, Clean.

Shape: Smooth.

Colour: Bright, Blue, Soft, Friendly

Inspiration Board

Before I commenced the visual design I created an inspiration board by gathering inspiration on other travel apps and trip advisor apps.

Inspiration board
App inspirations

Iterations

I found myself iterating through design ideas and style. Each Iteration process taught me something I eventually implemented in the final design.

Iterations image

Colour Palette

I picked these colours because it evokes a soft, calm, friendly and a natural feel. I used the color blue as the primary color because it symbolizes trust, reliability, and calmness and as a brand color, it is perfect for the mood and feel of the app.

Color palette image

Typography

Poppins and Mulish are the fonts I decided to use for headlines and text respectfully. They are both sans serif fonts that work well together, create balance, and complement each other when used appropriately. I decided to use two fonts because I wanted to evoke simplicity and audacity hence Poppins chosen for the headline and Muli for text.

Typography image

Naming & Logo

In picking the name, I looked for something that gives the idea of travel on its own. Hence the name Roam, it’s simple, straightforward and besides traveling is Roaming😜.

For the logo, I did some few logo iterations and selected one that looked modern and tells the story of Roam as a travel sharing idea app at a glance.

Logo iterations image

Final Design

Onboarding Flow

The goal of the onboarding experience in Roam was to collect user’s information most importantly, travel interest so the app can suggest to users where they might want to go or see around the world.

Onboarding image

Homepage

This section of Roam is where the fun begins. After onboarding the user successfully, the user is redirected to the homepage or exploring screen. Based on their interest, places are suggested to them in 3 categories: Discover, Trending sights and Most visited places, and lastly Recommended places.

Users can have a guided search where they can choose from the categories provided, search for places, or use the recommendations provided by the app based on user interest.

Homepage image

Choosing a Place to Explore

When a user selects a country, experience, or sight to explore, the user is provided with a description of the place, imagery, exciting places to visit, etc. The user can save the trip for later, plan a trip, or share the trip with friends, spouse, etc giving them permission to be contributors.

Explore user flow image
Explore user flow

Profile

This screen has users’ biography, shows the number of users followers and followings. Users can save their travel experiences, stories and can edit their profiles as well.

User profile image

Conclusion

What did I learn?

Designing Roam has been a challenging and fun experience. From brainstorming ideas, understanding the needs of the user, and the countless research iterations, it has been a rewarding journey. The major challenge for me was presently both friendly and usable app as well as an intuitive experience for travelers. I understood the need of users through the survey and research. Finally, I had the challenge of creating an enthralling app both from the user experience perspective and the visual perspective.

What are the next steps?

  1. Usability testing of prototypes
  2. Research iteration for newer features
  3. Improve user flow

Future Features

  1. Add a feature to plan trips into detail.
  2. Add a feature that allows users to earn badges or achievements based on their travel history in a gamified manner.
  3. A feature that will allow users to add live stories.

Here are the final designs. Click here to view the prototypes in Figma

Final design image

Thank you for reading and a big thank you to everyone who supported me on this project.😘

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store