Trip Planning Feature

Helping travelers plan their dream trip to Japan.
Timeline: 4 days
Year: 2021
Role: UX / UI Designer

The Project

I was tasked with designing a hotel booking application for use by foreign travelers coming to Japan. The purpose of this exercise was not to design a fully-fledged travel app, instead it was to showcase my design thinking process and to take the solution as far as I could in the short timeline I was given.

Part 1

Discover and understand users

This section is all about discovering and understanding the user's needs, goals, and pain points. I set myself a few research goals before getting started.

  1. Learn as much as possible about my potential users
  2. Understand current solutions and the competitive landscape
  3. Determine if and how I can leverage new technology and innovation

Survey and user characteristics

I sent out a user survey using Google Forms and received 80 responses. Here is a summary of the average user’s characteristics:

Limitations and assumptions: Survey respondents were not pre-screened. Only about 1/3 of users have travelled to Japan before. I made an assumption that people trying to book travel abroad would have similar pain points to those trying to book travel in Japan.

Key user insights

I noticed some common themes and patterns among the survey responses.

Multiple tools

Most users did not rely on a single tool to plan and book their travel to Japan. They used multiple websites and apps to figure out the best prices, places to stay, etc.

Planning takes time

Users spent a lot of time researching and planning their travel in order to get the most out of the area they are visiting.

Travel plans on hold

Nearly all users have temporarily stopped travelling due to COVID-19 and many are hesitant to start travelling again due to restrictions, uncertainty, and safety.

User feedback

Here’s what some of the users said when asked about planning and booking travel abroad.

I wish there was an app that had this all included instead of having to go back and forth between platforms.

International borders are closed so I'm not booking anything.

Haven't gone abroad since covid started. Anxious to get back to traveling in 2022.

It can take a significant amount of time to plan out the pieces and parts to make the most of the area you’re visiting.

User persona

Daria Hurley

30 yrs old | San Diego, California | Digital Media Manager

Bio

Daria enjoys Japanese culture and films and loves to travel. Before COVID, she used to plan one or two trips abroad each year with her partner. Together, they love to discover interesting neighborhoods, try local food, and enjoy unique experiences. Even though COVID restrictions are still in place, she is eager to start planning her long-awaited trip to Japan.

Goal

  • Start planning her next trip to Japan
  • Discover the best places to stay and eat
  • Experience Japan like a loca

Pain Points

  • Using multiple planning and booking tools makes it difficult to keep track of plans
  • Takes time to research and plan everything
  • When will it be safe/OK to travel again?

The competition

These are the 3 digital travel booking tools that came up most often in survey responses. My goal was to compare what features they had to offer in order to identify gaps and opportunities for improvement.

Pros:
  • Book stays, car, taxis & attractions
  • Save stays to view them later
  • View previous + upcoming trips
  • Does a few things very well
Cons:
  • No travel planning features other than for stays
Pros:
  • Book stays and experiences
  • Create wishlists to save stays for later
  • View previous + upcoming stays
  • Local hosts & inspiring articles
Cons:
  • No travel planning freatures other than for stays
Pros:
  • Find flights, hotels & things to eat/do
  • Tailored suggestions based on previous searches and trips
  • Excellent trip planning features
  • Excellent price comparison features
Cons:
  • Not a dedicated app, users have to go elsewhere to gook

Part 2

Problem definition & ideation

At this stage it was time to re-define my goal and narrow down its scope based on the insights I gained from users. Because of the short timeline for this exercise, I chose to focus on a single feature.

Problem statement

Foreign travelers need an easy and convenient way to plan their next trip to Japan all in one place so that they can easily access their travel ideas and book their trip once they feel ready to start traveling again.

The idea

A trip planning feature

To address the users pain points I decided to design a travel planning feature within an existing travel booking app. It would make the app a “one-stop-shop” to plan and book travel to Japan. The planning feature would let users like Daria:

  1. Start planning a trip early so that they can be prepared when they feel ready to start traveling again and make the most out of their travels
  1. Find and bookmark interesting articles on their destination so they can easily come back to them later
  1. Browse accommodations and bookmark potential options so they can easily return to them later when they are ready to book
  1. Invite other people to view and collaborate on trip planning

Feature requirements

Based on Daria’s goals and needs, the app should:

Be convenient

Be transparent and trustworthy

Daria's journey

What steps Daria takes before, during and after her involvement with the app.

  1. Daria is on her lunch break at work
  2. She is dreaming about traveling, she'd like to go to Kyushu next year if it's possible
  3. She pulls out her phone
  4. In the app, she creates a new trip called Kyushu so that she can start planning
  5. She browses a few articles about Kyushu and bookmarks one that she wants to save for later
  6. She browses hotels in a few different areas of the city and bookmarks 2 options that she likes
  7. She adds her partner to the trip so that they can see the hotels she's bookmarked
  8. She puts her phone away and gets back to work

Early sketches

I started by sketching some user flows and early wireframe ideas.

User flow

I wanted to be realistic in what I could achieve given the time limitations, so I decided to focus the solution on 2 aspects of trip planning: discovering a location and browsing accommodations (boxed area).

Part 3

Wireframing, visual design & prototyping

This section demonstrates the designed solution, from low-fidelity wireframes to a high-fidelity prototype. Figma was used as the design tool.

Low-fidelity wireframes

I designed some wireframes that focused on Daria’s goals and would allow her to:

  1. Start planning her trip to Kyushu
  2. Find and bookmark interesting articles on Kyushu so she can return to them later
  3. Browse accommodations and bookmark potential options so she can return to them later
  4. Add her partner to the trip plan

Style guide

I kept the colors simple and chose a modern, variable sans-serif font that is easy to read on all screens. I kept layouts consistent by using a 4-column, 8px grid. Illustrations (modified but not created by me) add some deslightful touches to a simple UI.

Component library

After setting up color and text styles in Figma, I started to build a component library to maintain consistency across the designs. Components were setup using auto layout to make sure they are scalable across different screen sizes.

The final designs

All of these elements finally come together in the final designs. Users can search by location to create a new trip and start planning.

Add people

Research revealed that nearly all users traveled with family or partners/friends. This feature let’s people plan trips together.

Everything in one place

A scrolling tab bar keeps different kinds of information organized inside single trip. Users can research and plan all aspects of a trip in one place. They can come back when they’re ready to reserve.

Save articles

Users can discover interesting articles about their destination and save them to their trip plan.

Save stays

Users can browse accommodations and save them to their trip plan, and come back when they are ready to reserve.

Last words

While carrying out this exercise I had to make assumptions and trade-offs in order to make progress and stick to the timeline. Here are a few of the constraints and trade-offs that I considered: