HIGH FLY PROJECT MAY 2021

UX DESIGN INSTITUTE COURSE 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 - either website or app - over eight projects for a

In a previous role managing & developing bespoke enterprise applications the primary users were on office desktops, so here I opted for the mobile app route.

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

RESEARCH

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).

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
Customer journey map

ANALYSIS

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

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.

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
Wireframe screenshot, showing annotated detail design

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:

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

Email ali@haggushi.xyz

< back home