A conceptual project conceived solely by myself as part of my UX Design Institute diploma course.

The goal was to create a highly structured, process-driven native app for mobile devices - allowing users to search and book flights directly through the airline.

Premise

This is a fictitious company designed by myself. Atlantic Star Airlines is an exciting new airline, aimed at tackling the competitive trans-Atlantic market - starting niché with scope to become a main contender in years to come.

For this project, I elected to sculpt a realistic feeling brand; with art direction, logos and a defined audience in mind. It would offer more realism and help me craft a superior experience if I set out a more fundamental Who? What? and Why? to always return to. Much more like a real-world project would. 

Users & Audience

Young professionals. Sophisticated, trend-focused and with disposable income to boot - they’re tech-savvy and looking for a premium overall experience. Whether travelling for business or leisure, they choose to skip both budget airlines and more established yet homogeneous airlines (think Virgin Atlantic, BA) for a more charming experience.

That being said, the app would need to be fundamentally intuitive and easy to navigate for anyone over the age of 18, looking to search and book flights.

Challenges

Air travel is a huge industry. Competition is fierce and airline products need to aim for perfection. Customers spoilt for choice, will not stand for sub-par experiences or unintuitive design. With a focus on transitioning as many users into customers as possible; Atlantic Star Airlines need an app that makes the relatively complex, and structured step-by-step process of booking a flight into a simple task. The app will need to do so while making all the relevant variables - such as timings, destinations, flight preferences - feel effortless to navigate and select.

Other challenges would include; engaging and enticing the target audience while providing an accessible, intuitive and painless experience to all users searching or booking flights on the app.

Competitive Benchmarking

I began by researching three key competitor brands’ mobile apps - Virgin Atlantic, British Airways, Lufthansa along with one wildcard - Skyscanner, the flight aggregator. I tested the user flow of each app from the home screen, searching and selecting flights, entering passenger details, choosing seats and reaching the payment screen.

The goal? Find out exactly what the best-in-class brands were doing right and wrong. What flight booking conventions could be gathered from these competitor’s apps? What could I improve upon to offer my users a superior experience?

Key takeaways: I examined and noted down some terrific conventions that I would look to follow. But surprisingly, I found that there was still plenty to improve on - even on apps for some of the world’s biggest brands. This included:

• Cluttered screens and poor navigation

• Bloated forms featuring superfluous fields

• Unnecessary features that interrupted flow and became counterintuitive 

• Ambiguous CTA’s

• Insistent T&C’s, security measures and upsells

• Buttons that forced users on to external webpages

Online Survey

Next, I created an online survey using surveymonkey.com. The survey was designed to further gain insight into user’s experiences with flight booking, through a wider lens. Keeping the survey short I asked 10 questions - a mix of objective and subjective - aimed at gaining both quantitative and qualitative data.

Insights included:

• Users rarely commit and book flights on the first sitting. Of the last experience survey takers had with a flight booking app, only 7.7% had actually booked flights. 79.5% had compared fares, flight times etc. The remainder 12.8% had used the app/site to complete ‘other’ edge case tasks.

• Aggregator apps (such as Skyscanner) were preferred to airline apps, as they generally offered a more customisable experience. Great for searching, filtering and narrowing down preferences.

• When asked what users were mainly looking for when searching and comparing fares; cost, timings and direct flights were by far the most important variables. I was also surprised to see a genuine interest in carbon footprint and environmental issues.

• Credit/Debit card payment was still the preferred method of payment, compared to any alternatives.

Usability testing (competitor mobile apps)

Although I felt I had gained some excellent subjective insights from my Online Survey, I wanted to dig deeper into more qualitative research. What better way than Usability Testing? Of course, at this stage, I did not have an initial app or working prototype so I looked to test the Virgin Atlantic and British Airways mobile apps - two best-in-class competitors.

I recruited two young professionals to conduct the research. A male and a female, each flew often for both work and leisure (at least before the pandemic). Each test was conducted separately in a controlled environment, was under an hour-long, began with some light chat aimed at gathering some background info and included an in-depth interview discussing their travel preferences, goals and history. We then jumped into the test, where I asked each subject to complete a preplanned search and selection, reaching the payment screen for both British Airways and Virgin Atlantic apps. These tests were carefully moderated and gently guided by myself, but I made sure to let each subject come to their own conclusions and make their own choices within the general flight booking objective. All of the above was a chance to gather some extra juicy qualitative insights. These included:

• Airline jargon and ambiguous terminology littered both apps and stood in the way of a completely smooth or intuitive experience.

• The Design Models and Mental Models don’t always match up. For example, on one app, tapping a fare card thinking they would view more details actually selected that flight and moved to the next screen, forcing the user to backtrack.

Affinity Diagram

I spent an afternoon going back over all the insights, finding all common threads that popped out across the various research techniques. Writing all insights on Post-it notes, I popped them all up on a blank wall. I then arranged them into groups and sub-groups that I believed to be appropriate.

I also sequenced all these groups and sub-groups out, as and when they matched a certain step of the flight booking process - from offline (thinking about travel), through the whole online experience, right up to the final booking and payment confirmation.

Customer Journey Map

I created a CJM that aimed to structure all the raw data into a concise and clear analysis. Something that stakeholders and the client alike could easily understand. Once again, this included all steps along the user’s journey.

