Jetstar — Responsive Online Check-in
Interaction/Visual Design

Jetstar currently offer a standalone mobile and a standalone desktop check-in service. Mobile has been built on a mobile web platform, while desktop is on SkySales (Old monolithic platform). The designs, in particular on the desktop version, are out of date, and do not offer a consistent user experience. In addition, a large volume of our customer complaints received involve issues and confusion around the check-in process.

Jetstar have identified that they need to move the check in logic over to DotRez (Responsive platform) from SkySales (Old monolithic platform), and as part of this project the check-in experience should be redesigned and redeveloped to build a singular responsive website. 

Color blind test
Seats color are tested against a range of color blindness to make sure it is accessible.
Natural language
Responsive online check-in home page.

Seats hub
Hub page for seats selection and a summary of seats selected. Be default, seats are auto assigned.

Seats map
Seats map design across different viewports. On mobile, for a B787 aircraft, there will be an anchoring footer CTA that navigates between the left or right side of the plane. On desktop, the legends will be sticky upon scrolling. For multiple flights on tablet and desktop, the returning flight UI will continue at the bottom.
A320 aircraft. Upon a seat selection, there will be a notification.

Mini map
Mini map concept on mobile devices. A mini plane showing the current seat in relation with your scrolling position.

Passenger tab
Different interactive states for the passengers tab.

Review and pay
Using a handwriting device to further reiterate the benefits of having Club Jetstar in order to reduce cognitive dissonance after purchase.

Modal box
Payment and warning modal boxes.

Dangerous goods
SMS or Email
Boarding passes
Shopping cart
Radio toggle to view flights in QFF or dollars.

Travel documents
Travel documents form fields, further verification and wrong information screens.