Fly UX Case Study
A fictional project, mimicking the life cycle of the UX Design process,
as part of a certified Diploma at the UX Design Institute.
Challenge: Redesign and develop a user friendly flight booking process, for a start-up airline website.
My Role: Research, analysis, design, prototyping and wire-framing.
Step 1. Research
Competitive Benchmarking
As quoted in The Design of Everyday Things:
“Good designers never start by trying to solve the problem given to them: they start by trying to understand what the real issues are.”
This principle became the foundation for my UX Design work.
It was immediately clear that strong research techniques would provide a successful end result. With this in mind, I started researching competitor airlines. This research consisted of working through several airline websites, with the goal of discovering patterns, conventions, what to avoid and what to pursue.
Competitor research results
What worked well, worked great! The main conventions throughout the majority of airline websites provided for an intuitive process e.g. searching for flights on the homepage, flight class selection and entering passenger details.
The main point of difference was the flight results page.
Well designed navigation showed users where to go, allowing for an easy transition through tasks.
The less background interference involved, the easier it was to focus on the intended task.
Usability Testing
What does a flight booking process looks like through the eyes of a user?
What pain points were evident?
What did the user expect to see?
While conducting the test, I guided the user with open-ended questions. I allowed an adequate amount of space and silence, letting the user figure out the booking process instinctively. This was done in order to achieve my goal of understanding behaviour patterns, mental models and the natural website navigation.
“User research is actually the way by which designer is able to step into the shoes of the user and go along his or her path feeling all the stones on the way.” - Tubik Studio
Usability test results:
The effective use of conventions cost the user little or no thought.
Difficulties were established primarily on the flight results page, a page that varies in structure across different airline websites.
The unfamiliar appearance of the flights page resulted in confusion.
Users looked for more transparent prices, wanting to know precisely what they were paying for. They wanted to feel confident when paying.
Users expected the software to know their habits and personal details.
Online Surveys
Quantitative research was achieved through survey responses. I compiled a list of structured and unstructured questions, aimed at understanding users relationships with the flight booking process.
This survey was deployed as a method to gain concrete information on a large scale, representing the user, from the user. Confidence in my previous research was strengthened as patterns became evident.
Results:
Users were looking for a transparent booking process that was easy to navigate.
100% of user booked flights online and 73% using their desired airline website.
Checking flight prices was the main task completed by users.
Step 2. Analysis
Defining the problem using Affinity Diagrams and Customer Journey Maps.
Affinity Diagram
Previously gathered research from usability testing, competitive benchmarking and surveys needed to be unified. There was a high volume of data collected so it required an efficient and effective processing method.
As part of a team, we transcribed the collected data onto sticky notes. The approach we used was to place one idea per note. Collaboratively we began to organize these notes into relevant groups.
Results:
The flights result page presented the most difficulties for users.
Navigation was not always clear, in particular when a user wanted to proceed further after selecting a flight.
The flight homepage was conventional and caused little or no confusion.
An overload of options and offers overwhelmed users.
The ability to easily rectify user mistakes allowed the process to flow.
Symbols and icons were not easily interpreted.
Poorly designed navigation created negative experiences for the user. Raising the questions - Where do I go next? Where will it bring me? Will I lose the work I’ve already done?
What originally appeared to be an overwhelming amount of raw data was soon translated into structured information. Overall it proved to be a highly effective, fun and interactive task.
The advantages of team collaborations were clear to me. It was a great way of communicating with members, while they also gained insight into the project work. I highly valued the input from colleagues as it adds diversity of ideas and a greater overall understanding of the task.
Customer Journey Map
Patterns and issues have been established through research and a Customer Journey Map. The next stage is to visualize these findings on a map, creating an overview of the process.
The Customer Journey Map acted as a tool to view experiences through the eye of the user. As a UX Designer this insight is crucial. The greater the depth of analysis the more fitting the design can be.
Results:
The airline homepage was a neutral experience for the user. They navigated through the flight search bar and date selection with ease. This was the result of a conventional structured interface.
The flight results page was home to a high number of pain points. It was not intuitive, prices were misleading and there was often no flight summary.
The constant advertisement of additional extras created a negativity experience.
Most users selected the cheapest option available.
Users were not content with the flight class selection being an additional cost. Although it was expected, why not show this price at the start?
All users were able to fully complete the task they intended.
The outcome from the Customer Journey Map was a highly structured file, based on a large volume of research. This could be presented to other team members in an easy-to-understand manner, thus ensuring a shared goal.
Step 3. Design
Visualising the solution using a flow diagram, sketches and interactive designs.
Flow Diagram
The Affinity Diagram and Customer Journey Map have highlighted user issues. The next step is to define a high level flow of how the user moves through the software.
Results:
Conceptualising the users flow was a challenge as it was a very detailed process. However, the use of simple tools helped me navigate though this. Sketching was the most affective tool. As an artist, I instinctively try to solve ideas using pen and paper first.
With sketching, each new draft created uncovered a missed interaction from the the previous version. This activity continued until I reached a final version I was satisfied with. This was a vital stage in the overall process, which reduced the risk of overlooking important interactions.
Interactive Design
This stage of the project is all about finding solutions. Using pen and paper an ideal method for refining details created in the User Flow diagram.
Results
Sketching as a problem solving technique proved itself again. It was quick, easy and a low cost method of clarifying ideas. Similar to previous projects, there were drafts created, with each version becoming more detailed version than the previous.
The homepage must be conventional and familiar to the user.
Navigation must clearly guide the user through the next step. Do not presume the user will figure it out.
Language must be concise and well communicated.
The user must be able to focus on their intended task without an overwhelming amount of distractions.
Prices must be clear. Let the user know what they are paying for.
Offer the user an easy way to rectify mistakes.
Sufficient information must be provided, showing the user where they are and what they have selected.
Design Testing
Before investing valuable hours creating an interactive prototype, I designed a low fidelity paper version. This is cost-effective and a useful way of identifying any undiscovered issues. It is a fun and interactive stage of the project that gets other members onboard.
Results
The homepage structure was immediately familiar to users.
Users clicked the destination bar first. They did not search elsewhere as they instantly recognised the first step.
Navigation buttons were clear and easily discovered.
Flight selection page contained more micro tasks but they were all completed without difficulty
The user clearly understood how to select a flight, select a business class option and how to move forward though the process.
As expected, with a low fidelity design, users experienced limitations. Most importantly the main user flow was achieved and completed.
Step 4. Prototypes & Wireframes
Designing the solution using Prototypes and Wireframes.
Prototype
Most of the problems had been resolved at this point. The prototype used is an interactive representation of the solutions to these problems. Paying attention to detail since the beginning of the case study, made the design process much easier to develop.
Main findings
Investing time into the research and design stages was worthwhile. This became evident when I tested the prototype with usability tests.
I carefully observed users, watching them flow through the interface, completing their task with ease. As it was a medium fidelity design, lower level pathways were limited. However, the main user flow (established with the flow diagram) functioned with intuitively.
Wireframe
Before handing the prototype over to fictional developers, a wireframe had to be established. This annotated document would act as their blueprint. I paid close attention to detail when describing how the interface would respond to the user. It was crucial to leave nothing to presumption for the developers. The wireframe also acted as another opportunity to work out any lingering design issues.
The following areas are sample topics from my annotated wireframe:
Where CTA’s send users.
Limitations and constraints e.g. User must complete a field before continuing, only numeric digits allowed.
When and how to enable/disable functions.
Error and verification feedback.
Default settings.
Responsive states e.g. Highlight on hover, drop-shadow on selection.
Conclusion
Conclusion and opportunities for improvement
Moving forward to my next UX project I will ensure to create smaller categories within the Affinity Diagram. The larger groupings meant more work in the following subsequent sections of the project.
The value of Low Fidelity Design: Testing the design with paper cutout’s proved its worth. It aided me in further refining details of the user flow. This helped avoid the situation of previously unidentified complications during the design time.
As a UX designer it is my intention to achieve their goals as seamlessly as possible. To do so, I must thoroughly understand the problem. Focusing on understanding the problem from the very beginning, with in-depth research and analysis, resulted in an overall successful outcome.
“Creating an interface is much like building a house: If you don’t get the foundations right, no amount of decorating can fix the resulting structure.” — Jef Raskin