What’s New

v1.5 User Interface Element

v1.5 Marketing Library

v1.5 Sales & Servicing

Other Updates

v1.5 User Interface Element

v1.5 Marketing Library

v1.5 Sales & Servicing

v1.5 User Interface Element

v1.5 Marketing Library

v1.5 Sales & Servicing

December
• We've updated the Native App Components to reflect our latest v1.5 library.

November
• We've updated the User Interface Elements to reflect our latest v1.5 library.

August

• Enhancements to existing components: We’ve added new enhancements to some of our components from the Marketing Responsive Web components library.
  • Embedded Lead Form: Added variations to component. Background color options are grey, gradient, blue, and custom pattern. And option between one or two column layout.
  • Visual Product Card: Added sizing options for author to choose from
  • Text Insight Breaker: Added custom background option
  • Global Navigation: New ability to add a fifth menu item and ability to create menu item as a link
  • Pull Quote Embed: Added ability to add subscript and superscript
  • Hero Detailed Banner: Added ability to add subscript and superscript
  • Hero Article Banner: New component
  • Play Button: Updated play button on all video components with additional color options depending on background color.
• New video tutorials for authors: We have added video tutorials for authors to use within the WhatFix self help drawer. These video tutorials will help with authoring more complex components.
• We released updates to our user interface elements library, marketing responsive web components library, and native app components library. Updates include a more modern and consistent UI design work. If you are starting a newly built digital experience, use this library.
  • v1.5 - UI Elements Library
  This version contains updates to some of our foundational elements, including buttons and links. The library has been implemented into the latest Responsive Web and Native App component libraries so you won’t see things like out-dated button styling in the components.
  Access v1.5 User Interface Elements
  • v1.5 - Marketing Responsive Web Components library
  Use this library if you are creating new digital experiences on AEM (like updates to your corporate website). While the changes in our foundational elements are reflected in this design library, they will not be pushed in code until Q4. Code changes will reflect automatically in your authored experiences.
  Access v1.5 Responsive Web Components
  • v1.5 - Native App Components Library
  Access v1.5 Native App Components

July

• New additions to the design system: We’ve added 16 new components to the responsive web components library. You can learn about them here. The components are:
  

  	• Auto Rotating Hero	• Multi Topic Hero
  	• Content Feed	• Product Bundle
  	• Email Subscription	• Related Tags
  	• Feature Hero	• Selected Articles
  	• Headline Breaker	• Simple List
  	• Hero Event	• Single Topic Hero
  	• Hub Promo	• Sub-Topic Hero
  	• Lead Gen Breaker	• Tabbed Content

• Introducing ‘Designing Your Corporate Websites’
  • Based on feedback from our community of practitioners we’re launching a new section for digital design use cases common at MetLife. Our first use case is all about how to design and revamp your corporate website. You have access to guidance, templates, step-by-steps, and real examples from MetLife. Explore Now
• Key Updates with New Codebase:
  
  1. Modern Codebase: Make use of New AEM features, including Experience Fragments, which allow you to create a piece of repeatable content (such as a featured banner that lives on multiple pages) and maintain that in one place.
  2. Modern Design: By using the new codebase, it ensures you are using the most up to date design system elements that MetLife has to offer.
  3. Flexibility: Our new Codebase uses editable templates, meaning the header, footer, and hero can be adjusted as needed to facilitate your experience needs.
  4. Future Tech Strategy: The new codebase taps into new functionality that adobe provides in their new version of the platform, including automated unit testing for our developers and the touch UI experience for our AEM authors.
  5. SEO: We have made some key SEO enhancements on our new codebase which includes:
     • 302 redirect fix: Dynamic content will now link directly without a 302 redirect. This fixes a prior issue with page authority of destination pages, such as within the Article Grid component.
     • Mobile Image Selection for Mobile and Tablet: Authors now have the capability of selecting a smaller, mobile-friendly hero image to use in Mobile and Tablet viewports. Using mobile images will help speed load times, improve page ranking, and enhance user experience.
     • H tag enhancements: Hero image titles can now be selected as either H1 (default) or H2, giving flexibility when setting up the page. In the event that “H2” is selected, page properties allow you to toggle a page level “H1 tag” value. This can be used in the event that there is no Hero or Hero title, or you use a multi-tab Hero.

Refreshed design.metlife.com is live
The MetLife Global Design System has been updated with a new look and a new home. 

September
• New homepage with a video introduction to the MetLife Global Design System
• A Getting Started page for onboarding
• Refreshed Standards and Core Guidance to inform design work globally
• Consolidated resources for Responsive Web and Native App design migrated from ux.metlife.com and evolution.metlife.com
• New resources and guidance for Marketing & Advertising
• A new case study on the post-purchase experience
• How-to articles for putting XD into practice
• Updated Adobe XD library files

New content added to design.metlife.com
After working closely in the spring of 2021 with MetLife teams around the world, design inspiration for localized digital design has been added to a new Showcase section along with new design standards and guidance across the site. 

July
• New menu structure. Restructured the site and global nav and updated terminology to make it easier to understand and use the MetLife Global Design System.
• Updated landing pages. Updated language on the homepage and landing pages for each section to provide better guidance on the purpose of each section of the site.
• Updated Resources terminology. Simplified naming for UI Kits and prototypes.
• New Showcase section. Explore digital brand expression from MetLife teams around the world to give you the creative reference and inspiration to do more great work. This includes articles that demonstrate brand expression for the US, Chile, Mexico, Japan and Korea. Mexico, Japan and Korea all have localized brands. Look to Chile as an example of how the Masterbrand comes to life for a non-US market that does not have a localized brand.
• Updated XD in Practice section. Renamed “How to do it” to “XD in Practice”. Updated landing page with a new video explaining Experience Design.

Updated responsive web component documentation
Since the 2019 launch of www.MetLife.com in the U.S., new AEM responsive web components have been updated for use globally.