TripAdvisor  I  Flights Redesign
Date: 2013 - 2014
TripAdvisor's intent for redesigning the flight experience was to generate awareness, increase engagement and drive up conversion rates. TripAdvisor's second intent was to reimagine their leg-by-leg experience on Android which was believed to be (through research), the main pain-point between our customers and flights reaching its potential on mobile.

My career as a visual designer started in 2004. I spent the next 9 years designing in a digital agency world. In 2013 I was given an opportunity to redesign TripAdvisor Flights where I was introduced into Product Design. I credit this project for directing my career towards being a Product Designer.
Case Study  |  Outline
Team  |  Individual Contribution
Design Process  |  An In-depth Look
High Fidelity  |  A New Look
Result  |  The Outcome
Team  |  Individual Contribution
TEAM - 7 
Director of Mobile 
Project Manager
Designer
iOS Developers (2)
Android Developer

POSITION ON TEAM
Lead Mobile Designer  |  Visual Design

MY PART (owner)
Led visual styling across the mobile experience
Moderated user interviews
Built prototypes for user interviews

Design Process  |  An In-depth Look
Below is an in-depth overview that details a design process that helped uncover design problems, find design solutions, and solve customers' needs. It afforded ways to create solution sketches, receive peer feedback, build prototypes and get critical feedback from our customers.

Most importantly, through this design process I was able to validate and feel confident conveying my decisions to stake-holders while cleanly managing my day-to-day work flow.
Design Process  |  Outline
01 Map  |  Understand the problem
02 Sketch  |  Sketch solutions
03 Decide  |  Choose a direction and storyboard
04 Prototype  |  Design mocks and create a prototype​​​​​​​
05 Test  |  Get feedback on your prototype
(My design process is based off Google Ventures design process)
01 Map  |  Understand the Problem
• User Interviews
• User Stories
OBJECTIVE
I partnered with our Project Manager & Director of Mobile to identify the following: customer needs, users behaviors, facts, needs & goals while making assumptions and listing out key actions that users may want to utilize in their experience.

Most importantly, it was my job to understand: 
 - What problem(s) am I trying to solve?
 - Who am I trying to solve it for?
 - Why is there a need to solve the problem?

DELIVERABLES
User Interviews
In TripAdvisor's case, there were no user interviews conducted. As a team, we focused on running user studies that tested the app experience.

My first month was spent viewing past user studies and using the app as much as possible to formulate my own perspective within the experience. Most importantly, if I was set to conduct user studies, I had to understand the experience enough to understand the problems our customers were having. I also spent time with our project manager to discuss his experience conducting user studies and the problems he believed we had.

User Stories
User stories were not used in the map phase. 

RESULTS
In the user interview phase, I made a point to fully understand the product while looking at past user studies, user study videos in hopes of understanding the problems we were trying to solve.

Some of the pain-points I encountered while using the app and the issues our project manager wanted to solve were:
- Creating an engaging entry point before the interaction experience began. 
- Reduce cognitive overload.
- Create a leg-by-leg experience.

