Predictive Travel Booking

About SAP Concur

SAP Concur is an integrated travel, expense, and invoice management SaaS product. They have more than 700 partners in their partner ecosystem. With 92 million users across more than 46k organizations, their customers rely on SAP Concur's suite of products to manage business travel and expenses.

Project Overview

My team and I worked with an external vendor on some strategy projects to help guide the vision of our products in the next 3-5 years. Of the many concepts we explored, the one that generated the most interest from our leadership team was the idea of full itineraries (air + hotel + car) presented within search results.

The motivation driving this exploration came from our data sciences team, who could predict with 30% accuracy what even a new Concur user will book for their business travel based on information in a very basic profile. We wanted to test whether or not a 30% accuracy would be enough to justify putting an entire itinerary recommendation in front of a user, or if it would be too off-base for them to find it useful.

Exploratory design workshopping

We began our design process by doing a series of sketching exercises to get the team thinking creatively. The goal was to generate a wide set of ideas rapidly through sketching, and incorporating a cross-disciplinary perspectives. Our team included designers (UX, marketing designers, motion graphics specialists), project managers, product managers, and business consultants. Everyone participated in the sketching exercises so that we could collaborate on understanding the opportunities that predictive travel booking presented, and broaden our perspectives on what might be possible. We were aiming to dig deeper to refine a set of potential solutions, while fostering shared ownership around the vision we were creating.

After each round of sketching, we would paste our ideas onto the walls at our agency's studio. Next, we would each walk around the room looking at the ideas generated by our group. If we liked them, we would put a star next to them. After that, we lined up in front of the sketches, and each person presented theirs to the group. People who had put a star next to the ideas they liked were encouraged to speak to what resonated with them about that concept. After each set of sketches had been presented, we had a brief discussion about what we wanted to explore next based on the conversation, and then we repeated the process. This helped us get non-viable ideas out of the way early so that we could focus on the concepts that we believed would achieve the goals of the project.

Below are some of the concepts that we explored. It is no exaggeration to say that there are multiple pages of concepts from this exercise! I chose the examples that have a close resemblance to our final presentation.

Whiteboard Process Flow

We started by defining the steps of the booking process that our users would be following.

Whiteboard Layout Concept

We knew that some customers wouldn't want to take the recommended travel options, so we also considered how we could show a "choose your own adventure" travel booking experience.

Simplified List View & Flight Cards

One of the designers on the team sketched some layout ideas for how recommended reservations could be presented in a mobile format, and included the interactions that users would use to engage with the display.

Dynamic Sectional Control

In further exploration, we dove into the specifics of how the different elements on the page would interact, based on a layered "material" design system.

Full Itinerary as SERP

We also explored how the full itinerary could be displayed inline on a search engine result page (SERP), as a way to market our product to new customers.

Product Context + Shared Travel

We also explored how this travel booking experience could be displayed in the context of the rest of the app, particularly around expensing and itinerary sharing. We explored different entry points, including both before and after the user has booked their own travel, and also included the ability to book the same trip as your colleague.

Itinerary + Travel Policy

Another exploration showed how we might display the company's travel policy details so that the user could see how their choices would align.

Wireframe

One of the wireframes that resulted from our sketch explorations.

UI Alternatives

We showed some alternate UI options for how the booking process could be displayed, including card-based, lists, or accordions.

Cut + Paste

After we looked at the sketches and wireframes, we needed to show our motion graphics designer how we wanted the prototype put together. I suggested cutting out the elements we had solidified, and pasting them together even if their proportions didn't match.

Frankenmocks

These were the result of us cutting out different prototype mockups and taping them together to display for our motion graphics designer what needed to be included in the final prototype that we would use to pitch the ideas to leadership.

Prototyping the experience

Once we explored the various screens and interactions that would accompany predictive travel booking, we knew that we needed to get buy-in from leadership in order to continue getting investment in the project.

After the "Frankenmocks" that we put together for our motion graphics designer, we

View suggested itinerary and remove car

The user sees their suggested itinerary, and expands it to see the details. They remove the rental car suggested for them, and can see the rental car removed from their trip.

Select new flight

The user taps the flight selected for them, and decides to change it to something that better suits their schedule.

Swipe to book

User swipes right to book their flight, and sees an animation that lasts for the duration of time that the system needs to process their bookings for this trip. When it is complete, the user sees a success message and is provided with options to share or view their itinerary.

Outcomes

Coming soon!

Takeaways

Coming soon!

View All Projects