A Digital Trip Planner Desktop Website

Target User

Adventure with HAWAI‘I Magazine’s (AWHM) target user is anyone thinking about or planning a trip to the beautiful Hawaiian Islands.

Goal

The goal of this project is to learn how people plan a trip in order to empathize with users and identify their pain points and unmet needs in order to create a collaborative digital planning website.

My Role

UX/UI Designer

research

  • Competitive Analysis
  • Individual Interviews

strategy

  • Persona
  • User Flow

ui design

  • Branding
  • Lo-fi Wireframes
  • Hi-fi Wireframes
  • UI Kit

implementation

  • Prototype
  • Usability Testing
  • Reflection

Summary

HAWAI‘I Magazine is looking to take their brand to the next level. With already having an insider role about the best places to eat and things to do here in Hawai‘i, they are always trying different things to give you the best quality content on what’s now on the Islands. The next step is to help our audience plan the best trip to Hawai‘i. This collaborative digital trip planning website will help users create a solid itinerary with their travel mates where they can vote for which activities they want to do together.

Research

Research Goals

To empathize with users and identify their pain points and unmet needs to create a good collaborative digital trip planning website.

Methodologies - Competitive Analysis

First, I began doing a competitive analysis on AWHM’s top competitors, Google Trips, TripIt App and Yelp and looked at their content to see how it was structured, what was working and wasn’t working. Below are my findings.

successes

  • Because Google already has a complex integrated system, combining existing functions like search, maps and flights, it uses these tools to create Google Trips. You can create your own itinerary and save activities for later. And can curate informational insight to help users quickly determine if they want to do the activity or visit the business they searched for.
  • Yelp is great to quickly search for businesses and read customer reviews to determine if they want to go there. Each business has a profile where users can add reviews, photos, and retrieve business information and directions.

fraustrations / pain points

  • On Yelp, sometimes reviews can be skewed depending what the review was about and why they received bad reviews. Also not everything people write may be true.
  • The TripIt app wouldn’t be so useful or user-friendly if you didn’t have your trip planned. This app would be better if you already had everything planned and you’re just using this app to have a digital copy of your itinerary.

overall findings

  • Google Trips is the only function that helps with both planning and post-arrival travel. Apps like TripIt and Yelp only have one out of the two.

Methodologies - Individual Interviews

After conducting a competitive analysis, I was able to interview 5 participants who have planned a trip in the last year. Due to conducting this research during COVID-19, I allowed for a longer time period for participants since there was little to no travel during this time. During the interviews I had participants describe the last time they planned a trip and how they did it. Below are my findings.

successes

  • Every participant created some type of Google spreadsheet or word document to help plan their itineraries because of it’s collaborating functions.
  • Participants always had a few extra activities/places to eat planned just in case something happened.
  • Participants labeled and color coded items based on priority and different groupings.

fraustrations / pain points

  • It was sometimes difficult to accommodate all travelers in the party.
  • Some participants felt that if the trip is too planned and has too many back-to-back items, it felt more like a chore instead of an adventure.

overall findings

  • Each participant’s traveling group was different sizes. This factor along with the types of people they traveled with determined their traveling style. For example, some travel groups preferred the flexibility when they arrive by only scheduling a few things a day to allow room for rest or spontaneously finding things to do during down-time. While other groups rather have more of a structured schedule with each activity planned everyday including the time.
  • Everyone used multiple sources and apps to come up with their top things to do.

Strategy

Persona

Based on my research, I’ve created groupings and similarities between the people I’ve interviewed to create a persona of a 30 year-old marketing director named Sarah Anderson.

Sarah Anderson
young professional

age: 30
occupation: marketing director
Location: new york, ny
last trip planned: Jan 2020

bio

Sarah Anderson is a Marketing Director at an ad agency in New York City. She loves to travel and has always dreamed of taking a vacation to Hawai‘i. Sarah has never been to Hawai‘i but has a loose idea of what type of activities she wants to do while sheʻs there. She likes to plan things, but also loves to be spontaneous at times. Sarah also wanted to travel with a few friends. She didnʻt know where to start planning for her trip. Thankfully with an easy Google search, she came across hawaiimagazine.com. There is where she read a few articles about things to do and places to eat on O‘ahu. She noticed on their website that they have a travel planning app. She hopes she can use that app to plan her trip and help guide her once she arrives to the Islands.

