THE TRAVEL APP THAT ALLOWS YOU TO LIVE LIKE A LOCAL.
Overview
authentiCITY helps to create more authentic travel experiences for its users. It provides suggestions and reviews for activities to do at a destination that have been posted by the locals themselves.
ROLE
TIMELINE
TOOLS
UX Researcher, UX Designer, UI Designer
10 Weeks
Pen & Paper, Figma, Principle, InVision
The Design Process
For my design process, I followed the following four phases which are based on the new Double Diamond Model. Each phase is essential in providing a framework to transition from identifying a problem to delivering a solution.
Part 1: Discover
The Problem Space
In choosing a problem space, I recalled conversations I had with friends about travel, and wanting to feel visit places that were popular with locals, as opposed to tourists. Unfortunately, unless you knew someone at the destination, or asked a local, it was not easy to find good recommendations that will give you these experiences.
Upon further investigation, I discovered the concept of over-tourism:
"Business trends and macroeconomic factors that have resulted in more travel, and more tourists flocking to popular destinations."
The issue is not that too many people are travelling, but that too many people are travelling to the same destinations, creating problems such as overcrowding, or environmental degradation.
PROJECT GOAL:
Make it easier for millennials to access information that will allow them to cultivate local experiences when they travel.
How Might We...
encourage millennial travellers to visit a wider array of attractions when they visit a destination, in order to create more authentic experiences and reduce over-tourism in popular destinations?
Key Research Insights
SECONDARY RESEARCH
Considering the problem space, I began researching the travel patterns of millennials in particular, and found some interesting insights:
Spent $200
Billion on Travel in 2018
66% use smartphones to book a trip
74% use smartphones to reasearch a trip
86% chose experiencing a new culture as motivation to travel
PRIMARY RESEARCH
I wanted to better understand how millennials approached travel and what they were looking for from their trips, so I conducted 5 interviews with participants between the ages of 23-33. They presented various pain points, motivations, and behaviours that have been compiled into the themes listed below:
Theme 1: Difficulty finding local/authentic things to do
-
Millennials want to do more local and authentic activities at a destination
-
Existing travel sites are difficult to navigate
-
Their best trips were when they knew a local, or received good suggestions from one
Theme 2: Enjoy a balance of authentic and tourist activities
-
Expressed a desire to see the popular sites at a destination.
-
Want to be able to have a combination of experiences. They want to see why the place is popular, but also seek out experiences to feel immersed in the culture.
Theme 3: They don't travel with a fixed itinerary
Pain points, motivations, and behaviours being categorized
-
Most of the interviewees don’t take fully planning out their trip very seriously.
-
They like to have a general idea of what a place has to offer and if it’ll be worthwhile to visit, but for the most part, millennial travellers tend to plan as they go.
Part 2: Define
Persona and Experience Map
After synthesizing my interview findings, I created a persona that reflects the pain points, motivations, and behaviours that were identified during the interview process. I then created an experience map that outlines the user journey of the current state of the problem space in order to seek out opportunities for intervention.
PRIMARY PERSONA
EXPERIENCE MAP
Design Intervention
In exploring the problem space from both a secondary and primary research point of view, I was able to develop a persona and experience map that indicated clear opportunities for a design intervention.
There is a lack of easily accessible resources that would provide suggestions of things to do that will give travellers that ‘local’ experience. This is the basis of which I conceptualized my design intervention. I would create an app that allows locals of a destination to post places or attractions that they think are worthwhile for travellers to visit that would give them the experience they are looking for.
Part 3: Develop
Task Selection Process
USER STORIES
Based on the insights provided from the persona and experience map, I authored a list of 30 user stories to outline the tasks users would want to achieve while interacting with the app. I then grouped these stories into 4 epics:
-
Signing Up
-
Feeling Immersed in the Culture of a Place
-
Planning
-
Finding Reviews Made by Locals
TASK FLOW
Once my stories were organized into epics, I selected my core epic and evaluated how its associated user stories could be translated into tasks. I then chose the task that would best serve the needs of my persona to move forward with in creating a task flow diagram.
CORE EPIC
Finding Reviews Made by Locals
USER
Millennial traveller
USER STORY
“I want to find recommendations of good places to visit made by locals, so that I, myself, can feel like I’m living like a local at the destination.”
USER GOAL
Log in to the app, enter travel destination, and view recommendations of things to do that have posted by locals.
TASK FLOW DIAGRAM
Paper Sketches
Once my task flow diagram was created, I began exploring different concept sketches for screen designs.
Digital Wireframes
The sketches that best met the desired aesthetic and functionalities were converted to digital wireframes. The wireframes would have a clean and simple design, as the app is intended to be straightforward for its users to help them access what they are looking for as efficiently as possible.
VERSION 1 WIREFRAMES
Landing Screen
Sign in Screen
Home Page
Recommendations Page
Activity Page
Activity Page 2
User Testing
With the completed low-fi wireframes, I turned them into an interactive prototype and conducted two rounds of user testing, with 5 people tested per round.
After each round, I made the appropriate iterations based on user feedback and the wireframes were translated from lo-fi to mid-fi. These tests allowed me to gain user insights and create a more human-centered product that fulfilled the needs of my users.
USER TESTING FINDINGS: ROUND 1
-
Users found app design straightforward and intuitive.
-
Wanted to be able to sign in using other social media platforms
-
Some components could be bigger
-
Wanted number of ratings shown on Activity Page
-
Wanted ‘saved’ page
USER TESTING FINDINGS: ROUND 2
-
App’s design was very clean.
-
Wanted to see spacing between highlights on activity page reduced
-
Search bar text size could be increased
-
Recommendations page could be called something different
-
Search bar should be included on Home and Recommendation pages
Iterations
TRANSITIONING WIREFRAMES FROM LO-FI TO MID-FI
V1 Home Page
V3 Home Page
V1 Recommendations Page
V3 Explore Page
V1 Activity Page
V3 Activity Page
THE FEEDBACK:
-
Users indicated that contents of the header section should be more identifiable, as the search bar supports one of the main functionalities of the app.
THE CHANGES:
-
A drop shadow was added, and font size increased
-
Content was also added and usability (such as horizontal and vertical scrolling) were built out.
THE FEEDBACK:
-
Some users wanted the search bar consistent between pages, as well as the option to refine your search without having to return to the home page.
-
One user also suggested changing the name of this page from ‘recommendations’ to ‘explore’ as it was better suited.
THE CHANGES:
-
Search bars were added
-
Page name was changed in header and nav bar
THE FEEDBACK:
-
Users recommended reducing spacing between rundown text
-
Wanted to be notified when something was saved
THE CHANGES:
-
The spacing was reduced and clear title added
-
A notification blip was included in navigation bar
Part 4: Deliver
Determining the Brand's Visual Identity
In completing research, creating digital wireframes, and conducting user testing, it was time to develop the brand's identity.
This journey began with the creation of a moodboard which sets the tone of the brand through images, and helps create a visual identity that will give users the experiences they’ve been searching for.
authentiCITY is more...
-
Organized than cluttered
-
Exciting than dull
-
Simple than complex
-
Fun than serious
-
Extroverted than introverted
-
Different than the same
It is...
-
Exciting
-
Authentic
-
Adventurous
-
Motivating
-
Inviting
-
Memorable
Colours and Typography
COLOURS
In the process of developing a visual identity for the brand, some stand-out colours were extracted from the moodboard. The ones that best aligned with the brand’s vision and purpose were selected as brand colours.
Blue to offer a sense of calm and relaxation.
Orange for a sense of adventure and excitement.
Green to evoke feelings of exploration and reflect nature.
Brand Colours
#32666D
#599194
#D58F68
#929D5D
TYPOGRAPHY
The typography was chosen to maintain the clean and simple interface of the app. Avenir is a sans-serif font that I believed aligned with the minimalist appeal I wanted the app to have.
LOGO AND MOBILE APP ICON DEVELOPMENT
In creating the logo and mobile app icon, I wanted something simple that could be easily recognized and understood by users. I experimented with some different designs until I landed on 'the one', a simple 'a' that has been designed to look like a combination of the letters 'a' and 'c', that make up the two aspects of the brandname.
First Version
Final App Icon
Final Brand Logo
Greyscale to Hi-Fidelity Wireframes
After two rounds of user testing, several iterations, and developing a visual brand identity, it was time to translate the greyscale wireframes into a hi-fi wireframe.
With the selected brand colours and finalized wireframes, I was ready to experiment with some colour injection to see what combinations, effects, and opacities worked best to give my users the effortless experience that they were looking for.
Lo-fi Screen
Mid-fi Screen
Hi-fi Screen V1
Hi-fi Screen V2
Final Hi-fi Screen
I experimented several times with different versions of colour injection, elements, and effects before coming to the final version of my hi-fi screens. I set out to achieve better colour accessibility, as well as ensure that components were more clearly defined with the use of slightly darker colours and drop shadows.
Final Hi-fi Screens and Interactive Prototype
After many weeks of hard work and trial and error, we’ve finally come to the end of authentiCITY’s journey. Through user interviews and persona creation, I saw an opportunity to create a travel app that was simple and gave users what they were looking for without having to spend excessive time scrolling and searching for good recommendations.
I set out to achieve this through authentiCITY. Experience it below:
In order to promote the authentiCITY, I needed to create a product marketing site that introduces people to the story surrounding the app and its functionalities. I created both a desktop and mobile version, which was a great introduction to responsive design.
Product Marketing Site
Alternative Platform
Once the hi-fi prototype was complete, I considered which devices users tend to have with them while on vacation. I decided to experiment with what the app would look like on a tablet, and this way users can enjoy the same features on a larger device with only a slightly different interface than mobile.
Going Forward
Design Impact and Future Thinking
To explore how authenticity could impact its users and the world around, I decided to use two of the tarot cards of tech.
The BFFs
If two friends were to use authentiCITY while on vacation, it could serve to bring them closer as they may end up making great memories based on the suggestions provided. It may also help them discover new interests they never knew the other had.
Some of the best memories are had while travelling, and I hope that my product will allow people to have new and exciting experiences that they may have not previously been aware of.
The Catalyst
This app could help people experience and understand more about cultures outside of their own. It can give people a new confidence when travelling to explore beyond their comfort zone.
People might be less hesitant to try to get fully immersed in another culture and be more conscious travellers.
NEXT STEPS
-
Build out more of the app's functionality
-
Include local's perspective
-
-
Improve and iterate the app's UI
-
Add animation
-
KEY LEARNINGS
Through this process, I learned that UX Design is not linear, and there is always room from improvement and iteration. Additionally, I discovered that my understanding is not always the same as others, and that I should trust to users to guide me as that is the only way to achieve effective human centered design.
This project was challenging due to its short timeframe, but it introduced me to each stage of the design process, and allowed me to gain a sense of what approaches may or may not work. I learned to quickly make decisions, pivot when necessary, and make improvements in order to produce an end product that I am proud of.