AirCalifornia

Devices

Desktop/Web, Mobile/Mweb, WatchOS

Role

Designer (individual project)

Timeline

12 Weeks

Skills

Figma Design Systems, Branding, UX Design, Prototyping,

AirCalifornia ceased operations in 1987 but is looking to return to the airways in 2023. They're in need of a complete re-brand, design system, and website for customers to book flights. Thats where I come in.

The Problem

How might I re-define AirCalifornia's brand while paying homage to their past?

How might I create a design system that is visually appealing, and structured properly for easy usage?

How might I use components of the design system to build accessible, intuitive web experiences for desktop and mobile?

The Solution

Connect is the design system for AirCalifornia. It reflects the brand and is built to make designing swift and developer handoff simple. Focusing on Auto-Layout and simplicity, creating and prototyping the UI for AirCalifornia website and flight booking experience was a breeze.

Design Tokens

Design tokens are the foundation of a design system. Connect includes tokens for brand colors, typography scales, border radius, grid guidelines and more. The utilization of tokens is essential for easy developer hand-off, efficient designing and the upholding of brand guidelines.

Figma Styles

The Connect design tokens were defined using Figma styles for easy usage and to support the communication of things like interactivity, errors, and hierarchy of information. The Core color palette styles are defined by their role within the interface. Error tones are named as such along with the secondary and primary brand colors.

Components

This collection of re-usable interface elements is broken down into different groups from buttons, text fields, and date pickers to obscure elements such as breadcrumbs and multi-choice selectors. I built and designed my components based on the needs of the AirCalifornia website, and how my design choices would have to adapt between web and mobile web.

Component Highlight:

Buttons

Utilizing a master button component, I created a set of buttons that account for not only different levels of hierarchy in a UI layout, but also different states such as default, hover, focus and disabled.

Button colors and style indicate to the user their importance with types including primary, secondary, tertiary and subtle. Variant, instance swap, and text properties are utilized here.

Component Highlight:

Pop-Overs + Cards

To account for a variety of use cases, I created multiple breakpoints and variations for the card and list components. For example, the card component translates responsively from web to mobile web, and utilizes boolean properties to show or hide certain elements.

Accessibility

Color Contrast

I focused on testing all of AirCalifornia’s brand colors with the Web Content Accessibility Guidelines highest level of compliance (AAA). Appropriate text versus background colors are defined in the branding guidelines and implemented directly into the design system.

AirCalifornia Web prototype with text field and breadcrumbs highlighted.

Input feedback + Breadcrumbs

I wanted to ensure that the Connect design system provided valuable information and necessary feedback to AirCalifornia users. Including descriptive text on fields in an error state will prevent the user from being left guessing. Breadcrumbs denote to the user what step they are in in the flight booking process.

Prototypes

Using the Connect design system, I prototyped the AirCalifornia flight booking process on web and mobile web. I dialed into Figma’s prototyping capabilities utilizing components and auto-layout. The mobile and web prototypes follow the user journey of booking a flight from San Francisco to Lake Tahoe.

Mobile Web

Desktop Web

WatchOS

A WatchOS addition has been added to AirCalifornia’s digital platforms to engage their customers in the spirit of adventure once they check-in for their flight. Users can navigate to their gate with a custom compass element, adding delight and fun to an often stressful airport environment. Mimicking the native WatchOS elements and micro-interactions was a fun design challenge.

Learnings + Takeaways

When creating a design system - don’t be afraid to simplify. ✂️ 📐

Design systems work best when they fit the product they serve. There is no need for extraneous styles or componenets - simplification makes the UI easier to build, understand and develop. Too many different styles can make your brand unrecognizable.

Keep the brand at heart. 🖤 📖

When creating my design system, it was very helpful to have created my branding guidelines first. I could always look back at them, and make sure my decisions were on brand when building components and styles.

Look to your user’s goals for inspiration, not what’s already out there. 👀 ✈️

It's easy to fall into the trap of modeling your UI after the competition. But oftentimes, what's out there isn't necessarily an example of "good design". Good design puts its user's needs and goals first, not a trendy UI layout. Thinking about the information my user needed to receive, and how to get them from point A to point B the easiest, set me on a good path when creating AirCalifornia's digital presence.

AirCalifornia

Want to learn more about this project?