RESEARCH & DESIGN PROJECT, 2024

AirAlign

Qualitatitve & Quantitative Research | UI/UX Design | Branding Design | User testing

Introduction

This research and design project aimed to improve air travel interactions for inexperienced travellers by designing an interactive solution. The research was conducted to find relevant data which could be used to establish design considerations. These were then used to ideate and create a complete solution in the form of AirAlign's Figma mobile application design with a full brand identity.
Use AirAlign Application PrototypeView Complete Case Study

Double-Diamond Research and Design Process

This research process was conducted in four major phases: Discover, Define, Develop and Deliver. The research process and findings feed back into the learnings to constantly improve the research findings and outcome. Each of the phases is elaborated in detail in the following sections.
View Final Solution

PHASE 1:
DISCOVER

1.1 Literature Review

I conducted exploratory research in the form of desk research. The literature review compiled and studied the overall experience of air travel passengers., different interaction points for passengers while understanding their physical and psychological effects during travel, existing methods of organisation and travel assistance and a study on interaction design principles relevant to the problem concluded the review.
Read complete Literature Review

1.2 Competitive Analysis & Benchmarking

I conducted competitive analysis and benchmarking to understand how the current solutions improve air travel experience and found the gaps within them.
The table shows how different applications can assist in and cater to different aspects of air travel interactions. It also highlights how none of the solutions cater to a wide range of air travel needs. In conclusion, there is a need for a solution that caters to multiple stressors, saving users the need to switch between multiple applications or travel planning solutions.

PHASE 2:
DEFINE

2.1 Problem Statement

The problem statement was created after considering the learnings and action points from the discovery phase. The initial version of problem statement lacked identification of the complete problem. Further iterations identifiied that inexperienced travellers (First-time and beginner travellers both) are vulnerable to extensive travel stressors.

Final Problem Statement

"How might we improve air travel for inexperienced travellers who currently experience confusion and stress during their journey which we know from research causes undesirable travel interactions and negative user experience."

2.2 Research Design - Methodology

Primary field research was conducted in the form of qualitative reflections and interviews, and quantitative surveys to gain a deeper understanding of the problem.

2.3 Data Collection & Analysis

A mixed-method research collection and analysis approach was employed for this applied design research project under the pragmatic research philosophy. Several data analysis methods were used to extract useful qualitative and quantitative data. The table summarises the research process.
Read Complete Data Collection & Analysis process

2.4 Data Collection Material

The qualitative and quantitative data were collected on different physical worksheets and online forms.  
View Survey Questionnaire

2.5 Data Analysis Material

I used different quantitative and qualitative methods to analyse the collected data. This helped in the identification of the user needs which guided the design considerations.

2.6 Research Findings & Stakeholders

The research data findings were visualised and the user needs extracted from them.  

2.7 Developing Personas

Persona Hypotheses

Based on the findings from stakeholder map exercise during interviews, creating relevant personas was the next step. Several persona hypotheses were created which can be seen in the figure.

Persona A: Students (Solo Travel)

Different Personas were then developed to empathise with the primary stakeholder needs and goals which would help ideate relevant solutions. The persona here envisions a student travelling for the first time.

Persona B: New Tourists (Family)

While the first persona covers student needs, the creation of this second persona aims to understand the needs of a new tourist family.

2.8 Experience Map

I created experience maps for both the personas to identify the most stressful part of their journeys.  

PHASE 3:
DEVELOP

The ideation was done in two stages; Stage 1 consisted of different ideation methods to generate a list of possible solutions and Stage 2 focuses on top three ideas while linking them with the personas to reflect upon their effectiveness as a solution.

3.1 Initial Hypotheses

A set of initial hypotheses were developed are written on notion which are listed below:

3.2 User Needs

The user needs were extracted from the analysis of field research. These would guide the ideation process.

3.3 Stage 1: Initial Ideation

Mind map

A mind map was generated to summarise the overall findings and design opportunities. The map helped define the overall findings to assist ideating possible solutions.

Question Brainstorming

A brainstorming exercise was done to write possible questions that need to be answered while tagging them with visceral, behavioural and reflective categories. The answers to these questions assisted in generating ideas and were vital in designing a complete empathic solution.

Crazy 8's

A crazy 8’s exercise was done to ideate possible ideas. It was used to generate diverse ideas and overcome possible mental blocks. The figure below shows the final Crazy 8’s exercise result.

Online Pair Ideation Workshop

An online ideation workshop was done where the researcher paired up with participants as a pair and as a group of 8 to co-generate ideas. Figjam and Miro board was used to list down for this activity.

Co-Idea Generation Workshop

To conclude stage 1, a physical group workshop was conducted with seven participants including the researcher. The ideas, existing technologies and critical points to remember were written on post in notes and organised together. Learnings from previous ideation methods were included as well.
‍
Each of the participants contributed to the ideas and feedback was taken to shortlist ideas and discard extra items. The ideas with similar patterns were combined to form the top 3 idea groups. These ideas were then refined in stage 2 of the ideation phase.

