The fictional airline flyUX was created as part of my diploma in UX Design at the UX Design Institute in 2019/20. The project objective was to create an air travel booking system that spans the entire UX process, based on comprehensive user research, analysis, and design.
In 2019, I decided to study with the UX Design Institute in order to deepen my understanding of UX and UI design. Their diploma in UX design offered me a year to practice and enhance my skills in user research, analysis, and design.
I've taken the knowledge and skills developed with my in my UX career. The processes and techniques I learned are ones that I consistently use in my day-to-day UX design career.
Any product with a good user experience comes from following a robust UX design process. UX is a problem solving discipline that requires a methodology to discover solutions. The UX process is never linear, it is iterative in nature. There can be considerable overlap between stages and some back-and-forth.
The following is a waterfall UX design process, which takes place over longer periods of time to tackle a macro issue, like a new product or major release. This could also be repurposed for Agile, by compressing the cycle into multiple smaller releases. Each sprint is focused on a smaller issue or individual feature, but the steps are the same. They are:
Before work can begin on a product, initial questions must be asked: is the product viable for the business, does it create or save money? Is it feasible to design and build, are the skills and technology available? And is it desireable to the marketplace, does it solve a problem that users are facing?
In this case, the product is already well defined. Booking airfares online is commonplace and our fictional product is entering as a competitor. This means that there are existing conventions that can be examined and assessed through research with users. It also provides an opportunity to improve on and perhaps challenge some conventions, in order to distinguish our product in the marketplace.
Research early on in a project is a very good investment. It helps to create a lens through which all design decisions down the line can be assessed.
This consisted of both market research and user research, in order to understand user goals, behaviours, and contexts. The research included both qualitative and quantitative studies.
I created a screener in order to ensure that participating users would provide the necessary insights. There were no limitations on demographics, however, users needed to have relevant product experience (must have booked a flight within the last 12 months). They also required minimal technical experience (e.g. must be a regular internet service user).
Usability tests put a user through a series of tasks with auser interface, under the supervision of a UX researcher. The research observes the user throughout, but limits directly influencing the user's action or behaviour.
These tests help identify problems with the design of a product, uncover opportunities to improve, and learn about user preferences and behaviour.
I created a script to ensure all desired topics were covered. Using this, I conducted two usability tests that consisted of a short interview, followed by usability tests of two different competitor airlines.
These tests helped reveal common pain points in the workflows of air travel booking. In particular, they highlighted some of the dark patterns used by airlines that frustrate users.
During one-to-one conversation with a user, researchers can gain deep insights into their users goals and contexts.
Again structured by a script, I conducted a single hour long depth interview. Following an introduction, we discussed in general about travel habits, before moving on to appoaches to booking flights. I investigated some specific recent examples and then probed these deeper, looking to find the main pain points or issues the user faced.
One of the easiest ways to gather user information, surveys are an inexpensive way to gain insights from a larger number of people. They can collect both quantitative or qualitative data, depending on whether the questions posed arestructured (e.g. multiple choice) or unstructured (e.g. open ended).
The power of numbers comes into play as more responses give greater confidence in the validity of the answers. It also allows researchers to draw on broader audiences, who can offer different insights.
For example, my survey was completed by people who primarily travelled with family or solo for pleasure, and those who mostly travelled for business. It was clear that different groups had very different priorities when it came to booking a flight. Open ended questions gave users the opportunity to write at length about their thoughts. While not used by everyone, the open ended questions revealed some serious pain points, as well as general suggestions for improvement.
A competitive benchmark is a useful technique to establish comparisons and performance benchmarks among competing products. It is useful in discovering conventions, finding what patterns work best, and discarding practices that should not be emulated.
I reviewed four different airlines in my competitive benchmark. I studied each page of their flight booking process and then compared them. I notated each with coloured points: red for pain points or poor design patterns, green for useful features and good design patterns, and yellow for other notes.
During analysis, I drew insights from the data gathered during research. This included providing structure to the research data and generating diagrams that outlined the current user experience.
An affinity diagram is a useful method of organising a large amount of data into groups, based on their natural relationships.
All notes taken throughout research were written onto Post-its and then placed on a wall. I then sorted each note by placed related notes together. Over time, different groups emerged to help structure the data. Some groups were focused on different stages in the flight booking process (homepage, baggage, seats selection, etc.) Others groups that emerged included the backend website logic, persistent UI features, as well as general design and style considerations.
The findings of an affinity diagram can be further refined into different representations of data. A customer journey map is a timeline of the user experience through the use of a product or feature. At each step, it is important to note the user goals, behaviour, and pain points. As a result, we can make an assessment of the mood of a user at each step throughout the journey.
In creating my diagram, it was clear that the majority of user unhappiness was in the middle of the booking process. This was something that needed attention, as it created a sustained period of frustration that could lead to users "dropping off" before completing the process.
Only after research and analysis can the product design truly begin. Keeping the data from users in mind constantly, I first started with high-level paper designs before developing the workflows of small interactions. Decisions about style, such as layout, colour, and typograph, were also made, before a high-fidelity prototype was built.
Interaction design is where we bridge UX and UI design and build meaningful interactions between the user and the product.
Working with pen and paper, I created a rough structure for each page of the flight booking workflow and notated the interactions there, including how each page is connected to the next. In this case, the structure is fairly linear as information is generally required at each stage in order.
Once an overall interaction design was established, I created flow diagrams for each page, including the components (e.g. date picker) and elements (e.g. input field).
These are branching diagrams that represent the variety of interactions available to the user, and how each interaction connects to the next, and how errors can be handled or prevented. For example, in choosing the 'from' field, users could manually enter the airport name, or enter the city and then choose an airport, or enter the country, choose a city and finally an airport.
Prototypes are mid- to high-fidelity models that show how the final product will look and how it can be interacted with. Visually, they should represent the product accurately, with the design layout, colours, typography, and even animations being depicted. A high-fidelity prototype should have enough interactions to test the user interfaces, interactions, and functionality.
For flyUX, I created a high-fidelity prototype that takes the user through the following stages:
This prototype was design in Adobe XD. It can be viewed and interacted with online here.
To assist developers in understanding the design specifications accurately, detailed handover wireframes are required. (The UX Design Institute uses the term 'wireframes' here, where conventionally they would be used for the low fidelity drawings created for Interaction Design.)
These wireframes cover several types of object:
The wireframes are notated in great detail to ensure developers have as little ambiguity as possible. Details covered include styling (i.e. the CSS), alternative states, interaction, animation, error handling, and more.
Validation is an essential step that should feature at multiple stages in the UX process. It helps teams understand whether their designs are working for their users. Validation should certainly occur after the high-fidelity prototypes, as these can provide more valuable feedback than low-fidelity models. Post-development, the product should be regularly monitored with different user tests in order to continually improve and enhance the product, while resolving user issues and pain points.
Some types of validation testing include: