INTO
An End-to-end Mobile App for Travelers
Introduction
Like most people, I love traveling. The feeling of being in a new place, learning about and understanding new cultures, is irreplaceable. I have always been curious and adventurous. I particularly enjoy discovering unique activities or experiences to learn about the city and culture. I believe some things in life we can only learn when we travel.
Project Deliverables
User Research
UX & UI Design
Usability Test
​
My Role
UX Designer
UI Designer
UX Researcher
Duration
8 weeks
Tools
Figma, Invision,
Marvel, Miro
​
Problem
For people who love to travel, especially for local culture vulture travelers, searching for high-quality local travel information and local guides can be a challenge in improving the travel experience.
Project goal
To create an app which connects people who love to travel and explore the world with people who are passionate about their local community and are eager to share their culture and experience.
Design Process
​​
​Market Research
Competitors
Analysis
User Interview
Empathy Maps
​​
​
​
​
HMW
​User Stories
​Site Map
User Flows
​
​
​
​
Sketch
Mid-Fi
Wireflow
Style Guide/Branding
​Hi-Fi
​
​
​
Usability Test
Redesign
​
​
Market Research
It is important to get a picture of the market by starting with market research to get a sense of the travel market trend, who the audience are, and users' behaviors.
Travel Style Trends:
-
Experience tourism is on the rise. 72% of millennials prefer spending more money on unique experiences rather than on material things. (Harris Group)
Demographics
-
Young travellers, particularly Gen-Z and Millennials heavily trust and rely on online reviews. (Salecycle, 2020).
-
Solo travel is growing for the millennial travel segment and Gen Z audience, but is becoming more sociable where co-living apartments are being introduced to allow travellers to meet like-minded individuals (CN Traveller, 2019; Travel Marketing Report, 2019)
Users' Behaviors Understanding
-
In the 12 weeks leading up to a trip, there are: 3X more experiences searches than hotel searches. 8X more experiences searches than air searches. (think withgoogle.com)
-
48% of experiences bookings are happening once travelers arrive at their destination.
-
The average traveler spends 13% of their time online conducting travel-related activities. (Google/Bain, Global, 2019)
-
63% prefer to read reviews, view pictures and book online all on the same website that offer customers a ‘one-stop shop’ (Salecycle, 2020).
-
72% of travelers won’t book until they have spent time reading other travelers’ reviews (Salecycle, 2020).
Competitors Analysis
After a better understanding of tourism market and users' behavior, I analyzed five travel apps which especially focus on local culture traveling or local food/activities searching. The goal is to identify the type of problems users face with competitors' products, as well as understand what users might expect from my product.
Strengths
-
Comprehensive travel information including hotel, things to do and restaurants
-
Book directly in the app
-
Accurate and detailed reviews and rating about local tour and local guide.
Weaknesses
-
Travel strategies are not provided
-
Map searching is not provided
Strengths
-
Provide travel guides by local insider
-
Provide nearby recommendations based on current location on Map
-
Has summaries/highlights in each guide/place information
Weaknesses​
-
No filter on the map search
-
users' accounts are unable to be viewed
-
No ways to connect with locals.
Adam Caar
Strengths
-
Provide local activities, local food, etc. with rating, comments and reviews
-
Map searching is provided
-
Users can see rating, address, distance, work hour at a glance in the places list
Weaknesses
-
Inaccuracy of reviews from paid users
-
Too much repeated information
-
Connection with locals is not provided
Strengths
-
Provide comprehensive local experience with ratings and comments
-
Users can view local host' profile with their introduction, identity, events and reviews.
-
Maps shown are available for users to check distance
Weaknesses
-
Host qualities vary
-
No travel strategies
Strengths
-
Provide highlights/tips
-
Able to download information for offline use.
-
Provide avoid crowds/Local culture tour category
Weaknesses
-
Users' account unable to be viewed
-
Not enough introduction in the individual information page
-
No way to connect with locals
Adam Caar
User Interviews
Leveraging my Springboard student community and my personal acquaintances, I conducted a screener survey to identify individuals who are interested traveling and particularly enjoy discovering unique local activities. From a pool of 30 survey respondents, I selected 5 participants. My objective for this part was to learn about users’ last travel experience.
​
individual interview sessions via video conference
5
70%
of participants travel to unfamiliar places 2-5 times a year before pandemic
84%
of participants expressed they are "local culture vulture travelers"
Synthesize Research
To synthesize the qualitative data gathered from user interviews, I created an affinity map to identify users' frustrations, needs and goals.
Key Findings from research
Authentic
"I want to travel like a local by doing things which are popular with locals."
-
Take the recommendations with high rating and reviews.
-
Read travel guides, talk with local friends, Uber drivers, or even hotel receptionists to get local recommendations.
-
Hard to get incoming local events, workshop, hidden gems information.
​Efficient
"I would like to find nearby spots on the map because I hate spending too much time on driving."
-
Find a place on the map and get directions or get info like ratings
-
Need map for quick search based on users' needs.
-
Be able to make a good route among spots when map is provided.
Connectivity
"I want an individual with local knowledge show me around or share information to let me uncover the city."
-
Find a local guide with the same taste and interests.
-
Need to know the background, reviews, basic information about the local-guide.
-
Recommendations from locals are more trustful.
High-Quality
"I would like to do a deep research about destination through reading travel guide from both locals and travelers."
-
Travel guide should be organized in a easy way to read
-
It's better to have summarized content to save users' time.
Understanding the users
Since I have gathered a bunch of knowledge of the audience, as well as their needs and goals, I use the user persona to represent key audience segments. The persona will help me empathize with users and keep the correct users in mind when creating products. It’s both fictional and realistic.
Needs and goals
-
To know which recommendation he can trust
-
To meet/talk with local people who are knowledgeable about culture and history
-
To get more authentic local travel recommendations from locals
-
To save more travel time on reading guides
Alex Blache
"I want to connect with locals."
About
Motivations
-
To learn culture and history behind the city
-
To immerse into local life
-
To be a different trourist
Device & Internet Usage
Frustrations
-
Travel apps do not provide accurate information, especially unique local activities and restaurants.
-
​Too much same information on other travel apps.
-
Spending too much time on reading travel strategies and reviews to dig out useful information.
-
Hard to connect with local people before the trip or on the go.
​Alex is a software engineer who lives in Bay Area with his family. His work is busy and intense. He travels around 3 times with his family every year, he thinks relaxed travel time can give himself a breathe from busy work. They love to discover local activities, learn culture behind the city.​
Mobile Passive User
Mobile Active User
Social Media Passive User
Social Media Active User
Apps Passive User
Apps Active User
Based on the users’ needs and goals of my persona, I created journey maps to get a visual sense of how the user interacts with the tasks from start to finish and how he feels about each step of the process. This is a great way to empathize with my future users, getting a clearer idea of the pain points and what support they would expect from the product.
HMW
To define the problems I am going to solve, I reframed my insight statements from affinity mapping, personas and user journey as “How Might We” questions to turn those challenges into opportunities for design.
​Efficient
02
Connectivity
03
High-Quality
04
Authentic
01
How might we make travelers feel less like tourists and more like locals in unfamiliar places?
How might we help users find location-based spots to visit based on their needs easily and quickly?
How might we help users connect with local people who are passionate about their local community and eager to share their culture and experience.
How might we provide authentic and accurate information to travelers so that they can have a deeper understanding about their destination?
Ideate
Now it's time to start brainstorming solutions. I brainstormed ideas and identified a solution to help my users: A mobile application that would allow them to get authentic and accurate local travel information efficiently, connect with locals to get more high-quality information about the destination.
User Stories
I created user stories help identify the functional needs of the minimum viable product.
As a foodie, I want to get suggestions from locals about the best restaurants nearby so that I can try the most authentic local food
As a mom, I want to know how hard the local trail is and what to prepare for my kids, so that my kids can have fun
As a typical traveler, I want to have a map to show all the nearby places so that I can save time on the way
As a business traveler, I want to check out hidden gems so that I won't waste my time on taking line
As a traveler, I want to have high quality recommendations from locals, so that I get more authentic travel information
As a traveler, I want to find a local guide who has a similar personality and hobbies to show me around so that I can know this place better
As an existing user, I want a way to recover my password incase I've forgotten so that I can access my account as soon as possible again
As a local culture vulture traveler, I want to attend more local activities and events so that I can immerse myself into local life
As a soul searcher, I want to stay in a local resort without many people so that I can finding myself in the sole purpose
As a traveler, I want create a list of all the places I am interested in so that I can access them easily without browsing too long
As a local user, I want to have a "local" badge on my profile so that I can be a local guide to introduce culture of my community to travelers
As a traveler, I want a summarized travel strategies so that I don't need to spend too much time on digging out useful information
As a new user, I want to sign up with my Google or Facebook account so that I don't need to remember many different login data
As a traveler, I want to read some tips and strategies when I plan my trip so that I can make a good arrangement without missing anything
As a travel blogger, I want to take pictures in the hidden gems and avoid visitors so that I can attract more followers on my blog or Youtube Channel
Sitemap
After setting up the features and prioritizing the features, I built up the structure of the app. It helps me visualize the relationships between all the screens and examine the hierarchy
Userflow
Based on the sitemap, I think about several different scenarios users might encounter and create the red routes users might take to achieve their goals. This process helps me wear the user's shoes.
Red Route 1: View travel information of destination
.jpg)
Sketches
After identifying the key screens in user flow, I started sketching low-fidelity screens on the paper. Sketching is a quick way to make my ideas tangible so that they can be tested and adjusted before I make higher fidelity versions of my designs.
Red Route 1: View travel information of destination
Guerilla Testing
Once the screens for the critical routes were sketched, I created a quick prototype using Marvel's 'Pop' tool. With this prototype, I conducted five usability testing sessions via video conference. During the sessions, I asked the participants to complete the four red route tasks and to provide feedback about key screens. The result: 80% of participants had some difficulty completing one or more of the tasks.
80%
​of participants has difficulty completing one or more of the tasks during testing sessions with the sketch prototype.
Redesign
01 Delete repeated categories selection
Issue:
When asked to search attractions on map, 80% users were confused to type categories on the map or in the filter.
Solution:
The 'categories' on the map was removed. This helped to simplify the map screen.
02 Contact and check available button should be placed in an obvious place
Issue:
When asked to contact/send message to local guide, 90% users are confused by where should to tap, and they expressed to know their available date when they start talking. This function was intended to allow users to connect with locals easily and quickly.
Solution:
Based on the test results, it is necessary to add 'contact' and 'check available' button on the screen. Placed at the bottom is obviously to read and tap.
03 Strategies listed in more ways
Solution:
1. Listed strategies by popularity, post time, local, and traveler, etc.
2. Add like and comments number under the cover to help user decide quickly.
Issue:
When asked to read strategies about destination, 60% users expressed that they prefer to read strategies with higher rating or latest so that they can get more accurate information.
Lo-Fi Wireframe and wire flow
Red Route 1: View travel information of destination
Red Route 2: Search nearby places on the map
Red Route 3: Search for a local guide and connect with him/her
Red Route 4: Read travel strategies of the destination by local or travelers
other screens: onboarding and log in
UI design guide
Before diving into logo and style tile design, I created a mood board to gather multiple inspirations around this app's attributes:
-
Quality
-
Vitality
-
Freedom
-
Authentic
-
Joyful
Mood board
Hand-drawn icons and logo
UI design guide
This is a compilation of existing UI elements on the website that provides references for future design and collaboration for the design team. It is also a living document and will be updated whenever there is an iteration of the design.
Mockup Design
Making the app simple to use was very important, I learned during the guerrilla usability testing that users can easily get lost in a flow if it’s not intuitive and screens clearly labeled. In the first iterations I tried to oversimplify screens and the app look under designed. But I was able to fix this problem by creating color compositions that helped the content come alive.
Accessibility was considered and tested throughout the design. Background and font color contrast, text formatting considerations such as line and letter spacing, consistent navigation and common UI design patterns, like clear primary actions, were all used to make sure the design was accessible.
Take a peek at the first iterations of the design below.
​
Red Route 1: View travel information of destination
Red Route 2: Search nearby places based on your needs on the map
Red Route 3: Search for a local guide and connect with him/her
Red Route 4: Read travel strategies of the destination by local or travelers
other screens: onboarding and sign in/up and profile
​Usability Test
After the hi-fi screens were completed, I checked text contrast ratios using the WebAIM Contrast Checker and made adjustments to ensure all text passed WCAG standards. Next, I created an Figma prototype and conducted a round of moderated usability tests with five participants. The participants were asked to complete the four red route tasks, as well as provide feedback about key screens. All participants were able to complete all four of the tasks; However, feedback revealed a number of minor issues that hindered efficiency and clarity (see the rainbow sheet below). These issues were addressed through a round of design revisions.
80%
of participants expressed confusion with one or more elements of a task process.
Although every participant was able to complete each task,
Redesign
01 ​Improve clarity of current location and filter icon
Solution:
1. Show "search" icon and "current location" text in the search box
2. Move "filter" icon out from search box to right
Issue 1:
Users are confused by "Nearby" map shown and filter icon is not visible enough
02 ​Improve clarity of users' profile
Solution:
Add a background box to make a clear recognition
Issue 2:
The profile picture and name are not visible enough to read and tap.
03 ​Simplify filter
Issue 3:
Users are confused by km and categories are not understandable.
Solution:
1. Add toggle button for distance unit
2. Narrow down the category filter, the less you can filter, the more local things you can discover.
Product Features
Onboarding Screen Design
-
Streamline onboarding process, the CTA button is highlighted in blue-green color which looks strangely awesome upon a white background
-
Easy and quick sign in and sign up process
Home Screen Design
-
Users can see ratings by both locals and travelers under the place images at a glance
Information Screen Design
-
Fixed call to action, The 'review, photo and video' button is located in an ergonomic bottom screen location and remains pinned to the screen as the user scrolls for more information
-
Information data are formatted in a good way to scan and read. Local tips and users' reviews are helpful to make decisions
Nearby Screen Design
-
Map feature can help users find location-based spots easily
-
Users can get distance, rating, direction information at a glance
-
Comprehensive filters help users find spots based on their needs
Local guide Screen
-
List of local guides with clear profile photo and price
-
'Filter' button is located at the right top corner and remains fixed when scrolling
-
The filter menu is presented concisely to reduce cognitive load and provide a scannable overview - options are available in dropdowns
-
Introduction, hobbies, services, reviews are provided in the profile screen
Travel Strategies Screen
-
Strategies are sorted by popularity, post time, locals and travelers and shown by authors' name and number of like and comments to help users choose quickly.
-
Summarized information placed at the bottom of every strategy to save users' time on reading.
A Final Round of Usability Testing Verified the Design Revisions Were Successful in Helping Participants Navigate the Product More Easily and Efficiently
​
Another round of testing was conducted after the issues from the previous sessions were addressed. I conducted both in-person and remote moderated usability tests with five new participants. None of the problems from the previous round of testing were encountered. The revisions were successful in helping navigate the product more easily and quickly.
100%
of participants were able to perform all tasks with no issues.
​Final Thoughts
This is my first UX design project where I applied design thinking. It was difficult, but I had a lot of fun throughout the process.
Research is the foundation of my whole project, the most important skill I learned was to rationalize every design decision by solid research that minimized gaps. I also found usability testing very helpful t uncover usability issue improve my final design. Overall I gained much understanding in the UX design process.
If INTO were to be built out, I would like to do more research about online booking feature and planning trip feature.