Fly UX - UX & UI Design Project

Brief

A new airline has come on the market, FLY UX who want to design a website with a great user experience to help them stand out from other competitors in the market. An easy customer journey for anyone booking flights and leaving the user with a positive feeling from their experience.

please note this is a fictitious company as part of the UX Design Institute

Solution

The solution to the task focused on 4 processes Research - Design - Build - Test and through these 4 processes it assisted in creating a website built with the user as the main focus and delivered something to address and answer user requirements and needs.

Research

The research phase proved valuable in collecting customer data to really find out what a user wanted, what problems they had with current solutions and how we could help improve their experience of booking flights. Through usability testing, interviews, online surveys and competitive benchmarking a strong sense of what was required was attained.

Design

All of this qualitative data (and some quantitative) was then sorted and teased out using affinity diagrams, customer journey maps and flow diagrams leading to the process of interaction design and sketches to see how various screens on the website would actually look.

Build

Prototypes were built to see the website in action and see exactly how a user would flow through the process of booking a flight. Some more testing took place and some iterations to designs before finally creating annotated wireframes for developers.

Test

Building the prototypes of the various screens allowed for further user testing and continued design iterations.

Full overview

Below is a more detailed look at various phases of the design process, explaining a little more about the various steps taken.

Usability testing and interviews

To get an idea of users behaviours to achieve their goals, 2 comparative usability tests were carried out on 2 individuals. The users were asked to perform various tasks on well known online flight booking sites such as Aerlingus, Ryanair and Virgin and I observed how they performed these tasks, where they struggled and listened to their suggestions and what they liked and disliked about the websites.

Along with the usability test session various interviews helped find out the context the user was usually booking flights in and their typical behaviours and what goals they wanted to achieve. I didn’t want to assume every user was simply booking a flight every time they visited a site like this as the research showed many users use these sites in different ways - search for flights to compare prices, search for flights to get ideas of where to go on holiday, add bagging or other add ons to a flight already booked and also to check in to a flight.

Competitive benchmarking

Used to see what some competitors did well and also not so well and where FLY UX could focus efforts to beat the competition.

Affinity Diagrams

From all of the notes recorded in the previous sessions the data needed to be sorted in a structured way that would help analyse the users behaviours, goals and context.

A friend assisted with the affinity diagram discovery process over the course of 2 sessions and we got to work sorting through notes which were shared before the affinity diagram session. Compiling multiple post it notes and sticking them to a wall, we were then able to group related notes together and work out what this group was telling us. Through several iterations we then came up with suitable group titles to capture what each section provided.

Customer Journey Maps and Flow Diagrams

Continuing to dig deeper I could start working out how the website could possibly flow and look at how each customer goal could be achieved. Different steps were broken down such as searching for a flight and what a user would need to do in order to complete that task or how a user would search for an airport in a particular city. These ideas helped get a lot of what was in my head down on paper and really help visualise the flow of the website.

Sketches

Once I could figure out how different parts of the website could flow, I could then start to sketch ideas of what each screen might look like. Sketches were quick and rough to avoid blocking any thought process or ideas I might have had. These sketches were then refined and iterated on to produce screens that were good enough to move on to prototyping.

Sketching showed me how great a tool it can be and how helpful it can be to not jump straight into an app like Sketch or Figma and to flesh out the idea in bare bones before putting the visual touches to it and getting too attached to an idea.

Prototypes

Using Sketch and Invision, screens were created and linked together to produce a prototype of the website.

Wireframes

Wireframes were created with annotation for developers explaining exactly what each element should look like and how that element should act if it allows for interaction.

Live prototype

If you would like to see a live version of the prototype, please click below.

Contact Me

If you like the work you have seen and would be interested in working together on your next project get in touch below and we can talk through your ideas