Case study: Hawaii Travel Information

DESIGNX435.1-021 - Summer 2020

By Kathleen de Lara

The selection

Hawaii Travel Information (gohawaii.com) is a travel site with details on Hawaiian Island tourism. The site includes information on Hawaiian culture, activities, and destinations to help users plan their trip, whether they're a new or returning visitor. Prospective travelers can find info on places to stay, restaurants to try, and hikes to check out. They can also learn more about the six travelable Hawaiian islands to find the ideal place for their trip. Travelers are able to book tours and other activities, as well as learn travel safety tips to ensure a smooth visit.

Identifying the problem

Click the video for a preview of Hawaii Travel Information's lengthy navigation.

Problem: Hawaii Travel Information is packed with details. Navigation is extensive and deep, information is not scannable, and tasks tied to business goals are hard to complete.

Effect: Impacted visitors' conversion rates—booking tours, activities, and accommodations. Impacted user experience—quickly and easily completing a task.

Solution: Simplify HTI's navigation to spotlight core menu items necessary for trip planning.

The process

Over 5 weeks, I researched Hawaii Travel Information's website, business needs, and target audience. I conducted user research tests to understand users' navigation behaviors and interpretation of site messaging. Using these results, I created, tested, iterated, and developed a final proposal for a sitemap and wireframe optimized for higher user engagement and conversion. 

1. Discover needs

To understand Hawaii Travel Information's business goals, I started with a list of 25 common tasks users may perform on the site:

  • Book a tour or activity
  • Check weather conditions
  • Connect with HTI social media accounts
  • Connect with media opportunities
  • Find and book accommodations
  • Find list of useful phone numbers and contact info
  • View recommended restaurants and bars
  • View recommended hikes
  • View recommended tours and activities
  • View map of islands
  • View sample itineraries
  • View calendar of events
  • View travel and safety tips
  • View international travel info
  • View photos and videos
  • View reviews and recommendations for other travelers
  • View voluntourism opportunities
  • View list of major airports on each island
  • Research each Hawaiian island
  • Research Hawaiian history
  • Research local cuisine
  • Research local culture
  • Research travel restrictions
  • Research wedding and honeymoon accommodations
  • Sign up for Hawaii Travel Information (HTI) newsletter

I also identified and created two user personas, indicating their traits, goals, needs, and preferred communication styles. 

User personas

Using these personas, I narrowed down the list to primary user tasks aligned closest with user needs and HTI's business goals.

Primary user tasks

  • Book a tour or activity
  • Book accommodations
  • Research each Hawaiian island
  • View international travel info
  • View photos and videos
  • View reviews/recommendations from other travelers

Business goals

  • Educate visitors on history of Hawaiian history, culture, and people
  • Entice site visitors to book travel to Hawaii
  • Prepare visitors for trip to ensure a positive experience and desire to return

2. Evaluate and Analyze

After establishing user personas, key tasks, and business goals, I conducted a gap analysis and tree testing. This helped to identify breaks between content and user needs, and how easily people can find info and where they may lose their place.

Tree testing answers questions like:

  • Do the labels make sense?
  • Is the content grouped logically?
  • Can people find they want easily and quickly? If not, what's stopping them?

Gap analysis

Key insights

  • Most high priority tasks are Level 1 and are easy to complete

  • Opportunity to roll pages for medium priority tasks (e.g. checking weather, see event calendar) into island-specific pages to help focus users on completing high priority tasks

  • Some medium priority tasks (e.g. newsletter sign-up, social media accounts) OK at Level 1 because they're located in universal footer

  • Opportunity to integrate traveler reviews to build social proof, credibility and increase engagement

  • Opportunity to include island maps and airport information to help users prepare for trip

Tree testing: Round 1

Key insights

  • Majority of users are able to identify island and weather info

  • Breadcrumbs can be used to provide alternate paths to help users arrive to the correction destination

  • Certain pages can be combined to free up nav bar real estate for higher priority tasks

  • Pain point: Avoid mentioning island name in task to prevent influencing and misguiding users responses

Tree testing included 11 participants.

3. Synthesize

To further understand users' mental models, I performed an online card sorting with 10 participants. These learnings were the foundation for creating an abstract information architecture and a first version sitemap.

Abstract IA: Round 1

This abstract information architecture reflects card sorting participants' most common label categorization behaviors.

V1 sitemap

This V1 sitemap is a refined version of the abstract IA. 

