tripmate

TIMELINE

Q3 2024

TOOL(S) USED

Figma, Zoom

INDUSTRY

Travel

PROJECT TYPE

Case study, Product Design, UX/UI Design, Branding

ROLE

UX Researcher, Product Designer, UX/UI Designer, Brand Designer

This is a case study project for DesignLab UX Academy.

Background

A group of friends want to travel together. Thus, start the planning process.

Planning in the group chat and/or in person makes it difficult to confirm content, participation, opinions, and update new information. Friends need an easier and organized way to plan a trip together.

Problem

Understanding and examining trip planning among friends highlights the key elements necessary for a seamless trip experience.

Goal

Solution

A mobile-first website designed to help users plan a trip with friends.

RESEARCH

Competitive Analysis

Google Calendar

Wanderlog

Discord

Cvent

2 Categories of Planning Software

Basics of the Basics

Pros

  • Minimalistic UI

  • Intuitive and easy to navigate

Cons

  • Not enough features to utilize

  • Premium version always better ($$$)

Features on Features

Pros

  • Lots of features to use

  • Good deal for free users

Cons

  • Too cluttered

  • Not intuitive to use and hard to navigate

  • Should find a balance between the too little and too much features

  • Mobile version doesn’t need to show everything desktop version has

    • some features not really needed can be hidden away

  • Should find out the most important features users need

Conclusion

User Interviews

PARTICIPANTS

5 (3 Females + 2 Males)

18-30 years old

LOCATION

Remote (Zoom)

DURATION

30-45 minutes

QUESTIONS

  • How do participants plan a hangout, and what tools do they use?

  • Why do participants plan a hangout?

  • What role do participants take on during trip planning? (leader, follower, etc.)

  • What were the most enjoyable and most taxing parts of the planning process?

  • When and how far ahead do participants plan, and when are they spontaneous?

  • Where do participants typically plan hangouts—domestically or internationally, at familiar spots, or exploring new places?

“I enjoy planning trips because it gives me peace of mind knowing what to expect, and I get to check off all the places I’m excited about.“

~ Participant when asked why they like to plan for trips

2 Categories of Travelers

  • Likes to research beforehand

    • Gives peace of mind

  • Likes to reserve and create itinerary

  • Likes to get everyone’s opinions

Planner

  • Goes with the flow

  • Doesn’t plan itinerary/activities

  • Likes element of surprise

  • Likes to explore

Spontaneous

  • Friend groups with like-minded people determine how trips are usually planned

  • Communication and cooperation is the most important aspect

  • Assigning roles and tasks is a great way to keep information organized

Conclusion

DEFINE

Personas

Planner

Hannah Oakland
27 years old
Female
Secretary

“I love going on vacation, what better way than to spend time with friends and create new memories!”

BIO

Although Aisha loves her job as a Secretary, she loves vacation more. She enjoys spending her vacation traveling with her friends. Traveling with her friends should be stress-free, and a great way to wind down and relax. She loves a detailed itinerary, getting to research all the fun activities to do and restaurants to try. The last thing Aisha wants is to arrive and waste time with no idea on what to do.

NEEDS

  • To have a good time with friends

  • To not be stressed on vacation

  • A detailed itinerary

  • To know what to expect of the location before arrival

FRUSTRATIONS

  • Friends not help plan

  • Reservations didn’t work out

  • Itinerary abandoned because of unexpected situation

  • Couldn’t do some activities

TOOLS

  • Google Document

  • Zoom

  • Discord

  • ChatGPT

Spontaneous

Josh Morale
21 years old
Male
College Student

“Having fun with friends are more important than the destination.”

BIO

During the weekends and vacation as a college student, Josh would hang out with his friends and go on trips. They like to go on spontaneous trips because they like the element of surprise, and finding something fun to do is what makes the whole thing fun. When they go on trips that are farther away from campus, Josh has some friends who enjoys planning, so he trusts them in planning the itinerary, but have no problem contributing either.

NEEDS

  • To have a good time with friends

  • To not be stressed on vacation

  • Have fun exploring and trying something unexpected

