top of page
Visual Design - Cover.png

HONG KONG AIRLINE

Website Redesign

overview

The Hong Kong Airline website redesign is my UX Design Diploma course project, with this project, I experience the full UX desgin workflow for the first time. The output of the project might not be very beautiful, but during this journey, I equipped a lot of essential UX Design skills for my career.

Objective 

 

Redesign the Hong Kong Airline website to smoothen the journey to purchase the air ticket with less confusion and distraction.

The problem

​

The original website has a bad user flow. The UI design is too old fashioned and it is not fitting in the common practice within the industry, users are confused on the journey and the whole process is filled with unnecessary obstacle imposted by the website design. 

The goal

​

Redesign the website to have a smooth user flow with a mordern UI design to assist user going through the journey of purchasing air tickets.

My Role​

​

User research, research analysis and UX/UI Design

Tools​

​

Sketch, InVision, InVision Studio, Miro, Survey Monkey, Screenflow, Zoom

design process

I will alter my process in different projects and it will be determined by many factors such as the project goals, business needs, complexity of the problem, time and etc. Here I’ll describe my process for solving this problem.

understand

Usability Testing

​

​

Before doing any ideation I started the project with the usability testing session with 2 users. Under COVID-19 pandemic, I could only find the people closest to me to do the usability testing at my home. For the first time of conducting usability, I have gained valuable experience on how to set-up a testing environment with Screenflow and to let user perform tasks natural with my convey skills during the test.

The 2 usability testing session I conduct to test on the Hong Kong Airline Website.

Key Findings​

​

  • User can not interact with the flight search box effectively

  • The ticket options are very confusing in the select flight page

  • Too many condition summary pages

  • Passenger information form is seperating in too many containers

  • Contact page is separated with passenger information which is confusing to user

  • The preview photo in seat selection page is blocking user's selection

  • Abundant check details page after add-on page

  • The payment is too long with too much information

Depth Interview​
​

I have also conducted an interview with the theird user who has purchased flights online within
the last eighteen months. With the interview, I learnt more about the context of use of people that use aireline websites, what are they trying to do, who are they with, where are they, what devices are they using and so on.

​

I have structured an interview script to conduct the depth interview and to draw the insights from users for the next stage of analysising datas. When the COVID-19 situation got worse, I have turned the interview into an zoom interview experience.

Depth Interview conducted in Zoom with the guideline of a interview script (PDF download available in the buttom left corner)

Key Findings​

​

  • User would like to see the price and time clearly presented.

  • User would like to access the price summary when they wish to.

  • The progress bar is a critical element that affect the user's completion

  • User don't want to fill unnesscary personal information

resesarch

Online Survey​
​

I have create a Survey Monkey online survey to learn more about the goals of people that use airline websites - what arethey trying to do, what (if anything) is preventing them from doing it, what else
would they like to be able to do on airline websites.

​

​

Key Findings​

​

  • Most user would like to compare price and do research within the airline website

  • User found that the airline websites have too many information on the same page, user would like to have to option to view less

  • Most users would be directed from a travel agency website 

  • Most user would use seat selection and the selection process is important to the overall experience

Comparative Benchmark​
​

I have reviewed four websites and benchmarked them to see what they are doing well that I could emulate when it comes to designing my own airline website redesign. After comparing Hong Kong Airline, HK Express, Japan Airline and Expedia, I have uncovered the following conventions:

​

​

​

Conventions to follow​

  • Most airline could provide a streamlined booking workflow for user, not all flow when smoothly

  • The flow are mainly:

    • Hompage search > Select Flight > Customer Detials > Add Extras > Seat Selection > Payment

  • HK Express have the best UI design for the flight package and seat selection

Comparative benchmarking conducted in Miro and the final benchmarking powerpoint report (PDF download available in the buttom right corner)

Analysis

Affinity Diagram​
​

During the affinity diagram session, I have reviewed all of the research I conducted in the understand & research stage. The session was conducted with a friend of mine online inside Miro.

​

During the session, we took notes during this review and then use those notes to create an affinity diagram which represent my analysis of what I have learned so far.

​

Affinity diagram session conducted in Miro, during the process we defined the new website userflow and and painpoints in the user journey, these are useful information for the next step of producing the customer journey map.

Key Findings​

