Project Overview
CityGuide
The global travel and tourism market is set to rise substantially in the coming years, significantly contributing to many economies worldwide. Travelers increasingly seek authentic local experiences, prompting platforms like Airbnb to introduce "experiences" with local guides, Google to enhance its Local Guides feature, and AllTrails to offer curated content for US National Parks. Despite numerous digital products providing standard tours and recommendations, there remains a gap for truly unique city experiences. This new product aims to fill that gap by helping users create personalized and customizable city itineraries with ease.
The Product
End-to-end mobile application
My Role
UX research
Branding
UX/UI design
Testing
Duration
6 weeks
The Process
Discovery
Ideation
Design
Prototyping
& Testing
Next Steps
Learnings
Discovery
Research Plan
Current travel trends reflect a user preference for authentic local experiences over mainstream tourist attractions. While many digital products offer pre-packaged tours and paid city experiences, I saw an opportunity to create AI-powered uniquely personalized city experiences catered to individual users’ wants.
Research Hypothesis
City travelers want unique personalized city travel experiences.
Research Goal
Determine the aspects of planning unique city travel experiences that travelers find difficult so we can understand what features to offer.
Research Methods
01 Competitor analysis
to study competitor offerings and determine any potential gaps this product can fill.
02 User interviews
to understand specific user needs in the city travel space.
01 Competitor Analysis
I identified 3 competitors for the competitive analysis - Tripadvisor, AllTrails, and SmartGuide.
Tripadvisor
Unique Value Proposition
a one-stop platform with expert travel content and reviews of popular attractions
Strengths
AI tool for custom personalized travel itineraries
trip-planning resources
guides to common attractions
user reviews
booking services for hotels, restaurants, etc
traveler’s Choice Award for top attractions, restaurants, and hotels
ability to purchase experiences
recognized industry leader
Weaknesses
wealth of information can be difficult to navigate
no GPS tracking features
no accessibility features for physically impaired individuals
no safety features
AllTrails
Unique Value Proposition
trail maps for outdoor adventures including hiking, trail running, and biking
Strengths
vast collection of hiking trails across the globe
trail reviews with star ratings, comments, and photos
ability to download maps to use offline
real-time GPS tracking and location sharing
customization and filtering by activity, skill level etc
trail accessibility information
curated National Park Service guides
Weaknesses
limited options for city exploration
no group travel features
city trails limited to well-known tourist attractions and urban parks
SmartGuide
Unique Value Proposition
a digital audio guide app for big cities with content submitted by guides and destinations
Strengths
audio guides for popular city attractions
navigation features for walking tours
ability to purchase experiences
audio guide community reviews
Weaknesses
guides limited to well-known attractions
no group travel features
limited customization options
no accessibility features for hearing- or physically impaired individuals
02 User Interviews
I conducted user interviews with 5 participants via Zoom. All participants were US citizens and frequent city travelers to cities in the US and abroad.
Affinity Mapping
I used affinity mapping to organize the information interview participants shared with me. The pain points surrounded issues of finding experiences relevant to the individual’s needs. Group travelers also asked for features to help find each other on trips.
Research Takeaways
City travelers:
find travel planning overwhelming
want to enjoy local experiences, but don’t have the resources to find them
say personalization features are important to find attractions relevant to them
want help finding their travel companions in real time
want real-time navigation assistance
female travelers identified safety as an important aspect of city travel
Ideation
Problem Definition
Due to time constraints it was important to identify the most essential features of the web experience. I used tools like POVs and HMWs, prioritization matrix and task flows to zero in on the users’ needs.
POV & HMW’s
Point of view (POV) statements and How Might We? (HMW) questions helped me identify my users’ most important needs so I could begin to address them directly.
POV Statement
I want to help overwhelmed travelers visit local attractions when they travel to cities because reliable information about local sights can be difficult to find.
How Might We...
Help travelers feel more comfortable when exploring city attractions
Create a reliable source of information about local attractions
Craft a personalized experience for city travelers
Defining the MVP
Due to time constraints, I wasn’t able to design every feature that the web experience would offer. I proceeded to prioritize features to focus on key experiences for the high fidelity wireframes, prototypes, and testing. I used a value matrix to prioritize features, and then proceeded to map out key user flows. I then built a sitemap for the whole website to organize the navigation and envision what the experience would look like as a whole.
Feature Prioritization
I used a value matrix to prioritize features. Personalized guides, navigation, and local discovery were the P1 features I decided to focus on for the design and prototyping phases. To ensure the project fit within the timeline I decided to reserve features for international travelers for later.
P1: Must Have
Itinerary generator
Global search
Personalized recommendations
Local discovery
Navigation assistance
P2: Nice to Have
Neighborhood guides
Local events
P3: Can Come Later
Google reviews integration
Features for international travelers
Design
Design System
I created a design system to maintain a consistent appearance within the project. I used brand values to inform the color palette and went with a modern neubrutalist design for the cards and buttons to maintain an entertaining and uplifting flair.
Brand Guide
Brand Values
I started the branding process by first brainstorming and defining the brand values to use as a guide for aesthetic decisions.
Fun
Easy
Safe
Reliable
Logo
I iterated on the logo several times. I began by sketching landscapes of cities at night to evoke vibrant nightlife that travelers can experience when going to new cities. The logo then evolved into a yellow crescent moon on a light blue background.
Color Palette
The color palette was inspired by illustrations in the Abstract pack by Icons8. These illustrations were edited and used in other areas of this project.
I chose yellow for emphasis and CTA’s and light blue for backgrounds.
#f1f1f1
#d2d2d2
#ababab
#858585
#616161
#404040
#212121
FFEA5B
E0719E
7FD6C2
FFF3A4
FFD6E8
C7ECE4
#093663
#14589a
#207bd4
#5ea0fa
#AAC6FC
#e7eefe
F6D700
CF3976
0DAF8A
Secondary
Tertiary
Neutral
Primary
Typography
For the fonts I chose Archivo and Roboto as I felt they worked well with the style I had chosen.
Header 1 - Archivo Medium 20px
Header 2 - Archivo Regular 20px
Header 3 - Archivo SemiBold 18px
Header 4 - Archivo Medium 18px
Header 5 - Archivo Regular 18px
Body - Roboto Regular 16px
Label - Roboto 12px
Link - Roboto 14px
Button - Archivo SemiBold 16px
Iconography
For iconography, I used a combination of Feather icons and free icons from the noun project.
Component Library
I designed a library of components to create a coherent aesthetic and streamline the process of creating HiFi wireframes and prototypes.
Buttons
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Primary
Active
Pressed
Disabled
Secondary
Primary add
Secondary add
Cards
Filter Chips
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Label
Inputs
Activated
Focused
Error
Nav Bar
Explore
My Guides
Navigate
Favorites
Account
Search Bar
explore destinations
Checkboxes, Toggles
Checkboxes
Toggles
Wireframes
I used wireframes to help me create a clear plan for design, making communication easier and providing a foundation for the end product.
Low- and Mid-Fidelity Wireframes
To begin to envision what the web experience would look like, I sketched the key screens on paper and digitized them in Figma.
HiFi Wireframes
I performed usability testing with the mid-fi wireframes and made changes according to user feedback. With the design system in place, I implemented the improvements and brought the designs to high fidelity.
Prototyping and Testing
Mid-Fi Prototype and Testing
Seven participants completed unmoderated mid-fi usability testing using maze.co. The overall user feedback was positive, but the testing showed some small improvements could be made to the UI.
I first created a mid-fidelity prototype to test usability and gather feedback on the UI from my mentor and peers.
I made minor content and UI changes per user feedback and proceeded to bring the wireframes to high fidelity
High-Fi Prototype
I created a high fidelity prototype to test usability and gather feedback from my mentor and peers.
Usability Testing
Seven participants completed unmoderated usability testing using maze.co.
Users were tested on 3 flows. They were asked to:
Search for a destination.
Narrow down search results based on provided criteria.
Add a meet-up point to meet with a travel companion.
Overall, the participants liked the UI and the aesthetics, but wished for an easier way to find the “add a meet-up point” option.
Design Iterations
Improving Recognition
The problem:
Users struggled to find the option to add a meet-up point in the map view of the navigation tab. This option is available in a drawer at the bottom of the screen that the users can tap to open.
Before:
Open the drawer in map view in the navigation tab.
Tap “add meet-up point”
Possible solutions
01 Drawer Open by Default
When the user opens the navigation tab for the first time, the drawer with the “add a meet-up point” option is open by default. The user can collapse it if they don’t intend to do any of the actions in the drawer.
02 Tooltip
When the user opens the navigation tab for the first time they’ll be given a tooltip to help them locate the “add a meet-up point” feature and other features hidden in the drawer.
Proposed next steps
Option 1 requires fewer steps to implement. However, to determine the best solution to the problem I would do another round of usability testing with these two options. A closer look at the users' mental models and time spent on screen would help determine the best solution.
Next Steps
Features
Due to time constraints, the scope was limited to only designing some of the features of the app.
That being said, if the time allowed I would have like to design additional features in the near term, and offer solutions in other areas of city travel in the long term.
Short Term
In the short term, it would be most beneficial to develop features that help users feel safer when traveling. While the MVP offers live location sharing, there could be other features, such as safety tips for example, that could help put users at ease when traveling.
Long Term
In the long term, it would be helpful to think about expanding the scope to include cities outside the US. This would mean offering the app in more languages, to ensure it is accessible to a wider audience.
Key Takeaways
The end-to-end travel app design didn’t come without its challenges, but I am proud of the project and the work I accomplished in 6 weeks.
Opportunities for Improvement
Scope Creep
In this feature-rich product, I found it difficult to narrow down features for the MVP. The research participants when interviewed offered a wealth of opportunities to explore in this project, making the project more interesting, but also potentially adding a long list of features to develop for the MVP. With the help of my mentor I was able to re-prioritize features and find key task flows to focus on.
Staying organized.
During this project, I managed to improve my process by incorporating an organization strategy. With a robust folder structure for each stage of the project and tidy Figma files, I kept good track of all my deliverables making content writing for the case study a lot more straightforward this time around.
Successes to Celebrate
Asking for feedback early and often.
In this project, I had a chance to do usability testing with mid-fi wireframes in addition to testing high-fi wireframes. The feedback I received from testing proved to be a huge help in creating a robust navigation system and a friendly UI.
Following a framework.
Embracing the Design Thinking framework provided a structured approach, guiding me through empathizing with travelers, defining the specific challenges, ideating creative solutions, prototyping, and testing. This process allowed me to address the unique needs and preferences of city travelers for a more effective and enjoyable user experience.