UX Designer Professional Diploma Project

UX Design Institute - Glasgow Caledonian University

Group 1221.png

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. 

The Assignment:

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

Usability-test_Monica.00_22_43_29.jpg
Phase1: Resarch

Usability test:

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.

Note taking: 

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:

  • goals

  • behaviours

  • pain points

  • mental models

  • contextual information

Phase2: Analysis

Affinity Diagram

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

Fly-UX-Affinity-Diagram.jpg
Fly-UX-Costumer-Journey-map.jpg

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:

  • Goals

  • Behaviours

  • Context

  • Pain Points

Browser@2x.png

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. 

​Link to Template

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. 

Objectives

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

Wireframe:

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. 

uxdiWireframe.png