top of page

Trip Quote

OVERVIEW

Trip Quote is a tool found within the SmartPoint application that allows agents to send travel itinerary quotes to their customers.

PROBLEM

Trip Quote needed to be rebuilt for a cloud application and needed to be integrated into a leg based shopping solution - in other words agents select a flight for each leg of the trip instead of preselected combinations of flights.

MY ROLE

Lead Product Designer
Lead Researcher
Workshop Facilitaton

Wireframing and Prototyping

TIMELINE

December 5 -- September 27

TOOLS

Figma, Axure RP, Mural, Jira, Usertesting.com

01. DISCOVERY

I worked closely with the Product Manager and Product Owner to learn about the business needs for Trip Quote as well as the customer feedback that had been previously documented.  From there, I conducted a workshop with existing stakeholders in order to understand what else we needed to learn from customers about the product.  I also identified which of the existing personas we would be targeting.
 
The main output of the workshop determined that we needed to validate which functionalities would be valuable to our users as well as achieving a better understanding of how they put quotes together in their day to day work.

Working with the user research team, we interviewed 52 customers to ask which features were most valued as well as asking them to describe how they put quotes together each day. The answers we received from the survey allowed us to prioritize and deprioritize features for the product roadmap with more confidence.

02. STRATEGY & PLANNING

Using our prioritized set of features, we were able to define a roadmap for an MVP version of Trip Quote that we could start building towards.  Time for wireframing!

03. WIREFRAMING & PROTOTYPING

I was working within a newly defined design system called Atlas. I began by creating the Quote Basket layout, which was the main work area of the tool. We knew what we needed to include in order to achieve baseline functionality for the MVP product which included:

Adding a flight to the basket

Review&Confirm_screen.png

In this screen, the agent has searched for flights for a trip that has three legs.  After selecting a flight for each leg, the agent is taken to the Review & Confirm screen.  From this screen that agent can add the selected itinerary to the Quote basket by clicking the +Quote button.

Adding a hotel to the basket

In this screen, the agent has searched for properties and selected one.  From there, the agent views a list of rooms the property offers and can then add a room to their quote by clicking the +Quote button.

Within the quote, agents needed to be able to choose the products in the quote and perform actions on them.

Quote basket.png

In this example, the Filters area lists all of the flight itinerary options in the quote. Checking an option includes it in the list that will be sent to the traveler. 
Each flight option also has a set of actions that can be performed on that flight - the agent could add a markup cost to the flight, book the flight or remove the flight from the basket.

Quote - Air Fees (filled in).png

This screen illustrates the sub-task of marking up a flight.  The agent can add a fixed amount to the flight or choose an amount based on a percentage of the flight fare or tax.  In addition, the agent can then display the marked up amount as part of the fare, part of the tax or as it's own line item anywhere that the fare cost is displayed.

Step2.png

This screen shows how an agent can book a flight option from the list.  
This is typically done after the agent has sent the options to the traveler and gotten confirmation from the traveler on their selection. At that point the agent merely has to pull up the quote and click the "Book" icon for the appropriate flight in the list.

Agents needed to be able to include or exclude specific travel information in the quote

Reservation information expanded.png

This screen shows the Reservation Information section expanded.  All of the various types of information about the travel itinerary are available to the agent so that they can choose what to include in the quote or, sometimes equally important, what not to include in the quote.  
This allowed for customization of the information being shared.

A viewport of the Quote that was being shared needed to be reusable, responsive content that could be copied, emailed or saved as a PDF.

Table option (3 pax types).png
Table option - mobile.png

These two screens illustrate the portion of the Quote Basket that is shared with travelers.  The content needed to be responsive, these screens represent the desktop and mobile breakpoints.

After our initial set of designs were created, I built a high fidelity, interactive prototype that outlined the shopping and quoting flow from start to finish.

04. USER TESTING

Utilizing the interactive prototype, we tested the workflow for shopping and quoting.  The flow tested fairly well, with the exception of one major problem. Agents informed us of a usecase that would not work well within the existing flow.  When it came to adding multiple flight itinerary options to the quote, agents found it cumbersome and time consuming to go back through each segment, review the options and select a different set of flights. Many of them had a very strong reaction to the design. We had to pivot to solve this painpoint for our users.

05. MEASURE & IMPROVE

We needed to improve the shopping and quoting flow by making it easier to add multiple flight itinerary options to the quote. After ideating through a few designs, I came up with the Auto Quote solution.  The proposal was to allow users to automatically add up to five additional flights to the quote - based on the initial search already entered by the user - with a single click. We also offered the option to tweak the initial search parameters with relevant search options. I created an updated prototype and we took it back to testing.

First version of the Auto Quote concept

After testing the Auto Quote feature, within the same shopping flow, we found that the functionality was valued but there were a few issues with the design of the solution.

Updated_QuoteMenu_Review&Confirm.png

1. The meaning of the "Auto Quote" link was difficult to understand.  6 out of 6 participants did not know what Auto Quote meant and needed to be prompted.  As a result we changed the label of the link to "Quote similar flights".  The next test had all participants finding the link and interpreting it correctly.

2. Users also had difficulty interpreting the term "Modify flight quote" with changing the search terms so we renamed the link to "Modify flight search".

Updated_TQ_AQ_Menu.png

3. In the quote basket, 6 out of 6 users could not interpret the airplane icon for the Auto Quote feature.  As a result, we moved away from icons and added the same label "Quote similar flights" and "Modify flight search" to the menu for each flight.  Clicking the "Quote similar flights" link would then auto generate additional flight itineraries and add them to the quote.  After the change, 5 out of 6 users were able to correctly interpret what the link would do.

OUTCOME

After implementing the new features with the changes mentioned above, CSAT scores for the Trip Quote cloud solution were 15% higher than the original Trip Quote Desktop application.

DESKTOP VS CLOUD PRODUCT

Final Designs

Best viewed on Desktop or Mobile Device
© 2023 by Tisha Leggett

bottom of page