Introduction
Recently the demand for UX Designers has soared, as companies have begun to realise the importance of user experience design in designing products and services. Even though there are numerous opportunities being advertised for UX Designers, there are very few professional UX Design courses available. The UX Design Institute partnered with Glasgow Caledonian University to provide one of the only UX diploma courses in the world.
This online diploma course from the UX Design Institute is a mix of informative videos and hands-on projects. The videos explain the UX Design process while the projects provide the opportunity to practice and get familiar with the numerous steps involved in the process. The overall assignment for the course is to design the user experience for a new airline, flight booking mobile app.
Research
Research is the first step in the ux design process. The goal is to discover what problems my product should be solving. During this stage, I aquired both qualitiative and quanititave data from competitive benchmarking, an online survey and a usability test. The usability test is the most rewarding form of research as it allowed me to observe how a user interacts with a competitor application physically and emotionally.
Competitive Benchmarking
The objective of competitive benchmarking is to investigate how best-in-class websites and apps solve the problem we are trying to solve. This is done by identifying common conventions to follow and highlighting best practice that should be emulated.
I reviewed four flight booking apps and benchmarked the best-in-practice and features using traffic light colours to represent Good, Expected and Bad. The images below are pages from my competitive benchmarking document.
Online Survey
Usability Test
Usability testing is the most powerful tool in UX design. Gaining unique insights directly from a user can influence the design decisions made during the ux process.
The aim of a usability test is to gain deep, qualitative insights into the user experience of existing apps. Before testing a user I first needed to define my objectives and outline what I wanted to achieve. I needed to create a consent form and write a script to structure the interview.
After the initial depth interview, I presented the user with a comparative test. The user needed to complete a set of outlined tasks for two different airline apps, Aer Lingus and Ryanair. During the usability test I observed how the user interacted with the airline apps. I also learned about the users goals and behaviours when booking flights.
Analysis
Before designing the screens for the app, I first had to consider the structure and flow of the app. How did I want the user to flow through the app? Information architecture is the technique of sorting and structuring content on a websit or app. Creating clear and structured navigation is essential in designing a user experience.
Affinity Diagram
While reviewing all the research data, on Post-it notes I took notes of valuable insights such as user goals, behaviours, pain points and mental models. These notes represent everything I felt was relevant to the current user experience. (Ideally I would have organised an affinity session with several other people, however that was not possible due to lockdown.)
The purpose of the affinity diagram is to put structure on qualitative data. Once the notes were spread out on the wall, similar and related points were organised into groups known as clusters.
Customer Journey Map
The customer journey map builds on the data collected from the Affinity Diagram. I organised the data into a step-by-step format to outline how the user felt during the booking process. At each step I recorded the user goals, behaviours, context and pain points. The customer journey map is useful for pointing out the areas of the experience that needs to be improved.
Mobile Flow Diagram
To highlight all the issues from the Customer Journey Map and the Affinity Diagram, a high level flow needed to be defined for the new flight booking app.
Firstly, I sketched the flow diagram by hand before recreating the final document in a digital format. In the diagram each screen is represented by a square while the screen states (such as clicking a button) are represented by a circle. The flow diagram will be a helpful guide for sketching the screens in the next stage.
Concept
Interaction design for mobile
Now that I have researched and stated the problem, it is time to start designing the solution. Using the information gathered from my research and analysis I know what areas of the mobile app to focus on.
Building on the flow diagram I created previously, I needed to sketch the mobile screens and screen states to demonstrate the user flow for the flight booking process. All the issues and user goals identified during the research and analysis stages need to be tackled before designing prototypes or digital wireframes.
I sketched out several iteration of the screens and screen states (each more detailed than the last) to ensure the best user experience during the flight booking process.
Design
Low-fidelity prototype
After sketching each screen and screen state I improved them to medium-fidelity in Adobe XD. After making a few adjustments and finalising the design, I created a working prototype using InVision.
This prototype would be tested with potential users before validation.
Medium-fidelity wireframes
Wireframes contain all the information the development team will need to build the app. The wireframes are detailed instructions describing the purpose and functionality of features and interactions. The developers shouldn’t need to guess how a button works or fill in the blanks between screens.
Alexandra Galvin 