FRUSTRATIONS

  • Being stuck with a full itinerary

  • Friends backing out on the trip

  • Friends not enthusiastic

  • Not finding anything fun to do

TOOLS

  • Discord

IDEATE

Low-fi Wireframes

  • Voting System pt.1

  • Voting System pt.2

  • Voting System pt.3

  • Preference Section pt.1

  • Preference Section pt.2

  • Preference Section pt.3

Features

Must Haves

Travel Preferences Section

Where user can input their preferences for travel (likes, dislikes, tolerance level, allergies, etc.).

Trip Organizer

An organized list in order of things to do from the start of the trip to the end of the trip.

AI Itinerary Maker

AI that helps the group create an itinerary based on their travel preferences, dates, location, etc.

Friends/Collaborators List

Could add other users to the trip page to communicate and edit together.

Nice to Have

Voting System

Where users can create and participate in polls to gather opinions or make decisions quickly and easily.

Budget Tracker

Track the budget set by the group. Shows how much is left from the budget based on their input expenses.

To-do List

A section to organized and prioritize tasks to track trip progress, assignable to members.

Reminders

Works hand-in-hand with To-do List, set reminders for the assigned tasks.

Sitemap

Home Page

The main sections of the website.

  • Reminders Notifications

  • Profile

  • Trips

Profile Page

The usual sections of the profile.

  • Friends list

  • Travel Preferences form

  • Settings

Trip Page

Where users can create a trip.

  • Overview (date(s), location(s))

  • Collaborators

  • Itinerary

  • Budget

  • To-do list

  • Chat (voting system)

Task Flows

Key

Travel Preferences Form

Accessing the Travel Preferences form through the Profile page.

Add Collaborators

Adding collaborators through Friend’s List or by finding users in the trips page.

Voting System

Creating a poll in the chat section of the trips page.

CREATE

Low-fi Wireframes

  • Home New User

  • Home Existing User

  • Popup Menu

  • Profile

  • Travel Preferences P1

  • Travel Preferences P2

  • Travel Preferences P3

  • Travel Preferences P4

  • Travel Preferences Complete

  • Trip Overview

  • Trip Itinerary

  • Trips AI Itinerary Popup

  • Trips AI Itinerary Generate

  • Trip Budget

  • Trip Tasks

  • Trip Chat

  • Trip Polls Dropdown

Mid-fi Wireframes

  • Home New User

  • Home Existing User

  • Popup Menu

  • Profile

  • Travel Preferences P1

  • Travel Preferences P2

  • Travel Preferences P3

  • Travel Preferences P4

  • Travel Preferences Complete

  • Trip Overview New User

  • Trip Overview Existing User

  • Trip Itinerary New User

  • Trips AI Itinerary Popup

  • Trips AI Itinerary Generate

  • Trip Itinerary Existing User

  • Trip Budget New User

  • Trip Budget Existing User

  • Trip Tasks New User

  • Trip Tasks Existing User

  • Trip Chat New User

  • Trip Polls New User

  • Trip Chat Existing User

  • Trip Polls Existing User

Wireframe Changes

Changes were made according to feedback in mentor meetings and group critiques.

Travel Preferences Section

Added a “Let’s Get Started“ section to help users navigate through the website.

Trips Page AI Itinerary Maker Generate

Got rid of the different itinerary sections. Generated a completed itinerary, still allowing the users to customize each item, or to regenerate a new itinerary.

Trips Page Budget

Replaced the circle bar to a rectangular bar, similar to the battery bar. It will be easier to read, more intuitive.

Branding

Values

  • Friendly

  • Fun

  • Curious

  • Adventurous

  • Social

  • Outgoing

  • Organized

  • Happy

  • Cooperative

  • Engaging

The blue color palette evokes feelings of peace, calm, trustworthiness, and insight. I want users to feel at ease while navigating the site, and to trust it as a secure place for their important information. I chose orange as the secondary color because it complements blue, offering a vibrant and eye-catching contrast that highlights key elements effectively.

