UX UI Case Study

Context

This case study was developed as part of my diploma for the UX Design Institute. The diploma was centred around the case study and followed a real life cycle of a UX project.

Our client is a start-up airline brand called AVION. They are looking to create an online experience that is fast, easy, and intuitive. Our task was to design a new website for AVION. Focusing specifically on the flight booking process: how users search for, find and select flights online.

Challenge

The main problem for the user as identified by the brand was that people's flight booking experience was one of constant disruption by upselling features. A hypothesis that was later confirmed by our research too.

Our main challenge was to design an experience which was fast, easy and intuitive for users of all ages while keeping in line with the brand's business strategy and providing the right balance between upselling and a positive user experience.

Company

Avion (Fictitious)

Role

UX UI
UX Research
Visual Design

Team

Led projects end-to-end, from discovery to hi-fidelity prototype for this case study.

My Role

This project was heavily focused on UX research and all design iterations have been developed by using insights from both quantitative and qualitative data.

I was responsible for conducting most of the UX research (Competitive benchmarking, usability testing, affinity mapping and customer journey mapping) as well as building Avion's user flow for our primary use case and creating wireframes and prototype for testing.

Outcomes

Redesigned payment experience, breaking down form into sub-steps and making it easier for users to follow. Hypothesis was that this would reduce friction and speed checkout.

Improved information architecture and simplified flight selection process. Established clear hierarchy and elements to support easier transition through funnel for users.

Defined a new user flow, eliminating dark patterns and improving information architecture to better suit user goals.

Research

After reviewing both quantitative and qualitative data conducted internally, I was able to identify two main audience groups. Those users were equally passionate about using the product but with very different goals when navigating through the app (zoom in on the research to read).

Usability Testing

After looking at our competition and talking to customers from various backgrounds, we did Usability Testing with users to determine the effectiveness of the current flight booking experience.

Our tests revealed a number of issues with the current flight booking experience.

Having too much noise in critical steps - most users found the flight selection process overwhelming with a lot of choices and no clear hierarchy. This led to frustration and increase in time to make a decision.

Payment form is long and overwhelming - users were confused and unsure about how to fill in their details correctly due to the lack of hierarchy and structure. This led to an increase in friction.

Flight search form is confusing and not clear enough to use.

Dark patterns - users were unhappy with some UX UI interactions that led to them selecting an action / upgrade they didn't initially intend to.

Affinity Mapping

We also ran an affinity session which helped us put a firm structure to our research findings.

We used data from usability testing sessions conducted by us (4x).

We used data from past user interviews conducted by the brand (6x).

Customer Journey Map

We used all insights from our research to build a customer journey map. Telling the story of our customers' flight booking experience with Avion.

Design

After conducting and analysing all research, it was now time for us to start designing the new AVION website. With an overall objective of fixing all issues identified throughout the research phase.

User Flow

Defining a high level flow for the website. Focusing on one flow - one primary use case.

Wireframes

Testing and sketching different ideas on paper before proceeding with digital wireframes.

Prototype

After initial analysis of test results and further iteration, we designed high-fidelity mockups and developed a prototype with enough detail to test the high level flow, screen layouts, copy and basic interactions.

Iterations

We tested the new Avion flight booking experience with five users.

We discovered that there is a slight confusion over the toggle feature when users were trying to select a 'one way' trip as oppose to the default return trip selection.

We iterated and eliminated the feature with visualising the 'One Way' flight option with a tick box (see image 2) aligned with all other extra flight search features.

Flight Booking