a mobile booking site
hokulea logo

target user

Hokulea Airlines' target user is anyone who needs to book an inter-island flight in Hawai‘i

goal

The goals of this project is to create a next-level user experience for their core digital flow involving booking flights online. Focusing on creating this experience mobile friendly and a responsive site that doesn’t force users to download and install an app by empathizing with users and identifying their pain points and unmet needs.

my role

UX/UI Designer

navy research icon

research

  • Competitive Analysis
  • Individual Interviews
navy strategy icon

strategy

  • Persona
  • User Flow
navy ui design icon

ui design

  • Branding
  • Lo-fi Wireframes
  • Hi-fi Wireframes
  • UI Kit
navy implementation icon

implementation

  • Prototype
  • Usability Testing
  • Reflection

Summary

Hokulea Airlines is an airline company based in Honolulu, HI. Although they are not a large competitor in the field due to flying to and from limited west coast cities, they are transitioning to become the leading competitor for Hawai‘i inter-island travel. They are looking to create a next-level user experience for their core digital flow involving booking flights online. They would also like to focus on creating this experience mobile friendly and a responsive site that doesn’t force users to download and install an app.

navy research icon

research

Research Goals

To empathize with the users and identify their pain points and unmet needs to create a good online booking experience.

methodologies - competitive analysis

First, I began doing a competitive analysis on Hokulea's top competitors, Hawaiian Airlines and SouthWest Airlines and looked at their websites to see how it was structured, what was working and what wasn't working within the site. Below are my findings.

successes

  • Does a good job showing the users progress throughout the experience by flagging/changing the color of the lowest fare price.
  • Has a loading page with an image of your desired destination showing that it is calculating all the best flights for you.
  • Displays prices in roundtrip so the user is less shocked at the grand total at checkout.
  • Has a low price calendar to help users select the cheapest flight.

frustrations / pain points

  • Parts of the design made the call to action difficult to read and made it less prominent.
  • Navigation bar was less prominent so it was difficult to find where to modify my flight information.
  • Prices displayed in one-way made it more shocking when seeing the grand total.

methodologies - individual interviews

After conducting a competitive analysis, I was able to interview 5 participants who have booked a flight in the last 7 months. 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 their last booking experience by telling me the steps they took to choose a flight. Below are my findings.

successes

  • Flights by Google has a very clean, easy-to-use, good hierarchy design that created a good user experience for the user.
  • Found the best prices through Flights by Google because of their price calendar is in real time and shows the best deals and prices in green.
  • Hawaiian Airlines’ site was easy to use because of its good design and hierarchy.

fraustrations / pain points

  • Would like to see a calendar that is flexible by dates and wants to see a price calendar where it doesn’t only allow you to view prices by the amount of nights you’re planning to stay. But cheapest flights price displayed per day so the user can get the best deal possible.
  • Although the 3rd party site was very easy to use, when the user was redirected to the direct airlines, the site was not user friendly and didn’t display hierarchy which confused the user.
  • One airline displayed prices in one-way fares whereas another did roundtrip fares. The total became more of a surprise at the end.

other findings

  • Based on my research, it seems like booking a flight comes down to two things, price and previous customer experience/service. Overall price matters most but previous customer experience/service can influence a users’ decision to book with a certain company over another.
navy strategy icon

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 magazine editor named Justin Wong.

asian guy wearing a navy crew neck jacket and hat

justin wong
young professional

age: 23
occupation: editor
Location: aiea, hi
last flight booked: feb 2020

bio

Justin Wong is a 30-year-old Editor from Aiea, HI. Not only does he love to travel and explore, he often has to fly to other islands for work. Justin’s college friend will be in town soon and they want to visit another island while his friend is here. Justin and his friend are grabbing dinner and finally found time to discuss choosing a time and day to fly inter-island. Using his mobile phone, the two of them look at time and places. The low-price calendar was easy to use and made it quick for the two to find the lowest fare. Once the dates were selected, the two found a time that best fit their schedules. Since inter-island travel is short, Hokulea Airlines has many choices to fly to and from each island. Booking on his mobile phone was an easy experience.

“IT MAKES BOOKING A FLIGHT SO MUCH EASIER ON THE GO WHEN IT’S MOBILE FRIENDLY.”

associated apps

acorns logoinstagram logoaudible logo

goals / needs

  • A low price calendar for him to find the best prices for his desired trip.
  • Auto-fill while typing destination/return so he knows what cities he is able to travel to.

frustrations / pain points

  • Having a limited low price calendar that can only be modified by the amount of nights you are planning to stay.
  • Having too much information displayed in one area, such as the page where you select your desired times for the flight with all the same amount of importance, no hierarchy which makes it difficult for him to digest all the information at once.
  • When airlines display their prices in only one-way. He is more surprised at the end total rather than being upfront from the beginning.

