Flexible Dates Search

Priceline is an online travel company and best knowns for its Name Your Own Price that allows customers to bid hotels, flights, and rental cars at a lower price.

Role

iOS Designer
User Flows, Wireframes, Usability Testing, Visual Design

Overview 

Problem

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.

Pain Points

flow-priceline-1

MVP - Gather baseline data to decide the next step

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.

refined-flow-priceline

Design Decisions

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.

 

Artboard-Copy-3-1
Artboard-Copy-4

Refine Flows

refined-flow-priceline-copy-2

User Testing With 25 Participants

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.

participants-priceline
mvp

Results

• All test participants thought the flows were clear and straightforward

• Hotel bookings started trending up after the MVP launch.

test-result-priceline

Phase 2

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.

Usability Testing Learnings

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.

Competitive Analysis

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.

Home 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.

test-result-priceline-copy-2-1

Listing Screen

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.

regular-price-2
from-price-2

Express Deals - Listing Screen

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.

price
from-price-copy-2

Name Your Own Price

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.

nyop-priceline

Internal Testing

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.

flexible

Impact

The hotel bookings grew 4.97% after the feature launch.

4.97% = $X,000,000

03-2

Takeaways

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.

UI Optimizations

• 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.

screens-priceline-1

Follow Up

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.

Back to top Arrow