Flight shopping

 

2016–Flight shopping

Expedia, Inc. – Egencia Business Travel
Product Design – Responsive web app

Role: Sr. Product Designer, Front-end Specialist
Team: Seattle, WA / Paris, FR

 

 

No.1 – BACKGROUND

With the acquisition of multiple European companies, and later Orbitz for Business, an effort to consolidate the various region based applications into a single global platform began. As a design team we pushed the organization to think from a content(mobile) first perspective, adjusting from the original plan to port over interfaces into a common interface. This effort allowed the design team to leverage past experiences but to really think and design from the ground up. We worked with user research to identify our most common personas then filter down to a primary persona(frequent traveler, ie. Road Warrior), and really direct the vision of the product to their needs while attempting to simplify our platform to where anyone could use it effectively. From there we worked to strip away one-off region based patches and put our efforts into a truly global simplified solution.

The flight shopping path was one of the first to undergo this effort, and as the lead designer for all of transportation I wanted to focus on reusable patterns. As our product previously was fractured in terms of design, offering up vastly different experiences from one line of business to the next. My goal was instead to focus on using & enhancing our User Interface Toolkit (UITK) and effectively create pattern templates to be used later for Car, Rail and Ground. 

No.2 – ITERATION

I focused on exploring as many ideas as possible then step back and identify a few strong directions and work though those paths. Remembering to think across line of business to remain scalable.

No.3 – FLIGHT RESULTS

With the content first approach I designed mobile up, starting with the most restrictive space to focus on keeping only the essential content on the results page. I worked to create reusable patterns that would be added into our UITK, like the search and filter components.

flight-results-mobileflight-results-mobile
[unex_ce_button id="content_abenj9x4j" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#e7d4cf" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="3px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://codepen.io/jpdanks/pen/10b05a401feb255c4e61db2fc89eb22a" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]VIEW RESULTS CODEPEN[/ce_button]
No.4 – FLIGHT DETAILS

On the details page we enable you to decide what fare and which ancillaries work best for you. To deal with the future complexity of multi-passenger shopping I leveraged the use of a side drawer and "all segments" toggle, both of which would be added to UITK and become our standard on how we handle ancillaries.

flight-details-mobileflight-details-mobile
flight-details-fares-mobileflight-details-fares-mobile
[unex_ce_button id="content_k18zj6jih" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#e7d4cf" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="3px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://codepen.io/jpdanks/pen/abf3b75a113a06688528f094061ed04f" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]VIEW DETAILS CODEPEN[/ce_button]