Embedded Files
From Friction to Flow:
case study
Dive deep into my design process.
I designed a booking service web application for the fictional company Hummingbird Airlines, 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 case study was divided on 4 stages: Research, Analysis, Concept, and Design.
My Role
UX Researcher and Designer, UI Designer.
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.
Key Takeaways
Tackled a common pain point in flight booking by using user feedback to streamline the process into clear, low-friction steps for an effortless booking experience.
Validated early concepts through usability testing, iterating based on confusion points in the booking process.
Created detailed design documentation to support a smooth handover, ensuring that developers and stakeholders could easily understand and implement the final designs.
The Project
You can interact with the latest version of the prototype here. For a better experience, I recommend using a computer to interact with it.Instructions:
- Book a flight from Berlin to London, from February 14th to February 19th
- Select the cheapest flight and cheapest fare
- Reserve a seat (A6) and add a carry-on bag for both flights
- Do not add travel insurance
- Log in and pay
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:
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.
Overall, airlines seem to be aware clients focus a lot on the price of the flight, some even provided easy to view comparisons.
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:
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.
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.
Excerpt from the screen annotations document.
Google Sites
Report abuse