“This HAWAI‘I Trip Planner app
made planning and enjoying my trip easy."

associated apps

goals / needs

  • To be able to plan a trip.
  • Needs a place to store her itinerary digitally with easy access to business info. (website, phone, address)
  • Flexibility within the itinerary to allow room for “adventure.”
  • Wants to be able to collaborate ideas easily with friends.

frustrations / pain points

  • Too much content/websites to filter through on Google for what to do on O‘ahu.

personality

extrovert
introvert
sensing
intuition
thinking
feeling
judging
perceiving

it & tech knowledge

it & internet
software
mobile apps
social media

user flow

Based on my research, I was able to gain some insight in the order that people plan their trip. Searching for a place, deciding if they want to go, checking to see if that is something their travel mates want to do, and deciding if they will do this activity. Below is my user flow for adding an activity for the first time to the collaborative digital trip planner website and approving the activity for the digital itinerary.

UI Design

Branding

Since HAWAI‘I Magazine has existing branding, it was only needed to create an extension of that brand to create Adventure with HAWAI‘I Magazine. Planning a trip to Hawai‘i should be fun and exciting. This mark/logo has a playful look and feel with the gentle waves and vibrant color scheme.

identity

iterations

color palette

#03ab9b
#7ec5b3
#0e4368
#f5b51b
#f98e35

lo-fi wireframes

Based on my research, all participants needed some type of way to discuss and approve proposed activities for the trip. Within the collaborative digital trip planning website, you and your travel mates can vote yes, no or maybe for each activity.

hi-fi wireframes

In these final versions, collaborating tools were resolved and informational/directional icons were created in place of too much body copy.

ui kit

After finalizing the hi-fi wireframes, I’ve created a UI Kit to hand off to developers.

typography

Hawai‘i

h1 header - degular | bold | 90px

Where to eat

h2 header - degular | bold | 50px
Adventure with HAWAI‘I Magazine is here to help.
body copy - degular | regular | 25px

restaurants

activity banner - degular | semibold | 20px

Helena's Hawaiian Food

activity name - degular | semibold | 25px

$$ / Hawaiian

activity info - degular | regualr | 16px

4.6 (360 Reviews)

activity review- degular | med italic | 16px

button styles

general button style
select time / date button style

business page button styles

business page cta style 1
business page alternative button style

homepage "Here's how it works" icon style

icons

business page icons

instructional icon styles

collaborating planner - "here's how it works"
collaborating planner - "you're almost there!"

social icons

active travel mates

activity card style

activity
island
city

activity card style

normal activity
voting choices
voted activity

calendar style

form style

chat function style

business page header style

business page most popularstyle

business page review style

business page related articles style

business info style

nav bar

footer

background accent shape

Implementation

Prototype

To help with user testing, I’ve created a prototype for the collaborating digital trip planning website based on the user flow I’ve created and any unmet needs that were found. Want to try it out? Let us know what you think!

test prototype

usability Testing

For this project I was able to conduct usability testing after creating the hi-fi wireframes. Because the user flow was very long, I gave participants small ques along the way to help them get through the flow. Below are my findings.

successes

  • All participants were able to execute the user flow with little to no real frustrations or pain points.
  • Most participants understood quickly what the color voting system meant. (Yes, no, maybe)

frustration / pain points

  • Took a little long for participants to understand what the three-dot menu meant and what to do with it.
  • Some participants didn’t really understand or know what the activity voting bar meant. Wanted it to be more prominent and easier to understand.

overall findings

  • One participant brought up a good question, “What if someone in your group wants to propose a better time?”

reflection

With this being my final project in DesignLab, I was able to take all my mistakes from previous case studies and do a better job with this final case study. I found myself asking better questions when uncovering goals, needs, pain points and frustrations in individual interviews. For user testing I started to ask them if they understood certain things in the design and tried to get better insight in their thinking while going through usability testing. Overall I enjoyed this challenge because this was the largest project I designed hi-fi wireframes for.