UX - Responsive Website — Ben Bullock

TravelBuddy - Responsive Website

UX Design Case Study | Student Project - DesignLab
Role | UX/UI Designer, Graphic Designer, Researcher
Duration | 12 weeks

Traveling with a pet can be stressful, expensive, and often times a negative experience for the animals and humans. With ever-changing federal regulations, airline specific policies, fees, and procedures, finding and booking pet travel is a real hassle.

TravelBuddy.com is a website built specifically for those traveling with pets, offering an all-in-one solution for researching, booking , and conducting their travel, allowing pet owners to enjoy their trip and focus on their number one priority, their pet's comfort and safety.

My challenge was to design a responsive website, providing me excellent experience creating a digital product that can be properly viewed and utilized on multiple devices.

This project focused mainly on the mobile web experience of TravelBuddy.com and the key deliverables were high-fidelity screens for mobile and browser, and a prototype where users can create accounts, search for and book flights, and manage their trip via mobile notifications.

Research

Booking travel online is easy and there's a ton of websites out there to help you accomplish this. I examined these sites, trying to understand their design patterns, and the user flows for booking travel. With similar functionality and features, they are great for regular travelers. However, none of these sites offered pet specific tools to alleviate the concerns of pet owners and make pet travel easier. In my research, I wanted to understand users' attitudes and concerns regarding pet travel, and how a new travel website could disinguish itself from the competetion, and offer users peace of traveling with their pets.

Research Objectives

Gain insight into the current process for booking pet travel online and analyze the design patterns of websites/apps in the travel space.
Determine the main priorities and concerns for pet owners when traveling with their pets.
Identify the common pain points and concerns of users when traveling with pets.

User Survey & Interviews

Airline ticket price was the most important factor that travelers considered when researching and booking flights without their pets.  However, when traveling with their pets, the pet's comfort and safety was users' number one priority.  This is telling and demonstrates that customers are potentially willing to spend more money if it means their pet will have a better travel experience, a notion that justifies creating a travel website with a specific focus on pet travel.

Results

40% traveled with their pets previously, 50% would consider traveling with their pets, and 10% would never travel with pets for various reasons, including pet’s health concerns, temperment, or associated costs.

Planning was the most stressful part of pet travel, and most travelers felt their pet air travel went fairly smooth once underway, ranking their ease of travel at 2.33 on a 1 (easy) to 5 (very difficult) scale.

Top concerns for pet travelers: 100% were concerned about their pet’s comfort/safety during their travels, 91% worried about their pet’s ability to stay calm during the flight, 73% worried about submitting proper documentation, 73% were concerned with FAA/airline pet policies, 55% were concerned about access to pet relief areas in destination or layover airports.

100% of respondents wanted to see pet fees included in ticket pricing.

100% of respondents wanted to see rankings/reviews for pet travel across airlines.

91% wanted to be able to compare pet fees and policies across airlines in one location.

82% would like a pet’s profile that they could use to help determine fees and easily share pet details with airlines.

73% wanted to see recommendations for nearby pet-friendly accommodations near their destination airports

64% wanted to see reviews/recommendations for airports/connections with great pet amenities.

Insights

Preparation and planning for pet travel may be more stressful than the travel itself.

Users want more transparency regarding pet fees and policies for various airlines.

Users were concerned about pet safety, travel costs, regulations & requirements, airport amenities and access to pet areas during travel and put a lot of importance on user/veterinarian reviews/recommendations.

Viewing reviews/recommendations for airlines, hotels, and airports from vets and customers is a critical part of the research phase of pet travel.

Finding information about pet travel carriers and other FAA/airline requirements is frustrating and difficult.

Users wanted information to make the trips easy and comfortable for their pet, including veterinarian safety tips, recommended calming treats and chews, and general pet travel information.

Research Takeaways

Planning and preparing for pet travel can be more stressful than the travel itself.

To reduce stress surrounding pet travel, owners want to have as much information as possible to alleviate their concerns. Current travel sites offer very little information regarding pet travel and consolidating the information for users would be a great benefit.

Users want better tools to filter flights and accomodations to fit their pet’s needs.

Offering more robust search and filtering tools would let users have more control over their plans, giving them the tools to book reservations that make the most sense for them and their pet.

Users want more transparency around travel costs and pet fees.

