Travel Companion
Overview
Travel Companion is an app created to help the elderly and dependent travel worry-free with the help of a companion who can guide them in their travel. Through this app, users can find people around them that are traveling to the same airport, flight, or destination as them. Users can also choose to register as companions to provide their help by becoming a companion.
The idea for Travel Companion came about when my grandfather was planning to travel to the US from India but being an older person with age-related issues, we needed to find someone that could travel along with him just to support him through the journey of traveling internationally.
We came across a Facebook group where people had shared similar travel needs and then people on the same flight or traveling in the same direction volunteered to provide help through the comments.
This made me think that it would be helpful to have an application that could provide the help we needed at the time.
Context
Objective
Design an app that helps people, especially elderly/dependents who are traveling from one place to another alone. People can find others traveling on the date to the same place that can offer to be their travel companion.
Role
UX Researcher
UX Designer
Information Architect
UI Designer
Tools
Project Scale
Marvel
Figma
3 months
Approach
I went through the design thinking process to design a mobile-first responsive web application for Travel Companion. The process involved three phases and focused on taking a solution-oriented approach to the problem. Each of the phases included different tasks that helped in reaching the goal of successfully designing the app.
1
2
3
The design process for Travel Companion began with research on the current market and the possible competitors to determine what kind of a product would be most useful for the users.
Once the concept for the design for Travel Companion was clear I mapped out the user flows before visualizing how the user could navigate within the app to use its features. Based on the user flows I created low fidelity wireframes and prototype for the app.
I moved forward with iterating the design and improving the UI of the app. I applied the Gestalt Principles to my design and also started with creating the brand for Travel Companion. While also ensuring accessibility, usability, and affordance through the process.
Research
My research for this application was focused on understanding the scope and current market of existing similar tools available. I analyzed two of the top applications that were the most similar to my idea of finding a travel companion while looking at their design, functionality, usability, features, and reach. Both of these apps are marketed as finding a companion or a buddy for travel with an unclear purpose and not much visibility in the market. Having understood the gap in travel apps, Facebook groups, and existing tools, I was able to create a clear aim for my app.
I found that there aren’t any apps that are focused on helping elderly people and other dependents in need to find companions in their area which created a huge potential for Travel Companion to serve that purpose.
User Flows
I created these user flows to help map out the most efficient process of navigation that users would go through in different scenarios while using the app. Based on the user flows I think visualized the screens with rough sketches and then created a low-fidelity prototype using Marvel.
Scenario: New user who is getting started with Travel Companion for the first time
Starting Point: Welcome screen
Success Criteria: Setup user profile
Steps:
1. Open Travel Companion
2. Go through the splash screens
3. Sign Up
4. Log into the app
5. Set up user profile to start using the app features
​
​
​
Scenario: User is looking for a travel companion in their area for one of their booked flights
Starting Point: Home Screen
Success Criteria: Be able to chat with selected companion
Steps:
1. Open Travel Companion
2. Go through the splash screens
3. Sign Up
4. Log into the app
5. Set up user profile to start using the app features
​
​
​
Scenario: User wants to manually add a new flight to their itinerary
Starting Point: Home Screen
Success Criteria: See flight in booked flights
Steps:
1. Select Travel Itinerary from the home page
2. Click on add a flight
3. Save after entering details
4. User will be led to booked flights page where the added flight will be reflected
Wireframes
Using an 8-point design grid I created digitized the rough sketches into wireframes using Figma. I started to identify the potential colors, images, icons, and buttons that would be a fit for Travel Companion.
Style Guide
I started conceptualizing the style for Travel Companion by creating a mood board. The mood board helped me ideate the main colors associated with travel, positivity, adventure, and energy which are warm with a mix of earthy. I drew inspiration from google maps and color schemes used on physical maps. And also that accessibility is taken into consideration throughout creating the style and used tools such as contrast checker and articles on font sizing to make sure elderly people would find ease in using the app.
Based on my mood board and research on colors, font styles, and sizes I decided on what fits best with the brand of Travel Companion and supports the usability of the app.
Mood Board
Color Pallete
Text Style
Buttons
Icons
UI Elements
High-Fidelity Wireframes and Prototype
Having gone through the iterative process and implementing feedback received by the users, I made final changes to the UI of the app and created high-fidelity wireframes. You can view the full clickable prototype on Figma here.
Prototype Navigation Walkthrough
Responsive Web Design - Desktop
As a part of creating a responsive web design, I also made a prototype for the desktop version of Travel Companion. Although this is not as detailed as the mobile web design, it gives an idea of how the application will look in the future once the plan for the web version has been completed.
You can view the clickable desktop prototype here
Key Insights
What went well?
-
I was able to meet the hypothesis by creating an application designed for users to find companions and travel with ease.
-
I created a responsive mobile-first web design for Travel Companion while keeping accessibility, usability, and affordance in mind throughout the process.
-
I put a lot of focus on ensuring that the target audience is taken into consideration while creating the design and used tools such as a contrast checker and articles on font sizing to make sure elderly people would find ease in using the app which will be beneficial for this and my future projects as a UX designer.
What can be improved?
-
Given more time I would like to go through the usability testing phase to gain user feedback and incorporate changes to improve the application.
-
Since this was a project more focused on the UI design of the application, building the functionality, and refining the application to be as user-friendly, intuitive, and accessible as possible it would be important to also test the app with the targeted users.
Thank You!
