ART DIRECTION / UX & UI
Our agency was in the midst of working on
a pitch with a major international airline. Though the primary bit of the brief was mostly branding, our digital team was also given the opportunity to demonstrate their abilities as an added value for the client.
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
The website and the app were just revamped prior to the pitch being called, so some of the assets we 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.
Due to the scale of the pitch, we weren’t able to form a large team. We kept it lean consisting of 5 individuals. We had one Chief Technologist, one copywriter, and three art-based creatives.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 art directors. We created this visual using tools from Adobe Creative Cloud and Sketch for wireframing and prototyping.
THE PROCESS OF
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.
UNCOVER: GUERILLA USER ABILITY TESTING
During the research phase, we worked with a sample size of 60 users to gather information based on their interaction with the site and the app. The chart is a breakdown what we found.
UNCOVER: 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.
UNCOVER: 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.
DEFINE: 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.
DEFINE: 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.
IDEATE: 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.
THE OUTCOME: HI-FI DESIGNS + PROTOTYPING
As mentioned due to time constraints, we only develop several hi-fi designs based on the persona's journey. Below are the breakdowns:
MOBILE APP (LANDING PAGE)