Hinge System Design

Context

Historically, AIG has struggled to maintain consistent UI across its portfolio of digital products & website, creating delays in product development. Each project team would develop their own pattern libraries & frameworks, which also caused a lack of continuity across the enterprise.

I worked with a team of product designers and front end developers to establish AIG’s global design system and digital standards which could then be applied across all of our products. 

Tools + Skills

Visual Design

Date Visualization

Icon Design

Sketch

Invision

Team

Drew Burdick

Ben Daly

Josh Leavitt

Katie DePue

Nick Phillips

Role

Visual Designer

Duration

Ongoing project

Research + Competitive Analysis

We began by digging in to understand the existing ecosystem, including all technology stacks, development frameworks and products across AIG. We then reviewed the design languages of other large Fortune 500’s to understand their approach. We also read countless articles and talked to others in the industry to gain insights.

Curation

Armed with insights from our research, we set out to do an audit of our best customer-facing digital products. After collecting the components and styles from around AIG, we then categorized them into logical groups and curated them into an MVP.

Testing

After curating an MVP of our best styles and components, we put them to the test. We started by vetting them for accessibility issues, considering color contrast, type size and interaction. Next, we socialized the MVP with other teams across the organization to get their input and feedback. Taking in all of this information, we continued to iterate and socialize until we felt confident that the MVP was ready to launch.

Our Minimal Viable Product

When creating our MVP for both documentation and design purposes, we organized it into two sections: Building Blocks and Core Components.

Building Blocks

Building blocks are guidelines that are applied across all Hinge elements. They provide instructions for how our typography should be used, our grid and layout system, our color palette application etc. They also consist of core attributes - which including have spacing rules and designs of different states ( hover, selected, error, disabled etc). These are mostly provided for documentation purposes and as guidelines for designing new components.

Core Components

Our core components are available in a sketch file and sketch library for designers to use while designing. These included buttons, checkboxes, input fields, modals, tooltips etc.

Design Process : Date Range Picker

I helped design some of the more complex components in Hinge like our Date Range Picker. I went through a rigorous process of conducting competitive analysis, researching and designing for accessibility concerns, and finally making sure the component felt modern and visually engaging while following our established building blocks.

Competitive Analysis

I looked at a few industry leaders such as Airbnb and Google Flights to understand the nuances and interactions that make their date pickers elegant and easy to use. I also found Airbnb’s date picker (link) react library which help facilitate communication with our front end developers.

Keyboard Accessibility Requirements

1. When the calendar is opened, the focus is set on the current date. 

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

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

4. Press up and down arrow keys to navigate between weeks on the same day. 

5. Press the pagedown and pageup keys to navigate backwards of forwards by the month

6. Press the enter key to activate the selected date. 

7. Press escape to close the calender without making a selection. 

8. Seperate fields for start and end date so the screen reader can read both fields.

9. User should be able to type in and/or select date.

Interaction Considerations

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

2. Default State: Will be pre-populated or empty depending on the situation it is used in.If user is expected to select today’s date, then we can prepopulate it for them. If there is no such date, it would remain empty. 

3. Navigation between days, months and years.

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

Visual Design Considerations

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

2. Application of Hinge building block guidelines.