UX Design

daniel-olah-tG_zzoDqjHs-unsplash (1).jpg

Fly UX Mobile App Case study

A UX case study into the design and development for mobile App Design for a start up airline, design a user friendly, clean, intuitive booking process for its users.

Client/Company

The Fly UX brief is part of my UX diploma at The Institute of UX Design 

  Project Duration  

The UX Course ran remotely over 6 months September to March

My Role 

My role as lead UX Designer, information architecture (AI), user research, prototyping and testing.

Project Summary

The brief for this project was to design a mobile booking app for a pseudo-start-up airline company. I was asked to develop an app to provide users with a simple, intuitive and fast booking process.

The end goal was to have enough research and user understanding to develop in-depth research to base my design on, along with detailed wireframes ready to handover to a develop

The challenge

Today, the majority of ticket bookings are carried out by the customer. It’s crucial that the booking app can allow the user to complete the process with a streamlined flow, that is intuitive and user-friendly. 

For less familiar users, the booking process can be stressful and daunting. I aim to design a product that lets the user feel in control and eliminate any steps the user may find confusing, frustrating, or irrelevant.

The Research

I started my research by looking at our main competitors to identify what elements of their design worked well and what steps could have been removed to streamline their booking process.

The first objective of the project was to fully understand the user's goal and interaction patterns when it comes to this type of booking process. By doing the research techniques listed below, I was able to gather raw data/research that I used to determine the most important aspects to include or omit from my final design.

Competitive Analysis

Online Survey

Usability tests

Customer Journey Map

DESIGN STEPS1.png

Competitive Analysis

OBJECTIVE

  • Learn about the competition and gain a strong understanding of the booking process and key patterns to the process

  • See how and what the competition is doing and if it’s successful.

  • Find out the competitors’ strengths and weaknesses aiming to incorporate the good and avoid the bad practices.

  • Familiarise me with the UX, AI and UI design of styles for such apps.

DISCOVERIES 

During the initial stages of research, I benchmarked 3 of Fly UXs main competitors. This gave me an insight into the strengths and weaknesses of well-established airlines. For this research did a competitive analysis on 4 Travel companies, 3 of which are airlines Ryanair, British Airways, Air France.

BENCHCOVER1.PNG

*Travel companies with an app will get 60% of their bookings via mobile devices


Online Survey

OBJECTIVE

  • Gain high-quality qualitative feedback

  • Gain information from a large, varied group of people, with a broad age range

  • Ask very targeted questions

DISCOVERIES 

  • The questionnaire results told me that most people travelled for pleasure

  • Most of them do not travel more than once a month

  • Ryanair is the more popular airline for the people who answered the survey

  • Price was the leading motivator in going to their preferred airline

By running this online survey and posting on Facebook, I gained the details from 40 people, which was the limit to the Survey Monkeys free account. Letting people know how long the questionnaire would take them and how many questions were in the survey encouraged more people to engage as they knew upfront the questionnaire would late no more than 3 minutes.

Please see questions and results in the link below…..

survey chart 2.PNG
survey chart 2.PNG

Usability Test

One of the best ways to understand how the user interacts with your product is to conduct some usability tests. These tests provide recorded research and feedback from the user's facial expression and body language.

TASK

For this usability test, the participant was given the task to book a flight for two people for two weeks. The airline used in this test were British Airways and Aer Lingus. Below is a clip of the video that was a total of 60 minutes.

OBJECTIVE

  • Satisfaction levels

  • The ability to complete the task

  • How long it took

  • User suggestions are often insightful

  • If testers words are matching their actions

  • Strong qualitative data

DISCOVERIES 

  • Advertising and moving banners are confusing

  • Auto-fill for of information already known by the app would help the user along

  • Simplifying customer detail forms

  • Clear CTAs on homepages

  • The lack of clarity on fare pricing creates a lack of trust

  • Too much information is a turn off for the user

WATCH THE CLIP OF THE TEST BELOW


*148.3 million travel bookings are made online every year.


Customer Journey Map.png

Customer Journey Map (CJM)

OBJECTIVE

By looking at each step the user needs to take during the booking process I was able to observe the users behaviour, expectations, confusions and repeated issues that occurred during the booking process.

Any unnecessary steps and pain points the user experienced were highlighted. This process gave me a good insight into how the user interacted with the apps during the process.

By mapping the user’s interactions with the process I was able to highlight many repeated issues for the user and take note of functions the users found useful and intuitive, thus letting the user feel in control during the booking process.