User Persona

Next, I created a Persona to embody the research. I was extremely conscious of the risks of personas and made sure any key elements of the persona were based on real data and insights from my research.

Empathy Map

Lastly, I believed an empathy map would be a great way to quickly show structured and easily digestible research in one clear infographic.

Flow Diagram

I began with a flow diagram. I carefully structured every screen, screen state and user action along the whole process of searching and booking flights. I wanted to make this detailed and in-depth, but also easy to follow.

Low-Fidelity Prototype (Pen & Paper)

Even at this early stage, I iterated on my designs several times in the process as I visualised and drew my prototype. These screens were created out of best-in-class conventions found in my early research and insights extracted from the analysis of that research.

Once I had quickly sketched down rather crude draft screens, I went back and honed in on each screen. I began to craft a clearer and more definitive visualisation of each screen and state. I also made sure to start deciding on terminology, even at this early prototype stage. With a process-driven, highly structured flight booking app the formatting of times, options, variable, CTAs, help, fine print etc all needed to be scrutinised and determined as soon as possible - to craft a superior user experience. No Lorem ipsum here.

Mid-Fidelity Prototype (Figma)

Once I had a clear vision with my lo-fi prototypes, I jumped on to Figma to begin the digital design. As this was a mid-fidelity prototype, I was not focused so much on the visual look or rich interactions. I was foremost focused on how well the user would flow through the process.

On the technical side? I followed Apple iOS specs but aimed to make sure the design would be responsive to all mobile device screen sizes. This prototype was built using 375x812 pixel frames. I worked off a 6 column, 8pt soft grid with 16pt margins and 8pt gutters. On some more detailed screens, I broke this down further to a 12 column layout - but keeping the same margins and gutters, so essentially it all stayed within the 6 column grid regardless. Early iterations of the prototype would simply work off the Apple SF Pro typeface, although this would change later, as I migrated to Gotham for all body copy and introduced Modeco as a title/display typeface. Keeping with the iOS theme, I smoothed all corners to 60%. I also utilised an array of Figma plugins and found a great set of simple, clean icons by Phosphor. 

Further usability testing & prototype development

Once I had mocked up my mid-fidelity prototype, I was eager to test my design’s usability with real users. Through this process, I found various insights that I would take on board and continue to redesign my prototype.

Firstly, the Summary screens had divergences between the user’s mental model and the design model. The outbound and return sections were designed to be tidy and compact, but testing proved that users wanted to see more info on their chosen flights on these screens. Two new modal windows were developed and inserted via a ‘Tap to view more details’ interactive CTA.

There was also confusion in the Payment Overview section of the same screens. The idea was that the user could switch between ‘total’ or ‘per person’ break down on costs. However, during testing, the user believed that what they were looking at in the left column was total and the right column was per person. This created confusion as the costs did not add up! A simple bar was added to chunk the toggle button apart from the figures below, clarifying the issue.

In general, I also went through and updated the cascading flight cards in the Select Outbound / Select Return screens. During testing, I had noticed these were too condensed and I had made the text and tap targets too small. I also completely reconfigured the ‘class selection’ modal popover windows for the same reason - they had originally been too condensed and both text and tap targets were too small.

Across the whole design process, I also redeveloped both the header and footer components several times, until I was happy with the look and feel. Ultimately, I chose to simplify the header and introduced key navigation features into the bar at the bottom, with a sliding off-screen drawer menu for all other navigation requirements.

UI design elements & final high-fidelity prototype (Figma)

Building on my mid-fidelity prototype, I began looking for final UI design inspiration…

Visual inspiration was drawn from two approaches, of which I looked to weave together. Firstly, for an overall look and feel of the screens, I aimed to incorporate elements of the late Art Deco movement, Streamline Moderne. This employs the repetition of elegant curves and precisely sharp lines to create structure. The style was in fact an early inspiration for the “golden era” of air travel, in the 1950s - a time that a brand like ASA would strive to recreate for their customers. From a digital perspective, I chose to couple this style with a very clean, minimal, flat app design. Considering the sizable amount of information users would need to take on board during their flight booking process, I aimed for a decluttered and unobtrusive design to facilitate this. Imagery and illustrations were also kept to a minimum, for this reason.

I chose the Modeco title/display typeface for its traditional Art Deco lineage, which complimented my modern take on Streamline Moderne and coupled with the Gotham body typeface nicely.

The colour palette was inspired by the iconic 1964 Tokyo Olympic logo and poster series, designed by renowned Japanese graphic designer, Yusaku Kamekura. A very clean, distinctive palette, I incorporated the gold and red elements, dropping the saturation slightly on the gold for a more contemporary feel. Knowing I could not ignore the strong implications of the colour red, I instead aimed to channel these to the design’s advantage. The red is used sparingly in each screen - mainly for alerts, announcements, and cancellation details - keeping all CTA’s, primary buttons, and affirmative elements either neutral black or a positive gold.

I wanted to explore a dark mode option, so I developed a screen example adapted from the core colour scheme. On a dark slate background, I reviewed the colour palette - firstly, by bringing the bright red down in shade. Instead of the gold primary buttons, I actually reworked the white into a softer, light grey. This appears white against the slate background but is easier on the eyes in low light situations. This “white” used on the primary buttons and navigation also draws the user in as it is the most defined against the slate background.