Modernizing MetLife UI
Building MetLife’s Design System & UI kit for efficiency, consistency and platform adaptability.
​
UI Kit for an enterprise design system.
Role: UI Designer
​
Skills: Interaction Design | Visual Design | Responsive and Adaptive Design | Documentation and Design Systems | UI Production design | accessibility | UX/UI | UI kits | Rapid prototyping beta tester | Accessibility
UI Kit
The UI kit was created for MetLife’s Enterprise Design System to be handed off to UX designers, enabling faster prototyping through reusable, pre-designed components that simplify workflows and minimize repetitive tasks.
​
The kit ensures visual and functional consistency across products, allowing teams to iterate faster and focus more on enhancing user experience and aligning with platform standards.
.jpg)
Overview
This project helped MetLife enterprise achieve 100% Figma migration by the end of 2024. Review the case study to learn about the real impact this project had on MetLife's design operational efficiency:
Team
1 Design Lead
1 Sr UX UI Designer
2 UI Designers
1 Project Manager
Tools
Figma
Adobe XD
Microsoft Teams
Timeframe
4 months
01
Buttons
UI kits offer a variety of buttons in different styles and sizes, ensuring a consistent and inviting user experience.​
02
Icons
03
Typography
Consistent and visually appealing typography is a hallmark of good design. UI kits often include carefully chosen fonts and type styles.
04
Form Elements
Whether it's input fields, checkboxes, or radio buttons, UI kits contain form elements designed for maximum usability and clarity.
06
Color Palettes
A harmonious color scheme can greatly impact an interface's overall look and feel. UI kits often come with predefined color palettes for cohesive designs.
07
UI Patterns
These kits provide common UI design patterns like login screens, product cards, and sidebars, saving you the trouble of reinventing the wheel.
​
Some UI patterns created for the Met Lift UI Kit include but are not limited to:
-
Calendar date selector
-
Slider
Benefits of Using UI Kits
Conclusion: On-time & Under Budget
​UI kits aren't just helpful—they’re game changers for modern interface design. Instead of spending hours building components, you can tap into ready-made resources and immediately leverage the full value of UI kits—without sacrificing time or energy. Let's break down the benefits:
​
-
Accelerated Workflow
Pre-designed components let you skip the repetitive groundwork and focus on creativity, drastically speeding up your design process.
-
Design Consistency
UI kits ensure visual cohesion by standardizing elements like buttons, icons, and navigation—critical for building polished, intuitive interfaces.
-
User-Centric Design
Components in UI kits are crafted with usability in mind, making it easier to design interfaces that are intuitive and accessible.
-
Platform Adaptability
Many kits are tailored for specific platforms (like iOS or Android), helping you align with established UI guidelines and deliver native experiences.
-
Customization and Flexibility
UI kits offer a strong design foundation, but they’re also highly customizable—giving you room to adapt elements to your project's unique style.
-
Faster Wireframing and Prototyping
UI kits make it easy to visualize concepts quickly through wireframes, enabling rapid iteration and early usability testing to refine designs effectively.
​
By streamlining your workflow and maintaining design quality, UI kits make UI design more efficient, consistent, and user-focused from the start.
