UX Designer Professional Diploma Project
UX Design Institute - Glasgow Caledonian University
This project consists of work I did for UX Design Institute - Glasgow Caledonian University as part of a 6 months training, to become a certified UX professional. I had to folllow the real life cycle of a UX project during the course, covering topics such as UX principles, user research, analysis frameworks, interaction design, prototyping and wireframing.
Conduct research on existing flight booking websites and use your findings to design a user-friendly flight booking web application.
Duration: 6 months
Tools: Adobe XD, Miro
To kick-off the project, I started with Usability testing and Depth - interviews.
The first step was to define my objectives and define exactly what I wanted to achieve from the Usability testing. I created a test script for desktop usability testing. Finally I conducted two desktop Usability test sessions.
My main objectives with the research was to:
Learn more about the context of use of people that use airline websites or apps. What are they trying to do; who are they with; where are they; what devices are they using?
Learn about the goals, behaviours and context of airline customers when booking flights
What are the pain-points during the process, discover where and when users feel empowered and frustrated during the journey.
Learn what kinds of problems will likely cause the user to leave the website.
UXDI provided me two additional Usability tests, that was done around the same topic, testing AerLingus and Eurowings websites. I have taken notes, everything that I felt relevant to describing the current user experience:
Next, it was time to start making sense of the data. To do that with the help of my colleagues from work, I made an Affinity Diagram session. This session was a great way to sort through large volumes of data and get to the root of my findings.
Preparation for the Affinity Diagram workshop
Of course before the workshop I printed all materials and made sure we have all the tools such as sticky notes and pens what we need.
I was planning to digest three Usability test and a Competitive Benchmark document, which was also provided by UXDI.
Affinity Diagram workshop
Duration: 4 hours
First we worked individually, we wrote each point down from the research, that we thought are important on post-its.
Each of us presented shortly in 10 minutes the summary of the research what we worked with.
We stuck the post-its onto a big white - board and tried to look for patterns and sorted them into categories.
We gave each group a name
After the workshop
Duration: 3 hours
After the workshop I digitalized the material, using Miro.
My main goal with the individual exercise was to
create sub - categories and look for more patterns
label the individual notes, with customer emotions
Customer Journey Map
I took the information from the affinity diagram and organised it into a step by step view of the journey to show how the users felt at each stage.
On the Customer Journey Map I was focusing on the user:
Fly UX Customer Journey Map on Miroverse
I am very proud, because the Miro stuff has picked my customer journey map and it is avaliable on Miroverse and can be used as a starter template for the Miro community.
Phase 3: Design
Flow diagram for desktop:
Using the findings from the research and analysis, I created a flow - diagram. My overall objective was to fix the issues I have uncovered, which are highlighted on the customer journey map.
Define the high-level flow for booking flights on my new airline website, on "Fly - UX"
Address all the issues highlighted on the customer journey map
Lay the groundwork on which I’ll build designs in upcoming projects
Desktop Interaction Design:
In this project, I continued the design process and sketched the screens of flight booking process. So far I’ve
done a lot of work understanding and articulating the problem, now I was ready to get into “solution mode” and start solving that problem.
Build on the flow diagram I created in the previous project sketch the screens and screen states for users flowing through the Fly UX desktop app
Address all the issues and user goals identified in my research and analysis
Use sketching as a tool for problem solving
Use sketching as a vital step before prototyping or digital wireframing
Medium Fidelity Prototype:
After sketching each screen state, I could than design each screen state in medium fidelity form to create a prototype. This prototype could then be fed back into a testing / validation phase and iterated over time for improvements.
In this project, I created wireframes for the Fly UX desktop application, from the homepage up to and including seat selection. The wireframe is made to defining the extra details that developers need to build the product accurately. My main objective was to make sure the wireframes contain all the necessary detail a developer would need to build the application accurately.