Planable Case Study

Planable is a travel planning application that helps users build and share their trip itinerary.

My Role: UX design, UI design, User researcher, wireframe, high fidelity prototype, and usability test.

Tool: Figma, google doc, Google meeting

Overview

Problem

Solution

Goal

People feel overwhelmed when they have too much information to process and organize when they start to plan a trip.

People in the same travel group to pin the places and vote for their most wanted place on the map; a trip route will be generated based on the vote result.

The goal for this project is to build a platform that could help people with their stress associated with travel planning.

Empathizing with Users

Survey

I conducted a survey on Google form to get to know more about users' general information and habits about travel planning. 21 users participated in the survey, 72.2% of them had a group trip with 2 to 3 people for their most recent trip.

76.2%

Plan their trip ahead for at least 3 weeks.

Plan their trip ahead for at least 3 weeks.

interview

I interviewed 6 people who fell into my targeted users range.

The goal for this interview is:

  • Understand users’ current process of travel planning by letting the user walk me through their current process of travel planning,

  • Identify users’ pain points in relation to their current travel planning process.

Key Takeaways

  • Majority of users share their travel plan on a excel file or google doc with their travel groups, and then discuss about their decisions in separate platform such as Whatsapp or iMessage;

  • People in charge of planning the trip for whole group wants everyone in the group enjoy the trip;

  • People check informations and reviews on different websites to validate and compare; they tend to trust official website more than 3rd party website for credibility;

  • Besides internet reviews, people rely on friends’ recommendations for places they want to visit.

Affinity map

I took the information from the interview to create the affinity Map, I grouped and numbered users need into different steps.

Persona

Based on the affinity Map, I created two Personas:

  • Trip planner, who takes care of the whole travel planning for her group;

  • Trip follower, who preferred follow the group while traveling.

44.5%

Design

User Flow

I started to create two user flows for the essential path users would take. I wanted to keep the user flow as simple as possible so there are no confusions made and users could find their way from beginning to end straight forward.

sketches

Next I started to draw some sketches to show what I wanted Planable to look like.I wanted the screens to look clean and simple, so people could find each task easily within minimum steps.

wireframe

Before I jump into wireframes, I conduct a guerilla test with 5 users. During the test, I found some confusions for users.
For example, it is hard to tell the meaning for the icons on the navigation bar, so I improved the UI on the navigation bar and then put some text under each icon to help users identify them.
It is hard to identify which page users were looking at, so I improved labeling on the top of each page, so users could clearly see which page they are at.

Design System

Since Planable is for travel planning, I wanted users to feel chill and excited when they use it to plan their every single trip. I got some inspiration from images, and decided to use warm orange and blueish green as the main color.
I went for a lighter background, because a light UI could provide users feel less overwhelmed compared to darker one.

High fidelity screens

Next I started to apply the design system on my high fidelity screens.
I decided to use the orange color for all the header and action buttons, and I choose green as the color of the confirmation button.
I kept the gray outlined box on header, because I want to it to be more clear for users to see which page they are on.

High Fidelity Tests

I did 2 rounds of a high fidelity test with 10 users in total.
It is glad to see users finishing tasks such as creating a new trip, adding events to a trip, and sharing the trip to friends within a short period of time.
I also got some feedback on confusions and advice during the test, based on those, I illiterate my screens.
Here are some examples:

Instead of putting the calendar on top of each page, I created a separate page for date selection, so users could be more clear about the date they are selecting.

I highlighted the icon on the navigation bar when it was selected, so users could tell they are on a certain page.

Some users mentioned they were not sure why they were voting, so I added a separate page for time selection on voting, and also added some instructions on the top of the page.

Users spend a lot of time voting because they need to click “confirm” after every vote.
In order to reduce the time users vote, I decided to take off confirmation messages after voting.

I added the instructions on top of the page to show that users could view their voting result by clicking the time slot, and they are able to see the voting results and click other voting options if they wanted to change it.

Final thought

During this project, I started to conduct a secondary research, screen survey, user interviews, and then create lo-fi wireframes, build a design system and finally prototype the hi-fi screens and usability test.
It is a demanding and time consuming process, but it is such an insightful process and I learned a lot from every step I went through.
I enjoyed journey and I believe there is still a lot room for me to improve and a lot more things for me to learn.