Multi-Item Shopping

Egencia

Macbook displaying a wireframe of a future design for a "shopping cart" experience when purchasing travel items

How might we allow users to shop for multiple trip items in one session?

Company
Egencia
Date
2019
Platform
Responsive web
Role
Designer & UX researcher
Responsibilities
Competitive analysis, user testing, research, wireframing, prototyping, work-shoping
Team
2 designers

Back on our legacy platform, customers were able to string together trip items within a single shopping path and purchase everything at once. When all of the products started migrating from legacy onto a single platform, these capabilities had to be turned off and deferred until all the products were on the same new platform. It’s consistently one of the most common topics of feedback we receive from clients and all our competitors offer a way to do this. Now that all of the shopping products have finished migrating, we can finally reintroduce this capability. We really wanted to do it right, and really think through the experience.

In order to do this, the product lead set up a workshop and involved all of the necessary players. We wanted to do our due diligence in researching and testing viable methods and bring our findings to the workshop.

Goals

1. Extensibility
  • Build an extensible shopping platform with the flexibility to purchase any combination of flights, hotels, cars, or trains for any number of travelers.
2. Flexibility
  • Allow customers to purchase any combination of products – even those that don’t necessarily make sense together (two hotels for one trip).
  • Different origins/destinations and arrival/departure times for multiple people
  • Multiple stand-alone products together for different destinations and dates
3. Savings
  • Offer savings for customers as an incentive for booking products together
Animated GIF showing the steps of a complicated travel shopping path
Multi-item shopping flow today. A user has to go through the entire path for each item they want to book.
Research

Investigating the competitive landscape

• How are the other online travel agencies handling this use case?
• How do eCommerce platforms handle multi-item shopping?
• How can Egencia apply some of those learnings?

To get started, we documented shopping paths of half a dozen different products. We found that there were two distinct multi-item shopping flows. The first, being the "Bundle & Save" model, which is the conventional shopping flow in the travel industry. Nearly every travel brand uses this model. Then there is the "Hub & Spoke" shopping path which is more common when considering eCommerce platforms like Amazon. The latter of the two was very complex when applied to the travel space, but we needed to dive into both use cases in order to poke holes in our theories.

These product tear-downs included UX walkthroughs of multi-item shopping scenarios, highlighting things these products did well and how we could apply those learnings to Egencia. We collected screenshots and compared desktop to native app experiences for all of the companies listed below. This linked research deck includes tear-downs of Priceline and Instacart.

Related industry // Best-in-class // Direct competitors
Related industry // Best-in-class // Direct competitors
Workshop
No items found.
Sketch & wireframe

Adopting the eCommerce model

Locking down a sensible flow within the eCommerce model took a handful of iterations. We worked on the whiteboard for a few days straight to get to a solution that worked well enough to carry forward into testing.

Hub & Spoke: Iteration 1 of n

First we...

  • Defined the problem
  • Created assumptions
  • Called out risks and outstanding questions
  • Sketched out happy path

Later we...

  • Added more complex use cases
  • Altered the assumptions
  • Integrated a shopping cart
  • Sketched out navigation
Whiteboard drawing of a shopping flow with lots of arrows and annotations
eCommerce Iteration 2

Hub & Spoke Wireframe

After drawing out Iteration 2, I took it into Freehand to clean it up a bit. The goal here was to see where the current product’s UI would need to change in order to build the UX flow we had just white boarded. Before even starting this exercise, we knew it would require a significant change in the product and tech architecture, and were incredibly skeptical of this direction. We had to note dozens of assumptions just to make it work, and in an ideal world, there are as few assumptions as possible.

Wireframe drawings of the hub and spoke shopping path
Attempted wireframe drawing of the Hub & Spoke shopping path

Using something familiar

Since Egencia is underneath the Expedia Group umbrella, we look to our sister brands often in order to see if they are solving a similar problem. A very widely used pattern in travel shopping is the "Bundle & Save" path, where a user picks at the beginning which products they need. There are a lot of historical reasons for the origination of this path, but in general, it has been around so long that it is considered convention. Because of that, we did minimal whiteboarding to create this flow and went straight into wireframing.

The Expedia model: Linear path

  • Adopted Expedia's model to Egencia's system
  • Created assumptions
  • Familiar user path
Screenshot of the Expedia.com search form
Expedia Bundle and Save

Repurposing existing functionality

