User Flows, Wireframes, Usability Testing, Visual Design
Users who had the Priceline app on their phones needed a way to book the hotel in the Priceline app from Apple’s build-in search system (aka. Spotlight search)
We wanted to streamline the booking experience and flows for the existing customers by implementing the deep linking feature. Ultimately, to increase the iOS hotel booking conversion.
1. Optimized to reduce the number of steps in the hotel booking process.
2. Increase the app download rate.
3. Edge case of No Rooms Available no longer requires users to go back and update the date.
Top navigation – Reusing the existing Check-in, Check-out, and Choose Room component because users are already familiar with the functionalities and placement, but enhanced the clarity and visual by adding the Checkin and Checkout labels along with the calendar and room icons.
Bottom navigation – I learned that the back-end couldn't get the price without knowing the dates because prices change every day based on demand. I proposed adding a microcopy "Select dates to see prices" to show customers why they couldn't see the hotel price and need to choose dates.
I created an interactive prototype and worked with my Sr. Product Manager on a user testing plan to validate that the refined flows were intuitive. And then launch the MVP and track the performance.
• All test participants thought the flows were clear and straightforward
• Hotel bookings started trending up after the MVP launch.
Because of the positive performance in the MVP launch, the product team decided to invest more effort into turning the MVP into a full feature for the hotel products.
Customers compared our available hotel options and prices with our competitors.
These customers were price-conscious and usually had a specific destination in mind but flexible on the dates for their next vacation.
Only a few of our smaller competitors had this feature implemented for their iOS customers, but the customers would only see the option in the calendar picker screen.
Based on Google Analytics, we saw that over 80% of hotel customers check-in today and check-out the next day. This UI made it easy for users to check the box and start searching for hotels immediately and choose dates later.
As mentioned previously for the MVP, we couldn't show hotel prices without knowing the dates on the details screen. The same logic applied to the listing screen because now users could check the "I'll select my date later" option on the home screen.
With dates (left) – Prices are the most up-to-date.
Flexible dates (right) – I had a discussion with the product and dev teams on this problem. The logic behind the From price was that we could show the lowest price in the last 3 days, and using the word From to make clear that the final cost could be higher than the shown ones.
We also promoted Express Deal for the users who prioritized quality and location for their stays, such as business travelers. The exact hotel name and address would be revealed once the deal is confirmed.
With dates (left) – The neighborhood, star level, and price were available to users.
No Dates (right) – Dates must be selected for the system to fetch the data for the Express Deal. I created a generic image for this project.
I applied the same UX and interaction to the Name Your Own Price flow for solving the same problem – dates must be selected to generate a hotel price.
I scheduled a few sessions to test with members from other teams who were unfamiliar with this new feature. Everyone was able to get through the flow successfully.
The hotel bookings grew 4.97% after the feature launch.
• Discover opportunity – Being able to recognize the right technology to solve the right problem is critical to creating a better product.
• Adopt early – Be an early adapter is challenging because there are many unknowns with new things, but if it's done right, it could be rewarding.
• Data-driven – Getting data is the key to solve biased feedback; prove if a design is a success or failure, and validate assumptions.
• Delivered a consistent experience across all supported iOS devices.
• Optimized spacing so that all information would be visible even on the 320 x 480 resolution.
After the successful launch, the product team wanted to further improve the overall UX and UI for the app - starting with the Search screens for the hotel, flight, and rental cars.
The new designs significantly improved visual consistency and with reusable components for quicker development.