Shane Mc Carthy
GIFbrowser-mockup.gif

FlyUx

FlyUX Web app Design

FlyUx Web app

 

Overview

  • Feb - July 2022

  • Academic Project

  • Team: Shane Mc Carthy (UX Designer & Researcher) [Keith Cannon, Marc Nixon (Research collaboration)]

Roles & Responsibilities

  • User research and analysis

  • Designing user flow, Information Architecture and navigation

  • Sketching and wireframing

  • Prototyping

Tools Used

  • Figma

  • Miro

  • Camtasia

  • Adobe Photoshop

  • Google Docs

Context

My client within this project was a fictional start-up airline. They were looking to create an online experience through a web app that is fast, easy and intuitive: one that’s based on a deep understanding of their target users.

An airline was chosen for our case study, because “the industry is packed full of bad design. It’s a space that clearly needs UX.” We were advised to look at what other airlines are doing, learn from their mistakes and take inspiration from the things they do right. Using that information to focus our research and ultimately improve our designs in the process.

Goal

The end goal of this project was to design and build a clickable prototype that could be tested with users, along with a detailed set of wireframes.

I was tasked in this project to design a new website for an airline client. In this I focused specifically on the flight booking process: how users search for and select flights online. In doing so, navigated through the full UX process:

 

The Process

 
 
 

Research

Note taking & Usability tests

To gather important qualitative data, I organised two usability tests for competitor websites (Aer Lingus and Eurowings).

My role in this phase included note taking and moderating the sessions, while the users were expected to perform a task: to book return flights for themselves and a companion, using the two chosen websites.

The results confirmed some shared frustrations about unnecessary add-ons and fare options, bag policies and price increases.

I identified and recorded all information relevant to context, mental models, negatives and positives in preparation for further analysis.

 

Affinity diagram & Customer journey mapping

Collaboration was encouraged for the affinity diagram phase of the project, so we formed a group to organise our user research findings into an affinity diagram and ultimately create a customer journey map.

This was achieved through in-person research and online collaboration sessions using Miro.

 
Every notification must be relevant, add value to the user and help them achieve a goal..
— userpilot

Customer Journey Map

Design a solution

 

Flow diagram

Before any screens could be designed, I established the high-level booking flow for the website (from homepage to payment/confirmation). I had to consider each step the user would take and design each screen, state and interactions while addressing all the issues from the customer journey map. This helped to lay the groundwork on which the design would be built upon.

The flow diagram was initially sketched by hand in quick iterations and then improved upon digitally.

 

Interaction design

Sketching iterations for the screens of the desktop flight booking process. This phase was all about using the previously gathered information to generate ideas, using the results from the previous flow diagram as inspiration. I focused mainly on addressing all the key issues previously identified, whilst remaining mindful of user goals.

These sketches were a useful tool to look into multiple different possible solutions, quickly - before converting into a prototype and wireframes.

 

Medium fidelity screens

When trying to understand the competition and best task reminder features out there, I researched examples that streamlined the process, while others complicated the experience


Final Prototype

Link to full figma file here

You’ve got a really nice level of interactivity.
You can really see how your flow diagram has really impacted a lot of your decisions
— UX Design Institute
Very user friendly and intuitive overall

Wireframes

The visible connection between the designer and developers: wireframes. These were required to contain all pertinent details, therefore removing the guesswork and assumptions while building the app.

 

Full FigJam file here

 

Conclusion / Key Takeaways

As my first UX project this has provided invaluable insight into every aspect of the world of User Experience design. Through this I was able to successfully learn many new skills. My prototype and wireframes received very good feedback from tutorsIt was an eye opening experience an I learned some important lessons:

  • The weight and importance of user research and its’ ability to help you to understand and empathise with your users.

  • For designers it’s important to try not to fall into the trap of the false-consensus effect, projecting their behaviors and reactions onto users.

  • Trusting the process and following it step by step will help achieve the positive results you’re looking for

What I would do next / differently

There is always room for improvement and we are always learning. This project is surely no exception. I believe it could benefit greatly from:

  • High-fidelity iterations and a greater emphasis on UI

  • Further testing, especially Usability Testing should point out where further improvements could be made.


More Projects

Snapfix Internship

Art Gallery

Shanghai Map Design