Colors

Primary

Secondary

Neutrals

I chose the Ubuntu typeface because stands out for its clean, modern, and approachable design. It has a warm, humanistic feel due to its rounded letterforms, which helps create a friendly and welcoming vibe. Despite its softness, Ubuntu is highly legible, even at smaller sizes, making it versatile for both body text and headings.

Typeface

UI is slim, rounded edges. Different values of blue are used throughout, and yellow is used sparingly as a highlight color for primary components.

UI Component Library

Logo Design

High-fi Wireframes

  • Home New User

  • Home Existing User

  • Popup Menu

  • Profile

  • Travel Preferences P1

  • Travel Preferences P2

  • Travel Preferences P3

  • Travel Preferences P4

  • Travel Preferences Complete

  • Trip Overview New User

  • Trip Overview Blank

  • Trip Overview Filled

  • Trip Add Friend

  • Trip Search User

  • Trip Overview Existing User

  • Trip Itinerary New User

  • Trip AI Itinerary Popup

  • Trip AI Itinerary Generate

  • Trip Itinerary Manual Blank

  • Trip Itinerary Manual Filled

  • Trip Itinerary Existing User

  • Trip Budget New User

  • Trip Set Budget Blank

  • Trip Set Budget Filled

  • Trip Add Expense Blank

  • Trip Add Expensive Filled

  • Trip Budget Existing User

  • Trip Tasks New User

  • Trip Create Task Blank

  • Trip Create Task Filled

  • Trip Tasks Existing User

  • Trip Chat NEw User

  • Trip Poll Dropdown

  • Trip Create Poll Blank

  • Trip Create Poll Filled

  • Trip Chat Existing User

  • Trip Current Polls Dropdown

TEST

Usability Testing

PARTICIPANTS

6 (4 Females + 2 Males)

18-30 years old

LOCATION

Remote (Zoom)

DURATION

30-45 minutes

QUESTIONS

  • On a scale of 1 to 10 (1 being easy, 10 being hard), how easy was it for you to complete the task?

  • What do you like about this section?

  • Was there anything that was confusing or difficult?

  • How would you improve the steps of completing the task?

  • How do you feel about the website overall?

  • Can you see yourself using something like this for a future trip with friends? If yes/no - why?

Task Flows

Finding the optimal location for the Travel Preferences form. See if the form is visible and easy to find or if it’s too hidden away.

Travel Preferences Form

How helpful is the website in guiding the users to create a trip? Is the content too much, too little, or just right? Is this section easy to use or too hard? Would they use the AI Itinerary Maker?

Create New Trip

Communicate with TripMates

How likely are they to use the poll feature? Is the poll feature in the best location?

Success Metric

All of the participants finished in less than 20 minutes. I prompted them in the beginning to do the Travel Preferences form then create a trip, and they intuitively continued to click around from there.

Time Taken

Error or Confusion

Most of the participants had 1-3 error(s) and/or moments of confusion.

On a scale of 1 to 10 (1 being easy, 10 being hard), scores were an average of 2-4. Participants liked how it was easy to navigate, and self explanatory. The labels, icons and pictures helped a lot.

User Satisfaction

What Worked

Website was intuitive and easy to navigate. They also liked the organization of the Trip Page sections.

Overall Flow

The content of the website is helpful for travel planning. They liked the different sections provided in the Trip page and how they are optional to utilize.

Content of Website

Priority Revisions

Travel Preferences Form Location

Form hidden in Profile page

Created Sign Up and page, and have the form appear after

The location was a bit hard to find. A lot of participants didn’t bother looking at the Profile section. Recommended to have the form appear after Sign up.

AI Itinerary Maker

AI Itinerary Maker is now the main component of the page

AI Itinerary Maker icon is not the main component

The participants thought the icon was a chat robot. A lot of participants would immediately manually create their itinerary. Recommended to have the icon be more prominent.

FINAL DESIGN

Travel Preferences Form

Trip Overview

Trip Itinerary

Trip Budget

Trip Tasks

Trip Chat