RACHEL DOWD
sergey-svechnikov-189221.jpg

KAYAK FLIGHT SEAT SELECTION

suhyeon-choi-184102.jpg
 
 

NOVEMBER 2016

This improvement was to the seat selection experience on mobile. Depending on the airline, users can usually pick their seats for each leg of the trip after they find a flight they want to take. The previous experience had lots of colors, too small of tap areas, and a confusing flow that led to a lot of abandonment and frustration.

In order to improve the experience, initial research phases included a competitive analysis. Learnings from that contributed to the overall flow and gave us indications of what felt like appropriate prominence and sizing for the overall look and tap area of the seats and orientation of the plane. What research also showed me was that a stepped flow felt like the best approach to have the user only select one flight leg at a time so they didn't get overwhelmed and abandon like they currently were in the previous experience. We also knew animations as well as some automatic transitions would be helpful to bring users to the next step and ultimately have them complete their selections for their flight. 

KAYAK has to cater to every airline as well as all of the different aircrafts each airline flies. When doing research, it was clear we needed to come up with a way to accommodate all of these different use cases that many others airlines didn't have to solve for in their mobile experiences. Some of these use cases were when the plane was too big for the mobile view, so we added in a zoom functionality. Also, most planes have different layouts within and throughout airlines so we had to make sure all of the tap areas and layout of the planes were clear. Pricing structures for seats differ between airlines and some fares are different depending on up their own versions of seat "up-sells". Because of that, we had to also figure out a clear pricing structure of when a seat was free and when there was an increase in pricing without a large key that would take up a lot of real estate on the page.

With the many complexities of this project, it was clear we needed an end result that was a much better and more helpful experience that brought the user seamlessly through the seat selection process.

 
 
 
 
 
 

INTIAL PHASE SKETCHES

 
 

Wireframes

 

mobile mocks