Airline Website
ART DIRECTION / UX & UI
THE BRIEF
In the year 2016, we were tasked by the client to go through their digital assets and find ways to improve the current site and mobile app. To come work on UX Experience and Strategy, the content planning and a refreshed User Interface.
THE CHALLENGE
Below is the list of challenges we faced while undertaking this project :
•The website and the app were just revamped prior to the pitch being called, so some of
the assets were asked if possible to be kept if it didn't deter with the experience.
•The booking system and the front end of the site are two different entities.
•Experience on the site and mobile is rather layered and complicated in some sections.
•The content development was rather dry and lacklustre making stickiness level quite low.
THE ROLE
The team consisting of 5 individuals.In the initial stages, we shared collective work on usability testing, defining personas, identifying and prioritizing user's needs, strategizing and planning content and creating the lo-fi paper wireframe together. Developing the findings into wireframe and Hi-fi design was also shared between myself and the junior ux designers.
THE PROCESS OF
CREATING EXPERIENCES
Before starting out, we build an approach that will govern and guide our decision making with the support of
our findings through user research.
UNCOVER
OUR FINDINGS AND OBSERVATION
Through our interaction with the site and app, we found a lot of its user journey is rather disjointed.
The booking experience was quite confusing. On top of it, the site's content lacks the ability to attract and retain users.
As a summary, the experience lacks personalization and user are left hanging most of the part.
GUERILLA USER ABILITY TESTING
During the research phase, we worked with a sample size of 60 users. We did an online survey as well as approaching people on ground to gather information based on their interaction with the site and the app.
The chart below is compiled are collective feedbacks from the users.
COMPETITOR ANALYSIS
We looked at other major airlines' websites to learn from them and what worked and what didn't. The airlines' sites that inspired us the most are Emirates, Lufthansa and Virgin Atlantics. First off we found that the navigation and promo page was kept simple. It prompts people to move along on their journey on-site effectively.
AIRLINE DEALS PAGE
The design for the deals is also kept minimal. You can clearly indicate how much a flight to a particular destination right away. Which coincides with the data that behavior-wise people are drawn to a lower / cheaper prices.
MAKE A BOOKING PAGE
Emirates make a booking page was also made concise and minimal. The design and distribution of information were well laid and thought out. The subtle usage of color doesn't overpower the experience and gives the experience of luxuriousness.
SUMMARY OF ANALYSIS
From our analysis, we realized that the presentation of information doesn't have to be robust or overpowering.
By first identifying the need and constructing the experience based on the need, people will effectively
have a smooth interaction with the site.
DEFINE
DEFINING THE PERSONA AND THEIR JOURNEY
For the pitch, we created the persona of an avid woman traveler to help demonstrate to the client the woman's interactions on both site and mobile app.
PRIORATISING THE NEEDS
Taking all our findings from our own observation of the site and mobile app and coupling it with the extensive guerilla usability test,
we prioritized the people's needs by using the Information Hierarchy chart.
KELLY'S JOURNEY
Due to our limited time, we chose to focus on the highest importance needs based on the chart and created Kelly's journey based on that. Below is the flow of her journey on the site.
IDEATION
LO-FI PROTOTYPING
We had a couple of workshop session with the client to make sure we were aligned with their needs and also that it each solution very much answer the people's concerns. We mostly sketched out our wireframes and flows because we were in rapid sprint mode for this project. Our client appreciated our response and method because it means they felt included in the process even at the initial stage.
DESIGN
DEVELOPING THE HI-FI DESIGNS + PROTOTYPING
The hi-fi designs below are sections with major changes done for both website and mobile app. Below are the breakdowns:
BOOKING PAGE
1
2
3
4
5
#1 NAVIGATION
We simplified the navigation bar into 5 categories. Naming the categories based on expected next steps a user would take.
To determine which came first, we refer to our data from our user testing in the initial Uncover Stage.
#2 DESTINATION
In the old layout, there was no hierarchy to the information. There was no draw in to entice potential flyers. As a solution, we made the price point as the main focus to draw the users in followed by the destination then the BOOK NOW button. Just by making that slight interaction, clients saw an uptake on bookings.
#3 FLOATING MENU
We incorporated a floating menu to make it accessible for users to go back the 4 common searches based on collated data. The menu consist of flights,accommodation,luggage enquiries and flight status.
#4 FLIGHT BOOKINGS
The old experience and design was rather confusing and doesn't clearly indicate the duration of stay and doesn't highlight deals. Inspired by Airbnb, we created a booking page that allow users to find travelling deals that better suit their budget.
#5 FORCASTING
The client has many partners along side their airline company given they are part of a larger network. To give a holistic approach to travel, we incorporated some elements of their travel partners in the booking section. As the users book their flights they are able to see the average cost for accommodation during their selected date and coupling it with potential weather and season report in order to prepare them for their trip.
MOBILE APP (LANDING PAGE)
1
2
3
EDM REDESIGN
Airline Website
ART DIRECTION / UX & UI
THE BRIEF
In the year 2016, we were tasked by the client to go through their digital assets and find ways to improve the current site and mobile app. To come work on UX Experience and Strategy, the content planning and a refreshed User Interface.
THE CHALLENGE
Below is the list of challenges we faced while undertaking this project :
•The website and the app were just revamped prior to the pitch being called, so some of
the assets were asked if possible to be kept if it didn't deter with the experience.
•The booking system and the front end of the site are two different entities.
•Experience on the site and mobile is rather layered and complicated in some sections.
•The content development was rather dry and lacklustre making stickiness level quite low.
THE ROLE
The team consisting of 5 individuals.In the initial stages, we shared collective work on usability testing, defining personas, identifying and prioritizing user's needs, strategizing and planning content and creating the lo-fi paper wireframe together. Developing the findings into wireframe and Hi-fi design was also shared between myself and the junior ux designers.
THE PROCESS OF
CREATING EXPERIENCES
Before starting out, we build an approach that will govern and guide our decision making with the support of
our findings through user research.
UNCOVER
OUR FINDINGS AND OBSERVATION
Through our interaction with the site and app, we found a lot of its user journey is rather disjointed.
The booking experience was quite confusing. On top of it, the site's content lacks the ability to attract and retain users.
As a summary, the experience lacks personalization and user are left hanging most of the part.
GUERILLA USER ABILITY TESTING
During the research phase, we worked with a sample size of 60 users. We did an online survey as well as approaching people on ground to gather information based on their interaction with the site and the app.
The chart below is compiled are collective common feedbacks from the users.
COMPETITOR ANALYSIS
We looked at other major airlines' websites to learn from them and what worked and what didn't. The airlines' sites that inspired us the most are Emirates, Lufthansa and Virgin Atlantics. First off we found that the navigation and promo page was kept simple. It prompts people to move along on their journey on-site effectively.
AIRLINE DEALS PAGE
The design for the deals is also kept minimal. You can clearly indicate how much a flight to a particular destination right away. Which coincides with the data that behavior-wise people are drawn to a lower / cheaper prices.
MAKE A BOOKING PAGE
Emirates make a booking page was also made concise and minimal. The design and distribution of information were well laid and thought out. The subtle usage of color doesn't overpower the experience and gives the experience of luxuriousness.
SUMMARY OF ANALYSIS
From our analysis, we realized that the presentation of information doesn't have to be robust or overpowering.
By first identifying the need and constructing the experience based on the need, people will effectively
have a smooth interaction with the site.
DEFINE
DEFINING THE PERSONA AND THEIR JOURNEY
For the pitch, we created the persona of an avid woman traveler to help demonstrate to the client the woman's interactions on both site and mobile app.
PRIORATISING THE NEEDS
Taking all our findings from our own observation of the site and mobile app and coupling it with the extensive guerilla usability test,
we prioritized the people's needs by using the Information Hierarchy chart.
KELLY'S JOURNEY
Due to our limited time, we chose to focus on the highest importance needs based on the chart and created Kelly's journey based on that. Below is the flow of her journey on the site.
IDEATION
LO-FI PROTOTYPING
We had a couple of workshop session with the client to make sure we were aligned with their needs and also that it each solution very much answer the people's concerns. We mostly sketched out our wireframes and flows because we were in rapid sprint mode for this project. Our client appreciated our response and method because it means they felt included in the process even at the initial stage.
DESIGN
DEVELOPING THE HI-FI DESIGNS + PROTOTYPING
The hi-fi designs below are sections with major changes done for both website and mobile app. Below are the breakdowns:
BOOKING PAGE
1
2
3
4
5
#1 NAVIGATION
We simplified the navigation bar into 5 categories. Naming the categories based on expected next steps a user would take.
To determine which came first, we refer to our data from our user testing in the initial Uncover Stage.
#2 DESTINATION
In the old layout, there was no hierarchy to the information. There was no draw in to entice potential flyers. As a solution, we made the price point as the main focus to draw the users in followed by the destination then the BOOK NOW button. Just by making that slight interaction, clients saw an uptake on bookings.
#3 FLOATING MENU
We incorporated a floating menu to make it accessible for users to go back the 4 common searches based on collated data. The menu consist of flights,accommodation,luggage enquiries and flight status.
#4 FLIGHT BOOKINGS
The old experience and design was rather confusing and doesn't clearly indicate the duration of stay and doesn't highlight deals. Inspired by Airbnb, we created a booking page that allow users to find travelling deals that better suit their budget.
#5 FORCASTING
The client has many partners along side their airline company given they are part of a larger network. To give a holistic approach to travel, we incorporated some elements of their travel partners in the booking section. As the users book their flights they are able to see the average cost for accommodation during their selected date and coupling it with potential weather and season report in order to prepare them for their trip.
MOBILE APP (LANDING PAGE)
Based on our findings during the Uncover phase, most of the airlines clientele where mostly business travellers. Which is understandable seeing that the airline is one of the premium
airline brands around.
Biggest frustration by users were directed at the airline's mobile app. There were too many steps before users could actually
check in. Below are 3 of the major things we addressed in the short time to demonstrate to the client by understanding the data and iterating it based on user's behaviour would be beneficial to client in the long run.
#1 CHECK INS & FLIGHT STATUS
Given the demographic and type of clientele, we made the check in and flight status buttons prominent. As they are always on the go, having lesser steps and a customized experience allowed them save time and effort in order to experience smooth and relax journey.
#2 DESTINATION DESIGN + PROMO
The old promo UI and UX were rather blend. Users weren't able to tell what was the price for one way or return at a glance. Even after figuring out the prices, they weren't prompt next steps making drop rates from the site and app pretty high.
We reiterated the designs, still in keeping with their newly designed CI and assets. We played with colour to create a differentiation between one way and return flights.
We clearly indicated to book now button in order to prompt user their next steps. We also included social buttons, so users could share them with their friends and family and help create bite size awareness for the client.
#3 SHOW MORE DEALS BUTTON
For mobile, we made the "MORE DEALS" button stand out as it prompts the user to browse other offerings. We also curate the deals based on each users constant destination to entice them further to plan ahead their next journey with the airline.
1
2
3
EDM REDESIGN
1
2
3
#1 PERSONALIZATION
Given the demographic and type of clientele, we made the check in and flight status buttons prominent. As they are always on the go, having lesser steps and a customized experience allowed them save time and effort in order to experience smooth and relax journey.
#2 THE ESSENTIALS
The old promo UI and UX were rather blend. Users weren't able to tell what was the price for one way or return at a glance. Even after figuring out the prices, they weren't prompt next steps making drop rates from the site and app pretty high.
We reiterated the designs, still in keeping with their newly designed CI and assets. We played with colour to create a differentiation between one way and return flights.
We clearly indicated to book now button in order to prompt user their next steps. We also included social buttons, so users could share them with their friends and family and help create bite size awareness for the client.
#3 DEALS PUSHING
For mobile, we made the "MORE DEALS" button stand out as it prompts the user to browse other offerings. We also curated the deals based on each users constant destination to entice them further to plan ahead their next journey with the airline.
REFELECTION & LEARNINGS
Through out the project I realised that were many fragmented decision making on the client side. Everything was rushed to be done but mostly without proper strategy and making sense of all the data the airline had collected through the years. There were many missed opportunities due to lack of communications and comprehension of what each platforms could offer.
It was a painstaking process to bring all stake holders together.
Our usual workshops had to be rejigged in order to show value not just to the working team but also upper management.
What started as a UX brief became an entire realignment of the airline comms eco-system. Fortunately after demonstrating what little iterations could do for the airline, we slowly gained some trust from the stake holders to partake in more scrums sessions and at the same time showing actual conversion from
measures taken.
What I've learned from it all is that, without curating and formulating the right sets of questions you wont be able to solve or discover the issues need resolving. That being said,
you can't just mull on these questions alone. You need somehow destill it until the client comprehends what you are trying to achieve. There were many tense moments as a results but because workshopping and scrum session were relative new method then, it took many tries and patience to finally get on a track and achieve a common goal.