Work

About

Work

About

Resume

CyanAirways

Re-branding, building a design system, and prototyping the digital presence for a under performing airline.

Jump to prototypes

View Figma Design System

View Branding Guidelines

Skills

UX/UI, Research, Product Design, Prototyping

Devices

Desktop/Web

Timeline

8 weeks

Role

Designer (individual project)

Devices

Desktop/Web, Mobile/Mweb, WatchOS

Role

Designer (individual project)

Timeline

12 weeks

Skills

Figma Design Systems + Variables, Branding, Product Design, Prototyping

Devices

Desktop, Mobile, WatchOS

Role

Designer (individual project)

Timeline

12 weeks

Skills

Figma Design Systems + Variables, Branding, Product Design, Prototyping

FINAL PROTOTYPE

There is a major opportunity to re-brand InterCaribbean Airways for this new era of travelers, millennials. This case study will explore Cyan Airways, a new modern chic brand derived from InterCaribbean; featuring a complete re-brand including a design system as well as a website and mobile redesign.

There is a major opportunity to re-brand InterCaribbean Airways for this new era of travelers, millennials. This case study will explore Cyan Airways, a new modern chic brand derived from InterCaribbean; featuring a complete re-brand including a design system as well as a website and
mobile redesign.

Problem

How can I modernize and redefine the branding for InterCaribbean Airways to a new and younger audience?

How do I meet the needs of our new target audience using design?

How will I establish a cohesive design system that encapsulates the Caribbean essance while ensuring visual appeal and usability across various platforms?

Problem

Solution

Create new branding guidelines for the airline to fit the needs of our new user: millennials.

By creating a design system that reflects the new brand and is built to make designing swift and developer handoff simple

Place a heavy focus on elements such as design tokens and components that will be used in the interface designs - web and mobile.

The Re-Brand

I crafted a new brand identity and visual identity for InterCaribbean, encapsulating aspects such as color palette, logo usage guidelines, brand voice, and accessibility notes. The renewed InterCaribbean is called, 'CyanAirways' captured in my detailed branding guidelines document below.

View Branding Guidelines

Soar

Cyan Airways Design System

Using the branding guidelines as a starting point, I analyzed the UI needs for CyanAirway's web, Mweb and WatchOS platforms and crafted a design system to create efficiency, consistency and order in the brands digital presence.

View Figma Design System

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 Variables

The Soar design tokens were established using Figma's new Variables tool for convenient usage and communication related to elements like interactivity, errors, and content hierarchy.

Components

I built and designed my components based on the needs of the CyanAirways website and how my design choices would have to adapt between web and mobile.

Accessibility

Color Contrast

Color
Contrast

Color testing was done with 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.

Error Messaging + Breadcrumbs

I wanted to ensure that the Soar design system provided necessary feedback to CyanAirways 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.

Error Messaging + Breadcrumbs

I wanted to ensure that the Soar design system provided necessary feedback to CyanAirways 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.

Final Designs

Using the Soar design system and new branding guidelines I was able to design a fully functional site that serves our target audiences needs.

PROTOTYPES

Using the Soar design system, I prototyped the CyanAirways flight booking process on web, mobile app and watch. I dialed into Figma’s prototyping capabilities utilizing components and auto-layout.

Desktop Web

The web prototype follow the user journey of booking a flight from Barbados to Guadeloupe.

Mobile App

The mobile prototype follow the user journey of reviewing their flight information and choosing seats.

WatchOS

A WatchOS addition has been added to CyanAirway's digital platforms to engage their younger customers 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.

LEARNINGS + TAKEAWAYS

Remember to keep a user-centric approach.

Remember to keep a
user-centric approach.

Design decisions should be centered around the preferences and needs of the target audience, incorporating valuable insights from user feedback to create an experience that truly resonates.

Problems are inevitable with design!

There are unique challenges specific to the airline industry. Keep testing and prototyping. Trial and error will enhance the overall travel experience for your consumers.

Stick to a distinct brand.

Good design puts its user's needs and goals first, not a trendy UI layout. Thinking about the chic relaxing brand my audience craves, and how to get them from point A to point B the simplest way, allowed for success when creating CyanAirways digital presence.

PROTOTYPES

Using the Soar design system, I prototyped the CyanAirways flight booking process on web, mobile app and watch. I dialed into Figma’s prototyping capabilities utilizing components and auto-layout.

Desktop Web

The web prototype follow the user journey of booking a flight from Barbados to Guadeloupe.

Mobile App

The mobile prototype follow the user journey of reviewing their flight information and choosing seats.

WatchOS

A WatchOS addition has been added to CyanAirway's digital platforms to engage their younger customers 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.

The Re-Brand

The Re-Brand

The Re-Brand

I crafted a new brand identity and visual identity for InterCaribbean, encapsulating aspects such as color palette, logo usage guidelines, brand voice, and accessibility notes. The renewed InterCaribbean is called, 'CyanAirways' captured in my detailed branding guidelines document below.

Soar

Soar

Soar

Cyan Airways Design System

Cyan Airways Design System

Cyan Airways Design System

Using the branding guidelines as a starting point, I analyzed the UI needs for CyanAirway's web, Mweb and WatchOS platforms and crafted a design system to create efficiency, consistency and order in the brands digital presence.

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 Variables

Figma Variables

Figma Variables

The Soar design tokens were established using Figma's new Variables tool for convenient usage and communication related to elements like interactivity, errors, and content hierarchy.

Components

I built and designed my components based on the needs of the CyanAirways website and how my design choices would have to adapt between web and mobile.

Accessibility

Color Contrast

ColorContrast

Color testing was done with 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.

Error Messaging + Breadcrumbs

I wanted to ensure that the Soar design system provided necessary feedback to CyanAirways 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.

Error Messaging + Breadcrumbs

I wanted to ensure that the Soar design system provided necessary feedback to CyanAirways 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.

Final Designs

Final Designs

Using the Soar design system and new branding guidelines I was able to design a fully functional site that serves our target audiences needs.

Final Designs

Final Designs

Using the Soar design system and new branding guidelines I was able to design a fully functional site that serves our target audiences needs.

Final Designs

Using the Soar design system and new branding guidelines I was able to design a fully functional site that serves our target audiences needs.

Color
Contrast