Team
UX Designers (4), Graphic Designer

Tools
Adobe XD, Zeroheight

Year
2020 – 2021

m.
Intro
Approach
Foundation
Colors
Typography
Buttons
Fields
App
Impact
Learnings

Introduction

In 2020, Wing’s design team experienced a lot of growth—from just myself and a product manager to an additional 3 product designers and a graphic designer. As we began working on a number of different projects, we inevitably found inconsistencies across our designs. If left unchecked, this lack of cohesion would negatively impact Wing's visual identity and the users’ overall experience with Wing’s products. Realizing we needed a central source for aligning styles, components, and guidelines across our designs, we started developing Wing’s first design system.

My role on this project focused on auditing existing styles across Wing’s applications, researching design system best practices, and building reusable components and guidelines alongside 3 other designers.

Our Goals

The Approach

Conduct a UI audit

My first step was to conduct a UI audit to identify areas of inconsistencies. During the creation of our system, I was also working on the Wing App project, so I focused on compiling and recording existing styles and components used on Wing’s mobile app.

Research best practices

Alongside the other designers, I researched best practices for building design systems—i.e. responsive scaling, UI spacing, grid systems, accessible colors, type, and more. During this period, I communicated with the CEO on his vision for the Wing style guide rebrand.

Creating the building blocks

From the different styles and components collected across Wing’s website, mobile app, and web dashboard, I discussed with the other designers whether we would keep or change specific styles across color and type.

Assembling our pattern library

As a team, we assessed both current and potential use cases to determine the most optimal design for states and variants, which helped to ensure we were building reusable, scalable components. Using established styles, I created an array of these components—buttons, form fields, and app and web components—along with their different states and variants.

Throughout the process, I communicated consistently with the other designers to ensure we were on the same page on component iterations, usage guidelines, and overall decision-making.

Foundation

Following Atomic Design guidelines, we mapped out our base elements first—scale, spacing, and grid system for various screen sizes. This would help us to build an organized design layout that scaled across devices. Using a modular scale, we decided on a ratio that we could apply to our base size of 8px, which we found was an easy number that could scale to more whole numbers.

Spacing

Our guidelines on spacing between UI elements was any multiple of 8px, our base size. On which multiple to use, we agreed to leave the decision up to the designer’s best judgement on their situation, unless it applied cross-platform. For example, we found a 20px spacing between form fields on mobile to be the best after comparing it with whole-number multiples of 16px and 24px. This was especially the case for error form fields.

Responsive Grid System

For our grid system, we adopted similar guidelines to Google Material Design’s guides on responsive grid layouts — 4-column, 6-column, and 12-column grids for mobile, tablet, and laptop/desktop screen sizes respectively. Through Google Analytics, we also took into consideration which devices were most used by our customer base to view Wing’s website, which helped us decide which specific devices to design for.

Colors

Wing’s initial color palette included black, white, a few greys, a signature blue (#206BEF), and a red and green that did not pass accessibility. Working with the existing colors, we created a palette that included a group of frequently used colors (e.g. Wing Blue and Error Red), a greyscale, accents, and gradients.

Typography

We selected two sans-serif fonts (one for heading, one for body text) to complement Wing’s brand identity — a more modern, digital-first company. We put together the mobile typography first as the base size, before scaling upwards for tablet, laptop, and desktop screen sizes.

How we organize our typography

To keep our typography organized internally, we followed a logical naming format to help make searching for specific character styles easier:

ScreenSizeInitial-Level[.FontWeight/State][.#HexColor]

Buttons

Our buttons are built off of the signature blue button which existed on the Wing website. We created different states and variants of the button to use in various scenarios. When scaling our buttons for tablet, laptop, and desktop, we used our mobile button size (iPhone 8) as a base.

Form & Input Fields

Our form fields are built off of 3 base components: Basic Input Fields, Drop-Down Fields, and Drop-Down Fields with Search. As with our button sizes, we based our form field size on Apple’s Human Interface Guidelines to make buttons and form fields optimal for touch screens.

Mobile App Components

As I was primarily designing for iOS and Android, I created more of the mobile app components. The following is a sample of those multi-state components, including navigation bars, subscriber cards, UI selectors, and toggles. I worked closely with the web dashboard designer to ensure consistency with our components. Illustrations were created by our graphic designer.

Guidelines on use

Impact

50% increased efficiency

Using a design system, I found I was able to design from concept to final product 50% faster. I tested this with the Wing App project, where the Home design took ~1 month to complete with an “in-progress” system, while other app flows (Billing, Settings) took ~2 weeks to complete with more defined styles and reusable components.

80% average increased consistency

Evaluating cross-platform designs, I found an average of 80% similarity between the Home design on the mobile app and the web dashboard. I chose this as my sample as I worked closely with another designer to create similar experiences.

Accurately measuring for consistency was difficult, but my approach was to score the overall UI against each category of the design system—color, type, buttons, components, illustrations—and calculate the average.

Learnings

Stakeholder buy-in and adoption isn’t always easy

The primary goal for v.1 of our system was to get a usable system in place so all designers were on the same page about styles, components, and usage guidelines. Due to resource constraints within the company, the engineers were unable to participate actively in developing the CSS framework and collaborate on establishing design tokens. Next steps would be to communicate with the CEO the significance of design systems for the business (e.g. scalability), to hopefully get buy-in and thus engineering adoption and participation.

Accessibility integration with design systems

As design systems are a source of truth for companies, I realized if accessibility standards were built into systems from the beginning, more accessible products could be built. Each designer and engineer could reference the same source for anything accessibility-related, which in turn would improve efficiency as a whole. An accessible system isn’t something I was able to create on Wing’s design system due to time constraints, but it is something I would advocate for going forward.