CELESTE JARAMILLO
AIRLINE MOBILE APP
AND WEBSITE
Role
This project was made for my UX Design Diploma with the UX Design Institute. I was the primary UX designer on this project, responsible for UX research, user flows, wireframes, and the visual design.
Objectives
Learn more about the user behaviors when booking a flight, and make the process easier. Based on my research on Scandinavian Airlines (S.A.S.) and Norwegian.
Tools
ScreenFlow, Survey Monkey, Miro, Illustrator, Adobe XD, Rotato
Research Processes
Step 1 of my case study was to research and gather data through a Competitive Benchmark, Depth Interviews, Usability Tests and performing an Online Survey.
Competitive Benchmark
For the Competitive Benchmark I looked at the websites of airlines SAS, Lufthansa, and Norwegian, and also websites like Momomdo.
Depth Interviews
What people said:
"I definitely compare prices on website like google flights, hopper, cheapflights and expedia. But I don't go so much on the airline websites to research prices."
"I wish there was more information about luggagge: what I can, or can't bring. It's just a big wall of text so it was not so cohesive."
Usability Tests
“Where can I change the language? I don’t see the button!”
“I prefer when the baggage is included, why do they show me flights with no baggage.”
What people said.
“I prefer the Norwegian over the SAS website. Font too small on SAS and so much info”
"I think it's annoying when they try to sell you additional stuff like priority boarding or hotels."
Online Survey
Here are some general facts that came out of the survey:
49% book a flight with Online travel discount site and 46% with Airline websites.
The main reason for their travels is leisure, followed by Business.
When booking a ticket, prices and travel dates matter the most.
48% travels 2 to 3 or more times a year.
Research Analysis
Step 2 of my process was to take all the data from my reseach and create an Affinity Diagram and a Customer Journey Map to analyze and help me make sense of all the information gathered.
Affinity Diagram
Customer Journey Map
Pain Points
After the research process, problems became more clear. These are some of most important factors that I attempted to solve:
-
Restriction of language selection by country.
-
Overload of information and poor font choice becomes confusing to users.
-
Most people didn’t know the difference between low fare, low fare+, flex, go, or plus.
Finding Solutions
Step 3 of the process was to work on the flow diagram, define navigation and interaction design.
I looked at several airline apps and other travel websites and made observations on which layouts worked best and what the required functions for them are. I sketched out possible solutions on paper for the main screens before committing to high fidelity designs in Adobe XD.
.jpg)
FLOW DIAGRAM
INTERACTION DESIGN
INTERACTION DESIGN
DEFINE NAVIGATION
DEFINE NAVIGATION
Mobile Sketch
Desktop Sketch
Prototype
From flight research, to booking steps, to payment page… this app was full of interesting UI challenges!
Here are the high fidelity frames I created for the application and the website:
Mobile
Desktop
The user can select the language and country of their choice.
Make space clear and simple with big buttons.
Simplified by using only 2 choices: Economy and Business.
Prototype Animation
Brought to Life
Wireframes
Step 4 of the process was to create wireframes to communicate clearly to developpers what we want to achieve and how we want to build the application.
What I learned
Through my first UX project, I was more challenged by understanding the users than the technology. Finding problems and solutions was puzzling but rewarding. I’m grateful to have learned the UX process and grown as a designer.
Finally, thank you for reading this far!
​
​
​