Length:
80 hours
Role:
UI/UX Designer
Platform:
Website
Industry:
Travel
Tools Used
Sketch, Marvel App
Date
April 2019

Priceline

Challenge - In this fictional brief for my class, Priceline has contacted me and requested me to add a feature to Priceline's website: the ability to extend a layover. They are seeking to be on the cutting edge and realize there is a high demand for this as no major travel services have made this possible.

Strategy: To do this, I entered into the mind of its target users to understand how people who want to extend layovers think and arranged the website in a way that helps users achieve that goal.

Scope of Work

Strategy
Research
Competitive Research
Qualitative Interviews
Research Summary
Strategy
Strategy
User Flow
Product Roadmap
UI Requirements
Strategy
UX Design
Wireframes
Site Map
Prototype
Usability Testing
Strategy
UI Design
Visual Design
Style Guide

Organization

I started my project by creating a timeline to stick to. I prioritized only creating deliverables that would help me best design the website and I allocated time based on how long I thought it would take, leaving room for unexpected problems that arise.

Phase 1: Research

Competitive research

I performed competitive analysis to better understand the Airline market. None of the major websites had filters for layovers. There are some smaller companies that specialize in helping users find flights with stopovers. These include Airwander and Indie. Airwander makes exploring easy as it shows the different layover combinations and how selecting that layover would influence your ticket cost. However, when searching with dates, this feature is not available. This research showed that Priceline would have an edge over the other companies when it adopts this extending a layover feature that allows the user to add specific dates.

Qualitative Interviews

There are many reasons why people would want to extend layovers, whether it's to visit a new city or to visit a friend or just to get out of the airport. I interviewed four travelers who would like to extend layovers to get a better idea of what they hope for and what complications they currently face.

Research Findings

On most major travel booking websites, there are no filters to only show flights with long layovers.

The closest option to extending a layover is for users to use multi-destination. However, that feature forces users to pick cities they want to explore, rather than showing them which stops are available along the way. The price is usually higher than a round trip, so they don't use that feature much.

I learned different concerns that they would have if leaving the airport. The main concerns were as follows:

  • Where can I store my baggage?
  • Would there be an additional cost?
  • How close is it to the city center?
  • How easy is transportation to the city?
  • How long do you need to get to the airport in advance?
  • What if I become confused because of the time zone change and miss my next flight?

I learned that the most common reasons for leaving the airport during a layover are:

  • Experiencing a new city or country that you wouldn't prioritize otherwise
  • Breaking up long flights
  • Visiting a friend
  • Personal travel

Phase 2: Strategy & Design

Based on the research, I decided to create an airport city detail page that provides answers to the most common concerns that the interviewees reported when considering extending a layover. This would be accessible as they are considering whether or not to extend a layover.

Airport city page

While designing, the biggest question that haunted me was where to add the option to extend a layover. Here's how I tackled it:

My first thought was to add it to the homepage search module as an option under Flights > Round Trip, then all the way at the bottom where there is white space next to Add a car. I ultimately decided against it because I didn't think it was such a popular feature that would demand so much screen real estate. I did not want to detract users that do not want to extend layovers from looking for flights. I also thought it should go somewhere where there's room for an explanation as to what "extend a layover" means.

Next, I added filters to the search page to allow users to tailor the search as much as possible to what they are looking for. This allows them to see all options they would like to consider on one page and filter the information until they are happy with their search. I figured this solution would work well for well traveled users that often depend on filters to find their dream flight, but we should add something else for users who travel less frequently and who might not think to look at all the filters.

So where should I add more options to extend the layover? The search page felt crowded enough, so I did not want to add an extend a layover button underneath it. I decided to create a banner on the homepage. I expected people who are not quite sure which location they want to visit to browse the homepage for deals that may peak their interest.

From the Extend Layover Banner on the homepage, users will go through a few pages to enter in their flight info and then are shown a list of results that are highly customizable through the use of filters.