Booking pet travel online does not include fees for pet travel. Users are oftened surprised at the costs associated with pet travel, and including pet fees within ticket pricing would help users make better informed purchases.

Regulations and requirements are confusing and can be outdated and difficult to track down.

Users were very concerned about submitting proper documentation and following requirements like adhering to pet carrier regulations. Having airline and FAA policies readily available will reduce confusion and make the users experience better overall.

Users want to hear from experts and experienced pet travelers.

There's a lot of value in having a resource bank from the experts like calming treat and travel tips from vets, animal trainers, and customer testimonials for products and airlines.

Define

Having completed my research, I needed to define what problems my app would solve for users. I developed key Point of View statements to help me understand the state of mind of my potential users, and then created several “How Might We” questions to focus the design into solvable problems.

POV Statements

I’d like to explore ways to help people who are frustrated by the process of booking flights with pets online, have a less stressful experience researching and purchasing tickets by giving them the tools to plan the best trip for them and their pets.
I’d like to explore ways to provide pet travelers who are unsure about budgeting for pet travel have more transparency regarding airline policies and pet fees, and reduce the overall stress around planning and preparing for pet air travel.

HMW Questions

How might we help people gain a better understanding of airline pet policies and fees during the flight research and booking phase of their travel experience?
How might we provide people the information they need to compare flights and airlines for pet travel, to help them make the best decisions for their pets?
How can we empower users to have a good experience traveling with their pets, and help keep their pets safe, comfortable, and in compliance with travel regulations?

Journey Maps

Now, having outlined some of the main problems I needed to solve for my users, I wanted to better understand the current travel booking experience before diving into developing the sitemap. Since pet owners can vary even more than the pets themselves, instead of developing User Personas, I created Journey Maps to trace one user’s experiences booking travel with their pet. 

The journey maps below outline the current state of the user experience and the ideal user experience while using TravelBuddy.com. This exercise was incredibly helpful in understanding the journey my users could potentially take as I prepare to dive into the site map and flows.

Site Map

The Journey Map helped me to personalize the user’s experience and gave me a lot of ideas for how the site could function and address the outstanding questions from my research synthesis. By creating a Sitemap for TravelBuddy.com, I could start from a birds eye view of the website and break down the overarching sections of the website and their functions, and from there, further organize the smaller components and ideas. Soon many interesting concepts for features and functionality began to materialize.

User Flows

With a solid understanding of the structure and basic function of the TravelBuddy website, I identified and built out the core user flows that I would need to demonstrate and deliver in my prototype and minimum viable product.

SEARCH FOR FLIGHTS

BOOK A FLIGHT

ONLINE CHECK-IN

TRAVEL NOTIFICATION

Branding

From the start, I knew that the branding of TravelBuddy.com needed to inspire confidence in its users.  We don’t trust just anyone with our pets, so having the site feel safe, comfortable, and inviting were really important design goals. I first developed the logo and workmark for the website. Combining the elements of travel, pets, confidence, and calm into one logo was tricky; it needed to strike a balance of friendly, serious, and trustworthy.  After working through dozens of thumbnails and sketches, I was eventually inspired by a friend’s cat lazily lounging on the edge of a couch.  The image of a much loved pet sleeping comfortably on a plane immediately made me feel trust in the brand.

Users need to feel welcome to the website and have full confidence that TravelBuddy knows what it’s doing when it comes to their pet. Knowing that blue can instill a sense of trust in users, it became the main color of the brand.  The other important ideas I wanted to convey through the design were calm and friendly.  A light jewel tone green was my next choice. It worked well with the blue, and plays on a land/sea theme to also help subtly convey the sense of travel.

Create

Armed with logos, brand colors, journey maps and user flows, I proceeded to develop the key features of the website. I really focused on what separates TravelBuddy.com from the other booking sites, and began to develop features that would not only excite users but really bring value to the site and make it their go-to destination for pet travel.

User Experience Flows & Initial Wireframes Sketches

I went back and considered my journey maps.  From there, I began to layout out some basic wireframes to respresent some “Experience Flows”. This gave me a big picture view of how the main screens could interact, as well as what kind of information I wanted to feature, based on my sitemap and the user task flows.

Low-Fidelity Wireframes

