For completion of the Professional Diploma in UX Design
Using UX Design skills to build a model airline website
The final prototype!
Enter the fully interactive airline website below - created using InVision
FlyUX takes off!
A UX challenge
Eleven projects were undertaken in order to complete this intensive undertaking for award of the Professional Diploma in UX Design, from the UX Design Institute in Dublin.
Each project formed part of a single case study - researching, designing and prototyping a website for a new airline (“FlyUX”).
Early parts of the case study focused on research and analysis techniques.
Later parts focused on design techniques, eventually leading to build of the full prototype for the finished website.
Provided below are links to a number of key projects which showcase the skills, mindset and experience acquired in becoming a UX Designer.
Applying the nuts and bolts of UX research
-
Competitive Benchmarking
The first step was to understand how best-in-class websites solve the problem users are trying to solve
• Understand the conventions to follow
• Highlight best practice to emulate
• Evaluate strengths and failings of different flight operators.
For this exercise I studied the websites for Aer Lingus, Ryanair, Norwegian and Expedia in depth and delivered the below report.
-
Affinity diagram
Learning how to run an affinity diagram session is one of the most fundamental skills in UX design.
In this project I reviewed all previous research, took notes, and used those notes to group data into appropriate categories. This enabled me to put structure on qualitative research undertaken so far.
-
Flow diagram for desktop
Having reached the design stage, the next step was to define a high level flow for the desktop website using Miro.
Multiple design flows were sketched by hand prior to creating the final flow diagram below.
-
Interaction design for desktop
With the high level flow arranged, I could now begin sketching the screens for the airline flight booking process.
The goals of this exercise were:
• Address all the issues and user goals identified during research and analysis
• Build on the flow diagram created in previously
• Learn how to use sketching as a tool for problem solving
• Learn how sketching is a vital step before prototyping or digital wireframing
-
Navigation
This project involved going one level deeper and designing the elements that would appear on the actual desktop screen for users.
The goal was to define a navigation style that would accommodate the users flow through the website.
The initial benchmarking exercise was a help for this project, as I was able to review the common styles from best-in-class airlines and use careful UX-informed judgments on the best styles to apply.
-
Designing wireframes
From rough drafts with pencil and paper to final versions using Sketch - wireframes were built with detailed technical language to describe each input type on screen.