Unificaiton
EGENCIA
Product Design
UI & UX
Egencia, corporate travel from Expedia Group, is reimagining business travel management to make business travelers happier and corporate travel programs more successful. Egencia offers more personalized experiences through curated access to the world’s most relevant travel options.
OPPORTUNITY
Bring consistency and continuity to the product.
The shopping lines of business (rail, air, car & ground) having had a newly re-coded back-end, gave us the opportunity to work on improving the design. The project is focused on unifying the patterns used in our shopping paths. This was a project launched by the Paris team (which I was part of). We each designed different solutions, followed by workshops where we extracted and sewn a new interface together with the best ones. Working together allowed us to create consistency while responding to all the needs of each team.
Product overview
Have a look at the interface before we started this project of 'unification' and consistency. It is clearly visible that are discrepancies between the different products and that there isn't a system of standard rules being used.
BEFORE
Inconsistencies
Bad hierarchy
Calls for clarity
Bland
AFTER
Better UX
Improved clarity
Organised
Glancable
WORDS OF WISDOM — DIETER RAMS
"Indifference towards people and the reality in which they live is actually the one and only cardinal sin in design."
USER JOURNEY
The old booking flow wasn’t designed to handle the booking of multiple products. Ex: if a user wants to book a flight and rent a car, he currently has to go over the entire booking flow twice.
NEW USER JOURNEY
Based on gathered feedback we are now able to give our first recommendation on what could be the future shopping path look like. Users should have one global experience with common UX patterns.
Unifying our page and layout design.
Components shared between liens of business's such as Filters, search bar, etc. and their placement, were optimized while working closely with the transportation teams in Paris. With their help, we conducted A/B tests of these new patterns from which all parts of the product can benefit. The aim is to apply the resulting knowledge globally.
Level 1
Contains the result area
Level 2
Dedicated to filtering components
Level 3
Contains the search options.
Level 4
Dedicated to information that doesn’t impact the booking (ads or contextual help)
Applying the same treatment to the cards.
Good informational hierarchy helps users find what they need at a glance. Also, it allows users to learn exactly where to find information if it is displayed consistently in the same place within the card.
LOW DENSITY LAYOUT
HIGH DENSITY LAYOUT
The Result.
A consistent design across all of transportation. Improving the time of booking and reducing friction points.
We applied this treatment to our transportation pages; Rail, Air & Car. All the information is displayed the same and is easily found in the same place on each part of the product. This will considerably reduce the amount of time for the booking. Now there is a 'stepper' showing the user exactly where they are in the booking process as well.
OLD HOTEL EXPERIENCE
UNIFIED VERSION
A big change was having the map on the right-hand side. This allows us to hide it whenever a user selects a hotel, and display more information while allowing them to click through the other options to compare offers.
The structure is slightly different from transportation, to accommodate for the map. However, the user can find the filters in the same spot and the results in the middle. Even with a different layout, the consistency is maintained.