UX Design process (course project):
Boarding.com
A simple, contemporary, user-friendly site enabling clients to reserve a flight devoid of the clamor of bombarding sales promotions.
Sole designer - 6 months
Tools used:
Figma
Zoom
Miro
Slides
Camtasia
The why.
The intention behind this website's design was twofold. Primarily, it aims to facilitate a hassle-free flight booking process, and secondly, to downplay the prevalence of promotional advertisements which were identified as a key nuisance from our study.
Objectives
Smooth sailing
Reduce the dominance of advertisements and promotions.
Using our advertisements to create a more aesthetically pleasing back drop for the user.
Entice flight bookers with exciting images of possible destinations and the deal we have.
Refining the necessary
Introduce an interactive offer slider that is timed to display new offers and also clickable.
New offers display a new back drop for user. If the user likes what they see they will be brought straight to the reservation page for the offer that they have selected.
End product
Create an online platform that remains visually appealing, while integrating essential ad features and marketing deals crucial for augmenting airline businesses' income.
The how.
Research phase
Airlines
Analysis
Competitive analysis was conducted on 3 airline websites and also 1 airline aggregator website:
— Ryanair
— Aerlingus
— Etihad
— Skyscanner
The data collected throughout this analysis was categorised into the below three areas:
— Clear feature/element
— Areas for improvement
— Not clear, nor useful element
A link to this research can be found here
Takeaways
This study was hugely informative. These aviation firms were industry leaders and shared many common tactics in their website design and layout. Usability was paramount, with their features being remarkably intuitive. Their marketing strategies varied somewhat however, with Ryanair placing heavy emphasis on deals and promotions, whereas Etihad aimed at a more luxurious experience, seeming less reliant on offering discounted fares.
While I took in some very important points myself whilst analysing competitors, I wanted to gain insight from another user so that my thoughts were not bias. I organised a usability test with a volunteer and went through a series of questions I formulated and tested out two of the airlines.
A snippet from the usability test can be viewed below:
I created an online survey via Google Forms and sent it out to family and friends to try and better understand the goals of users and what they are trying to do when visiting an airline’s website.
Through this I hoped to also learn what may be preventing users from achieving what they set out to do.
Targeted questions
Q — When was the last time you visited and airline website or app?
Q — Which airline did you use?
Q — Why did you visit this airline that day?
Q — Were you able to complete your task that day?
Q — If no, why were you not able to?
Q — What would you change about the website you used? What improvement would you make?
Q — Did you purchase any extras (car rental, hotel) when visiting the website?
Takeaways
The information collected here enabled me to gain deeper insight into the objectives of the typical user.
This knowledge, in turn, aided me while making more educated design choices later within this project.
In order to acquire enhanced comprehension of user interaction and behaviour on websites, I personally documented observations from usability assessments implemented by the UX Design Institute.
Two separate individuals navigating two airline platforms were assigned a series of tasks, from which I marked down significant findings and notes.
This task provided valuable information and perspectives on varying user behaviors. As a young adult in the digital age, my comprehension significantly differs from say, a middle-aged housewife.
Depending solely on my personal viewpoint and experiences when navigating an airline website would be entirely insufficient, thus this task was especially beneficial during my studies.
I understood the importance of conducting Usability Tests, sharpened key research approaches and skills, and utilised these in my own usability evaluation I performed.
After collecting over 100 different data points I needed to analyse and structure this data. I did this by going through all my previous research and taking notes on post-its about anything relevant to describing the user experience:
— Goals —
— Behaviours —
— Pain points —
— Mental models —
— Contextual information —
Initially, I organised every sticky note, then began grouping these sticky notes into suitable categories. Subsequently, each of these categories received a label to summarise their contents.
I built this data collectively with my partner (Covid-19 at the time restricted me from collaborating with more people). This style of research aided me in sorting through large volumes of data and I also learned the power of collaborative analysis - key skills for any UX professional.
Using the research we conducted via our Affinity Diagram, I moved to developing a Customer Journey Map. Here I defined the high-level steps the user takes when booking a flight and compared it against the goals of the user, positive interactions, pain points, behaviours and the mental model the user may have.
As I got closer to the design of my website, I began to create a Flow Diagram. I defined a high-level flow with my overall objective being to fix problems highlighted in previous research and lay the groundwork for the upcoming design phase of the website.
The high-level flow chosen was the happy path of a user looking to book flights including all the steps in between like selecting dates, luggage, seat selection, creating an account and payment.
Design phase
To kick things off in this phase of the UX process, I began with developing on my user flow and sketching out the screens the user flows through. I then sketched a second state for each of these screens to show how some features would work.
Homepage
While the homepage didn’t turn out to be the exact same as what I first envisioned in my sketches, it built the foundations.
I focused less on promotions and advertisements and placed the search function prominently in centre stage
Flight selection
The flight selection sketches really helped a lot to develop the design for this page.
Featuring a carousel of date selections and a progress bar, these assets stuck with the project right the way through.
Passenger information
This page also changed marginally from the original sketches.
The basic idea is there with passengers able to input their info, select seats and add extra baggage, but the final product was a more cleaner look to it.
Payment & confirmation
The sketches largely provided the design for this page. Payment information on the left with flight summary on the right in a linear format.
However I decided against a pop up confirmation notification and chose a new page for the booking confirmation to make things neater.
I took my sketches and developed them into a low-fidelity black-and-white design.
Using minimal colours and typography helped me to focus on the functionality and usability of the website. This part of the process was something I was very enthusiastic about. Putting my ideas into practise.
From there I experimented a lot with different colours, typography and designs. It was a lot of fun testing different combinations out to see what worked best.
I had the colour green in my head right from the beginning and did some research on what this colour provokes. Green generally can be calming whilst can also be associated with wealth. Coupled with this it’s also the national colour of my home country - Ireland.
Overall, I’m very happy with how this turned out. The subtle inputs of green create a premium feel to the website, whilst also being marginally unique to most other websites.
Summary
I conducted another couple usability tests with my partner and other room-mate (both frequent fliers who’ve travelled extensively in the past and plan to travel more in the future).
Most importantly I wanted the users to flow through the prototype with ease. With both of them being experienced at booking flights, there weren’t too many surprises when it came to the general flight booking process. However, they both brought valuable insights.
Insights
They noted they both liked the confirmation that certain steps were completed highlighted by the “golden tick”. They commented that “even after booking many flights in the past, you can still get lost on certain websites”.
One user mentioned the progress bar “was a helpful feature” and that they “much prefer when websites have this”.
Overall the user’s experience of the website was a positive one. The UI looked “clean” and “not too in your face” according to one user and in general they found no issues with the process.
View full prototype
Reflections / Learnings
First project
This is my first-ever UX project 🙌, so in general I am happy with the final output of this experience. I’m glad I got to run through the full UX design process and learn that it is more than just design.
Improved user pool
However, the timing of this course aligning with the pandemic (🤐) limited me when it came to getting physical interactions with users testing my prototype. While my partner and roommate knew little to nothing about UX/UI, they still knew me and their opinions may have been distorted.
Improving skills and knowledge of trends
With this being my first project in anything related to design/UX/UI, I spent a lot of time learning design trends, how to use Figma and the fundamental system elements of a website.
For the future
With more time I would love to design a mobile app which I have already began doing. Hopefully this does not take me as long!
