As a quick overview on this project, Streamline is a Vacation Rental Software company that provides solutions for rental managers to help them manage leads and maximize vacation rental bookings. Bizcor works in conjunction with Streamline and utilizes their software to create direct booking Conversion based websites for rental Managers. I had a ton of fun working on this project because I got to design the user interface for the two most critical pages on any vacation rental site when it comes to converting users into making direct bookings.
The existing architecture for the search flow was as follows: the user would enter their respective dates and search criteria for their stay then they would be presented with a list of available properties matching that search criteria. Once they found a rental of their liking, the user could click on a rental to view more details and images and then ultimately book the rental from the property details page.
For the search results UI, we identified the pain points of the user to include:
For the rental details UI, the pain points of the user included:
Before jumping into the design process, the first two weeks were spent with another designer on the team conducting user research on current design trends and solutions in the vacation rental industry. We compiled an excel spreadsheet analyzing design features from search flows across the industry to help determine which features were missing and whether or not those features would aid the user in their search for the perfect rental. We gathered feedback from online forums about gripes that users had with vacation rental search flows and hang ups that prevented them from booking. What we found to be the most prominent feedback was that the user wanted a simplified design solution that didn't bombard them with information but rather provided a general overview of each rental. Most users wanted the initial search to be broad while a few outliers wanted the ability to get granular with their search.
Armed to the teeth with user research and pain points to remedy I set out to create the initial mock up. My biggest focus for the search results was simplifying the initial search and making more properties visible above the fold from the start. The first run of the design was tested by the rest of the design and development team. A few different search results layouts were tested at first before settling on having three rentals wide with the map visible and four rentals wide with the map collapsed (this prevented the rental images from being too small as the image is one of the biggest deciding factors when a user selects a rental). On the property details page - we initially had the booking form featured beneath the gallery but decided as a team that it should be featured more prominently above the fold for the user to see without having to scroll. This was emphasized on mobile devices as well.
By the end of the project myself and the rest of the team were very pleased with the overhauled version of the search flow. The research that we had conducted prior to beginning the design combined with all of the client feedback we had gathered on our previous version of the search flow helped tremendously to evolve the UI to where it is now.
The solutions provided to the previous user pain points in the search results were as follows:
For the rental details UI - solutions to the user pain points were as follows:
The improvements made with the search flow drastically helped to improve user conversions by simplifying the overall user experience and prominently displaying the tools that the user needed. The biggest improvements were seen with mobile users as all relevant calls to action were made readily available using various fixed position layouts. The amount of research that we put into this before jumping into the design helped out a ton in reducing the design revisions needed to get the UI into development. Given the right time lines in the future I would like to devote as much time as possible to research and dialing in user pain points before jumping into the design.
