Propel - Flight Booking  Application

"A mobile application built to propel the user anywhere, fast"
An IOS application to made to demystify added extras in the booking process
Mobile UX/UI Design - IOS
Summary
As part of my professional diploma from the UX Institute, I undertook the challenge of creating a high-fidelity prototype for a flight booking application. Guided by a comprehensive design process, I initiated the project by conducting in-depth research on existing applications and user pain points. This research informed the definition of how my application would address identified issues. Subsequently, I delved into the intricacies of branding, UI design, and user flows within the application. Propel, the resultant application, distinguishes itself not only through collaborative features but also by prioritizing transparent pricing. This commitment empowers users to make informed decisions, fostering trust and loyalty. The meticulously crafted UI design, encompassing elements such as the logo, color scheme, loading animations, and progress indicators, contributes to a seamless and visually engaging user experience. Looking ahead, ongoing user feedback and communication initiatives, coupled with the thoughtfully designed UI, will play a pivotal role in solidifying Propel's reputation as a user-centric and transparent flight booking platform in the iOS market. The survey's overwhelming indication of user preference for mobile applications underscores Propel's strategic alignment with user behavior and preferences.
Problem Statement
In the landscape of flight booking applications, users face a prevailing issue rooted in distrust and confusion. Existing apps often struggle to establish trust with users, leading to apprehension and hesitancy during the booking process causing many users to abandon booking on first visit. This skepticism is exacerbated by a lack of transparency, especially concerning optional extras like baggage fees and seat upgrades. Propel recognizes these challenges as an opportunity to revolutionize the user experience, fostering confidence, and clarity in the often tumultuous journey of flight booking.

Empathize

Define

Ideate

Prototype

Test

Research
I began work on this project by first looking to gain a clear idea of the existing issues with with existing flight booking applications, in order to know which areas to target to improve as well as to understand fully the existing conventions in the field.

The Research phase encompassed User Interviews, Surveys, Usability Testing, and Competitive Research. I sought to first understand the market and the issues faced by users with a specific focus on understanding user attitudes towards pricing transparency.
Here is a link to the Google Forms Document
Survey
https://docs.google.com/forms/d/e/1FAIpQLSeP-WNl9LldqymZpI7v3MIsb4ba7RUEp0PM0EuIAKcjLR8xXQ/viewform?usp=sf_link
I created a Google Forms survey which I posted on my social media and various survey platforms, with the view to gain a clear idea of users existing experience with similar applications. This provided me with a wide range of quantitative data as well as some more in depth qualitative responses.

I explored user sentiments and preferences regarding transparency in pricing, especially in relation to extra charges such as baggage fees.

I identified a strong desire among users for clear and concise information about additional costs associated with their bookings.

The survey results revealed that 98% of respondents use some form of app or webpage for flight bookings, with 63% specifically utilizing mobile or tablet applications.

Another notible discovery is that 77% of respondants do not complete purchase on first visit to a site or application. This hesitation emphasizes a key aspect of user behavior, prompting me to address potential barriers to completion in the final design.

Competitive Benchmarking
I conducted extensive research into various competitors Mobile Applications and Web Solutions, with the view to gain a further insight in the sector and user habbit before design a solution.
What are the best Applications / Webpages on the market at present?
What elements of the process are these competitors doing successfully?
Where are the painpoints in the esisting applications which can be improved?
What are the established conventions which users are comfortable with which would should be included?

