smartmockups_kmy75311.jpg
authenticity.png
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.

design process.png

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.

ricardo-gomez-angel-GcHar4P8V_Q-unsplash

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: 

Money.png
Spent $200
Billion on Travel in 2018
Phone.png
66% use smartphones to book a trip
Phone.png
74% use smartphones to reasearch a trip
Travel.png
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.

IMG_9345.heic
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

 User Persona

EXPERIENCE MAP

Experience Map.png

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: 

  1. Signing Up
  2. Feeling Immersed in the Culture of a Place 
  3. Planning
  4. 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

task flow .png

Paper Sketches

Once my task flow diagram was created, I began exploring different concept sketches for screen designs.

IMG_9483.HEIC
IMG_9484.HEIC

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

Onboarding Screen.png

Landing Screen

Login Screen.png

Sign in Screen

3 copy.png

Home Page

3 copy 2.png

Recommendations Page

Activity Page.png

Activity Page

Activity Page-1.png

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

user test mockup.jpg

Iterations

TRANSITIONING WIREFRAMES FROM LO-FI TO MID-FI

V1 Home Page

home lo fi.png
To Fix.png

V3 Home Page

home mid fi.png
Changes Made.png

V1 Recommendations Page

V3 Explore Page

Recommendations lo fi.png
recommendations mid fi.png
To Fix.png
Changes Made.png
To Fix.png
Changes Made.png

V1 Activity Page

V3 Activity Page

Activity Page lo fi.png
To Fix.png
To Fix.png
Activity Page mid fi.png
Changes Made.png
Changes Made.png

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.

font family.png

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

Frame 11.png
Frame 12.png
Frame 10.png
final app icon.png

Final App Icon

final logo.png

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

Recommendations Page.png

Mid-fi Screen

recommendations mid fi.png

Hi-fi Screen V1

Explore page 1.0-1.png

Hi-fi Screen V2

Explore page 1.1.png

Final Hi-fi Screen

Explore page 1.0.png

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: 

Sign up 1 mockup.png
Sign up 2 mockup.png
Set mockup.png
Updated explore MU.png
place mockup.png
Updated saved MU.png

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

marketing site.png
set destination ipad mockup.png
activity page mockup Ipad.png

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 Tarot Card.png

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 Tarot Card.png

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. 

Next Steps and Key Learnings