A big challenge I faced with the design and layout of the screens, was dealing with very data rich and ingo-packed sections. Searching for flights involves a lot of data points and a lot of information to convey to users when they are trying to research and plan for their travel. Getting all this down in a concise, friendly, and also familiar way was critical to a good user experience. In my initial layout of the low fidelity wireframes, I was focused much too heavily on the tasks and information, and ended up crowding the screens and disrupting the flow.

Mobile

Desktop

Visual Design

My visual design process really began with my low-fidelity wireframes. Having established the general layout of the screens, my next step was to figure out how elements like text boxes, buttons, and menus would work visually within the available space, and convey the brand message and a sense of confidence in the users.

High-Fidelity Wireframes

I continued to develop the look and function of the site altering the menu structure to better reflect the native tablet functions, simpifying frames and components, and making sure to highlight the right information to maximize its impact on users. With the high-fidelity wireframes completed, I was ready to create the interactive prototype and get the website in front of users for testing.

Welcome

Pet Priorities

Account Creation

Account Confirmation

TB - Home

Flight Search

Best Pet Routes

Flight Details

Secure Checkout

Booking Confirmation

My Trips

Mobile Notification

Desktop - Welcome

Desktop - TB-Home

Desktop - Best Pet Routes

Prototype & Testing

With the key user flows in mind, I began linking all the screens to make the prototype interactice. I then conducted five live testing sessions over Zoom with potential users of the TravelBuddy website. I gave them three tasks to perform: Create an Account, Search for a Flight, Book a Flight

Testing Results

The usability of the website is solid.  Users were able to complete all the user tasks without any issues or confusion.  Users felt confident completing the various tasks and felt the design and layout also helped to make clear their next steps and present the dense information in a digestible way. It functioned as they expected a travel website would, but also had some surprising and interesting features that really spoke to pet owners.

Visual/UI Design of the mobile site is good; the design and function of the website prototype was clean and felt intuitive to the users. Users liked the color palette, logo, and felt the site overall gave off a friendly, calm, and inviting vibe, something I was really aiming for. The color, font and layout choices were also successful in helping the users navigate the screens and the visual hierarchies.

User Feedback Grid

Revisions & Next Steps

Based on the feedback from testing, there were a handful of some visual tweaks to be made to the layouts of the screens.  Elements like dropdown arrows needed standout more, so those were adjusted to increase visual clarity, and interactive sections like the search filters were made to start expanded and be readily apparent to users. 

Those that tested also wanted to see some improvements to highlight the benefits of the site even further, for example, making the pet fees more apparent during booking and providing users more information about the quick search filters. I added an additional header and information to the search filters that explain there function and how they can help a user's search, as well as adding a detailed breakout of the pet fees and summary of charges during checkout to bring even more fee transparency. 

Users wanted the onboarding/account creation to require less initial information so I simplified the account creation step a bit by asking for less information up front. My goal was to have the user information populate their billing and flight information using details gathered during account creation.  This could still be accomplished, but some users found they weren't comfortable submitting as much information upfront without becoming more comfortable/familiar with the app; this is a good lesson for future projects. 

Overall, testing went well and demonstrated that the concept of TravelBuddy.com has real-world application and could be a terrific option for pet owners if it were built.

Try the TravelBuddy Prototype!

Conclusion

This was a challenging project and fun project. I knew I wanted to focus on a travel website, in part because it would be good experience designing the search and checkout task flows, something I hadn’t done in previous projects. I knew that the site would need to differentiate itself from the vast amount of travel booking sites, and with such a large population of pet owners in the country, the amount of potential users was attractive.

Something important I learned developing this site, and something I’ll need to look out for on future projects is that I tend to get sucked into the details of the wireframes early on in the process. In this case, I took a step back, and re-examined the journey maps and sitemap to develop some “Experience Flows.” Building out these quick flows helped draw me out of the details, and refocus on the entire user experience.

This project drove home the point that keeping the end user in mind throughout the entire process is key to developing an effective digital product. There are constantly opportunities to connect and reconnect with your users if you have the awareness. This will ultimately build trust with the user when they see you anticipate their needs or questions and have thoroughly considered and built an experience just for them.

I believe this is a strong portfolio project and I’m proud of the work I put in. It demonstrate skills across the board in visual design, ux/ui, and research, as well as a clear understanding of the business goals, which is important in making the justification for taking this product to market. The design needs to not only serve the user, but the bottom line of the client.