DISCOVERIES

Things that caused users to lose trust

  • Not being offered the best deals straight away

  • Booking dates on the calendar confusing

  • The fare pricing is not displayed

  • Not automatically being put in a seat next to your travel companion

  • Not having connecting flight details and times more clearly highlighted

Things that users found helpful

  • The scrollable carousel with the dates along with the top is useful for seeing different prices on different days

  • Minimal layouts easier to navigate

  • Pop-up window offering user the option to reserve the same seat for the return journey


*30% of users highlight the app functionality, boarding passes, check-in, passbook as their reason for using an app


The Design

After analysing the data generated from the research process, I started the design process, elements of the app, such as screen order, mental models, information architecture (AI) etc. Using the techniques listed below, I developed a picture of what flow would work best for navigating the booking process. I paid attention to reducing how much friction the user is faced with during booking.

  1. Flow chart

  2. Affinity Diagram

  3. Interactive sketches

  4. Wireframing

  5. Prototype

Flow Chart

By making a flow chart I was able to produce a clear visual aid for myself, decide the best option for the order of the screens and have reference material that could be shared with developers and stakeholders.

OBJECTIVE

  • Define the IA (Information Architecture) for the app

  • Produce a visual aid for stakeholders

  • Identify the steps taken to complete the booking process

DISCOVERIES

  • Most efficient process

  • Finalise the IA

  • Visual layout

  • Any problems with user flow

flow-chart-mobile-png

*39% of travellers preferred how quick it was to book via an app


Affinity Diagram

AFIN SORT1.jpeg

In order to organise and analyse the qualitive data I needed the help of volunteer to go over all the data and contribute observations and ideas.

OBJECTIVE

  • Analysing and sharing of information

  • Sort large amounts of data into organised groups

  • Brainstorming

DISCOVERIES

  • Trust and clarity being repeated as a concern for users

  • Issues user have with the Interfaces of the apps

  • Felling that their times was being wasted

  • Grouping that we would not have associated with each fitting into the same pile

AFFINITY DIAGRAM REPORT6.png

*Nearly 8 in 10 customers would stop engaging with content that doesn’t display well on their device


Interactive Sketches

By sketching out my plans for the app I was able to brainstorm, try out alternative options and look closer at the more detailed functions of the design.

OBJECTIVE

  • Create a reference map for UI designer to start their design process.

  • Clarifying IA layout (Information Architecture) and the order of the screens

  • Visual aid for stakeholder

  • It can be used to base prototype design on

  • Define how various features of the app will support each other

DISCOVERIES 

  • Most efficient process

  • Finalise the IA

  • Visual layout

20210909_163530.jpg

Wireframes

The final part of the project was to produce a set of wireframes as a visual representation, detailed enough to hand over to developers and stakeholders. 

OBJECTIVE

  • Create a reference map for UI designer to start their design process.

  • Clarifying IA layout

  • Visual aid for stakeholder

  • It can be used to base prototype design on

  • Define how various features of the app will support each other

DISCOVERIES 

  • Most efficient process

  • Finalise the IA

  • Visual layout


Fly UX Prototype

With all the research analysis and design being finalised it was time to prototype the design. Using Figma I designed a mid-fi prototype to test the effectiveness of my design and how it may look in the real world.

OBJECTIVE

  • Run a usability test on volunteers to get their feedback and review how they interacted with the product

  • User feedback

  • Discover any major issues before handing the design over to the developers

  • The opportunity to how the user works with the interacts

DISCOVERIES 

  • Most efficient process

  • Finalise the IA

  • Visual layout

  • Confusion of screens

The Conclusion

The decisions I made throughout the app development process, were informed by the research I gathered. I wanted the app to provide users with accessibility, transparency and simplicity without lacking any facility a user may expect or require.

Keeping these three key objectives in mind, I designed an app with a simple homepage and fare details and kept the forms simple by only asking for information that was relevant to the process. 

Clarity - Trust was an issue for many users. Not highlighting stop-overs, transparency overtime allowed for connecting flight, added extras to the ticket prices, luggage, reserving seats etc. Once the user feels the product is working against them, they lose trust. This can potentially result in the loss of a customer.

  • By adding an individual fare button to the individual flights, the user can access all the information about that fare.

  • Using only male/female buttons on the payment forms instead of insisting customers declare their marital status felt more modern and less fussy.

  • The progress bar reassures the users of where they are in the processes and what steps they have left to complete.