Project Overview

This high-fidelity prototype was created in Sketch, and it represents a final product resulting from my process of conducting surveys, cross-competitive analysis of other flight booking apps and conventions, in-person and remote user testing, affinity diagrams, customer journey maps, and even hand-sketched, paper prototypes. Even though many positions will ask for these skills and research techniques, I have found in many UX Design positions in the "real world" companies usually do not budget time for the entire UX Research and Design process. I wanted to do this project for myself so that I could go through all of the processes that most positions do not allow for so I could solidify my UX Design and Research skills.

Visually, I made the choice to create this high-fidelity prototype in a “dark-mode” aesthetic, because for a good period now, dark mode design has been trending in both web and mobile design, and I wanted an opportunity in adapting different brand colors to this design style.

The UX Design Process I followed was as such:

Defining The Problem

The goal in designing this flight booking app was to address customer needs in both functionality and efficiency, decreasing error and increasing consumer trust in booking directly through the airline website.

I selected the commercial airline, Alitalia for my case study. My initial observations, were that website errors and dead end functionality were one component of Alitalia Airline’s failings and a general sentiment of consumer distrust.

I started this process not only identifying problems directly on the Alitalia site itself, but by also employing a very important methodology that seeks to aggregate problems from other sites within the travel and booking industry: Competitive Benchmarking & Analysis. >>

Competitive Benchmarking & Analysis

When beginning to research a product and its problems, the most commonsense, yet insightfully high-yielding approach is to perform Competitive Benchmarking. This simple, yet tedious task involves thoroughly analyzing a sampling of competitors in the industry.

After using and comparing several airline website’s booking features, I compiled a document of notes on 4 different travel and booking websites including Alitalia:

My main goal in this research task was to:

• find out what mistakes competitors were making, and what they were doing right

• take inspiration from what they were doing right, and build upon those findings

• gain deep understanding of conventions and best practices in the industryClient Feedback

By accomplishing these aims, it provided a helpful springboard from which to design, gave me an in depth view of consumer needs, and maximized my design time.

Online Surveys & Usability Tests

Another research technique I employed to gather data was a simple 10-question online survey, made up of mostly quantitative questions. One useful observation I made while creating this survey is that asking users what gender and age they are was not important. It would be more useful to craft questions that involve a user’s goals, behaviors, or context in relation to the task instead.

The most comprehensive and insightful research technique I utilized while conducting research was usability tests. I conducted 3 user tests that were under an hour. I interviewed users as they navigated a selection of booking websites, and made notes afterward while I reviewed the footage.

I collected these data points from the surveys & usability tests, and compiled them into observations that I added to my Affinity Diagram>>

Affinity Diagrams

Data gleaned from customer surveys and user tests can often appear like an overwhelming galaxy of vast information. However, one method of organization that can help turn qualitative insights into valuable data points is the mapping of Affinity Diagrams.

This affinity diagram was created from notes and data collected from a series of customer surveys and user tests that I conducted. My goal was to define pain-points and problems users faced when using a variety of flight booking apps. I conducted quantitative online surveys, and then more qualitative interviews and user tests. I took meticulous notes from these sessions, recording the impactful or frequent observations made, and then sorted the data with an external participant so as to inject fresh perspective into the data mapping. The result was a robust map with vivid insights at every stage of booking process.

A powerful quality of affinity diagrams is that they can be done as team, where they activate members, and give everyone, no matter how timid, a voice.

Another advantage is that affinity diagrams can be achieved in-person or remotely, and done in very little time. They not only serve as a time-efficient tool in sorting and giving clarity to data, but they can also quickly achieve group consensus, project-onboarding, and the understanding of project goals. Though it can be very intense, it is one of my favorite parts of the UX Design process because of how many valuable assets are gained for a teams or individuals. There is no better collective accomplishment than taking your hard-won data through this process, and gaining valuable insights, structure, and team momentum on the other side.

Customer Journey Map

After organizing data points within an Affinity Diagram, I structured them within a Customer Journey Map. My aim was to go through every touchpoint within the booking process, structure it step-by-step, and find pain-points along the way. This customer journey map provided a comprehensive overview of user actions, and a blueprint for how to improve upon them.

User-Flow Diagram

Before building the prototype, I wanted to define a high-level user flow for the primary booking feature. After uncovering issues in the customer journey map, I wanted to ensure I had an overview of how users would flow through the design, and what interactions would take place. By creating this user flow diagram in Sketch, I was able to address all the issues highlighted previously, and lay the groundwork on which I would base my designs on.

Initial Sketches and Prototyping

Sketching by hand and paper prototyping was used to explore any other issues or options for screen states before building in sketch. Sketching can act as great tool for problem solving, and quickly iterating ideas without being too “precious.”

High-Fidelity Prototype

After completing my research and analysis, I moved on to my building phase and produced a clickable prototype within the brand colors of Alitalia to be used for testing and deployment. The intention is for this iteration to be deployed, and further refinements can be made as part of an agile development process. After making this prototype, I prepared detailed notes on these screens and compiled them into my Wireframes for Developers >>
.

Wireframes for Developers

An important step in the design process is the annotation of design screens detailing functionality before passing off to developers. Decisions about screens states and function must not be pawned off to developers, and by preparing a wireframe document as an accompaniment, questions and ambiguity are minimized, and the design process runs smoother for the design team.