MetLife Design System
Achieving 100% Figma migration by the end of 2024.
Impact: MetLife updated its mobile and web design system for all enterprise products.
Product requirements
The design system was not only being moved, but also functionally improved and visually updated.
Changes needed
- Update designs to match new branding parameters.
- Improve visual and usage consistency.
- Match code database for front-end developer reference.
Personas
- Experienced digital designers who are new to Figma.
- Front-end developers who are new to Figma.
- Non-designers who need to make design drafts.
Experienced designers new to Figma would need clean components, consistent documentation, and sustainability.
Simplicity and Functionality
Many key functions of Figma are unavailable in Adobe XD.
I worked closely with MetLife directors to recreate all design elements into a system unique to their needs.
At the time of this project, Variables in Figma had just been released. We used Variables to manage all color changes, improve color control, and reduce component clutter.
I ensured all documentation was stored in the Figma library and in the component itself, for quick access during work and detailed reference when needed.
Also, when an element had a major functional or aesthetic change, I created a separate component so visual searching was easier.
I built the design patterns using only padding with auto-layout to create responsive sizing.
This allowed devs to continue referencing the code base but also change to modular or intrinsic designs in the future.
All design patterns had no more than 1 extra nested component to prevent data loss errors and high load times on prototypes.
MetLife also needed non-designers to make web page drafts in Figma.
Separation of Concerns
Instead of changing the core components, I built a separate library of simplified components to prevent mass errors and create a better user experience for non-designers.
I kept the editing capabilities restricted to colors, text, and key layout options to prevent errors and narrow design focus.
I designed the components with all padding included to be easily dropped into frames with auto layout.
I included familiar elements, like spacers, and language commonly used in other drag-and-drop programs to facilitate learning.
Prototyping
The MetLife library needed high-fidelity prototypes to demonstrate the functionality of certain elements.
Here are a few I made.
Address form – Autofill
Page Loading – Shimmer
Date Pickers
On time and under budget
The project was scheduled for 6 months, but we completed the goal before the end of the year. This gave MetLife more time to focus on preparing its website prototype for an upcoming showcase and begin putting its new design system to use.
“My team and I had the pleasure of working with Seth on an enterprise-scale design system migration from late 2023 into early 2024, and his work and quality of design was/is exemplary. Always eager to go above and beyond with bringing new ideas and capabilities to the table, Seth left a mark as a key contributor to the future of all MetLife digital design. He’s a pleasure to work with, incredibly talented, and a visionary UX leader.”
Joe Ascanio | Global Design System Product Owner at MetLife
