UX Design project

To learn more about the UX Design proccess, I enrolled on a 6 month course with the UX Design Institute. The brief was to make improvements to an airline booking system over eight projects. I chose the mobile app route, completing this course on my own with feedback throughout from the course mentors.

Course & Personal Objectives

Design a new mobile app for users to search & select flights online.

Apply course learning to the UX design proccess, documenting the work & iterations throughout.

Research then design & build an interactive prototype for further testing, and a set of wireframes.

Learn new software. Having previously used Adobe Creative Cloud, I decided to use applciations that were new to me.

Approach to the Design Proccess

Research, Define, Design, Prototype & Validate - process

Research completed

I conducted competitive benchmarking to learn about best practices & industry standards. I quickly discovered there were patterns across various apps and noted my findings, including areas I wanted to improve (primarily around baggage information). The key areas I focussed the benchmarking on, based on my personal flight booking experience, was: overall / return trip UI navigation, baggage, fare comparison and flight schedule inforamtion.

Usability testing was conducted with friends & family across various sessions. I was lucky with timing as Covid-19 restrictions had recently eased allowing me to meet users for this part of the project in-person - it would have brought more challenges doing it remotely if the user is not confident with the necessary screen sharing / casting software.

An important part of the UX proccess is note taking. I improved my skills at capturing detailed, concise and relevant information from the various testing & interview sessions. Re-visitng the notes, I filtered and typed them ready for the next step.

Tools used: Affinity Photo Reflector iOS Screen Mirror Quicktime Pen & paper

Screenshot of user testing on mobile device, with webcam

↑ Mobile app user testing

Customer journey map

↑ Customer journey map [open]


Analysing the notes in a structured way to create an affinity diagram was the next exercise, also new for me. By grouping my qualitative research, the goals, behaviours, pain points, mental models and contexts became clearer. I partnered with a friend for this task, which brought extra perspectives to the results.

View Affinity Diagram

The next task was creating a customer journey map. This was the first time I had done one, but it would have been very useful in some previous projects! Hindsight aside, I really enjoyed seeing the structure of the (sometimes chaotic) research form.

View Journey Map

Tools used: Miro Figma Pen & paper

Conducting structured research was valuable, and the proccess insightful. It enables informed design decisions to be made.

Design Phase

Moving from the research into design stage, I developed a flow that focussed on the main use case and resolved some of the issues I identified. This high-level flow diagram was done by hand, revised and then digitised. (And revised again!)

Then, I sketched interaction designs based on my flows. Doing this task with pen & paper kept revisions & progress fast, particular for the layout & interaction challenges I faced. The main changes that evolved through this procees was the filtering and booking layout & flow.

Working from sketches, I created an interactive prototype using Figma.

View prototype

Lastly I created wireframes to pass on to the hypothetical development team. My front-end experience helped me to understand the technicalities & requirements, although it was still a time-consuming task. Knowing exactly what's expected from wireframes boosted my understanding of the UX Designer's role.

Tools used: Figma Affinity Designer Pen & paper

User flow diagram

↑ User flow diagram [open]

Wireframe screenshot, showing annotated detail design

↑ Wireframe screenshot [open]

Project Review

Although I had worked on flows / wireframes / prototypes before, the proccess I learned on the course (along with the coursework) gave me better understanding, confidence & ability.

I liked learning / using Figma so could have saved time by keeping the prototype to a lower fidelity.

Based on further testing, there are some key changes I'd make if iterating further:

  • On the tickets I have a timeline / bar, but it's not obvious. I would consider affordances, text labels, or redesiging this information entirely.
  • The baggage booking proccess could be better designed into the flow because although the information availability is improved, it could get complicated within the booking proccess for certain scenarios.
  • Instead of using a modal to display all filters (requirements), I would instead list them horizontally (scroll overflow) with individual modals. I think that would help keep the user 'closer' to the results (tickets)

Before finishing the course, I used the new skills on live freelance projects, so it's definitely paid off.