Backpack App UI/UX
Rethinking Vacation Rental Booking: A Guest-Centric Approach
CHALLENGE
Who are vacation rental booking apps really built for?
As a seasoned traveler and frequent patron of vacation rental app behemoths like Airbnb and Vrbo, I've encountered my fair share of frustrations with their booking processes. From opaque pricing structures to an abundance of hidden fees, it often feels like the guest experience takes a back seat.
It's clear that these platforms are missing the mark when it comes to serving their primary audience: guests.
Granted, I understand that short-term rentals are a lucrative business, projected to rake in a staggering $256.31 billion in revenue annually by 2030. However, as the demand for budget-friendly accommodations and staycations continues to surge, it's evident that we can—and must—do better for guests navigating the vacation rental landscape.
This realization sparked a passion project: crafting an aesthetically refined yet accessible booking platform tailored to those seeking rustic escapes in the pristine "north woods" of Wisconsin, Minnesota, or Michigan.
The allure of the north woods is undeniable—a place where nature's majesty unfolds endlessly, offering boundless outdoor adventures. But beyond the enchantment of the surroundings, my aspiration for this platform is clear:
Transparent pricing — Guests deserve clarity from the get-go. I envision a platform that presents all-inclusive trip costs upfront, eliminating the burden of additional fees.
Intimate retreats — I aim to curate listings that cater to small groups, fostering environments conducive to introspection, connection, and cherished memories.
Neighborly feel — Safety and reliability are paramount. Every listing on the app will boast representative imagery, verified details, and a palpable sense of security.
Of course, this was merely the inception of my vision. To ensure its viability, I embarked on a journey of data collection and user feedback, seeking to understand the goals, behaviors, and pain points of fellow vacation rental app enthusiasts.
RESEARCH
Focused research proved indispensable in comprehending the user challenges at hand.
Throughout this pivotal project phase, I leaned on a toolkit of competitive benchmarking, online surveys, and usability tests, honing in with precision on enhancing the vacation rental booking experience. The objective of these exercises was to collect user data, enabling informed decision-making throughout the remainder of the project.
Competitive Benchmark
I conducted a thorough competitor benchmarking exercise to assess the user experience and interfaces of four competitor apps (Airbnb, Vrbo, Hipcamp, and Outdoorsy), aiming to identify strengths and uncover areas for improvement.
From a guest’s perspective, I explored the booking journey on each platform, took screenshots, and noted usability comments for each screen. I paid close attention to features crucial for business success: Home, Search, Listing, Booking, and Navigation. After completion, I summarized each section, providing a concise overview for convenient reference.
Screenshots of insights from my online survey results.
Online Survey
I conducted an online survey to grasp the objectives, behaviors, and context of vacation rental app users. Insights revealed key takeaways:
Frequent use of Airbnb and Vrbo suggests emulating their interface patterns.
Users prioritize price, location, availability, and ratings/reviews; optimizing their presentation is crucial.
Mobile app experience is paramount, emphasizing intuitive navigation, responsiveness, and a streamlined booking process.
Recording of one usability test I conducted to observe a real user.
Usability Test
The usability test is one of the most powerful research tools in the UX process—providing rich insights directly from the user. I led a real user through a series of questions and tasks while using two competitor apps: Airbnb and Hipcamp. The observations and notes I recorded wrapped up the research phase.
ANALYSIS
Research + Analysis = Insights
Following the collection of qualitative and quantitative data, a comprehensive analysis was conducted to distill user experiences into actionable insights. These insights were organized into an affinity diagram and customer journey map, providing valuable guidance for the design decisions of my mobile app.
Affinity Diagram
Grouping and then further refining all my research data into themes and subgroups allowed me to identify UI/UX enhancement opportunities within the main home, search, listing, and booking screens.
Customer Journey Map
Understanding users' goals, behaviors, and mental models at each phase of the booking process will help me align the app's interface and functionality with expectations, leading to a smoother and more intuitive user experience.
Insights unveil two prime product enhancement avenues
Analysis of my research revealed the two biggest opportunities to improve the booking process customer experience:
Viewing and filtering relevant search results
Creating a streamlined and clear booking screen
Additional key takeaways of my analysis include:
Ensure consistency in component styling and language used throughout the app
Use color intentionally in the UI to draw visual attention when necessary
Opt for a minimalist palette that allows for high contrast choices for actions; and utilize icons as design elements where appropriate
Remove unnecessary actions or options from screens to focus users’ attention
Leverage user profile data to provide relevant recommendations and streamline the booking experience
Place the search bar prominently and minimize user-input parameters required for search
Display listing results in multiple views (list, map) and include helpful area-specific landmarks
Promote price transparency by providing a clear breakdown of costs to the user, including nightly and/or total costs when user-input dates are set
Organize listing content intentionally, intuitively, and with the user’s decision-making hierarchy in mind
CONCEPT
Ideate to eliminate user friction points
Building upon the insights gleaned from earlier project phases where I pinpointed the primary pain points users encountered in competitor apps, I delved into the concept phase to explore innovative approaches for enhancing the functionality of my app.
Flow Diagram & Interaction Design Sketches
To map out a high-level overview of the booking flow, I created a diagram of screens and actions indicating the “ideal path” most users would take. From there, I made low-fidelity sketches of the screen states throughout the flow and noted where the user interactions would occur.
In both of these exercises, I iterated to solve for two main user pain points:
Ensure that users can easily understand viewing and filtering search results
Total price of stay is clearly displayed, as soon as possible in the booking flow
View the flow diagram »
View the wireframe sketches »
Starting with these quick wireframes allows me to execute high-fidelity designs more efficiently.
DESIGN
Backpack is easy—just pack your bags and go!
Throughout the design process, I focused on this guiding principle for every screen: Is it necessary? Does it add value for the user? If the answer was yes, it stayed; if not, it was removed. This approach ensured that the guest experience remained front and center.
Specific design decisions I made to prioritize the guest experience:
Streamlined search flow prioritizing quick access to property results
Early display of total trip cost when all search parameters are entered
Minimized steps to book a stay, with a single screen for required fields and optional account creation post-checkout
Intuitive search results with list/map views, live filter counts, and clear system status visibility
Enhanced clarity in the relationship between properties and their bookable sites for a smoother booking experience
100% of users in my usability tests searched the same way: inputting their desired trip location first. By removing unnecessary screens, I could streamline the ideal search flow to be 44% more efficient.
Encourage speedy input of search parameters and move users to the list of property results as fast as possible.
Remove the overview search screen from the beginning of the flow that commonly appears in competitor apps.
Push users directly to the next step upon completion of the previous instead of to the search parameter overview screen.
I ensured users get a clear understanding of the total trip cost as soon as all search parameters are entered, displaying it both on the search results list and at the bottom of the listing detail screen.
While reviewing competitor apps, I noticed inconsistencies between the search results list and map views. I addressed this by implementing a toggle switch UI. Additionally, I outlined the "location" search area on the map to reduce user confusion about property placement, a key friction point identified in usability tests.
I thought through the app's flow for selecting a site from a property with multiple bookable entities, such as tent spots or cabins. The UX was refined to establish a clearer hierarchy between the property and its individual sites, addressing user confusion from the usability tests.
The simplified booking screen minimizes steps by only displaying required fields, providing a clear breakdown of trip costs, and allowing users to book without creating an account, with a prompt for account creation after checkout.
FEEDBACK
Collecting real user feedback will be pivotal before development of the app.
This project was inspired by my personal experiences and a recognized market need, with the goal of making travel more accessible to a broader audience. After this first design pass, my next steps before actual development focus on gathering feedback and refining the app to prioritize the guest experience.
Conduct usability testing with prototypes to gather real user insights
Iterate on design elements to ensure a streamlined and intuitive user flow