Product image for TriPlan, an app for user to plan their trip in smartphone so that they can check their plan easily while traveling.
Mobile App
UI Design
UX Research

TriPlan

TriPlan is an app designed to help users plan their trips on their smartphones, allowing them to easily access their itinerary while traveling. Users can save places of interest in the app, add them directly to their trip plan, and share their itinerary with friends, family, or travel partners.

Duration

2 months

My Role

Product Designer

Responsibility

UX Research
Wireframing
Mockups
Prototyping

Background

Side Project

- Project Overview- Research- Functional Map- Flow Chart- Wireframe- Mockup- Prototype- Product Iteration- Corporate Identity System- Takeaway

Project Overview

I. Background

As a product designer, I created a mobile app catering to the needs of travelers who prefer planning their trips in two months. I am currently dedicated to refining and enhancing the app further to provide an exceptional user experience.

II. Goal

Allow users to edit and share their travel plans anytime and anywhere.

III. Problem Statement

People who enjoy traveling with friends and family need an app to help them easily plan and share their trips, so they can access their plans anytime, anywhere.

IV. User Story

Research

Market Research

Based on survey data, I observed that Taiwanese prefer to plan their trips independently. Furthermore, they rely on the internet, social media, and recommendations from friends, colleagues, and classmates for obtaining travel information. Consequently, I positioned the target audience of the product as independent travelers and explored ways to assist users in effortlessly editing itinerary plans and sharing them with others.

TriPlan Market Research

Competitive Audit

After conducting a competitive audit, I discovered that the target audience would have an impact on every aspect of product design, ranging from functionality to interface design.

Competitor Impressive Feature

TriPlan Competitive Audit - Funliday, TripHugger, Tripadvisor, TripIt for Vacation travel, Business travel, Flexible schedule, Rigid schedule

User Interview

User interviews helped me explore how people plan their trips and what tools they use. Interestingly, I found that everyone uses different tools, but the reason for planning a trip is similar: to make the trip smoother.

Persona

Casie who loves to travel, saves places of interest and enjoys sharing travel information and plans with friends.

TriPlan Persona - Casie who loves travel. She saves the places which she is interested in and likes to share travel information or plans with her friends.

Functional Map

TriPlan has three main functions: Travel Plan, Travel Spot Wish List, and Account Settings.

Why are the functions in the travel plan and travel spot wish list so similar?

I considered what kinds of functions should be included in the app based on the user story. However, while creating the wireframes, I had an idea that having similar functions might help users learn and use the product more quickly and easily.

TriPlan Functional Map - Travel plan, Travel spot wish list, Account setting

Flow Chart

Since the functionalities of the Travel plan and Travel spot wish list are similar, their user flow diagrams are almost identical, with the only difference being the data type and slight variations in features.

TriPlan Flow Chart - Add a travel plan, add a travel spot to a travel plan, share the travel plan from the list

Wireframe

I. Consistent Interfaces and Functions

I implemented consistent interfaces and functions across the Travel Plan and Travel Spot Wish List pages to ensure seamless navigation and interaction for users within the app.

TriPlan Wireframe - Travel plan & Travel spot wish list

II. Swipe to edit list

To enhance information viewing, I decided to incorporate swipe features that allow users to access functions within each list more easily.

TriPlan Wireframe - Swipe to edit list in travel plan page or travel spot wish list page

III. Add travel spot to travel plan

I developed a feature that enables users to directly add travel spot information into their existing travel plans, eliminating the need to enter the travel plan edit page. This enhancement significantly improves the user flow and makes the experience more user-friendly.

TriPlan Wireframe - Add travel spot to travel plan

Mockup

To ensure a good user experience, I designed the interface to be as simple as possible, while effectively presenting a large amount of information in a clear and concise manner.

I. Add travel plan / travel spot

I changed the "Add" button to a navigation bar design instead of using a Floating Action Button (FAB) in order to keep the interface clear and simple.

TriPlan Mockup - Add travel plan or travel spot

II. Edit travel plan

I made a modification to the "Add Travel Spot" button by replacing the Floating Action Button (FAB) with a button that includes detailed text. This change aims to provide users with a clearer understanding of the button's purpose.

TriPlan Mockup - Edit travel plan

III. Add travel spot to travel plan

Taking into consideration that checkboxes are typically positioned before the options, I made the modifications to align with user behavior.

TriPlan Mockup - Add travel spot to travel plan

Prototype

Travel plan

Travel spot wish list

TriPlan Prototype - Travel plan page
TriPlan Prototype - Travel spot wish list page

Product Iteration

After completing the product design, I embarked on a design exploration for the travel plan interface. In this section, you will find a review of the design process.

TriPlan Product Iteration

I. Search bar

I implemented a filter and search history feature within the search bar. This functionality allows users to easily filter their travel plans based on criteria such as date, year, country, and city. Furthermore, it provides users with convenient access to their previous search history.

TriPlan Product Iteration - Search Bar

II. Travel plan list

I explored an alternative approach by introducing an icon to access edit functions for each list. This method ensures easier maintenance and development, particularly when incorporating new features in the future.

Additionally, I considered implementing a card list with photos to capture users' attention before they read the accompanying text. However, after evaluating the challenges associated with sourcing and managing photo data resources, I decided to prioritize the development of a list-based layout instead.

TriPlan Product Iteration - Travel Plan List

III. Travel spot list

To accommodate users with diverse scheduling needs, I integrated features that enable users to highlight essential travel destinations for specific days and freely drag and rearrange the positions of their lists. Additionally, I made the time selection optional to provide users with flexibility in planning their itineraries according to their preferences.

TriPlan Product Iteration - Travel Spot List

IV. Travel duration

Taking into account the varying operating schedules of attractions and establishments, I implemented a feature that displays both the date and the day of the week. This allows users to conveniently verify their itinerary across different dates and ensure that their plans align with the operating hours of the destinations they wish to visit.

TriPlan Product Iteration - Travel Duration

UI Flow

When users enter the Travel plan list page, the system immediately displays all the plan data sorted from the nearest to the farthest dates. Users can utilize the Search bar to filter the data, speeding up the process of finding the desired plan. The feature to access additional edit functions is consistent in both the travel plan list and the edit travel spot list.

TriPlan Product Iteration - UI Flow

Corporate Identity System

Logo Design Concept

Planning a trip on paper can transport us to the destination we want to visit, as if the paper itself were an airplane.

TriPlan Corporate Identity System - Logo Design

Color Design Concept

Since the paper airplane is a symbol of flight through the sky, I chose blue as our brand color. We aspire to travel the world, and from outer space, the Earth appears as a beautiful blend of blue (the ocean) and green (the forests) hues.

TriPlan Corporate Identity System - Brand Color & Typography

Takeaway

Research studies and user interviews helped me gain a better understanding of user needs and how to define the product value in product design. Through these studies, I realized how challenging it can be to balance different user needs when designing a product. Here are some thoughts on how to make TriPlan more user-friendly:

Product image for SelfieSign, a website provides user with comprehensive, and clear product information about e-signature.
Website
UI Design
UX Research
Project Management

SelfieSign

Provide our target audience with comprehensive and clear product information to engage them.

View Project →