​

  • Confirmation of the userflow from flight search to payment page.

  • Confirmation of the primary goal to purchase ticket with the aid of a simple UI design containing minimal information.

  • The behaviour of users to compare price should be included in the new design.

  • The mental model of filling the less personal information as possible.

  • Confirmation buttons should be obvious in the new design

  • The options given to the user in the process should be reduced.

  • Option to view the booking summary at point during the process in a visually presentable way.

Customer Journey Map
​

I drew out a Customer Journey Map to illustrate the process of how a typical online customer uses the website. While booking a flight ticket, users find the site is difficult to browse and the website is over cluttered.

​

Based on the research findings analysis in the affinity diagram session, the customer journey is presented in the previously define user flow of the booking process.

 

As to increase sales for the airline, my strategy is to redesign the website in a less cluttered way, showing only important information to the user and to give users option to view details only when they wish so.

A simple customer journey to represent the different situation and pain points that users are facing during the process of book theri flight ticket.

ideation

Flow Diagram​
​

In this stage I have defined a high level flow for the airline website. l focus on one flow for this project, that is, one primary use case.

​

After finishing the flow diagram, I printed it out and stocked it on my desk to remind myself, I have to create the most enjoyable experience for the primary use case

20201030_220846_edited.jpg
Navigation
​

Based on the flow diagram, I defined the navigation style that I think will accommodate the users flow through the website.

​

After a few sketch, I have build a version that could the painpoints that users faced with a simpler UI design.

Interaction Design
​

After defining the navigation, I further sketch out the screen and to provide a sufficient guidelines for my prototype design. I used different color to indicate the interaction design on the screen, with this on hand, I could have a simple usability test with some user with the lowest cost.

Screen design could be import into interaction design application like Marvel to produce a low-fedility prototype to test with users for an initial usability testing before committing time to produce the mid and high fiedelity prototype.

design

Prototyping​
​

The mid fidelity wireframes were built with sketch. This step helped me to build a clear visual hierarchy and define all necessary UI elements. To figure out pain points at an early stage I used InVision Studio to convert the wireframes into an interactive prototype to conduct user testing.

​

All participants had to record their screen while executing both tasks, so I could evaluate their navigation behaviour.

​

​

Test result from the interim usability testing:

​

I sorted all pain points by priority and implemented participants’ feedback into the next stage of development.

​

Improvement to include in the visual design stage:

  • Some icons were misleading

  • The selection of wording could not be too deviated from the original design to preserve the branding style of the airline

  • Printing function should be added to the payment confirmation stage 

Visual design

Structure of the visual design of the new Hong Kong Airline Website​
​

  • Website common elements

  • Hompage

  • Flight Selection

  • Customer Details

  • Add Extras

  • Seat Selection

  • Payment

  • Confirmation

Website Common Elements​

The progress bar​
​

Using the illustration of a plane head, the progress bar in the new design have a strong visual indicate of where the user is during their journey to purchase a air ticket.

​

​

Booking summary ticket
​

I am adopting the HK Express model to immitate the booking summary as an airticket which could accessable during any point of the process when user have any purchase.

​

It is not an innovative from me, but by mocking up this function, I Iearnt a lot about UI design principle and how to organize large amount of information within a limited space.

Homepage

Let users focus on their primary tasks
​

The new design give user a lazer focus on searching ticket with the book a trip box. I am adopting the HK Express model to learn on how to create an input field box that could interact with user with effective visual communication.

​
Destination Selector
​

The destination options are located in a floating box in the new design, it can let user stay focus on the selection. Animation transition applied in between departure and destination location could provide more visual hints to users.

Date Picker​
​

I have enlargered the date picker and located it in the middle to capture the user's attention. Animation transition applied in between departure and destination date could also provide more visual hints to users.

Passenger Selector​
​

User could view all their option on a floating box in the new design, user could have more interaction with the interface to assit their decision.

Flight Selection

A streamlined process to select flights​

 

With HK Express model, I have learnt that locating the departure and returning selection within one page could let users having less confusion.

Date Price Compare bar
​

The design of including the compare bar could fulfill user's behaviour of comparing price within the website.

Flight Card & Package
​

The new design of the flight card and package is less populated with detials information, in the process, I have to resturcture the information archietecture of this part to reduce the amount of information presenting to users.

Customer Details​

Design​ Without Confusion

 

The input box are clearly defined within a single page, user could fill-in the information without distraction.​

Primary Contact Option​
​

With the primary contact option, users can save the time to enter the same information twice with a single click to select a passanger as the primary contact.

Add Extras

Reduce Complexity​
​

