Overview

• User research and User Experience (UX) design for fictional challenger airline
• Professional Certificate in Visual/UI Design, UX Design Institute
• My contributions:
  • User research and analysis
  • Designing user flow, Information Architecture and navigation
  • Sketching and wireframing
  • Prototyping

This page summarises a very large project. If you would rather read the more in-depth versions, you can use the links below:

User research
Analysis
User flow, Information Architecture and navigation
Sketching the interactions
Prototyping and wireframing

Background

I have many years experience in designing and managing websites, but I became particularly interested in UX Design during my Interactive Design course. During my last contract, one of my colleagues in UX was kind enough to let me shadow him for a day. This confirmed my interest, so he recommended the Professional Diploma in UX Design by the UX Design Institute. I’ve now achieved the qualification, so I’m happy to present my project work.

Brief

Design an improved flight booking experience for the fictional airline FlyUX using this process:

• Conduct user research into current designs and the user experience;
• Analyse the research findings;
• Drawing on what you’ve learned about design principles and patterns design the:
  • Information Architecture;
  • navigation style;
  • user flow;
  • interactions;
• Present the design as an interactive prototype using a tool such as Axure;
• Finally, create wireframes for handing over the design to the developers.

Project

User research

My research included:

• Usability tests;
• In-depth interview;
• Online survey;
• Competitive benchmarking.

I conducted the usability tests on British Airways and Easyjet, using Camtasia to record the screen and my webcam to record the reactions of participants. The in-depth interview backed up the findings of the usability tests.

The online survey corroborated research finding most people book flights on desktops or laptops rather than their mobile phone. I therefore decided to create a desktop-based flight booking process, rather than one for mobile phones.

The competitive benchmarking revealed a lot of good and bad practice, but the key finding was the importance of constraints. British Airways allowed me to enter dates and routes they did not fly, wasting considerable time. EasyJet provided constraints, making their site much more user-friendly

This research proved that the UX of flight booking websites definitely needs improving, which would help the business case for funding. It also pinpointed many issues that could be fixed.

In-depth review of my user research

Analysis of user research

I organised the user research findings with an Affinity Diagram, then used this information to create a Customer Journey Map

We were encouraged to collaborate with others for our Affinity Diagram, so I recruited friends to review my research. We added our thoughts to stickies and added them to a wall. We then organised and re-organised them until we were satisfied and named the categories.

The Affinity Diagram helped pinpoint issues and good practice to transfer to the Customer Journey Map. This lays out the steps the customer goes through to book flights, along with the users’ goals and behaviours.

The Customer Journey Map was really helpful for developing the user flow in the next stage. It was also a useful reference document when building up other elements of the design.

In-depth review of research analysis

Developing the user flow, Information Architecture and navigation style

I began the process by adding stickies to my wall with my proposed Information Architecture and user flow. I rearranged them several times as things occurred to me.

After rearranging the stickies and creating many sketches, I developed the user flow. This was simplified further at later stages, but it was a very useful starting point.

Next, I developed the Information Architecture and sketched the home page. We were supposed to be purely thinking about navigation at this point, but things kept occurring to me about interactivity and marketing, so I added these too so I didn’t forget them.

I then began developing the navigation for the linear booking process. After several iterations of sketching out each stage of the process, I came to this general layout.

I found the user flow diagram particularly useful for this particular project. Although it was useful to sketch out the navigation style first, I could not help thinking about the interactivity at the same time.

In-depth review of user flow, IA and navigation style development

Sketching the interactions

My user research showed that the primary use case for such websites is booking flights, so this functionality takes the prime position in the top left of the page. I aimed to reduce the user workload by minimising clicks and using smart defaults (eg autocompleting the ‘Flying from’ field with the user’s nearest major airport).​​​​​​​

Rather than forcing users to click through lots of upselling screens, I prompted the marketing team to come up with persuasive messaging and personalised offers. For example, if the user is flying with children marketing could recommend a family-friendly hotel. 

Being asked for information they think is irrelevant is irritating for many users. I removed questions such as ‘are you travelling for business or leisure’ and added explanations when such seemingly irrelevant information is actually required.

These are just some of the changes I made to the booking process, compared to my benchmark companies. For more of my design decisions, you can read the in-depth of this section.

In-depth review of the interaction sketches

Prototyping and Wireframing

I created a medium-fidelity prototype in Axure, including proposed copy and offers (since I have a background in marketing). You can try out my prototype here: https://xneg31.axshare.com. The password is “Artichoke”. Several testers thought my version was simpler than other processes, so it would be worth developing a high-fidelity version for extensive testing.

In order to hand over my designs to developers, I needed to provide documentation including wireframes. These show the screens alongside detailed notes of how the elements should behave. I also added notes for the graphic designer and marketing teams. Ideally, I would sit down with the developers and discuss these documents with them.

In-depth review of prototyping and wireframing

Conclusion

I learned a great deal during this course, including the fact that I really like UX Design. It brings together a lot of my skills from digital marketing, communications and designing print assets. As I focused on a desktop site in this case, I went on to do the UX Design Institute’s course in Visual/UI Design, which concentrates on designing responsive layouts that work across smartphones, tablets and desktop.