Multi-fare display

Using SAP Concur’s corporate booking tool, a business traveler has all the features and functionality to make informed decisions that align with their company’s travel policies. This project is a continuation of the NGS industry model, but more aimed at business traveler needs.

Check out SAP Concur’s promotional videos on YouTube!

 
 

Team

My experience with the airline travel industry and previous experience with NGS standards gave me a pretty good leg-up on designing this product. Being the lead designer on the (new) Travel UX team, I was given the task to design every very piece of the display, layout, features, and patterns (not including the design system and some pieces on the landing page). Using the available research, I designed the air shopping product with a holistic workflow and information architecture based on traveler values and needs.

Early Concepts

Using the SAP Fiori design system, I created concept variations and numerous iterations (designed and prototyped using Figma) for each concept during the initial discovery phase. VPs, directors, and all levels of managers met to select a the best concepts during our final demo and discussion meeting.

Some concepts were a bit much, but fun to visualize and present for feedback. Perhaps we can gain insights into what not to do and learn how to articulate why we don’t want it.

Mobile

The home page was not available when I started this project, but I was able to include it for demos after the mobile direction was designed and under way. We didn’t need 100% pairity with the look and feel between web and mobile, but I kept all the functionality the same. If web can do it, then mobile can do it, too. The final mobile design was eventually taken over by a dedicated designer.

structure and features

Moving forward with what we call the “slivers” and “cards” (progressive disclosure) interactions allows us to leverage the user driven ranking from our research and surface information based on highest values. We use modals for granular details and reference information. Selecting a seat also appears within a modal so we can dedicate space for seat related information and the seat selection workflow.

Final Design

After many iterations, meetings, adjustments, new design systems, accessibility reviews, usability testing, and more usability testing, we finally have a product that satisfies all original intentions and provides travelers with a clear understanding of airline products, their attributes, details that support efficient decision making.

(Although I structured and directed the design discovery for the shopping tool, the designs you see below were finalized and polished by myself and other Travel UX teammates and they deserve applause for their contributions, as well 👏.)