BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Introduction

Mobile App Patterns

The patterns in this section are an extension of the rest of the patterns found within ux.metlife.com. These market agnostic patterns were created specifically for use within mobile apps and global MetLife mobile products. These patterns are not intended to be used for responsive web experiences.

When creating a mobile app experience, the mobile app patterns take precedence over the rest of the patterns. However, when a mobile app pattern is not available, the responsive web pattern may be used.

On mobile apps, transitions and micro-interactions are a key piece of the experience and are essential for helping the user learn, discover and use the features within the app. They also help navigate the user and provide opportunities to reinforce the brand. Therefore, many of the patterns have an associated animation which illustrates the transitions and micro-interactions. It is important that the patterns are built with their associated transitions and micro-interactions.

Screen Layout

First orient the user with a clear and accurate title and when necessary, a subtitle that provides useful further detail.

Use cards, table rows with large type/contrast or controls (tabs, dropdowns etc) as the first item following the top nav or header to draw attention to high priority and/or time sensitive content. But have as few high priority, high contrast components on each screen as possible.

screen-layout

Keep secondary controls (secondary to the bottom nav and specific to the current screen) at the top, below the top nav bar and above the content it affects.

screen-layout

How to Use Sketch Symbols

Download

Metlife App Pattern Library 4.0.sketch contains all the variations of mobile pattern available under symbols. There are different page templates for example of spacing etc and usage of these individual components.

Symbols Usage Guidelines

The following items should not be changed:

  • • MetLife Logo – no changes to any aspect of it, including color
  • • Brand Icons (2-color icons) – colors and shapes should never be changed.
  • • Utility Icons – shapes should not be changed – colors are always either #007ABC (blue – Active/Selected) or #333333 (darkest gray – On Load)
  • • Navigational Icons (pinned bottom bar) – shapes should not be changed. Different icons from the branded collection could be substituted.
  • • On-load icons are always #333333 and Selected(current section) icons are always #007ABC.
  • • Divider with Gradient and card edges with gradient bars – do not change gradient.
  • • Atomic Elements (such as form fields and buttons) – no stylistic changes or color changes should be made

Things they can potentially change:

  • • Colors in solid backgrounds in page headers and/or colors in gradient pattern backgrounds (but only with explicit approval/review from Brand Team). We should also advise that contrast compliance for Level-AA must be maintained in any new color choices, then direct them to that part of the PL for more information.