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