personality

extrovert
introvert
sensing
intuition
thinking
feeling
judging
perceiving

tech knowledge

it & Internet
software
mobile apps
socail media

user flow

Based on my competitive analysis, I was able to create a user flow on how to book a flight on HokuleaAirlines.com

hokulea user flow
navy ui design icon

ui design

branding

Hokulea Airlines represents the culture and the history of voyaging in Hawai‘i. In Hawaiian, the name Hokulea refers to Arcturus, one of the guiding stars for Hawaiian navigators, which passes directly over Hawai‘i’s latitude, helping guide sailors to the island chain. On March 8, 1975, the Hokulea double-hulled voyaging canoe, was launched from the sacred shores of Kaneohe Bay. Hokulea Airlines wants to make a comeback inspired by traditional voyaging from the sea, but now into the stars and the sky. Deep-rooted with Hawaiian culture, this airline wants to create a modern, unique and authentic experience for their travelers.

identity

various styles of the hokulea logo

iterations

various iterations of the hokulea logo

color palette

#ee372f
#b52025
#a6dadb
#2d6380
#022c41

lo-fi wireframes

Based on my research, almost all my participants cared most about the price of the flight and getting the best deal. It was important to include a low fare price calendar within the flow.

lofi wireframes of the hokulea website on mobile browser

hi-fi wireframes

After testing the user flow on the lo-fi wireframes, I was able to receive feedback and make adjustments to the hierarchy between the departing and returning flight pages because it was difficult to distinguish the difference between the two.

hifi wireframes of the hokulea website on mobile browser

ui kit

After finalizing the hi-fi wireframes, I've created a UI Kit to handoff to developers.

typography

Departing Flights

header - din ot | bold | 30px

travelr info

subhead - din ot | medium | 15px

Aloha, Hawaii is just one flight away. Hokulea Airlines can provide the best inter-island experience for you with our extra comfort seats, free in-flight movies and gourmet snacks and food.

body copy - din ot | regular | 15px
navy arrow pointing right

6:00AM

6:45AM

flight time - din ot | light | 30px
HNL - Honolulu
airport - din ot | regular | 15px

typography

various tab styles

link styles

Flight Details
link option 1
change flights
link option 2
low fare price calendar
link option 3

icons

airport-hotel-car-account-hamburger menu-location pin-calendar-check mark icons

imagery

waimanalo beach and haleakala at sunrise

button styles

red active button style
cta: active option 1
red outline active button style
cta: active option 2
inactive button style
cta: inactive
navy implementation icon

implementation

prototype

To help with user testing, I've created a prototype for the mobile friendly version of Hokulea Airlines' booking experience based on the user flow I've created and any unmet needs that were found in the lo-fi user testing round. Want to try it out? Let us know what you think!

hokulea prototypetest prototype

usability testing - lo-fi wireframes

After creating the lo-fi wireframes, I conduced a round of user testing. In this round of user testing, there were 4 participants. Because the prototype was limited in certain ways, I had to guide some participants in the correct direction. Also, testing was conducted on a desktop but tested a mobile size. Below is an overview of findings.

successes

  • Overall users didn’t have any real pain points or frustrations during the flow. In areas that were expected to be confusing because of the limitations of the prototype, they were able to work through any problems with little hints and guidance.

frustrations / pain points

  • Loading page was confusing in the prototype because users had to click through to get past it instead of it automatically loading results.
  • Hierarchy needed to be fixed between Departing and Returning pages because they looked a little too similar. Users had some difficulties understanding the change in pages.

usability testing - hi-fi wireframes

After creating the lo-fi wireframes, I conduced a round of user testing. In this round of user testing, there were 4 participants. Because the prototype was limited in certain ways, I had to guide some participants in the correct direction. Also, testing was conducted on a desktop but tested a mobile size. Below is an overview of findings.

successes

  • After conducting taking the feedback I received from my first round of user testing, I applied those changes to my hi-fi wireframes. For the second round of user testing, there were 3 participants. Below is an overview of findings.

frustrations / pain points

  • One user wished to see an itemized receipt on the payment page to know how much each one way flight is and/or any taxes and extra fees.
  • Hierarchy still needed to be fixed between Departing and Returning pages because they looked a little too similar.

relection

With the lessons learned from my Sew & Stitch project, I had a better understanding of the UX process which made it easier to ask the right questions within the individual interview process. It was interesting to hear the different needs and ways people book their flights. Based on my research, the younger audience who chooses to travel doesn't necessarily have a specific airline they always use. Whereas the older generations prefer brand loyalty and fly with one specific company rather another no matter the price because their in-flight experience was much better than others.