MetLife.com

MetLife came to us asking to elevate the EBTS (Employee Benefit Trends Study) web experience. They wanted to position MetLife as an authority and a thought leader in the employee benefits category. Ideally the experience would create compelling storytelling and showcase insights from the 16 years of the report in an engaging way, with focus on the more recent 2018/2019 reports. On top of the EBTS reports, MetLife wanted an experience designed to increase awareness of their very own expertise in employee benefit solutions and thought leadership. Ideally the experience would be simple to navigate, and build extreme trust in the MetLife expertise in the category.

My role was to be the bridge between the strategy that had been defined and the design that would come to life. I lead how all of the components would function and work with eachother. I attacked this with a systems mind set in knowing we could only work with a certain amount of components and templates to complete the task at hand. ( Little did I know this would be the beginning of a ~9 month engagement, that included 3 different streams of work ). My role also included all documentation following every sprint, for the 3rd party development team. Complete annotations and being available for follow up questions regarding how all of the components work by themself and together in the overall experience.

This first MetLife project led to a longer term engagement, which I played a large part in throughout all streams of work that came in.

Links to the live sites below:

MetLife.com

Employee Benefit Trends study

MetLife EBTS work-stream.

Content Mapping - Define Phase

Content Mapping as a part of the define phase process. During this phase, myself and an Experience Strategist sat down to define the flow of content within the templates we were planning on designing. This is done pre-design and helps further define the components that would be designed.

Lo Fidelity ‘Mini Wires’ - Define Phase

Sitemap - Define Phase

The sitemap was established during the define phase of the project. This was to help ground us, as well as the client on how and where different landing pages and detail pages will live within the existing site.

The Components - Design Phase

Chapter Component

The visual designs above are displaying how the ‘chaptering’ component had come to life in desktop and mobile. The MetLife EBTS Report digital experience challenge was being able to easily navigate a long form piece of content. In desktop a user can see the progress made throughout a chapter, as well as click to navigate to the next. On mobile, this chaptering becomes a floating action button in the bottom right of the screen. Tapping on that button would activate a full screen takeover of the chaptering as seen in the desktop. From there, a user can tap through to a different chapter.

Why MetLife Component

The Why MetLife component came to life with a simple animation that focused on one statement at a time. It was a nice solve to bring text to life.

Content Promotion - Design / Development

Content Promotion played a large part in the development in this project. I took on the role of communicating this to developers. The MetLife dev team was working within AEM. I created this document in order to demonstrate how an articles promo type would manifest in the front end design. For example; if Article ‘A’ was given the promo type ‘Key Stat Black’, this article would show as a card in the content feed, as well as a breaker within the larger page. When the author chooses a breaker for the page, Article ‘A’ would be one of the available articles to be highlighted within that breaker. All metadata fields would be dynamically pulled because of how the system was designed and built.