JK

Travel Mate.

Group travel planning app

  • UX Design
  • Developer Collaboration
  • App Design
Travel Mate: trip-time and home screens
Role
UX design & research, design system, graphic design
Timeline
Sep – Dec 2024
Team
3 UX designers, 1 front-end, 1 back-end developer
Tools
Figma, AWS, Swagger

With a team of designers and developers, I helped build Travel Mate, an app that makes planning a trip to Korea with friends simple. Available in English and Korean.

Challenge

Planning with friends means switching between apps and endless back-and-forth.

Solution

One app to search places, build shared itineraries and track expenses together.

Result

A functional web and mobile product, refined over 16 iterations.

At a glance

16interface design iterations
100+product screens
2platforms, web and mobile
5person team: 3 UX, 2 developers

Research

Surveys, user data and benchmarking of comparable apps’ UI and information architecture.

Research findings
Surveys and user data
Benchmarking
Benchmarking comparable apps

From insight to decision

Insight

Design decision

Travel tools are split across many platforms

Search restaurants, hotels and attractions in one app

Group plans change through endless messages

Shared routes and daily itineraries

Shared costs are hard to keep track of

Built-in shared expense tracking

Information architecture

Information architecture
IA: home, travel plan, spots, profile
Core features
Core features

Visual system

Icon set
Icon set
Moodboard
Moodboard

My role: illustration & key screens

Illustration
Illustrations of major travel spots in Korea
Key screens
Main page screens

Final screens

100+ screens designed with two other UX designers. The home screen and the four-step trip setup:

Home: popular cities, courses and places
Home: popular places
1 · Pick travel dates
1 · Pick travel dates
2 · Choose nights at each stay
2 · Choose nights at each stay
3 · Choose how to get around
3 · Choose how to get around
4 · Set daily start and end times
4 · Set daily start and end times

The planning flow, on mobile and tablet

From an empty trip to a shared itinerary, in nine steps.

Start planning: mobile and tablet screens
01Start planningAdd places and stays to a new trip
Choose stays: mobile and tablet screens
02Choose staysSearch and pick where to stay
See stays on the map: mobile and tablet screens
03See stays on the mapEach stay is pinned and numbered
Add places: mobile and tablet screens
04Add placesFilter by sights, food and cafés
Sort places by day: mobile and tablet screens
05Sort places by dayDay-by-day lists, linked to the map
Plan each day’s route: mobile and tablet screens
06Plan each day’s routeSet the order and travel time
Review the trip: mobile and tablet screens
07Review the tripDates, stays and places at a glance
Get an itinerary: mobile and tablet screens
08Get an itineraryA generated day-by-day schedule
Edit together: mobile and tablet screens
09Edit togetherReorder, add or remove stops

Designing with developers

Three UX designers worked alongside a front-end and a back-end developer, so every design had to work as a real product.

Design for what can be built

Checking ideas with developers early kept shared itineraries and expense tracking realistic.

One shared system

Consistent icons, colors and components kept 100+ screens consistent and faster to build.

Iterate together

Developer feedback fed directly into 16 rounds of interface iteration.

Process

  1. 01ResearchSurveys, data, benchmarking
  2. 02Visual systemIcons & moodboard
  3. 03IAHome, plan, spots, profile
  4. 04Wireframes16 iterations
  5. 05Final screens100+ pages
  6. 06NextPartnerships & integrations
Next steps

Partner integrations with maps, restaurants and hotels, and expense splitting for groups.