Key insights

  • Opportunity for more balanced content distribution across groups

  • Opportunity to reduce number of groups and group similar tasks together (e.g. Merge "Explore & Discover", "Plan Your Trip", Food & Activities")

  • Opportunity to simplify group names (e.g. "Food & Activities" > "Activities")

  • Remove duplicate tasks (tied card sorting ranking)

  • Consider further breaking down tasks under "Travel Info"

4. Refine, validate, and design

Next, I evaluated and updated the labels used in the V1 sitemap for clarity, brevity, and accuracy. 

The updated labels were then used to create a V2 sitemap and two navigation options. I ran a second tree test on this new abstract IA to test and compare its validity against the first abstract IA. 

Label scoring

All of the sitemap labels in this final iteration scored 4 or 5 (high) for being well-known, easy to understand, real, brief, and representative.

V2 sitemap

Here are those updated labels depicted as a second version sitemap—more direct, scannable, and concise. You'll notice, however, that some menus are much longer than others.

Proposed navigations

To help shorten menu length and prioritize business goals, I created two navigation options:

  • Navigation 1: Creating user value through education » More passive. Focused on nurturing the Awareness and Discovery stages to gain user buy-in and trust

  • Navigation 2: Leading with intent to convert » More direct. Focused on accelerating pre-sale stages to prioritize Interaction, Purchase, and Use stages

Navigation 1: Pros and cons

Pros

  • Addresses business goals of enticing, educating, and preparing visitors
  • “Book” evolved from nav bar item into CTA button to help users quickly take action/convert
  • Similar items bucketed as sub-local nav items to    simplify main local nav
  • “Connect with us” shifted into footer menu to focus nav bar on items that convert users

Cons

  • “Plan Your Trip”, “Travel Info” local navs are longer. May overwhelm/confuse users
  • “Book” may not convert as many users due to placement on far right
  • “Culture & History” potentially wasting prime real estate as first universal nav bar item that could be replaced with item more directly tied to conversion, like “Book”

Navigation 2: Pros and cons

Pros

  • “Book” and “Plan Your Trip” placed far left to encourage users to quickly convert
  • “Culture & History” local nav more concise with    “Photos and videos” placed under “Islands overview”
  • “Travel Info” local nav spotlights essential, timely preparation info by moving less pressing items to footer 

Cons

  • “Book” placement may appear too soon for “cold” users looking for more context and educational content
  • Risk user abandonment by moving some travel info to footer

My final wireframe, featured in section 5, blends the highest-engaging elements of Navigations 1 and 2.

Tree testing: Round 2

To develop the final wireframe, I ran a second tree test. This helped me understand whether the V2 sitemap enables users to more quickly find the necessary information to complete a task.

Again, tree testing answers questions like:

  • Do the labels make sense?
  • Is the content grouped logically?
  • Can people find they want easily and quickly? If not, what's stopping them?

Overall, Round 2 (V2 sitemap) won and drove higher success in helping users quickly identify the correct answer to complete each task.

Finding 1: Round 2 drove 62% higher success, but success was 35% less direct 

Overall, users were more successful completing tasks, but took more clicks to find what they needed. 

This means in Round 2, there was more clarity connecting tasks to the appropriate label and users were aware of when they needed to backtrack. 

This round of tree testing included 7 participants.

Finding 2: More users went down the right path and identified the correct answer 

On this task, Round 1 users identified a higher number (5) of incorrect answers. 

In Round 2, only 2 incorrect answers were identified, meaning users were able to better narrow down the correct location for completing a task. 

Finding 3: Better information scent helped users quickly identify correct answer 

Updated labels in Round 2 provided more clarity and better information scent. 

In this example, Round 1 airport information could be found buried under “FAQ”. In Round 2, however, airport information is parsed out and easy to find under “Airport info”. 

Finding 4: Eliminating hyper-specific labels resulted in higher success 

In Round 1, labels identifying specific islands resulted in lower success rates on this task. 

In Round 2, islands were bucketed under “Islands overview” which allowed users to focus more on identifying “Travel safety tips” rather than being confused by individual island names.

Finding 5: More, shorter menus allowed users to quickly identify correct answer

In Round 1, all travel information was categorized under “Planning”, in addition to info on items like dining and hiking recommendations. 

In Round 2, all travel information was placed in a separate “Travel info” menu, resulting in higher success on this task.

To summarize, the V2 sitemap:

  • Drove 62% higher success, but success was 35% less direct
  • Led more users went down the right path to identify the correct answer
  • Provided better information scent to help users quickly identify the correct answer
  • Eliminated hyper-specific labels, which resulted in higher success 
  • Used shorter menus, which helped users quickly identify the correct answer

The V2 sitemap won and drove higher user success. More users were able to quickly identify the correct answer to complete each task.

5. Design

Based on my research, I developed low-fidelity wireframes for the homepage and one child page that encompassed these learnings.

Wireframe: Homepage

Wireframe: Secondary page

Conclusion

The new wireframe supports business goals of enticing, educating, and converting users to book accommodations. 

Here's how:

  • Simplified navigation helps alleviate the lack of scannability caused by an overcrowded navigation
  • Shortened sub-menus help users complete tasks more quickly and directly
  • Labels are clear, concise, and straightforward, allowing users to promptly address their needs
  • Top navigation prioritizes actions connected to business goals
  • Deprioritized, but important information shifted to footer nav
  • Booking accommodation transformed to "Book" CTA in top nav to increase user conversion
  • Targeted, shortened on-page content increases page scannability and supports education and conversion business goals
Using Format