I chose to look at Easy Jet, Ryan Air and Are Lingus; as these are all popular Applications in the field. I also wanted to look at Emirates and Brittish Airways to gain an insight into the high end area of the market.
User Testing
In crafting a robust user experience, I harnessed the potency of user testing, recognizing its unparalleled ability to provide a profound and nuanced analysis of the user's journey. As a designer, I sought qualitative responses to glean invaluable insights for the iterative design process. My approach involved conducting in-depth interviews with four users, strategically chosen for their prior experience with online booking. Through a combination of Microsoft Zoom sessions and face-to-face interactions, I delved into their goals, behaviors, and the potential pitfalls they encountered while navigating a competitor's flight booking application. This user-centric methodology not only deepened my understanding of user needs but also served as a cornerstone in shaping the subsequent design decisions.
Analysing Research Findings
After compiling the research findings I looked to organize and synthesize the data acquired. I did this using several methods including conductin, an Affinity Diagram, User Persona, and Customer Journey Mapping. This stage is vital in using this data to inform the final design.
Affinity Diagram
This is an effective tool used to organize instructed data and sort it into workable categories that can be used later in the Customer Journey Map. The session enlisted help from 6 participants in a workshop who read all research findings and placed each point onto a Post-it. Then they were rearranged by the group based on similarity. Once sorted I digitized the findings using Mirro to reference them during the design phase.
Before the sort, the Po was colour coding corresponding to where the insight was garnered, post sort the findings were grouped into 10 categories which correspond to screens in the booking process.
User Persona
Leveraging personas proved instrumental in fostering empathy with the target audience throughout the design phase, serving as a constant reminder to keep the end user at the forefront of all decisions. This approach was particularly valuable in ensuring that the design process remained focused on meeting the user's needs rather than inadvertently evolving into a self-referential design. The persona helped by aligning every design choice with the user's perspective to create a product that resonates seamlessly with their preferences and expectations.
Customer Journey Map
I implemented a comprehensive strategy to map not only the user's progression but also their emotional experience at each stage of my application. This approach not only facilitates a visual representation of the user's journey but also enables me to prioritize key areas for improvement. These focal points encompass crafting a clear and intuitive interface for search functionality, streamlining information to reduce clutter, presenting fewer optional extras with transparent explanations of inclusions in the price, simplifying the login and signup processes, implementing efficient passenger details retention, incorporating an accessible date picker, and integrating an option to seamlessly share information with others. By addressing these priorities, I aimed to enhance the overall user experience and satisfaction while aligning the application more closely with user expectations and preferences.
Design Phase
After conducting thorough research and analysis, I transitioned into the design phase with a focus on creating an iOS mobile application dedicated to providing a quick, clear, and trusted flight booking experience. The primary goal was to foster user trust and ensure price transparency throughout the application. To optimize conversion rates, I strategically implemented progress indicators and a seamless currency-changing feature, aiming to enhance user flexibility and facilitate a smooth user journey. The design enhancements prioritized clear communication of extra charges, utilizing a dedicated section within the booking process with concise language and visual cues to prevent users from feeling overwhelmed. Additionally, an interactive cost breakdown feature with tooltips and explanations was introduced, enhancing user comprehension. Proactive user education on extra charges through in-app guides and notifications, coupled with prompts for users to review and confirm additional costs before finalizing bookings, ensured a well-informed and confident user base. The seamless integration of these features not only elevated the user experience but also significantly contributed to the aim of achieving higher conversion rates, reinforcing the application's commitment to user satisfaction and trust.
Flow Diagram
Embarking on the design phase, my initial step involved crafting a meticulous flow diagram to gain deeper insights into the user's journey within the application. During this stage, my emphasis was on designing for the most prevalent linear use case rather than delving excessively into edge cases. This strategic approach allowed me to prioritize the seamless and intuitive experience for the majority of users, ensuring that the core functionalities aligned seamlessly with their expected journey through the application. By focusing on the predominant use case, the design aimed to enhance user engagement and satisfaction with a streamlined and user-friendly interaction flow.
Navigation
To determine an effective navigation style for the application, I engaged in an iterative process of exploring various options and sketching multiple examples. After careful consideration, I concluded that the most suitable approach was to employ a Tab-style navigation situated at the bottom of the homepage. Subsequently, to maintain a clean and minimal screen layout, I implemented an off-canvas display for navigation beyond the homepage. This decision was rooted in enhancing user accessibility and ensuring a clutter-free interface, contributing to an overall streamlined and user-friendly experience.
Low Fidelity Prototype
The screen design phase commenced with an analog approach, utilizing pen and paper to craft a low-fidelity prototype. This involved the initial sketching of layouts, controls, buttons, and content for each screen. This part of the process was particularly enjoyable for me, leveraging my background in drawing and visual design to loosely plan and conceptualize the application's interface. Simultaneously, I curated a mood board incorporating various UI formats to further inform the aesthetic direction of the design. This creative and methodical process laid the foundation for a visually engaging and user-friendly interface in the subsequent stages of development.
High Fidelity Prototype
Following the initial sketches of my design, I transitioned to the digital realm using Figma to create a more refined version. The tool proved invaluable in fleshing out and iterating upon my initial ideas. The process involved numerous iterations, with occasional returns to pen and paper to explore and refine concepts. I meticulously prototyped the design, ensuring it was fully clickable, catering specifically to the linear use case. While this sufficed for the academic requirements, my commitment to the project led me to expand its scope. Consequently, I dedicated efforts to comprehensively flesh out the screens, culminating in the creation of a distinct brand identity for the application. This encompassed crafting a logo, tagline, and color scheme, ultimately giving Propel a cohesive and distinctive visual identity.
Here is a link to my Pinterest Board which aided the design process
UI Design
I wished to create a distinctive logo resembling the propeller of an aircraft, aligning with the brand name "Propel." The logo is utilized for loading animations, providing a seamless and cohesive visual experience.

