Airline Neutral: White Label Design System

UI design Strategy and Planning UI Development

This project was built for Fly Delta Airlines and its newly acquired airlines, Virgin Atlantic Airlines, when I was working in Thoughtworks, in 2016.

We constructed mobile web interfaces as well as iOS and Android applications for Fly Delta Airlines. This initiative to create an airline-neutral solution enabled the Virgin Atlantic Airlines to transition to a new app by meticulously aligning with their unique brand directives.

Its adaptability extended to encompass diverse airlines, allowing their individual brand guidelines to be effortlessly integrated.

My Role

UI development

Lead the planning and executed the front-end code to build a scalable solution across platforms.

UI Design

Lead the implementation of UI design across iOS, Android and Mobile Web with developers.

Analysis

Analysed the Delta Airlines designs with the business analyst and product owner to devise a governance.

Strategy

Devised a strategy to build the UI design for an airline neutral product.

Project

The aim of the airline-neutral project was to establish a dynamic platform, recognized as an airline-agnostic powerhouse. This adaptability was designed to extend and encompass a variety of airlines, facilitating the seamless integration of their distinct brand guidelines.

Approach and Planning

Collaborating closely with the product owner and business analyst, we strategically organised the project into three distinct phases:

  • Establishing Design System Governance: Our primary objective was to establish a comprehensive set of directives empowering multidisciplinary teams (including Mobile Web, iOS, and Android) to progress effectively while adhering to a unified framework.
  • Revamping the Mobile Web: The subsequent phase focused on the thorough reevaluation and modularization of the Mobile Web UI and codebase. This step yielded swift and tangible outcomes aligned with our proposed directives.
  • Enhancing iOS and Android Apps: In this phase, we concentrated on imparting the rationale behind our UI design directives to other teams. This approach facilitated confident and efficient development across the iOS and Android platforms.
Project phases

The Process

Problem Analysis

During the analysis phase, we thoroughly examined our existing designs and code base. Our focus was on guiding the development teams (mobile web, iOS, and Android) to review their code base and initiate the process of modularising and enhancing reusability.

Additionally, we conducted an in-depth analysis of the Delta Airlines design to define its visual styles and language. This step was crucial in establishing a cohesive and consistent approach to the design and development of the project.

Creating a brand-identity and components systems

We hired an external design agency, AKQA London, who designed key screens for Virgin Atlantic Airlines based on Delta Airlines designs. But we had no system in place to understand how to communicate it to team of 60+ developers and translate these designs to the entire app across all platforms.

Therefore, we started by analysing the various screens of the Delta Airlines app. We created a design system governance to support multi brand by creating a brand-identity system and a components system.

Brand-identity system comprised of styling information specific to a brand that takes care of typography, colours and copy. Components system comprised of modular, flexible and reusable components that can flex to the needs of multiple brands and can be used to create new pages.

Mobile Web: Building Design Tokens

Working as a sole UI developer in the Mobile Web team, I initiated the process of refactoring the mobile web code to enhance its modularity and reusability. I created design tokens for mobile web which helped to keep the experience consistent and scalable.

These design tokens were based on the semantics layer and brand layer. The semantics layer comprised of design tokens from the brand layer and they were used in defining styles for the respective brand. The brand layer took values from the hexadecimal colour codes.

This process ensured that the core structure of the product could be maintained. By separating a semantics layer and a brand layer, we achieved a flexible and scalable design system that could accommodate multi-brand systems in the future.

The same process was replicated for the typography. For the copy, we followed a JSON structure approach in which key-value pairs of the copy were saved. In this case, "key" of the JSON is similar to the design variable from the semantics layer.

Relationship between brand layer and semantic layer

Mobile Web: Identifying and Fixing Inconsistencies

The refactoring of mobile web design and code helped us to identify and eliminate a lot of inconsistencies. This helped us to refine the brand-identity systems we defined earlier.

For instance, six different hexadecimal shades of primary blue were identified and consolidated into one single brand blue shade.

Six different hexadecimal colours for same brand blue

By rectifying these inconsistencies, we significantly improved the codebase's clarity, efficiency, and adherence to the established design system. This meticulous approach ensured a more cohesive and polished user interface across all platforms.

Mobile Web: Defining Components System

In the mobile web, we embarked on a comprehensive redesign effort, transforming into modular, reusable and scalable components which can flex to the needs of multiple brands.

These modular components can be easily integrated with the brand-identity systems to build a new page for the new airlines.

From a technical standpoint, we achieved this by building a source code for the mobile web that could exhibit polymorphic behaviour. This allowed the platform to dynamically adapt its appearance based on different branding requirements or airline-specific styles, ensuring a seamless and flexible user experience for each brand.

Mobile Web: Creating Virgin Atlantic screens

With the new brand-identity systems and components system in place, we designed the other screens of the Virgin Atlantic Mobile App.

The new systems helped us to accelerate the design and developement process and helped everyone to come on the same page.

Partnering with the iOS and Android UI team

Following multiple rounds of refinements and incorporating valuable feedback, we shared the new design systems with the iOS and Android teams.

Collaborating closely with both teams, I played a key role in enabling them to implement the product redesign using the set of directives provided. Throughout the process, we placed significant emphasis on maintaining consistency across all platforms, ensuring that our guidelines were followed uniformly.

Visual Regression Testing

I partnered with the QA team to develop the Nakal Ruby gem, enabling automated visual regression testing. This streamlined our visual QA process during development, ensuring quicker identification and resolution of discrepancies. The collaboration improved efficiency and visual consistency in the final product.

Product at a glance

Here are some mobile web screenshots of the Fly Delta Airlines and the newly acquired Virgin Atlantic Airlines: