An innegligible problem with China Southern Airline’s previous mobile application was it did not provide a up-to-date design language for its ticket-booking flow as it ignores the needs of its main customer populations. One of my main focus is to re-design its ticket-booking flow to make it modern with necessary information.
Major Pain Points
Due to NDA, I could not disclose all the original design from CSAir.
Original Design by another agency
Consistency issue
Similar elements are not consistent across different pages
Huge burden
The amount of clicks is quite overwhelming.
Research Process
We conducted a full-cycle research from survey,focus group, usability test,persona and other statistical analysis
Project Design Strategy
Eliminating all the elements that were outdated and did not represent the current design
SEAMLESS
Allow users to go through the process and switch tasks smoothly
IN TREND
Be culturally appropriate while promoting the brand image through a digital platform.
LOCALIZED
Be culturally appropriate while promoting the brand image through a digital platform.
CONCISE
Simple and clear interface that is visually appealing.
An innegligible problem with China Southern Airline’s previous mobile application was it did not provide a up-to-date design language for its ticket-booking flow as it ignores the needs of its main customer populations. One of my main focus is to re-design its ticket-booking flow to make it modern with necessary information.
Ticket Booking, Checking-In And Flight Details
Booking Iteration 1
One of the biggest emphasizes in the booking process is to cut extra information and to allure customers into the flow.
Booking Iteration 5
Compared with the first iteration, our fifth and latest version decreased reading load, reduced the importance of “non-stop”, and added more consideration to different age groups.
Check-in : Search By Flight
Users are able to check-in on the first page under the My Trips Tab
Check-in: Confirmed
The app has the ability to add more itineraries for business travelers and other user groups
It is also important to re-design the flight detail page for customers who have a specialized need for information. Apart from client’s requirement on the necessary information, we added some others according to our user research. For example, the need for aircraft information, although not prevailing among survey, showed a high percentage of need.
Flight Info: Detail Information
Not all airline apps provide enough information affordance for passengers. Therefore, we examined and carefully picked the most useful information from user research: Terminal Info, Time, Status. To add more geek element, there is an aircraft section for you.
After iterating more than 5 times on the login page, we picked the one that can most represent the aesthetics of modern airline design
Color Palette & Typography
We picked a color palette that fits the theme of China Southern Airline, but used some accent color for call-to-action.
#008ACB Text | Call-To-Action
#00234E
Body Text
#E5004A Main Call-To-Action
#798691 Text field presets
#D1D9E0 Inactive elements
#FFFFFF Text Background
Roboto Medium
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
Roboto Regular
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
After re-designing the ticket-ordering flow, we spent more time on features centered in experience at airports Specifically, we designed Say something, a hub to express emotions, Flight Diary, a faithful tracker of passenger’s flight history and a terminal map which guides passengers inside terminals.
Features of Airport Tab
Overview Of Airport Features
Airport Features Details
Feature: Flight Diary
Flight Diary wants to keep track of the journey you have taken in the past year, and maybe brag about it on your social media? Flight diary allows you to take a sneak peek of some interesting statistics of your past journey. The Wishlist allows you to add some of your dream destinations and keep a close look out to the most updated promotions.
Feature: Say Something
Airport might trigger some of your emotions and bring back some memories, let it out, share them with anonymously with people around you; maybe you find even find your true soulmate.
Wireframes and Prototypes Illustration of Flight Diary & Say Something
Feature: Terminal Map
Let this function help you navigating through the terminal. Grab a bite at the featured restaurant or pick up a last minute gift at some boutique duty free shops; fun discovery only takes a fingertip to do so.
Feature: Airport Screen
Plan ahead.Keep updated with the current flight status, get a general idea of the airport departure and arrival flow.
Wireframes and Prototypes Illustration of Terminal Map & Airport Screen
