An Overview

With a growing digital team, American Family Life Insurance lacked a formalized design system with brands existing on the web as separate identities, with individual groups creating their own source of standards for UI elements, components, and patterns –in both internal or outside agencies.

Project Goals

• Define and create components that ensure maximum flexibility and reusability while delivering in an agile framework
• Provide proper documentation that is digestible for onboarding new individuals and fellow product teams across the corporation
• Foster collaboration across various persons and teams

Research & Discovery

To start the project, I gather feedback from designers, content writers, and managers on pain points with the current style guide. From there, I did a UI audit of current patterns and styles commonly used across all teams. This part of the project fostered collaboration among all stakeholders.

Foundations

To synchronize across all teams in one vision, it was structured to be scalable and adaptable for each brand – supporting brand logos, grid systems, spacing scales, typography scales, color systems, and interactive language.

Typography

We introduced a type scale based on display headings, paragraph styles, and supporting styles. In addition, the branded palette was made with flexibility between light and dark color variations while maintaining maximum contrast accessibility.

Color

Much thought was given to the color palette to ensure flexibility with light and dark color variations. At the same time, we maintained a global interactive, neutral, and feedback palette across all the brands for maximum contrast accessibility.

Components

Building the system as componentry based made prototyping and building since many reusable interface elements can be referenced in global, structural, content, and data types. Additionally, interactive states were implemented to communicate specifications around tab stops, keyboard control requirements, spacing, and atom and molecular elements.

Patterns

With the components, patterns will inevitably result in reusable combinations of components that address common user objectives with sequences and flows.

Results

A reimagined design system was created with designers, content writers, and project managers that all will collaboratively grow and refine using Figma. In addition, ongoing evangelism of its usage is vital as more global team members will see it's purpose in maintaining brand integrity.