The screen layout is stylized to mimic the minimal design of baggage tags commonly associated with hold luggage—an image synonymous with air travel. This design choice enhances the user's connection with the travel theme throughout the app.

I developed a color scheme intended to induce a feeling of positivity and safety in users. The hero color is green, symbolizing growth and reliability, while the brand palette incorporates blacks, whites, and greys for a clean and sophisticated aesthetic.

Propel integrats the propeller logo into loading animations, providing users with a visually engaging experience during wait times. This reinforces the brand identity and adds a touch of delight to the overall user journey.

A key factor in the design is the implementation of a clear progress indicator throughout the booking process, ensuring users are aware of the steps required to complete their reservation. This feature enhances the user experience by providing transparency and reducing any sense of uncertainty.
Next Steps
The design process does not end with the final product and it is vital to continue reviewing and reiterating, in order to suit the habbits of users. Whilst this project was created for educational purposes there are a number of things which I would seek to do if this app was to be lunched.

From a branding point of view it is important to strategically communicate Propel's commitment to transparent pricing during the app's launch.Emphasize this feature in promotional campaigns, positioning Propel as a trustworthy and user-centric platform.

Establish a feedback loop to gather user insights on the effectiveness of the transparent pricing features and the overall UI design.Regularly assess user satisfaction and make iterative enhancements based on feedback, ensuring continuous improvement.

Integrate customer support features within the app to assist users with any queries related to extra charges or UI-related concerns.Ensure that users have access to real-time assistance, fostering a positive and supportive user experience.
Conclusions
In pursuit of redefining the flight booking experience, Propel set out with a multifaceted objective, aiming not only to simplify the booking process and introduce collaborative features but also to revolutionize the user experience by ensuring clear and transparent communication about extra charges. Extensive research, including user interviews, surveys, and usability testing, formed the foundation of this endeavor, revealing a strong user desire for transparent pricing. The design process meticulously addressed this insight, implementing features like a dedicated section for extra charges, interactive cost breakdowns, and user education on potential fees. The UI design, marked by a distinctive logo, minimalistic screen layout, and a calming color scheme, contributed to a visually engaging and trustworthy experience. The next steps involve a strategic launch emphasizing transparent pricing, a continuous feedback loop for user insights, and the integration of robust customer support features. As Propel evolves, its commitment to user-centricity and transparency, backed by ongoing communication and a thoughtful UI, positions it as a pioneering and user-trusted flight booking platform for iOS, aligned seamlessly with the prevalent preference for mobile applications.

Tools Used
Google Forms, Mirro, Adobe Photoshop, Adobe Illustrator, Figma, Prototype.io