Lastly, from a design perspective, I noticed users from past studies struggled with our UI. I believed many design laws & principles (Gestalt, UX Interaction - Hicks, Fits Law, Dieter Ram's) were not being utilized correctly. This was a problem I wanted to address almost immediately.
02 Sketch  |  Sketch Solutions
• Lightning Demo
• Solution Sketches
OBJECTIVE
In the sketching phase my objective is to turn abstract needs into concrete ideas to solve the users needs via Lightning Demos and Solution Sketches.

DELIVERABLES
Lightning Demo
In the Sketch phase, I looked at direct competitors in the flight & travel space to capture experiences that they were doing well.

- JetBlue
- Kayak
- Delta
- Expedia
- American Airlines

Solution Sketches
In the Solution Sketch phase, I was creating solution sketches that were potentially going to solve our proposed Leg-by-Leg experience.

RESULTS
With multiple rounds of Lightning Demos & Solution Sketches drawn, I had several ideas somewhat fleshed out but the opinions of my team were needed and so critical in focusing my potential solution.
03 Decide  |  Choose Direction and Storyboard
• Getting Feedback
• Storyboard
OBJECTIVE
In the deciding phase, the objectives are to collect my team's feedback and decide which Solution Sketch solved the problem best. Having the opportunity to gather feedback from my peers, proved to be a vital component in the redesign process. It allowed my team to know exactly where I'm at and the decisions that were being made. 

DELIVERABLES
Getting Feedback*
At this point, I've gone through several rounds of sketching that targeted design solutions around our proposed leg-by-leg experience. 

*An action, not a deliverable

Storyboard
Storyboarding was not used in this phase.

RESULTS
From a leg-by-leg perspective, most of the feedback was based around the timing of when to reveal information. We decided primary experiences should showcase price, airline, time, flight & stops and secondary experiences should have primary information plus secondary features such as: airplane model number, legal text and layover information (if applicable).

We believed the decision to separate content would give our customers the opportunity to parse information cleanly, choose a flight most convenient to them and support the need for a new leg-by-leg experience.

We also discussed (from a visual perspective) white space, typography and visual aesthetic ideas that could improve our experience. One design constraint I had to work under was ensuring we displayed three full cards (in the leg-by-leg experience) and one peeking card in the content area of a mobile screen. I was now ready to design the first rounds of mocks to test and gather qualitative feedback on.
04 Prototype  |  Design Mocks & Create a Prototype
• Design Mockups
• Build a Clickable Prototype
OBJECTIVE
TripAdvisor's success on mobile completely rested on introducing a new leg-by-leg experience and a refreshed UI. Our objective was obvious but extremely critical to our team. Without a doubt, our success and/or failure would be measured against this new propose experience which put an interesting pressure point on our team; we essentially had nowhere to run if this experience failed (leg-by-leg).

DELIVERABLES
Design Mockups
During this phase, my focus was set on designing several leg-by-leg solutions to test.

Build a Clickable Prototype
in 2013, we used Flinto to load our mocks into and design a prototype for the test phase.

RESULTS
Introducing a new leg-by-leg experience, we also wanted a refreshed UI which meant, all screens within the experience needed to be improved upon which intensified the work load.  Below is one example in what felt like thousands of rounds of presenting design solutions to the team.
Early stages of Flights designed for testing
05 Test  |  Get feedback on prototype
• Run a User Study
• Next Steps
OBJECTIVE
In the testing phase, I was trying to validate my design solutions and uncover pain points not yet recognized. I was also looking to capture key insights and organize feedback patterns to help us decide our next course of action. Our main objective was placed in two parts; retaining qualitative feedback for our new leg-by-leg experience and refreshed UI. We were eager to have our customers interact with our proposed experience and hear the feedback.

DELIVERABLES
Run a User Study
Between my project manager and I, we conducted many user studies and captured feedback via video and using a spreadsheet that listed all the questions being asked, participant names, occupation and time of test. This allowed us to capture feedback patterns, bucket themes within the feedback. This process also helped us parse the feedback more efficiently. 

Next Steps*
During multiple rounds of iterating mocks and testing our experience with users, we felt comfortable moving forward when positive repeatable feedback patterns and interactions were becoming the norm. After three months of user testing, we were content with the results and ready to move towards production.

*An action, not a deliverable

RESULTS
An important moment that truly validated our process and hard work came after exhausting all testing options. The CEO of TripAdvisor requested our app experience be entered in a blind competitive usability test against our top competitors (Expedia and Kayak). We were ecstatic to read results stating our product consistently ranked ahead of Kayak and was tied and/or beat Expedia in most areas. This was a huge win for us internally, our customers and TripAdvisor Flights as a whole.


High Fidelity  |  A New Look
This was my first introduction into Product Design. Back in 2013, the term was coined UX Design. Nevertheless, this project was the turning point for me as a designer. I never wanted to design anything without putting my concepts through some sort of design process to validate my decisions.

This is TripAdvisor Flights  |  2013 - 2014 experience.
Final Result  |  Outcome
Introduced a beautiful Leg by Leg experience. 

Entered our designs into a blind competitive usability test in which our product consistently ranked ahead of Kayak and was tied or beat Expedia in most areas.

Customer Usage increased from 15% to 60% - An increase of 300%.

Meta Conversions increased to 12% - 16%
↑Back to Top