AIG - 2017

Creating a global design system for AIG

Problem

My Role

Team

AIG struggled to maintain consistent UI across its portfolio of digital products. The lack of a design system was also creating signficant delays in product development.

Product Designer

1 Project Manager
4 Product Designers
2 Engineers

Impact

Skills

Timeline

The creation of global design system used by a team of 40 designers + developers for various AIG products. Buy in + an understanding of the importance of design systems across the organization.

Visual Design, Competitive Analysis, Component Design, Accessibility

4 months

In 2016, AIG established a digital transformation team to modernize its digital products. After we initially focused on building relationships with various business units and integrating into their teams, the next step was to develop a global design system to streamline AIG's processes and increase design and development velocity.

PRODUCT AUDIT

Goal: To create a comprehensive list of components that would meet the requirements for all of AIG’s digital products, and to collect the visual language principles (typography, color, grid systems) that we wanted to take forward.

Method: Audit of strongest customer-facing digital products.

Competitive Analysis

Goal: To understand industry standards and gain inspiration.

Method: Each designer chose a 1-2 popular design systems to research, and shared with the rest of the design systems team.

Part 1

Establishing the building blocks

Part 2

Establishing molecules + organisms

Part 3

Deep dive into my process of designing the AIG date range picker

PROJECT AUDIT

Goal: To understand the variations across AIG products, and document all of the necessary requirements for the date range picker.

Competitive Analysis

Goal: To understand best practices for date range pickers.

Method: I looked to examples from Airbnb and Google flights, since they cover a wide variety of use cases and are frequently used.

FINAL REquirements list

Interaction Considerations

KEYBOARD CONSIDERATIONS

1. Date picker overlay should appear when the user clicks on the input field and the calendar.

2. Default state: Will be pre-populated or empty depending on the situation.

3. Provide ability to navigate between days, months and years

4. Saving dates: clicking outside of the calendar saves the dates you selected.

1. Press left and right arrow keys to navigate the row by week day

2. Press the home and end keys to jump to the beginning or end of the current row

3. Press up and down arrow leys to navigate between weeks on the same day

4. Press the enter key to activate the selected date

5. Press escape to close the calendar without making a selection

VISUAL CONSIDERATIONS

1. Visual distinction between past, disabled, current and selected dates

2. Application of Hinge building block guidelines

FINAL DESIGN

DEV HANDOFF