CityGem App

Overview

CityGem was designed as a final project for my UX Design course at BrainStation Vancouver. All design work was completed over 5 weeks.

CityGem is a travel app that features curated lists of attractions, restaurants and activities selected by locals of the area to provide an authentic travel experience.

The Challenge

When travelling, it can be difficult to have knowledge of the hidden gems or recommended places to visit if you’re not a local. Travellers also have the challenge of sorting through an abundance of information and resources online when planning a trip.

The aim of this project was to make trip planning a more efficient and enjoyable experience and to provide travellers with tailored travel suggestions through an app.

Details

Role:
UX/UI Design, UX Research, Information Architecture, Wireframing, and Prototyping
View Project





Research and Insights

To get an understanding of what traveller needs are and how they can be better served by an app, I conducted 5 user interviews with colleagues and friends. For each interview, I asked open-ended questions to get a sense of what their travel habits are and pain points when it comes to trip planning.


Common travel habits and goals:
  • Travellers often seek suggestions from friends or locals
  • Having filtering options would be useful to narrow down results
  • A trip summary or ability to save to an itinerary would be helpful

Common pain points:
  • Suggestions/reviews online can often be generic and not tailored to the individual traveller
  • Overplanning can take away the mystery of a trip
  • It can be challenging to find hidden gems and activities off the beaten path

From there I gathered all the feedback on post-its which helped determine my 3 personas and the primary features they would like to see in a travel app.

Personas:
  • Hilary Grant: Likes to plan and create detailed itineraries (screenshot below)
  • Ty Wallace: Prefers to keep their itinerary loose
  • Claire Williams: The budget traveller who prefers minimal trip planning

Persona_1

“I see the value of an app where you can organize and save your itinerary on the fly.”

Hilary Grant Business Analyst

Persona_2

“I’d like to see unique and tailored travel recommendations.”

Ty Wallace Architect

Persona_3

“I want a quick and easy way to access budget friendly-activities.”

Claire Williams Healthcare Consultant

Information Architecture

Next I worked on the information architecture and low-fi concepts for primary use cases including the flows for onboarding and saving a travel activity.

While saving a travel activity is the main flow, the onboarding process was important to consider because it allowed for the ability to capture the traveller’s preferred destinations and travel style so that recommendations can be tailored to them.

Hierarchy
Save Activity Flow
Onboarding Flow

Wireframing

After figuring out the various flows, I created wireframes to visualize the content of each screen. I find this part of the process helpful because it allows for critical thinking into the functionality and transitions between the screens before getting too detailed with mockups. The wireframes were tested with classmates to get feedback on the functionality and content of the app.


Onboarding
Onboarding

Saving a Travel Activity
Save a Travel Activity

The Solution

Once the colour palette and fonts were settled on, I created a style guide which helped dictate the look and feel for the mockups. The visuals and photography used capture the highlights and essence of each city.


Style Guide
Style Guide
Mockups

Mockups

Mockups

Home Screen


CityGem

view prototype


Learnings and takeaways

This project was a great opportunity to take an area of interest and design an app from start to finish. It allowed me to dive deeper into UX and focus on user research. It was also a great learning opportunity to get up to speed on new design tools including Moqups and Pop. Overall a lot was taken in during the 5 weeks, and I’m excited to apply these learnings in future design projects.

© 2024 Rebecca Li