Professional Diploma in UX Design
This case study covers the work I completed for the Professional Diploma in UX Design with the UX Design Institute. The course is accredited by Glasgow Caledonian University.
I studied this course because I see UX as a natural companion to my primary area of work – content design. I wanted to learn more about this area and complement my work in content.
Different stages of the project:
Research
Analysis
Design
Prototyping
Wireframing
Project overview
Introduction
The Professional Diploma in UX Design starts by providing a strong foundational understanding of user-centred design and user experience. You develop your understanding of the user experience design process and the steps involved. And then look closer at how each step fits together to create a full user experience.
The course consists of 10 modules. These are:
Introduction to UX Design
User research
Analysis techniques
Structure and navigation
Interactions
Design principles
Design patterns
Mobile UX
Workflows
Prototyping and handover
After completing these, you’re required to submit a final project and undertake an exam.
Project brief
The project brief was to design a new website or mobile app. This digital product was to offer users a fast, easy-to-use and intuitive online experience for booking flights.
The primary aim of this website or app was to focus specifically on the flight booking process. And look in-depth at how users:
search for flights
select flights online
This website or app
an online experience
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
1. Competitive benchmarking
It was important to acknowledge there are already many companies offering a flight booking system to users. Thus, it was vital to conduct a competitor benchmarking exercise to analyse the current market.
A key element I analysed was what other companies are doing well. And, how I could take those aspects and see if I was able to improve upon them. As well as airline websites, I looked at hotel providers as they follow a similar design pattern to airlines.
The airline websites and apps I looked at include British Airways, Loganair and Skyscanner. The hotel websites and apps I reviewed were Booking.com and Trivago.
2. Creating a user survey
After completing the competitor benchmarking, I then began designing a survey. I created this using Survey Monkey.
The primary purpose of the survey was to gain an understanding of the goals and aims of airline customers. The quantitative research results provided an understanding of how people use airline websites. As well as their habits and main objectives.
I decided to use a mix of open and closed questions, as well as multiple choice questions to maximise the data I was collecting.
I limited the survey to 8 questions. The reason for this is people often do not tend to enjoy completing long surveys. It also minimised the time people spent completing it.
3. Note taking and affinity diagrams
A fundamental aspect of research and working in UX is note-taking. Taking notes during two usability tests provided important insights. I captured notes while watching the test sessions on post-it notes.
Afterwards, I organised these notes and notes from the benchmarking exercise and online survey.
I then organised these notes into groupings and categories. This enabled me to create the final affinity diagram. With the categories defined, clear patterns emerged in the users’ behaviours and habits.
4. Conducting usability tests
Perhaps the single most important aspect of user experience is conducting user testing sessions. This provides you with the clearest insights and a first-hand look at how users interact with your product or service.
During this exercise, I conducted two user testing sessions. For these sessions, I created a:
recruitment screener
test script
interview script
user story
consent form
This experience was instrumental in showing what is involved in user testing. From start to finish when setting up, conducting and recording usability tests.
The data and insights I gathered from testing were instrumental to my affinity diagram and showing user behaviours. (You must request access to view the tests.)
5. Creating an affinity diagram
Once I had the data from the benchmarking, survey, note-taking sessions and user testing sessions, it was time to make sense of it all.
To do so, I set up an affinity diagram session to sort through the data. As there were large volumes of data gathered, I first organised it into relevant categories. I based this on the platform used to gather data.
After this, I organised the data into further sub-categories relevant to the airline booking system. I gave each category an appropriate name. This followed relevant aspects such as user goals, behaviours, pain points, mental models and contextual information.
6. Customer journey map
The customer journey map gives you the opportunity to further structure what your users’ journey looks like. This exercise is unique in that it draws on your research data. But, it requires a degree of thinking where you must identify gaps in the existing journey.
The customer journey map provides a comprehensive look at the users and the journey they’re likely to take when using your product or service.
After analysing your data, you’re able to identify what aspects of this journey they like and dislike. This provides you with key insights about the areas to hone in on when creating your website or app.
7. Flow diagram for desktop
By now, the data you’ve gathered and organised is beginning to highlight the areas for improvement when creating your airline website or app.
I chose the desktop platform to build my prototype as there is so much focus on mobile these days. I felt it was a great opportunity to look at a platform people continue using every day and often overlooked in comparison to mobile.
The next stage was to create a flow diagram for desktop. This high-level flow focuses on one single user flow through the journey to book an airline ticket. I began defining a high-level flow of what the desktop user journey will look like.
For this flow diagram, I had to define what different screens look like. As well as all user interactions the user makes during the course of booking airline tickets. The flow diagram includes user suggestions taken from the testing sessions and my online survey.
8. Interaction design for desktop
Another key aspect in the planning stages before building your prototype is looking at the interaction design for your product or service.
The purpose of this exercise was to create sketches that I’d then turn into a low to medium-fidelity prototype. This exercise involved me sketching out how I imagined the screens of my prototype would look in their final form.
The sketches are informed by the results from previous exercises. This includes data I was gathering and reviewing aspects of the user journey.
This is the stage in the project where I really began to think about what my prototype would look like. And what would be involved in the final designs.
As per the original project brief, I was tasked with creating an experience that allowed users to book airline tickets. This journey only had to go as far as selecting airline tickets. However, I designed a complete end-to-end journey to factor in all aspects of booking airline tickets.
9. Prototype build
The penultimate stage of the project sees you take what you’ve learned and create a functional medium-fidelity prototype. As per the project brief, it should be ‘clickable and functional' to the point you can test it with users.
The prototype is informed by the user journeys and flow diagrams I previously established. This exercise tasked me with adding more detail to this and creating a functional tool users were able to test.
I built my prototype using Figma. I approached the build from the perspective of creating what I viewed would be as close to a finished product as possible.
I included interactions enabling users to navigate from an airline homepage through to complete a booking for tickets. I also included pages enabling users to add upsell options. And choose which type of baggage they want to take with them on their trip.
10. Wireframing the prototype
As with anything you design, a crucial element is how you communicate the intentions of your designs. Without this, so much is lost when it comes to bringing your designs to fruition.
This exercise tasked me with creating wireframes for my finished airline website prototype. In these wireframes, I had to define all details of each function and feature. This was so developers picking up this project are able to build my designs accurately.
For each page in my prototype, I listed out each feature. I then explained it using plain English so any developer would understand the intentions of the page and designs.
Here, I drew on my experience as a content designer as it’s a pivotal part of my role to communicate clearly and in plain language. This was a hugely beneficial skill to have as it enabled me to clearly communicate my intentions.