Priceline | Kyle Ng Design

Priceline: Responsive Web Design

Role: UX/UI Designer

Tools: Figma, Whimsical

Timeline: Nov 2021 - Dec 2021

Background

Priceline is an online travel agency for finding discount rates for travel-related purchases such as airline tickets and hotel stays. The company facilitates the provision of travel services from its suppliers to its clients.

Problem

Priceline’s current website allows its visitors to search, book, and check-in for their flights and hotels but the overall design and how these features are being present is lacking. The design of Priceline’s website on desktop and mobile devices could be a lot stronger compared to direct competitors.

Goals and Objectives

PROJECT GOAL:

The goal of this project was to utilize the existing company's UI and redesign it as needed. There was also a strong emphasis on the mobile web experience and making sure that it functioned well.

RESEARCH GOAL:

We want to know what travelers value when searching and booking flights online. We also want to identify the successes and areas of improvement for Priceline’s current site design so that we can iterate its current design and create a responsive set of flows.

RESEARCH OBJECTIVE:

1. Determine what features travelers value when searching/booking hotels and/or flights online.

2. Determine what travelers like and dislike about Priceline’s current site design in terms of searching, booking, and checking in for a flight.

3. Understand how other competitors’ sites attract people for using their site

High Fidelity Designs

Prototype

All participants accessed the prototype with their own mobile devices

Research

I began with secondary research to learn more about the travel agent industries and put together a competitive analysis. Further analysis led to the development of the provisional personas which were formed based on analysis of the targeted users and how they interact with the current product.

Competitive Analysis

User Interview

I interviewed participants about their most recent flight booking experience. Participants were asked about what information they found helpful when searching for and booking tickets.

Participants

Personal travelers with ages from 21-35 years old who have searched and booked flight tickets online.

Persona

Based on the data from user interviews, I created a persona that I felt represented a potential user.

Define

Storyboard

Based on the persona I made, I created a scenario that would lead to Emily using Priceline mobile platform to search for flights and book a ticket.

Task Flow

The task flow shows how people would move through the site from the Landing page to the Booking confirmation page, including their actions. This helped me to visually see which pages on Priceline’s site I would need to spend more time focusing on.

Ideate

First off, sketches were created based on my research findings and high priority feature list. I focused on the main features necessary to book a trip with Priceline. I designed primary mobile screens due to the time constraints of this project.

Sketches

Low-fidelity Wireframes

Based on a combination of sketches, I mocked up low-fidelity wireframes in Figma. It helped me get my ideas from sketches to screen in a fast way.

Testing

Usability Testing

After I finished designing my high-fidelity mobile screens, I conducted usability testing to determine the success of the site and identify user pain points that are important before handing off the product.

Participants:

3 participants total
Between the ages of 21 to 35
All participants had experience with booking flight tickets from the travel agency website

TEST OBJECTIVES:

To see how easily and quickly can users search and book a flight on a mobile platform.
To understand what difficulties do users encounter when searching and booking their flights?

TASKS:

Open the Priceline mobile site and book a roundtrip flight from NYC to BOS. Your trip date will be from December 13th to December 16th.
Select the JetBlue airline, JFK airport from NYC, and the cheapest flights to complete the checkout process.

TASKS:

Open the Priceline mobile site and book a roundtrip flight from NYC to BOS. Your trip date will be from December 13th to December 16th.
Select the JetBlue airline, JFK airport from NYC, and the cheapest flights to complete the checkout process.

KEY FINDINGS:

Found difficult to view the airport location when choosing the flights
The input field labels are confusing before entering the input and after entering the input

Affinity Mapping

After completing the usability research, I created an affinity map to get a clearer view of what was needed for the iteration phase. My usability test findings were summarised and categorized in a Usability Affinity Map.

Iterations

Based on users’ feedback from the usability test, implement any new changes or features that will improve the mobile site potentially.

Make input field labels more clear before entering the input and after entering the input so users would distinguish between both easily.

Increase the size of input labels on the secure booking page so users can easily confirm their information before completing the booking

Re-size the font for the prices and airport location from choosing the flights page.

Conclusion

KEY LEARNINGS:

It may not be necessary to reproduce every feature and element of a page when working on redesign projects.
It comes up with strong solutions to usability issues by continual revision and usability tests.

CHALLENGING:

This project was fictional and I was not provided any assets from Priceline. I had to copy and replicate logos and font types as closely as I could under time constraints.
I couldn’t view Priceline’s confirmation page without making a real booking. Therefore, I did not include this page in my design and prototype.

NEXT STEPS:

Test the changes that were made with more usability tests and continue to make revisions.
Design a confirmation page to help complete the flow of the prototype.