User Research project
Fly UX (mobile app)
August 2020
I completed This theoretical project for my UX Design Institute course where I had to design my airline mobile application. For this project, I achieved a grade of
35% / 40%.
1
Research the problem
2
Analyse the user's goals collected from the data
3
Sketch and design the user interface
4
Create a new prototype
TIMELINE
8 weeks
Starting from:
August 2020
SOLO PROJECT
For this project I did all the research and design
KEY GOAL
To develop my own airline app called Fly UX
Finished Prototype
THE PROBLEM
As a part of my UX design institute assignment, I was tasked with investigating issues with the mobile airline booking process. I then had to design my own airline app called 'Fly UX' based on the issues found in my investigation
Main problems found
-
The biggest problem is there is to be two different versions of the application which behave differently to each other and not all the content is on both versions. The app doesn't even make an attempt to explain this to the user.
-
Navigating to an employer to book a meeting is difficult
-
The app makes no effort to explain to the user that what employers you can search for depends on what career fair you select. It is not obvious that there is a connection between the two.
Research and main issues
Usability tests
This is the usability test set-up I used, a laptop with an external microphone to record the audio while I recorded the user's face on the laptop webcam. I reflected the phone onto the screen using Reflector 3 and then recorded the screen using Camtasia.
A usability test is where you observe a user using a product and you try to identify their goals, pain points, context and mental models with the product. Usability tests are a great way of obtaining rich qualitative data about a product.
After completing a usability testing session with a user and reviewing the 2 user testing sessions provided with the course I noted major and minor problems with mobile airline apps such as Ryan Air, British Airways and Aer Lingus. I felt these usability tests gave me a great insight into solving the problems with airline apps as I thought I understood the main problems with airline apps after these usability tests. This was due to the 3 users all having pain points at similar stages. Since this was one of my first usability tests to execute I began to understand what being an 'empathetic designer' is, which is understanding the issues your users are having. I watched the usability tests and took down notes of all the issues the users had.
Competitive benchmark
I benchmarked competitor products such as British Airways, Easy Jet and Ryanair. This is when you take screenshots of a product and say what is good and bad about each screen by putting the screenshot in a Word doc. I did this to gather an understanding of what the standard of the competition was so I knew where I could make design improvements. The benchmarking helped me see where there were problems with the current standard of airline apps and where I could improve upon them. I adopted some of the better design decisions with these apps such as Aer Lingus's Extras section for my own app
Surveys
I also collected data from a survey I distributed to 18 people online using Survey Monkey, this was another method of collecting qualitative data and I was able to collect it on a larger scale compared to usability tests, this helped me collect high-quality data quickly. I then included data from a survey that was provided to me by the course as the sample size for that was 47 people so the results were much richer in quality.
User's goals
Affinity diagram
After collecting the user's data from the usability tests, surveys and competitive benchmarks I analysed them into an affinity diagram as a way of grouping all the problems together. An Affinity diagram is when you put sticky notes on a whiteboard and try to group all the information together.
The categories I put the information into were;
1.Context,
2.Homepage
3.Hamburger menu
4.Calendar
5.Fares
6.Flight times
7.Flight summery
8.Adding passengers
9.Extras
10.Price
I could see from this diagram that my hypothesis about understanding the main issues from the usability tests was somewhat accurate, however, I was still happy to have the other data as it helped me solve those problems.
Flow chart
_edited.jpg)
I started designing the airline app by first defining the required flow to move through the app based on the research from the user's goals I extrapolated. Booking a flight is a linear process so the flow diagram moved through the information architecture in a direct route with no choices.
A flow chart is a diagram that identifies the primary and secondary routes of moving through the navigation of a product. It is a powerful tool that gives you a broad overview of a product.
This is when the benchmarking became useful to me as I had seen other apps that flowed really well through the information architecture and I felt confident that I knew what flows worked and didn't work for users.
Prototype, hi-fidelity UI and wireframe
Prototype
This is the prototype video I created from the Figma screens I made. Not every part of the app is interactive. It is 55 seconds long.
A prototype video is a walkthrough of how a product works which usually shows a medium-fidelity prototype being clicked through in order to show the interactions and flow of a product.
I was surprised at how long the prototyping actually took and I was happy that I sketched out what I wanted first as this speeded up the process.
Designing the screens so that they appeared interactive was tedious, I had to copy some artboards multiple times and make little changes to each one. Making the choosing seat section appear interactive was the most difficult task during this process as this section has a lot of details in it and showing how it should function wasn't simple.
High-fidelity user interface design
Once I created the prototype of the app and was able to see how it flowed so I increased the quality of the user interface while maintaining the architecture of the app.
I redesigned Fly UX in Figma and took inspiration from several concept apps I saw on Dribble. I decided to use a medium blue and orchid gradient as the background and Monserrate white for the text. On the homepage of the app, I overlaid the background picture with this gradient to create less contrast between the first page of the app and the homepage.
I felt like this colour pallet gave the app a more playful feel rather than a business feel which most airline apps such as Ryanair and Aer Lingus use. I think this style makes it stand out from other airlines apps but it might be too experimental for some users and may not align with a lot of companies ethoses.
Wireframe
Once I created the prototype of the app and was able to see how it flowed so I increased the quality of the user interface while maintaining the architecture of the app.
I redesigned Fly UX in Figma and took inspiration from several concept apps I saw on Dribble. I decided to use a medium blue and orchid gradient as the background and Monserrate white for the text. On the homepage of the app, I overlaid the background picture with this gradient to create less contrast between the first page of the app and the homepage.
I felt like this colour pallet gave the app a more playful feel rather than a business feel which most airline apps such as Ryanair and Aer Lingus use. I think this style makes it stand out from other airlines apps but it might be too experimental for some users and may not align with a lot of companies ethoses.
LESSONS LEARNED
What I would do differently If I was doing this project again:
1. After the flights are picked on the prototype I would add a confirmation overlay before the user progresses to the next section.
2. I would test the prototype with another user to see where it could be improved further.
3. I would make the final screen designs less experimental and follow a conventional UI style for airline apps add adhere to ios material design guidelines.
4. I would spend more time looking over each section and make sure there is enough detail and the presentation is adequate.
What I learned this completing this project:
1. Booking a flight is a complicated process despite it being a linear process, even experienced people who fly have difficulty booking a flight.
2. Sometimes the real reason for booking a flight is difficult is because the app or website has taken a sales centred approach rather than a user-centred approach. It was easy for me to develop an easy to use airline app because I didn't have any stakeholders to answer to that would influence the design. This meant that I had complete freedom to implement the dogma of useability into the app. However, in real life, I would have to make sure the app also makes as much money for the organisation as possible, even if it means adopting a less user-friendly approach. This is perhaps why some flight apps are so difficult to use. This sales centred approach feels like a way of hustling people into buying something that they don't want and it is hard to see this sales method of working in the long term as users will just use another product instead.