3.4 Stage 2: Top 3 Ideas

Idea 1: Mobile Application Air Travel Organisation & Planning

This idea revolved around an all-inclusive app which targets major user needs such as packing and documents, online bookings, airport information, to-do lists/ reminders and budgeting.

Hand-drawn wireframes were created for the main flow of the mobile application. Design principles such as internal consistency, anchoring effect, learnability and gestalts principle were considered while designing the wireframes.

Idea 1: Mobile Application Air Travel Organisation & Planning

The user journey for both the personas were created and linked to a basic sitemap that shows how each branch of the application would cater to a particular stressor.

3.4 Stage 2: Top 3 Ideas

Idea 2: Travel partner booking mobile application

The idea revolves around an application that connects inexperienced and experienced travellers where they can chat with each other. This would allow the inexperienced traveller to ask questions and get help.

Hand-drawn wireframes were created to show both the interface for experienced and inexperienced travellers. Social proof bias and functional consistency were considered important for this idea.

Idea 2: Travel partner booking mobile application

Storyboards were created to have a deeper and visual understanding of the problems a user can face. Student persona was used to show how this solution will help cater to their problems.

3.4 Stage 2: Top 3 Ideas

Idea 3: Digital Awareness Campaign

The idea focuses on an online campaign that provides the target audience with passive knowledge. It caters to non-technical users as they would not have to do anything while travelling. A gradual exposure to facts through social media, adverts and blogs would educate inexperienced travellers. Confirmation bias and readability are important factors to consider for this idea.

Idea 3: Digital Awareness Campaign

A User journey scenario was created to show what problems a new tourist family would experience, and the benefits of this digital campaign are also shown through the green arrow path.

3.5 Finalised Idea & Hypothesis

Selected Idea

The finalised idea was Idea 1: Air travel organisation and planning application as it provides a set of essential tools to an inexperienced traveller which would be helpful to improve the air travel interactions.

Finalised Hypothesis

From the list of initial hypotheses, the final hypothesis was now extracted after finalising the top idea. The refined and final working hypothesis that guided prototyping phase is as follows:
"We believe that an air travel organisation and planning mobile application that encompasses multiple air travel assistance and information features in a single place will result in an improved air travel experience for inexperienced travellers. We will know we are right when user feedback shows improved user satisfaction."

PHASE 4:
DELIVER

Introduction

The Ideation phase was concluded with the creation of a final hypothesis. This was then used as the building block of the prototyping phase. Through prototyping steps, I had to now create a mobile app with a reliable UI/UX that had a seamless integration of solutions that catered to multiple stressors.
‍
The prototyping phase divided into low and mid fidelity phase. User feedback was collected in worksheets and the high fidelity prototype was then created as the final artifact after several iterations.

4.1 Low Fidelity Prototype - Branding

A user feedback worksheet was created on word to collect low fidelity prototyping responses for branding and mobile app stages. Process steps were defined for each step to ensure quality feedback was collected.

Finalising Brand Name

A list of 15 brand names were shown to the participant after introducing the project to them. Voting was done and AirAlign was chosen as the final name with 4 votes.

Finalising the Colour Palette

Three different colour palette options were created and shown to the participants with a moodboard and they all selected the first option, as displayed on the user testing worksheet, as the top option.

4.2 Low Fidelity Prototype - Mobile Application

Functional Module

Information architecture was created to map out the main features and overall layout of the mobile application. This helped address the identified stressors by organising their corresponding solutions properly.

Functional Module User Feedback

a. Rationale

User feedback was conducted with the participants and their responses collected in a table to potentiall improve the information architecture. The process details and questions are attached in the figure on right.

b. Process

Functional modules were created using Figjam boards for the main navigation screens of the mobile application. Onboarding screens and Accessibility features were also mapped as part of the information structure. The features were colour coded separately with blue for onboarding, purple for accessibility features and green for the main app navigation.

Site Map

The site map was created to develop a clearer idea about the interactions and user journey.

Site Map User Feedback

a. Rationale

User feedback was conducted with the participants to find gaps in the site map and potentially improving it through iterations.

b. Process

Site Map / User Journey was created using Figjam boards for the main navigation screens of the mobile application. Blue boxes highlight the primary decision making point to create a journey, green is the main navigation pages and yellow are the sub sections within those screens.

Wireframes

I created hand-drawn wireframes for the main navigation screen of the app with 3 different UI variations.

Wireframe Feedback

User Feedback was taken by voting on preferred option in each category along with choice rationale. This concluded with screens A2, B2, C1, D2 and E1 as the top choices which were then refined in mid fidelity prototyping stage.

4.3 Low Fidelity Prototype - Branding

