.
Fly Airlines
Mobile App
.
F.
TAGS
1. USER RESEARCH, ANALYSIS, INTERACTION DESIGN, PROTOTYPING, WIREFRAMING.
2. BRANDING, INTERFACE DESIGN.
INTRO
Fly Airlines is a fictive project created by the UX Design Institute, a university credit-rated online course that teaches the UX design process. This is the journey I embarked on to get a professional diploma in UX design and learn about the mindset and skills essential to any UX designer.
PROBLEM STATEMENT
Most airline apps are difficult to navigate, have crowded interfaces and can make users feel frustrated.
BUSINESS GOAL
Create a booking experience that is easy and intuitive, preventing users from leaving the booking process mid-way.
Design Process.
01
Research.
Competitive benchmarking
Online surveys
Usability testing
Depth interviews
02
Analyze.
Affinity diagram
Customer journey map
03
Ideate.
Flow Diagram
Interactions
04
Design.
Prototyping
Testing
Wireframing
01
Research
LOOK UP THE COMPETITION, LEARN FROM THEIR MISTAKES AND TAKE NOTES.
The first step in the process was to identify the pain points and best practices users are currently experiencing while booking a flight. Since Fly Airlines is a fictive company, the natural way to start was by looking up the competition.
At this stage of the process, I kept my research open for mobile and laptop so I could find more problems to solve.
I chose to review and compare three best-in-class airline apps and one aggregator app: Air France, Easy Jet, Hawaiian Airlines and Momondo.
This first data collection not only helped in the creation of the online survey but also helped to better understand the current conventions.
USERS ARE YOUR GUIDELINE AND METRICS ARE A MIND READER.
To collect further information about the booking process, I conducted an online survey with 30 people. The main objective was to understand limitations and users’ goals. To do so, I gathered quantitative and qualitative data.
The results gave me a deeper understanding of users expectations when booking a flight, what they are trying to achieve, their preferences and what features they would like to see. This led to a better crafted in-depth interview.
Key Insights
“I would like more price visibility for alternative dates”
COMPETITIVE BENCHMARKING + ONLINE SURVEY
Users seem to often visit an airline app or website to check flight availabilities and prices.
The booking process bears a big amount of stress for users and they would like to lessen this anxiety from the beginning.
The progress bar is a way a good indication to help users during the booking experience.
Promotional banners are often intrusive and distract from the actual booking.
When showing flexible dates, show price points on each day to help guide users’ decisions.
PLANNING, BOOKING, EXPLORING? TALK TO USERS, THEY WILL WHISPER SOME GREAT INSIGHT.
At this point of the process, I was already drawing a user path in my mind and it was essential to validate those ideas by conducting deeper research.
This analysis step was planned during the COVID-19 pandemic, highly preventing in-person meet-ups, so I gathered additional data about users and their goals, by conducting remote in-depth interviews. It allowed me to get a contextual picture of where and with whom an airline app is used.
DID YOU SAY PRICE? HE SAID STOPOVERS! ONLY TESTS WILL REVEAL THE WHOLE TRUTH.
To identify opportunities for improvement, I couldn’t conduct usability tests on an existing app (Fly Airlines being a fictive company), so I used the competition apps.
The objective was to measure if users could easily and flawlessly book a flight and point out problems while doing so.
This learning helped highlights working features, users’ habits and points of frustration. The collected data were analyzed and decomposed in the next phase.
Key Insights
“I don’t remember seeing this was a two-stops flight.”
IN-DEPTH INTERVIEW + USABILITY TEST
Price is the top priority followed by the dates.
Users think that a recent search is a good way to save time.
Filter the search with checkboxes to customize users’ search
If users want to book a further date in the calendar year, the scrolling feels sometimes too much.
Saving search can make users skeptical.
Always give clarity of the total amount of the trip, it’s important to avoid bad surprises.
02
Analyze
LET’S BRIDGE THE GAP BETWEEN RESEARCH AND DESIGN
To combine the large amount of raw data collected through my research and the ones provided by the UX Design Institute, I created an affinity diagram.
To achieve this, I ran a remote session on Miro with my dear friend Antoine Desmeliers, a UX designer in Tokyo.
Together we organized and prioritized all the data previously collected.
PHASE 1: WRITE DOWN NOTES
PHASE 2: SORT OUT
PHASE 3: FINALIZE
EMBARK ON THE USER JOURNEY, FOLLOW THE DETAILED MAP.
Once the affinity diagram was completed, I was ready to create a clear and detailed customer journey map.
I segmented each stage of the booking process and wrote corresponding data based on the user goals, behaviours, context, pain points and mental models.
This structured visual map was a key reference in the process. Helping me make further choices based on the user journey without missing any essential data.
Considerations
The interface needs to be simple and straight to the point.
Users would like to see their preferred settings.
Some users like scrolling but others don’t. Need to give alternatives.
Users’ top priorities are price, duration and stopovers. Make sure users have access to this info clearly, across the experience.
Users hate price fluctuation between two visits, Fly airlines needs to help reduce the frustration.
03
Ideate
FROM THE FIRST SCREEN TO THE LAST, MAKE IT FLOW.
The unstructured data were finally organized into detailed documents, highlighting the areas of improvement and pain points encountered by users. This analysis helped me define a high-level flow diagram, focusing on the primary use case. This diagram became the main reference for all further steps.
DRAW SEAMLESS INTERACTIONS, CREATE THE EASIEST BOOKING PROCESS.
Once the user flow was clearly identified, I started to sketch all screens on paper and finalize it on Procreate. Using procreate for final screens came naturally as I’m an illustrator and I like being able to improve or modify as I go.
04
Design
THE SOLUTION HAS BEEN FOUND IN THE PREVIOUS STEP, LET’S ADD MORE DETAILS IN THE FORM OF INTERACTIVITY.
At this stage, I was ready to get to my medium-fidelity prototype. I started laying it down on Sketch and I added all interactions on Figma.
These usability tests revealed the following points:
Users were confused by the yearly calendar, what I thought will be a solution to the calendar scrolling issue became confusing to users.
The price’s color code wasn’t clear enough, users would like to see the price for each day.
Users would like to share the trip with friends and/or family members but they usually screenshot it.
I took notes and revised my final medium-fidelity prototype.
UI Design
01
Visualize.
Logo
Color Palette
Typography
02
Design.
Screens Design
05
Logo search
Fly Airlines is a newbie on the airline market, let’s play on the futurist look.
……..
05
Visual Language
Typos.
……..
Color.
……..