After sharing the above explorations internally, we received feedback that we should consider using some of the features our product currently supports. One of those features is called Draft Trips, where a user can "save trip items for later" and return at a later time to complete the booking. We also have a feature called "Attach" where they can add hotels, flights, cars, etc to an already existing trip container.

I created our third prototype that strung together these existing features in a slightly different path. This flow ended up feeling the best, had the lowest barriers to build, and the fewest number of assumptions.

Draft Trips Wireframe

  • Utilized current features
  • Created assumptions
  • Noted open questions
  • Pressure tested with low-high complexity scenarios
Wireframe drawing of the Draft Trips shopping path
Wireframe drawing of the Draft Trips shopping path
No items found.
Design
No items found.
Test

Gathering qualitative data

After locking down the UX flows on the literal whiteboard and the digital whiteboard, we moved into the wireframing stage. Our wireframes went straight into prototypes (with InVision) and each was tested on usertesting.com.

User Test 1: Bundle & Save, Linear shopping path

Ease of Use Score: 4.63 out of 5

Overall, users were very familiar with this path. Most had come across this model before in their personal travel shopping and knew exactly what to expect. There were no surprises.

"I tend to think of my trips holistically."

User Test 2: Hub & Spoke, eCommerce shopping path

Ease of Use Score: 3.70 out of 5

Even though this kind of shopping path is conventional in the eCommerce space, it does not work well in the travel industry. We worked incredibly hard to try to solve this problem in order to test a viable solution and were unable to come up with something that made sense to the people we tested. Introducing something like this would be a complete mindset shift for our entire user base, and the overhead to making something like that happen is too high of a cost for little return. We concluded that this shopping model is not suited for travel and this was reflected in the ease of use scores and feedback.

"This is the most convoluted purchasing flow that I have ever experienced."

User Test 3: Draft trips, Egencia shopping path

Ease of Use Score: 4.90 out of 5

The biggest difference with this test over the other two is that when the users landed on the Draft Trip / Review, it was not expected, but they were delighted by the experience. An interesting observation was that this user was one of a few that likened the path to Amazon specifically, while internal stakeholders were pushing for an "Amazon-like flow" that didn't work at all.

"Oh! It's like a shopping cart!"

Below are a few wireframe designs that were created for the tests above. Specifically, the first three are from the Linear path and the second three are from the eCommerce path.

No items found.
Solution

Defining the North Star Vision

Putting our research to work

Over three days in April 2019, about 25 of us got together to think through the problem, define the scope, and set milestones for the overall project. After defining the problem and setting the context, Corinne and I shared all of the content and learnings from our research to the group. This really helped everyone step into the user’s shoes, as well as somewhat dispel the strongly held opinions about the shopping cart idea. Throughout the workshop, we continuously revisited the research results and the wireframe designs to help guide the conversations.

Documenting learning opportunities

There were a lot of questions that surfaced during these sessions that we couldn't answer right away. All of them were collected as action items for the design team to probe into further with user research. We also noted all of the assumptions we were making. Luckily, by the end, we had a lot fewer than when we started. These will all be tested with users as we begin to build the new flow.

Prioritizing next steps

During the workshop, we printed out the designs and worked through low- complexity to high-complexity user stories to flesh out open questions, assumptions, and ownership areas. Having the visuals was really helpful to support the conversation.

Image of a conference room whiteboard with printed designs taped onto the board, surrounded by brightly colored sticky note annotations. Young woman sitting in front of the whiteboard wearing a teal colored puffy coat.
Example of a low-complexity flow (with me looking very focused)

After going through all of the exercises and considering all of our unique perspectives, we landed on a few key features that would be table-stakes for our north star vision.

1. Review page before entering Checkout
2. Progress and Save indication
3. Not everything needs to be booked at once

North star user flow with basic path and interactions defined
North star basic user flow
No items found.
No items found.
Results

Implementing the plan

One thing I learned in this process is how to present my findings in such a way that doesn’t alienate my teammates. Ensuring that everyone feels included in the conversation makes for a more collaborative environment. The biggest win for the design team was how much we were able to influence the conversation. Our research was invaluable to the direction of the project.

Hundreds of sticky notes were harmed during this workshop, as documented above. In their sacrifice, we were able to define our vision, map out the first customer traffic plan, assign ownership, and get started. From a design team perspective, some of our next steps include:

• Testing north star scenarios
• Following up on research questions
• Outlining A/B test strategy with partners
• Ensuring mobile-responsive designs
• Putting together a post-FCT (first customer traffic) plan

More projects