Working in the airline industry for years, I have always been fascinated by how users have different approaches when using a mobile app to book flights, check-in, or simply just browse around the app. I decided to design a mobile app for a hypothetical new airline to help them gain customers by having a user-centered, easy-to-navigate app. When people travel, mobile apps are used more frequently because they are always on the go which makes it crucial for them to have a reliable, easy-to-use, and aesthetically pleasing app.
Sky View Airlines is a hypothetical new carrier that specializes in short-distance flying. Their hub is located in Burbank (BUR) with flights to Las Vegas (LAS), Oakland (OAK), and Dallas (DAL). The company hopes to market to business travelers who want to experience a more private and expedited airport experience with business class services.
To design a mobile app that is user-centered, rewarding, and aesthetically pleasing to Sky View’s potential passengers. Users must be able to navigate the app and complete the following:
The design process loops back to the first step until the desired outcome is met.
The purpose of this process is to learn more about the users and to define what the common issues are with mobile travel apps.
There were certain questions in mind while I was doing my research.
Since Sky View does not have an existing app that I can test or read reviews from, I decided to read the mobile app reviews of other airlines such as Delta, American, United, JetBlue, Alaska, and Southwest. I used this method to gain more insight into how passengers use their mobile apps and what they like. I took notes of some of the top similar reviews that I found.
Reading through the reviews, it seems as if mobile apps are used most when passengers are at the airport and need to show their boarding pass, check any flight updates, and book last-minute flights.
Since sky view is a brand new carrier, surveys will be conducted and given out to random passengers at Burbank and Los Angeles International airport. A $20.00 Sky View travel credit will be given out to passengers who complete the survey. Two days for 8 hours each day per airport should be enough time to obtain results from different types of passengers.
The results of the survey indicate the following:
After researching, I answered the questions that will help focus my design on the user's needs.
I then wrote down the pain points based on research and I answered my design solutions to each problem.
According to the users who have used other airline mobile apps:
Solution:
This is the part where I put more focus on empathizing with the users and understanding who they are.
I created three user personas to show three different types of passengers. Sky View aims to market to business travelers so the first persona I created depicts a businessman who travels weekly for work. The second and third personas are the types of passengers that Sky View may potentially attract based on research, and surveys. These types of passengers are usually groups of families and friends who plan to fly together.
User flows help in creating a design that is focused on how users will navigate through the app.
These are the step-by-step paths that a user takes when booking flights and checking-in using the mobile app.
First, I created low fidelity wireframes to show the structure of the app. Omitting colors and images shifts the focus on where the elements should be placed so that the users can easily navigate through the app and access content. Based on personal research, users want an easier way to access their boarding passes. I placed an image button on the launch screen (homepage) where users can quickly click on their boarding pass when they need it. The "Book Now" button is centered so they can quickly browse for flights as well.
I then created medium fidelity wireframes which show more detail such as typography, buttons, and spacing.
Using the low and medium fidelity wireframes, I created a prototype of the app using Figma. I added images, colors, and interactions to display what the app will look like once it is launched.
This is also the part where I get feedback from other designers/developers/target users regarding the overall experience of the app.
During this step of the design process, the importance of my chosen design will be explained in detail, and the type of usability testing will be determined.
While designing the app, I made sure to meet all the solutions to the pain points.
Solution:
Images and colors are inspired by the name of the airline. A view of the sky consists of different shades of blue, white, and gray which a passenger sees through the plane window.
User Experience
Launch Screen: Contains an image of the sky with mountains which is what passengers would see from the window. The "Book Now" button is centered along with the "Sign In" button which are the two main contents that the users want access to right away when opening the app. There is also a "Boarding Pass" button where they can click and access their boarding pass if they are traveling that day. This was one of the main requests of the users according to research.
Booking Process: The booking process starts with the user selecting whether they want to purchase a round-trip or a one-way flight. Then they can input the departure and arrival cities, dates, and number of passengers. I used the user flow as a reference to make sure that the booking process has the least steps possible. The flight results are separated using tiles so that they can easily distinguish the different flight results and the flight information of the respective flight result. The buttons "Go Back" and "Continue" are at the bottom of the page so that users can either go back or continue to the next page after looking over the information above the buttons. An image of the aircraft seat map is visible for the users to choose their seats so they can see where the seat is located in the aircraft. Before they purchase the ticket, passenger information, flight information, fare rules, and the total are shown to ensure that the passenger has chosen the correct flight and input the correct information. After purchasing a ticket, a confirmation page with all the information is shown and there is an "Add to My Trips" button where users can simply add the flight under the "My Trips" page.
Check-in Process: The check-in process is very simple and can be accessed under the "My Trips" page. Icons are used throughout the whole process to guide the users on what to do without having to use too many words. After checking in, passengers will receive a boarding pass which they can save to their phone wallet with a click of a button.
Boarding Pass: The boarding pass has the flight number, flight date, times, passenger name, and seat number. The boarding time is shown on the pass to ensure that the passengers arrive before that time.
UI Elements
Once the app is launched, I decided to choose the session recordings method so that I can identify any common usability issues on the app. A hundred users will be chosen at random and their interaction with the mobile app will be recorded.
Any issues will be listed down and changes to the design will be made. The design process goes back to step one again to improve the user experience of the app.
Any questions? Please reach out!
