UX Design Case Study
From Research to Interactive Prototype.
Location
Ireland
Date
2021
Tools / Tech
Adobe XD, Illustrator, Photoshop
Project Overview
This project was created as part of my UX Design Institute and UCD Professional Academy UX certification course. The brief was to design a comprehensive mobile booking app for an airline, covering the full UX process from research to interactive prototype.
Competitive Benchmark
I began with competitive benchmarking, analysing mobile apps from four major airlines. This provided valuable insights into:
- Industry best practices
- Common usability issues
- Opportunities to improve the flight booking experience
Note-Taking
During the research phase, I used structured note-taking to capture key observations. These notes formed the foundation for later synthesis.
Affinity Diagram
Affinity diagram sessions enable us to sort through large volumes of data and get to the root of our findings. In this document, I will use my previous work to create an affinity diagram representing what I have learned.
This work will help with further analysis and design decisions in future projects.
Customer Journey Map
A customer journey is based on the affinity diagram, structured on the analysis of your research data.
Flow Diagram for Mobile
This document outlines the initial design stage for the Fly UX mobile app. The focus of this project is to define a high-level flow for the mobile app, with an emphasis on one primary use case.
Interaction Design for Mobile
This project involves continuing the design process by sketching screens for the mobile app flight booking process. In subsequent projects, these sketches will be used to create a prototype and wireframes.
Interactive Prototype
The prototype demonstrates a streamlined booking process for a return flight from Dublin to Amsterdam. It is form of interactivity to test the high-level flow, screen layouts, text, and basic interactions.
The prototype was designed using Adobe Illustrator and Adobe XD. While creating it, I got a bit carried away drawing a logo and playing around with typography.
You can navigate through the prototype below, but please note that only a few functions are available, as the goal is to demonstrate the process of booking a return ticket from Dublin to Amsterdam.
Wireframes for Mobile
The final deliverable included detailed wireframes annotated for developers.