‍After finalising the name “AirAlign” in low fidelity prototyping phase, the next step was to create a logo. I sketched multiple logo ideas at first and then shortlisted them to do top 3 ideas that closely represented the brand purpose and objectives.
The top 3 logo options were then shown and explained to user feedback participants for voting on the preffered choice. The results were compiled in the feedback worksheet and are shown in the table above. The finalised option was “Logo A” which was then refined, digitalised and developed into a complete branding in the high fidelity phase as part of the final artefact.

4.4 Mid Fidelity Prototype - Mobile Application

Updated Functional Module & Site Map

The user feedback from low fidelity prototyping phase was applied to create the next iteration for functional module and site map which were then used to guide the creation of digital clickable prototype screen on figma.

Detailed Functional Sketches

In the next step, prior to creating digital screens, I designed hand drawn sketches and brainstormed how the features would look deeper down the user journey for each of the main navigation pages.This allowed me have a clearer vision of how the screen UI/UX should be like as a design them as a clickable prototype on figma.

Greyscale Interactive Figma Prototype

I created Mid-Fidelity screens on Figma covering the primary user flow. This was used for further user feedback to create the next iteration.
Use Mid Fidelity FIgma Prototype

Mid Fidelity Figma Prototype Feedback

a. Rationale

I conducted user feedback and collected responses on clickable figma prototype to identify any missing solution factors in the design, check if the app design is solving the problem and recieve possible improvements.

b. Process

The users were presented with the scenario to use the application while assuming they are going to plan their air travel. After explaining how the figma prototype works, they were encouraged to explore all the clickable features in the application.A follow up set of questions were then asked and their responses recorded in a table. The figure beside shows the complete set of questions and corresponding responses.

PHASE 5:
FINAL DESIGN

5.1 Brand Position & Identity

Welcome to AirAlign, where we make life easy for the inexperienced air travellers. The name represents what we do - We align your air travel tasks for you in a way that makes sense for all. We help new and beginner travellers organise and plan their air travel through our all-in-one application that provides multiple helpful tools to effortlessly align the air travel tasks.

Core Values

Our core values are the building blocks of our brand and staying true to them allows us to provide solutions of the highest quality.

Unique Value Proposition

Our core values are the building blocks of our brand and staying true to them allows us to provide solutions of the highest quality.

Target Audience

Our core values are the building blocks of our brand and staying true to them allows us to provide solutions of the highest quality.

Mission Statement

At AirAlign, We are dedicated to revolutionising air travel by consolidation all travel needs into one intuitive platform. Our diverse set of tools streamlines the journey experience for inexperienced travelers, eliminating the hassle of switching between multiple applications. Luggage and document planning, to do lists, alarms, online bookings and budgeting, we have it all. Our mission is to provide innovative, effective, and reliable solutions on a global scale, simplifying the travel planning process and ensuring customer satisfaction. We believe that everyone, especially inexperienced travellers deserve to enjoy their air travel experience. That is why we are here to align their journey seamlessly.

Brand Manifesto

Brand Personality

The brand personality was developed next to maintain a unique identity for AirAlign.

SWOT Analysis

A SWOT Analysis was conducted to better understand the brand position and further define its identity.  

Logomark Design

The design is a unique minimalistic logo concept. It uses the letter “a” to form a part of the logomark. Two such letters are combined to form the initialsof the brand name “AirAlign”. The individual icons are also aligned in a way that resemble a airport runway and an infinity symbol. The runway reference links it to air travel while the infinity symbolised continued innovation.

Colour Palette

Primary Colours

The primary colours are the main colours used to highlight priority elements, clickable buttons, headings etc.

Gradient

The gradient provides a fresh mix of greenand blue which can be used as a background.

Neutral Colours

The neutral colours create balance in designs.

Logomark Design

Primary Logo Font

This is a sans serif font which provides a modern look to the brand. The wide lettering improves readability and makes it ideal for use as Logomark.The bold and clear look conveys reliability and effectiveness which are one of the key core brand values.

Secondary Font

The secondary font is also a sans serif font but the short and expanded letters of Lexend Peta allow the font pairing to form a unique and distinct combination.This allows the tagline to fit perfectly with the logo name on the left side of the letter “g” in AirAlign.

Tertiary Body Font

The Tertiary font is a sans serif font. Thesefonts convey a modern and minimal look and are therefore used in all levels of typography with varying letter properties.Poppins is a common font used in UI/UXdesign. Using it as body text within the application and marketing material will ensure global familiarity.

Brand Graphic Elements

Social Media Marketing Campaign

5.2 Mobile Application

A high-fidelity Figma prototype was created with the addition of further screens like onboarding journey, accessibility and application features. The dark-mode screens were also designed to ensure accessibility for users who prefer that.
Use AirAlign Figma Prototype
Abdul Raffay
HomeProjectsAboutContact Me
Projects
UX DesignUI DesignBrand Design
Contact
theabdulraffay@gmail.com