As to increase the affordance of the page, I tried reduce the amount of information to the minimum.

​

I have redesign all the add-on items and arrange them within a separated container box. Users have the option to collapse the box to reduce the information on the screen and focus on the item that they want to purchase.

Selection for both trips
​

User don't have to click on the botton in the original design to change to different screen state to select for departure or return. User can select baggage for both at once.

Reduce complexity of option
​

Most of the confusion of the original design is caused by poor visual hierarchy. Using only 1 column vertical arrangement, it is making the screen condensed with information. So I redesign the information in a 2 call them representation to show the two options for the item.

Seat Selection

As to stay with convention, the new design is not deviating too much from the original design. I intensed to increase the visual distinction of the elements as to reduce the cognitive load when users are choosing their seats.

Increase visual hints
​

Increase the distinction of departure and returning more obvious with high contrast visual design. For the passenger box, highlighting the selected passanger could reduce the coginitive load.

Remove blockages​

 

In the original design, the information box of the seat is too large. We know that user really don't need to see a photo of the seat from the user research, in the new design, the seat box is adjust to the right size, without photo, as not to block the view of the screen.

Payment

Process payment within a single page​

 

In the original design, the payment page is occupied with a huge book summary details, user have to scroll through the long page to the bottom to process their payment. 

​

In the new design, users can have the choice to click the view detials button to call out the booking summary floating box to read the detial when they want to.

Make the declaration box obvious​

 

During the usability test, one of the user's problem is not able to find the declaration checkbox, in the new design, I made the declaration are outstanding within this simple payment page.

Confirmation

Clean & sharp endpoint of the journey​
​

The confirmation page should be very informative, as to summarize all the information within a single page, I try to reconstruct the payment detail format from the original design and to make it a very presentable detail table with careful adjustments.

A printable confirmation​
​

During the interim usability test, some user gave me an opinion that, they want to print out the confirmation.

​

Think deeper on the use case, it is very normal for users to print out the itinerary page to take it to the airport. 

​

With this intention, I adjust the confirmation page layout and to make it as printable as possible, so the user can take this confirmation page as their itinerary to assist them online and offline.

testing with user

Finding Pain Points
​

I used InVision Studio to create a clickable prototype and tested it with five individuals. Insights from the validation test led me to revise some of the screens. Below are the final versions, including some results of the user testing before and after implementing design solutions.

Alternation 1​
​
User eager to print out the itinerary page as reference on the departure day
​

Design Solution:

​

The user experinece is always beyond the website, we should always try to help user to solve problem effectively. After understand the users' need, an simple act of adding the print in design and connecting to the brower printing function in development, it could largerly enhance the user experience.

Alternation 2
​
Users think that the Add Extra page is still too long with too much information 
​

Design Solution:

​

For the business side, the page is the channel for selling more service, as UX designer, we shouldn't lost the balance between users and the business. Giving user the option to collpase the items is the mid-point we could reach for that balance.

Alternation 3​
​
Users felt lost after they selected their flight package​
​

Design Solution:

​

The different between unselected and selected state of the flight card was not too obvious, I changed the style of the button in the selected state to make the different sharper to notice. 

Project learning

What I have learned form this project?
Simplicity is strength
​

As a designer, we are often lured by attractive, trendy and out of the box designs. But, We must always remember the ‘why’. The primary goal is to understand the user, their problems and then come up with a design that solves it.

​

Process essentially with boundaries​
​

For a project that is vast, it is important to set a roadmap to navigate through what can be a foggy route. This is especially useful when you’re starting out. As this is the graduate project of my diploma study, the UXDI gave us a clear guideline to progress, but it is alway down to our call as designer to draw boundaries not to over design.

​

Test the design very often​ 
​

Often doesn't mean showing the product to user after a screen design. But we do need to test the prototype with user in different design stage, in the project the suggestion of users truely help me to alter the design to a better version.

Improvements​
A Better Design Management System (DMS)
​

I should build and organize the DMS in a better way - as this is my first UX project, I have little knowledge on how to build an effective DMS.

​

More Presentable Documents 
​

In the early stage I relied heavily on building documentations with Miro, which is convenient to use but the output is not looking too professional. In the future projects I will make good use of other software like lucicart Balsamiq ,MockFlow and mural.

​

More Originality
​

In my first project, I relied heavy on mocking up others UI design to move forward and I am accumlating more experience, I will produce more original design in future projects.

SEE MORE OF MY WORK
bottom of page