A travel website where users can choose a travel agent to plan their trip or can plan a trip on their own.
The Problem
Travelers often struggle with too much information. To simplify the process, I provided the option to choose a travel agent from Bounce Travel Group or to plan a trip independently, all in one place.
Project Type: Responsive web design and app, plus branding
Project Focus: To ease the stress for travelers by providing a choice to use a travel agent within Bounce Travel Group or to plan a trip on their own.
Platform: Website/App
Industry: Travel
Role: Sole UX/UI Designer plus branding (with support from a mentor and from group crit sessions.)
Tools: Figma, Figjam, Zoom, Squarespace
Duration: August 2023 to October 2023
The Journey Ahead
Below is a Table of Contents to mark the journey ahead.
Table of Contents
Navigational Map
Branding
Mood Board
Color Palette
Component Design/UI Kit
Component Library
How Might We
User Flows/Task Flows
Low-Fidelity, Desktop
Low- Fidelity, Mobile
Competitive Analysis
User Interviews
Personas
Hi-Fidelity, Desktop
Hi-Fidelity, Mobile
Usability Test Results
Affinity Map Post User Testing
Final Thoughts
Research
Competitive Analysis
Before starting the project, I compared the pros and cons of four popular travel booking sites. Reviewing their weaknesses helped me develop ways to make travel planning easier for customers.
According to the site reviews, customers wanted the following items:
ability to see what is included in their trip
confidence in using site’s travel agent based on reviews
easy navigation and readability
one-stop shopping
clarity in the pricing
trustworthy site
Competitors Strengths and Weaknesses
User Interviews
Next in the process was learning about my target audience. I wanted to focus on older singles. The answers to the following questions helped me to gain insight into their current frustrations.
A few of the interview questions were:
How do you currently go about booking a trip?
How much time do you typically spend on booking a trip?
Do you experience any obstacles with booking a trip?
Do you like anything about how you currently go about this task? If so, what? If not, why?
What are the most difficult and easiest parts related to booking a trip?
If you could design a website, what two or three things would you want it to have?
Summary
Based on 4 interviews by phone, and in person, I learned of other user needs. The ability to compare pricing on trip-planning and flights was popular among all travelers. For the purposes of this prototype, however, I chose to focus on the most practical needs, which were one-stop shopping, easy to navigate and understand, and the ability to see what is included in the trip. Sample interview to further illustrate these points is below.
-
Name ___Shauna_______________________Date___8/23/2023___________
Who have you traveled with recently? Carnival, Holland America, Royal Carribean—good for kids)
How do you currently go about booking a trip? I pick a destination and then go to Google flights for all airline travel. I will compare stops and fares. Booking.com for hotels. Southwest airline. On big trips I use Travelzoo.com. They helped me with my Ireland trip years ago. Air, car, accommodations all in one. I got to stay in Ireland Villa Adaire for 7 days
How much time do you typically spend on booking a trip? It depends on the trip. SW (5 min), Oregon (15 min); cruise (1 hour); Ireland (1 month
How important is saving time for you when booking a trip? Not important. I want flexibility. Minimal stops and price, nice accommodations over saving. Want it to be easy. Avoid non-refundable and change fees. They can be as much as $500.
Do you experience any obstacles with booking a trip? Tell me more. Biggest obstacle are change fees. Inability to get a refund is irritating. They should allow you to change your mind within 24 hours. Big trip glitch with cruises is you have to book a day ahead, so as not to miss the boat. Cruises offer flight bookings. If you have to coordinate with another piece can be frustrating. Missing connections.
Do you like anything about how you currently go about this task? If so, what? If not, why? Easy websites. Where starting, where ending. Want point A-B-C and back to point A. Either round trip or layover. Won’t allow multiple cities and need this to move onto next leg. Save a flight for a length of time to check with other parties without raising the price. Go back and price is no longer there. I like websites where everything is on it: car, itinerary, just show up. I don’t like groups. Give me planned activities.
What are the hardest and easiest parts about booking a trip? Hardest is coordinating best times with least amount of stops and layovers for best price. Coordinate flights to correspond with rest of travel to arrive on time. Best is flexibility. Website is flexible, easy, refunds, make recommendations, fewest stops
Insights gained from this interview were:
wants easy and straightforward site
wants someone else to plan her trip
wants to know what’s included
Personas
Nine people over the age of 40, both men and women, were interviewed online or in person. Here is a sample of what some would want in a travel site, with a recurring desire of an easy website.
All interviewees wanted a simple website, but their preferences varied in the following ways:
Plan everything for me
Don’t lose my information
Please send reminders
In this case study, I focused on two main issues: “plan everything for me” and “don’t lose my information,” along with creating a user-friendly website. Bounce Travel Group seeks to reduce the frustrations of older travelers from different backgrounds, even if it can't solve every issue for all travelers.
Summary
Ideation
How Might We
To create a versatile easy-to-use site for travelers that allowed for both travel agent assistance and individual planning, I developed the following How Might We questions.
Using what I learned from interviewing, I developed additional product goals in the form of How Might We questions.
How Might We:
Provide travel-agent itineraries and individual itineraries in one site?
Provide a site with necessary and important information for in one place?
Keep information from getting lost between pages?
Show what is included in the trip?
Maintain and attract travelers?
User Flows/Task Flows
With a goal of providing an in-house travel agent or the option for individual planning, I developed the following user flow. In the first one, a user would follow this if he/she used the resident travel agents to construct their itineraries. In the second flow, a user would follow this if he/she planned their own itinerary.
Low-Fidelity, Bounce Travel Group, Desktop
With the two needed functions in mind, I developed the wireframes. It’s surprising to see how much the search box in the first two frames changed over time.
Home
Destination
Individual Itinerary
Individual Booking
Low-Fidelity, Bounce Travel Group, Mobile
The search box for agent itinerary or individual itinerary changed in the final build.
Home
The search bar and buttons here and in the next frame changed in final product.
Individual Hotel
Individual Booking
Wireframes remained the same in the final build. Only a separate confirmation frame was added.
Design
I aimed to make the site user-friendly and easy to understand. To achieve this, I focused on organization. Inspired by other sites, I created the following navigational map.
Navigational Map
Branding
Branding for Bounce Travel Group began with jotting down adjectives that I wanted my site to portray like, easy, fun, and exciting. Next, I sketched out some ideas for a logo.
First choice was the bent arrow with the name of the company on the exterior. When I tried this out in various sizes and backgrounds, however, I did not like the results. Second, I chose the ball with bright colors and the name of the company. It said “fun” and “easy” to me, which was a feeling I wanted to promote, but I was still not fully satisfied. Finally, I removed the old design and picked the current logo with a circular brand name with star separators. I am happy with this choice so far.
Mood Board
Next, I created a mood board, choosing colors and textures that may be associated with travel.
Color Palette
Last, I created a color palette. To narrow down the choices, I made swatches of all of the colors from the photos seen here and created a palatte from the swatch selection.
At first, the color choices were too dark and did not provide enough contrast in the final product. The subtle changes below for tan and navy worked better.
Component Design
UI Kit
For the font choice, I chose sans serif Inter. It is a clean, sharp font and is still readable regardless of any alterations, such as bold or italic, large or small.
Component Library
For the UI Components, I stayed within the color palette of navy and burgundy and some yellow.
Final Wireframes and Testing
High-Fidelity Desktop
Testing on my laptop, I used these detailed wireframes. The background color changed from dark brown to light brown. The red and navy buttons were made darker. I used red, green, and orange highlight colors sparingly.
Based on feedback from desktop testing, some changes were made to mobile wireframes.
High-Fidelity, Mobile
Usability Test Results
Keeping ease-of-use a priority, I then gave three participants two timed tasks: (1) booking a trip planned by local travel agency (2) booking a trip planned by the traveler.
Afterwards, participants were given a quick System Usability Scale (SUS) survey and a questionnaire. The following are the results of the usability testing.
-
Average time taken for both tasks = 8:12
Participants used my laptop and the Figma prototype feature. The longest average time of 6:00 was on Task 1, as participant analyzed the information on the page.
-
Task 1 (3 students, 10 questions) 70% correct
Task 2 (3 students, 10 questions) 50% correct
Total = 60% correct
-
Avg Score among 3 with goal of 100 = 98.3
Imperfect score related to: One participant giving a score of mostly agree on using site frequently and one participant giving a score of mostly agree on site was easy to use.
-
From these results, I learned that:
participants liked the overall look, feel, and usability of my site.
Frustrations mentioned on real travel sites, were:
losing information from page to page
sites not remembering booking information once traveler leaves the site and returns later.
In a live situation, a solution for this would be a priority.
Affinity Map
After timed-testing was completed, I learned that the users found the site easy to navigate and that the homepage was clear, making it simple for anyone to use. This fulfilled my original goals of user-friendly and easy to understand.
Post-User Testing
A few other comments were:
Easy to stay on path
Overall layout of pages were beautifully structured.
Pages not cluttered
Wants recommendations for activities
Wants to know dates of activities and when to be there
Put log-out function at the top
Summary
The Affinity Map was not only encouraging and affirming, but also gave me goals. Recommendations for activities, as well as dates of when to be there are two functions that could be added to a live version. Earlier recommendations of comparing best flights and travel sites side by side are also worth noting.
Main Takeaways
Final Thoughts
Bounce Travel Group is duel-action travel site and was created with the stressed-out traveler in mind. Remote work has become a popular and sought-after alternative to the daily interstate grind. With this choice, however, comes many hours at home. What better way to beat the doldrums than to travel. I believe a site such as this is a perfect answer to travel needs.
I enjoyed working on this project and interviewing participants. Although, not a traveler myself, yet, I learned of many frustrations in planning getaways. One notable frustration was having to go between sites and losing information. If live, this site would remedy that frustration, because all information would be in one place.
A competitive analysis revealed that this is not a new idea, but is an idea worth pursuing. Maybe one day, Bounce Travel Group will join the competitive travel market.
*Follow the arrows