MetLife • 2019–2020
Evolution 2.0 Design System
Company
Role
Product Designer
Skills
Product Design
Visual Design
UX/UI Direction
Animation
Tools
Figma
Principle
After Effects
Overview
Navigating life together
I worked closely with product designers and developers to ensure MetLife’s current .com site would undergo a new design experience to support the company’s rebrand. My role was to create UX/UI experiences and animations across the redesigned site, while building new components grounded in the new brand.
The challenge
Redefine the site and scale what we build
Redefine the current MetLife.com site and identify areas of opportunity to create scalable components and dynamic animations.
Business goals
Create a homepage, product-level page, and search functionality.
Brand goals
Blend and fuse new MetLife branding into new components.
Product design goals
Elevate old components and enrich the experience through a new product design system.
Current state
Auditing the existing experience
At the beginning of the process, we observed and examined the existing user experience to identify key areas for improvement.
Old Site is off brand and the overall experience does not keep users on our site for too long.
Competitive analysis
Where users were going instead
A competitive analysis of user engagement was conducted between MetLife and three main direct competitors. The study found that users were bouncing out of MetLife’s site without engaging with content.
Priority segments
Personalization as the unlock
By category, we listed out what unique users need when visiting MetLife.com. After compiling user needs and competitive data, we found there was one main pain point for a successful redesign. To support the different needs of MetLife.com users, we rose up to meet them where they needed help to navigate their needs. In order to do this effectively, personalization was essential.
MVP personalization
Identifying visitors before designing for them
Before designing a personalized approach, we identified visitors to MetLife.com by using localization methods and behavioral actions.
New site map
A clearer path through the experience
While auditing the current navigation and footer we were able to detect dead links and areas in which the user could get lost. Below is the new site map for that experience.
MetLife rebranding
Rebrand craft in production UI
Working closely with the brand team, we were able to merge new iconography systems with gradient palettes to elevate new components. Below are some elements that were used for approaching the new site.
Design system 2.0
From marketing components to interactions
The new design system included comprehensive marketing components to interactions. We built components that were easily scalable to our international markets for present and future applications. Below are some (not all) standalone components that I created for our new MetLife design system.
UI animation
Showing engineering how components behave
Animations were created to show developers how components should behave upon user interaction. I created these animations with Principle and After Effects. The following are a few components in action.
Category hero
Loading build up and scroll on desktop; clickable expand and collapse on mobile.
Product offerings
Card selection and carousel on desktop; card swiping side-to-side on mobile.
Immersive brand navigation
Hover and selected states on desktop; swiping side-to-side on mobile.
Content carousel recirculation
Loading in on desktop; loading and swiping side-to-side on mobile.
The impact
Scaled for teams and markets
0+
Components and patterns documented in Evolution 2.0, from marketing modules through interactive surfaces, ready for localized rollouts.
0+
Markets represented in planning for scalable layouts, shared tokens, and reusable interaction patterns across regions.
0%
Fewer repetitive design–dev alignment cycles reported by squads after adopting the shared library and motion specs as source of truth.