GoBook
Hate planning trips? Let GoBook change your mind! By providing relevant filters, the option to compare multiple stays, and even the ability to invite and collaborate with friends to plan group trips, you can now enjoy planning just as much as the trip!
Role: sole UX/UI designer
Duration: 65 hours
Software: Figma, FigJam
Where to begin…
Everyone loves a good vacation! However, the planning aspect is not always the most enjoyable. Users encounter a number of issues on travel sites, from comparing prices to find the best deals, to the lack of filters specifying user needs. I wanted to see how I could help users have the best vacation possible, starting from the planning stage!
Creating a responsive website was essential for this scenario. Despite desktop still being one of the primary devices used for booking, people are now just as likely to use mobile devices for convenience.
Let’s take a trip!
Building a solid foundation
Having a solid collection of research is invaluable to the beginning of any project. In the design world, this means learning about my competition and users to ensure that I understand where my platform needs to be distinctive, and where users are struggling.
Where should I focus my sights?
Because I assumed users encountered issues on both airline sites and travel accommodation sites, I created two competitor analyses to learn more about my competitors on each type of site:
Pros
Users like the streamlined process for booking tickets
Users like the option of selecting flexible travel dates, to potentially find better deals
Cons
Users experience difficulties with navigation to find information (pricing, upgrades, multiple seats)
Users find the site visuals too busy/cluttered
Pros
Users are increasingly likely to recommend American Airlines
Users agree that it’s easy to choose a seat on the website
Cons
Users experience difficulties and inconsistencies while navigating the website to find information (pricing, flight selections, upgrades, flight status)
Users note the website has usability issues; too many font sizes, font colors too light
Pros
Users are increasingly likely to recommend United Airlines
Cons
Users experience difficulties navigating the site to find information (pricing, flights, flight selections, seat selections, upgrades)
Users are overwhelmed visually by the homepage
Pros
Overall e-commerce UX performance is decent, according to UX Benchmark
Cons
Users struggle to understand specific property locations, relevant filters to accommodate needs, and unclear rate information
Users experience poor issue resolve and incorrect/false advertising on site
Pros
Overall e-commerce UX performance is decent, according to UX Benchmark
Users are generally able to book easily and have good customer support experiences
Cons
Users experience various issues trying to locate appropriate properties (lack of relevant properties, incorrectly stated locations, misleading filters)
Users experience misleading information on properties and poor issue resolve
Pros
Overall e-commerce UX performance is decent, according to UX Benchmark, mainly due to good homepage and main navigation
Users enjoy inclusion of different price points based on booking day and clearly identified unavailable dates
Cons
Users experience difficulties with understanding specific property locations, lacking relevant filters to accommodate needs, and unclear room rate information
Users experience lack of info communication and poor issue resolve
Key findings & insights
Both Delta and United present difficulties for users navigating seat selection, while users agree this is easy with American Airlines
All 3 airline sites experience issues with worsening UX, specifically via trust, usability, and loyalty
All 3 airline sites have UI issues, with users complaining about busy interfaces, color choices, and text sizes
All 3 travel sites experience users lacking understanding of where exactly properties are & filters that don’t meet user needs
Expedia has recurring issues of giving users inaccurate/false information, resulting in negative user experiences with no resolve
Booking.com and Airbnb lack a system that filters out poor/untrustworthy properties, resulting in negative user experiences
What do my users have to say?
With the amount of data collected from research, I needed to ask users questions that would help me narrow down the most significant pain points and expectations to address. I asked users about their experiences with both airline and travel accommodation sites to gauge if users encountered more frustrations on one type of site.
I interviewed 5 participants between the ages of 23-57, 4 via FaceTime and 1 in-person.
“When there are hidden fees, sometimes I just won’t book the room.”
“Typically, one person has to take the initiative for planning group trips, which can get stressful quickly.”
“Sometimes when I click hotels on [tripadvisor], it doesn’t let me go back, so I have to open multiple tabs just to compare hotels.”
Key frustrations & insights
My users typically prefer traveling with a group (though group planning presents an array of frustrations) & all experience more frustrations finding a place to stay than booking a flight
Half of my users noted that more relevant/customizable filters would improve their experience on travel accommodation sites
Half of my users stated frustrations with sites hiding fees and/or not showing full price until checkout stage & the necessity to have multiple tabs open to compare rooms
Consolidating my interview feedback
Rather than sifting through all of the individual interview feedback, I created two personas to quickly refresh myself on my users’ needs and frustrations.
What am I going to do with this information?
Having completed my research, I created a problem statement to efficiently communicate how I planned on helping my users. I also drafted up a few questions to reiterate my priorities.
Problem Statement
I would like to create a more streamlined process for finding stays on travel accommodation sites, because of how long and stressful the current process is for users.
How might we streamline the travel and accommodation booking process for group travelers?
How might we make it easier for users to find stays with the accommodations they’re looking for?
How might we provide more transparency for users looking for specific deals and/or accommodations on stays?
Putting myself into my users’ shoes
With an abundance of insights on my users, I was able to create a user flow for someone finding and booking a stay when traveling with a group.
This flow reflected how my travel site would address my users’ expectations for more transparency with pricing, a streamlined process for comparing stays as well as booking for group travel situations, and more relevant filters.
Finding inspiration for my ideas…
After coming to the conclusion that I would be in a better position creating my own travel site rather than iterating on an existing site, it was time for me to start considering what my site would look like.
I created a moodboard, gathering relevant elements from live sites to incorporate onto mine, all the while ensuring that each element would solve a user problem.
Materializing my ideas
Get out your pen and paper!
Sketching my screens is the fastest way for me to brainstorm and share my ideas with my users, to then make iterations if needed.
Desktop screens
Mobile screens
Let’s test these screens…
I used the desktop screens to conduct user testing with my interviewees to gauge whether I was correctly addressing my users’ needs and expectations.
I conducted the tests via text due to time constraints, and refreshed my interviewees on the topic at hand. Participants were asked if the sequence of steps was confusing or intuitive and why, as well as any other relevant feedback.
Key findings & insights
All participants found the flow intuitive
2 participants pointing out enjoying the ability to group plan and compare stays
Half of my participants suggested adding the option of flexible travel dates, allowing users to view broader price range
Time to digitize!
Feeling confident that my screens satisfied my users and taking the suggestion into consideration, I was ready to digitize my sketches. This would help additionally confirm that my platform was, indeed, the solution to my users’ problems.
Users have the ability to select flexible travel dates to compare prices and ultimately find the best deal
If planning with a group, users can access a customizable “group planning” feature that allows them to invite others and collaborate on things like finding and comparing stays, creating a budget, and more
Users have the option to not only compare up to 5 stays at a time, but to also add their stay comparisons to their group planning page
Tying up loose ends
I created an initial prototype out of my hifi screens to use for usability testing with my interviewees.
Testing, testing, one more time!
I conducted usability testing via FaceTime for 4 of my interviewees, and in-person for 1. I gathered data with the following success metrics:
click path
observations (specific behaviors, areas of confusion, etc.)
major quotes
ease of use (1-3 scale)
Task: You’re planning a weekend trip to Atlanta in June with your friend (any weekend in June), and want to find 3 viable options for places to stay. Your hotel budget is maxed out at $300 per night, and between you and your friend, you have memberships at Hilton, Hyatt, and Sonesta Hotels.
Key findings & insights
All of my participants completed the task with ease
2 of 5 participants noted enjoying the flexible option when filling out the booking search bar
3 of 5 participants were confused about whether or not the invitation was sent, after clicking the invite button to share the doc with another user
2 of 5 participants were confused about the task order on the search results page
*note: this is likely due to the fact that the prototype wasn’t live; participants attempted to successfully complete the task, just in a different order as what was mapped out
Iteration time!
Post usability testing, I took the time to make high priority revisions as well as fixing some UI elements to assure my users that I was bringing forth the most effective product.
Before
After
- Background changed from #FFFFFF to #F8FBFF to increase visual hierarchy, allowing the white cards/buttons to stand out more
- “Invitation pending” message added to give users confirmation that an action has been completed
Before
After
- Destination cards moved 1 column to the right to allow for more whitespace and less cluttering
- “300+ properties” aligned to bottom of results header section; visually looks more aligned than floating at the top
- “Compare stays” slider size reduced to match filter checkbox sizes (30px) to even out visual hierarchy
Before
After
- “Remove” option for select stays or chart included for error prevention
- “Remove” button color changed to red to provide clear distinction between buttons
You have arrived at your destination
Check out the mobile version!
My takeaways
Creating a responsive website was an extremely valuable learning experience; the significance of responsive sites is only going to continue as technology advances.
Time management was especially crucial during this project, as I was essentially creating double the amount of screens, but given a similar time frame for completion as when I’ve created a single set. I worked around this by waiting to digitize my mobile screens until post-usability testing. This allowed me to understand all of the iterations I had to make on my desktop designs and easily transfer them to mobile, rather than having to take more time and iterate on two sets of screens.
Impact
Through extensive research and user interviews, I was able to achieve a responsive travel accommodation site that addressed my users’ needs for transparent pricing and relevant filters, as well as their frustrations with group planning and inability to compare multiple stays on one page.
Next steps…
Run further usability testing on my final desktop and mobile prototypes to guarantee all user expectations were met, especially since I didn’t get a chance to run testing with my mobile frames
Conduct research and interviews to see if users would be interested in expanding comparisons and group planning to include airlines