Priceline's Confirmation Page

The previous version of our confirmation page was not meeting our team's, nor our customers' expectations. A quick look into our customer chat logs surfaced customer questions like... "Did it go through?" "Was I charged for this?" "Is there a way to email this to myself?"
Previously

The confirmation page for each product had previously been under the control of each product specific desktop team. Overtime this led to major visual and language inconsistencies. These pages became so cluttered with marketing messages that customers often had a difficult time finding the information they were looking for. Beyond that, travelers referencing this content received a "desktop" experience, regardless of the device they were on.

Our Process

To understand patterns in customers' behavior from this page, we worked with the Customer Service department and dug into Google Analytics data. We then held stakeholder interviews to identify any concerns they had or opportunities they saw for the redesign. We compiled the notes from these interviews into a "Problems, Strengths & Goals" document, which we shared to help align the group early on.

To build momentum we created a few Google+ Events where team members and project stakeholders could contribute screenshots and leave notes. The first event was to show product content variations that we would need to consider on the current confirmation page. The second was to gather screenshots of competitors and other relevant, well executed interfaces.

We then began to work through wireframes, pausing to discuss different solutions to problems on the page with our team. For our redesign, we needed to create a single template with an information hierarchy based on top customers tasks. Doing so would make it far easier for our customers to action on their reservation. We also wanted to shift away from our previous approach to marketing on the confirmation page but needed to make sure that our conversion rates for products and services offered from this page didn’t take a dive. This would mean designing up-sell placements into the template in a more contextual and relevant way.

Getting Feedback

Once we felt like we were in a good place to share our low fidelity mock-ups, we scheduled several internal user group critique sessions. In these sessions, we introduced a few feedback techniques that were new to Priceline. We presented participants with a print out of the old design. To set the context for the discussion, we reviewed the "problems, strengths & goals" document with the group. We then presented the participants with a print out of the new design, face down. We asked participants, when prompted, to flip the new design over. They would have 5 seconds to scan the design and remember all that they could about what they saw. This technique helped us to understand their first impressions of the new design including what stood out to them as the most prominent content on the page. When the 5 seconds were up, we asked them to flip the page back over and write down what they remember seeing.

Then we handed out to each participant, a paper with a list of tasks, such as "find a way to cancel this reservation," or "find the hotel’s check-out time." This acted as a "content scavenger hunt." When prompted, we asked everyone to again flip the new design over, search for and circle content for each task. The first participant to finish got a prize! We then had a round of Q&A to understand how easy or difficult it was for participants to find their way around the design. We wanted to know if they were able to find the information they expected to find and if that information was in the place they expected it to be.

These discussions were fun, energetic and memorable! The feedback we received helped us to refine the layout and content we were presenting. Each participant kept their printouts with their notes on them as an artifact of the discussion. We also provided them with a Red Pen url that allowed them to leave feedback by clicking on an image of the mock-up and writing in their notes. We encouraged participants to share the Red Pen url with their team so that the conversation around the work may continue to evolve.

Iterating on the Design

Our team discussed and considered the feedback we had received, and applied changes where it made sense to do so for our V1. We polished off the design by aligning it with our brand style and scheduled a final feedback review with our stakeholders. To continue moving the project forward, I began building our design as a prototype in HTML/SCSS. This prototype allowed us to test and evolve the design and content in parallel with feedback we were receiving.

We wanted to make sure our customers felt, as we did, that this experiences was an improvement. To do so, we A/B tested our redesigned confirmation page against the old one.

The confirmation page still has so much potential. We have only scratched the surface of the many opportunities we have identified. We are excited to continue monitoring, testing and learning from how our customers perceive and react to this page.

Documenting the Work

Because so much time and effort went into understanding our customer's behavior patterns and the business logic for each products confirmation page, it only made sense for us to create robust documentation for anyone who would need to reference this page, or any part of this page going forward.

Since Priceline had been operating without a front-end style guide up until this point, we took it upon ourselves to create one that documented the template and components used for the confirmation page. This gave us a good starting point in discussions with other front-end teams to address misalignments in visual patterns used here versus other places on the site.

Update: I am happy to report that the front-end styleguide we built for the confirmation page has been such a success that we have begun to scale the project to encompass documentation for all visual patterns across priceline.com. The progress we've made on this project so far has had a huge impact on our overall workflow by allowing us to eliminate a lot of repetitive design and development work, reduce the learning curve for any new project member and most importantly, create a more consistent customer experience. I plan to add this work as a portfolio project in the near future :)

Previous version of the Hotel Confirmation Page
the old version of the hotel confirmation page
Whiteboard content notes
whiteboarding layouts
Notes from a design discussion
notes from design discussions
Print Friendly
print friendly version
Hotel reservation on mobile
Hotel reservation on mobile
Analysis - First 3 seconds
Analysis - First 3 seconds
Analysis - Attention Map
Analysis - Attention Map
Analysis - Visibility / Attention grabbing
Analysis - Attention grabbing
Hotel Express Deal Confirmation
Hotel Express Deal Confirmation page
Detail - Hotel Express Deal Confirmation
Hotel Express Deal Confirmation page detail
Past Rental Car Confirmation
Past Rental Car Confirmation page
Upcoming Rental Car Confirmation
Upcoming Rental Car Confirmation