FLY UX

Client:
UX Design Institute

Roles:
UX design, UX research, UI design, Workshop facilitator

Tools:
Figma, Sketch, Axure, Miro, InVision

Overview:

In order to receive my Professional Diploma in UX design through the UX Design Institute, I was required to create this full scope case study on airline websites. I took the project through the entire design process from research to prototype and everything in-between in order to create a simple and seamless flight booking experience.

After conducting a poll on a wide range of people, I decided to design for desktop as the vast majority stated that they prefer booking flights from their computers rather than their smartphone.

FLY

UX

research

I focused the majority of my research on usability testing and card sorting as I did not have access to certain analytics software for this project. I conducted and observed 3 users and a total of 6 usability tests. In an effort to standardize the data as much as possible, I created a single script that I used for each user. The usability test served to get a better understanding of the mental model of each user beginning at the homepage of popular airline websites and ending once the seat selection was made.

To ensure I was able to obtain an appropriate amount of quantitative data, I had each user go through two different popular airline booking websites. This way, I was able to get a better understanding of each user's mental models and preferences by allowing them to compare the two sites. From there, I was able to accrue enough qualitative and quantitative data to begin the card sorting process.

I have attached my notes from one of the usability tests below:

ANALYSIS

Card sorting

Each user was assigned two colors - one for each usability test they completed. From there, the arduous process of card sorting began. I was able to convert my notes into mental models for each user. Things they had said, frustrations they had, expected and unexpected features were all on the table. Eventually I was able to condense these mental models into 10 clearly defined main categories listed below:

  • Site Navigation

  • Clarity Wins

  • Site/ Company Specific Terms

  • Ads/ Promotions

  • Visual Features

  • Upselling

  • Overwhelming / Unnecessary Features

  • Location Services

  • User Interests

  • Unclear Pricing

The affinity diagram approach helped me to be able to have a visual of the overlap, or lack of overlap in each user's mental model, as well as the site the users were on at the time of the note. This allowed me to create a detailed customer journey map as well as wrap my head around the best way to approach the flow diagram.

User Journey

Starting with the user's first thoughts of traveling in mind, the user journey map was designed to highlight the typical wins and frustrations associated with the flight booking process. I created a current-state user journey map, to identify opportunities for improvement. It was quickly identified that the flight selection and seat selection flows had the most friction across the board. By focusing on these two sections, I sought to eliminate needless distracts while elevating the features that the users expressed they actually look for during this stage of the process. This would lead to a less confusing, faster checkout experience contributing to conversion rates.

Using Miro, I then translated my findings to the ideal flow as seen below:

“If something requires a large investment of time—or looks like it will—it’s less likely to be used.”

-Steve Krug, Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability

DESIGN

Sketches

I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, the business goal, and the heuristic evaluation. They each pointed to the fact that there were too many distractions in the flow. I referred back to the sketches throughout the entire design process to make sure that I don’t lose sight of our primary goals and ideas.

Writing notes on the initial sketches allowed me to have many of my thoughts jotted down in one space to reference when it came time to wireframe.

Wireframes

In order to have the clearest communication possible between the UX designer and the developer, I believe that a well designed wireframe should abide by the following principles:

  • Define how the system behaves

  • How it responds to actions

  • How it communicates results

  • How it helps fulfill intentions

Using Sketch, I translated my first sketches into low-fidelity wireframes. I looked through each page and thought through all the possible journeys a user could take through the site. I then made sure to define each of these possibilities using the above principles. I made a point to not replicate each note that would appear on duplicate screens - minimizing the clutter of the wireframe, while maintaining the detail needed.

Testing

Prototype

For the final prototype, I translated the wireframes from sketch to Figma, where I was able to create a more aesthetic experience while keeping the project within the parameters of a low-fidelity prototype. For inspiration, I looked into competitors websites as well as sites outside of the airline space, however in an attempt not to veer too far from my wireframe, this was mainly used to create the aesthetics.

Below is a link to my prototype

Next steps

Since this case study was never intended to be put into production, I was not able to do the amount of backend testing that I would have liked to. However, getting feedback from professors and peers was very helpful in refining the site and led to multiple iterations before landing on the final prototype.

If the site would have gone live, I would be interested in monitoring user analytics such as conversion rates and time per section. This would bring the project from the design > prototype > validate loop into the build and test phases. After all, is a project ever truly complete?