Hummingbird Airlines
Mobile First Website Design

2022

I designed a booking service web application, for which I immersed myself in the design process from start to finish; I created a fictional budget airline for this purpose and did the research, conceptualization, design, and prototyping.

The project was divided on 4 stages: Research, Analysis, Concept, and Design.

Icon of a designer sitting in front of a computer

My Role

UX Researcher and Designer, UI Designer.

icon of a mountain with a flag on the top

The Challenges

Limited sample sizes of potential users leading to a big margin of error and the need to use assumptions.

The Results

High-fidelity prototype and a deep understanding of the design process from concept to handover.

The Project

Research

To begin the design process, I conducted an online survey to learn about people’s past experiences and typical behaviors while booking flights, and use the obtained insights to design a user friendly application. After creating the survey, I screened for friends who had booked a flight in the last 6 months and sent them the link to fill it out. It consisted of a total of 10 questions and some of the main insights were the following:

Price was the main focus while booking a flight, followed by time and number of stops; which will be important when establishing information hierarchy.
Using computers is slightly more popular than mobile devices when booking a flight. For the purpose of this project, I decided to focus on a mobile website, as it poses interesting challenges (adapting a long process into a limited screen), however, if this were a real case scenario, it would be advised to begin with the desktop website.
Users are very familiar with the booking process in general, and the only times they were not able to complete their goal when visiting an airline application, was due to external factors and not because of usability issues; therefore, the core steps of the process have to be maintained, and the improvements should be on the interactions themselves.

Three graphics from the online survey results.

After defining the direction of the project, I created a competitive benchmark of mobile websites of airlines and flight aggregators, in order to search for design patterns, positive features, and possible pain points for the user.

Excerpt from the competitive benchmark document.

Some of my main insights involved the following:

1. The booking process was consistent through all the analyzed websites. The main reason a website felt less friendly or the process frustrating was due to either hiding information on extra steps or insisting multiple times on the same feature/option.
2. Overall, airlines seem to be aware clients focus a lot on the price of the flight, some even provided easy to view comparisons.
3. Most websites were consistent on how they required the information to be input by the user, for example, 'to' and ‘from' fields always received typed in inputs, while date selection always showed a calendar the user could tap on, and the passenger number could always be changed by tapping on ‘plus' or 'minus' icons.

The final step on the research phase, was to conduct usability tests; here users were prompted with the task of booking a flight on a couple of different airline applications to learn more about the context of use, the user’s goals and behaviors, and possible pain points along the way.

Note taking was also a part of this phase in order to easily share insights on further stages.

Analysis

The data collected along the research phase was analyzed in collaboration with another student from the program. We studied each other’s data and collaborated on an affinity diagram and a customer journey map, in order to structure the collected information and better understand the user.

Overview of the documents created for the analysis stage.

Concept

After getting a better understanding of the user’s journey to book a flight, the next step was to create a flow diagram to define the high-level booking flow of the website and lay the base in which to build the design.

Flow diagram depicting the flight booking process on a mobile website.

Once the flow was defined, I sketched the main screens and screen states for each step of the main booking flow.

Excerpt of hand-drawn sketches of screens (and screen states) of the mobile flight booking website.

Design

After studying the problem and understanding the user’s journey, it was time to start designing. I created wireframes based on my previous sketches and research findings, which I then built into an interactive prototype to test the high-level flow, screen layouts, text, and basic interactions.

Overview of different screen wireframes designed for the prototype.

Once the prototype was ready, I gathered some users to run a usability test on my product. Similarly to the usability tests conducted during the research phase, users were tasked with booking a flight. They were very satisfied with the process overall, but found some pain points along the way, which I then took into account to make some changes on the first iteration of the prototype. Some of the main changes were the following:

1. The current step of the process wasn’t always clear enough, as the selection process for the outbound and inbound flights is almost identical, so I decided a progress stepper would be a good way to emphasize the change.
2. I added titles to the review cards, to make even clearer which flight the user is looking at.

Screen comparison: adding a progress stepper.

Screen comparison: adding titles to cards.

The last step of the process was to annotate the screens so they could be ready for an eventual implementation, detailing how different elements on the interface behave.