AIG - 2017

Creating a global design system for AIG

My Role

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




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.

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
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
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
1. Visual distinction between past, disabled, current and selected dates
2. Application of Hinge building block guidelines