But I didn't think that all our users would see the features on the homepage or the layover info. I decided to create a feature on a page that was not too cluttered and that I knew everyone would view: the flight details page.  If people have missed it on the homepage and on the filters, they will be going to this page before checking-out and can see that there's an option to extend a layover there. It also works well because I made the layover city clickable, which takes them to the page with info about the city and what to do on a layover, which takes away a lot of the work that goes into planning whether or not to have a long layover and allows them to buy the tickets faster.

Second Iteration

After presenting my plan to my mentor, he encouraged me to not have the user pick the flight so early on in the extend a layover flow, but to ask more questions before presenting all of the available options, and to only present one or two options so that it's easy for the users to pick a flight. He also encouraged me to make the whole site flow. Here's the flow that I came up with from the homepage.

A note about Branding

I used FaceFont Ninja to identify Priceline's fonts and sizes and used the same ones for my layout. Priceline's font choice is Monserrat. I also identified their colors and used them in the same instances throughout the site, ranging from the Priceline blue to the incognito navy line separator.

Phase 3: Interaction and Implementation

Prototype

After creating the prototype, I came up with the user testing plan and then performed the testing with 4 avid travelers. Here are the findings.

user testing Findings

1. Users loved having a visual representation of the different layouts. Several users exclaimed that they would had not thought of visiting those places but after seeing the pictures would like to visit them (having images that show the locations could potentially increase Priceline's sales).

2. Users loved the ability to filter layovers based on layover length and to select which layovers to include.

"I want to cry seeing these checkboxes to select my layover. I’ve dreamed of this for so long" - Lauren B.

3. Users also loved the airport detail page as it did answer questions that they previously asked when leaving the airport during layovers.

"This would have saved me hours and hours of research!" - Lauren B.

Biggest Confusions

1. Users had a hard time finding the extend a layover option. None scrolled down the homepage, so the first time they saw it was on the flight details page. They felt like it was too late to introduce it at that point because they were committed to that flight.

2. When clicking on extend this layover on the flight page, users expected to only see results for that flight. They were confused when they were taken through the entire sequence. This was something that I changed during my second reiteration and forgot to change the wording. it was clear after their feedback that they should only be asked questions to extend that particular layover, hence my first iteration from this page would work better.

3. Another problem is that the extend a layover wizard did not give any indication of how the decisions they made affected the pricing. And that is a very big deal for Priceline, whose users are very concerned about getting the best price.

4. Users did not scroll down the homepage because they saw ads below the search module (that are on Priceline's current website) and assumed the rest of the page was just ads below.

Takeaways

  • Users expected to see an option to extend layovers either on the search module on the homepage or in the filters on the search results
  • Having the price listed with each result is key
  • Filters allow for customization and show the prices along the way
  • The layover selection page made users want to travel to places they had not originally considered

Next Steps

1. Add extend a layover feature on the flight search module on the homepage. This is where most of the users expected to see it. This would then take them through the wizard where they begin by selecting layovers.

2. Figure out a solution to not having the price shown with every action. It could be as simple as having the option "skip wizard, let me filter my results manually" option for users who want to see how the price affects their results. Or it could be that we just keep the layovers page of the wizard and provide a guide of the search page that highlights the filters they can adjust.

3. Clarify confusions regarding details on the layover page

LEssons learned

Many users only click flight details when they've committed to a flight. They are no longer in the exploration phase. It's important to introduce a concept like this during their exploration phase, while they are still browsing.

Proofread, Proofread, Proofread. Even if what I write is just placeholder text, it will influence what happens during user testing.

With introducing a new feature like this, there are so many decisions to be made and it's not possible to know what is the optimal strategy until testing. In the future, I would have tested my idea during the wireframing stage to see if it's intuitive to users.

Conclusion

Users were very excited about this feature to add a layover. The user testing revealed some significant obstacles in the way of it being ready to be used but they provided an incredibly helpful roadmap to get there. If there were more time, I would make the changes needed and then test it again, until it passes user testing.