BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
s
MetLife Design System 2.0
Prototypes

The MetLife prototypes demonstrate the power of leveraging the Standards and UI Kits to deliver best-in-class experiences. The links below show how the patterns scale for marketing and enterprise use. Note that there are instances where marketing UI components and transactional components appear within the same experience.

MetLife Evolution

The Evolution marketing patterns were developed for the relaunch of metlife.com in late 2019 (in the U.S). These components have been designed with global marketing requirements in mind, and are available for use on Adobe Experience Manager. They include a new pathing tool that supports personalized experiences tailored for multiple audiences, and specialized components and templates for content marketing.

Visit evolution.metlife.com
AEM components 2.0 & guidelines

MetLife Evolution Site

Transactional Enterprise App

The transactional enterprise app provides a variety of examples of components that can be used to both present and gather information. For example, you’ll find patterns illustrating conversational UI, long forms, short forms, multi-step forms requiring a progress indicator, data visualizations and cards presenting dynamic and conditional data.

Enterprise App Demo
Sample implementation

Enteprise App

Native Mobile App

The native mobile app prototype provides a variety of examples of components that come together to create a cohesive mobile app experience. This is an example of a native app, and not responsive web. The transitions from page to page are an essential part of the native app experience. The patterns included can be leveraged for both presenting and gathering information.