Claudio Merino
UX design / Strategy & Research

MetLife Chile. Customer's site Redesign

Ux / UI design

Context

MetLife is one of the most significant health and life insurance providers in Chile. In 2017, the global company introduced a new design identity that applied to all its products and branches around the globe. Because of this, I was contacted by the product team in Chile to lead the redesign of their customer's site, implement the new brand guidelines, and create a design system for all their products.

 The product mix in MetLife is quite broad: Health and life insurances, mortgages, retirement plans, etc., and this redesign needed to include a wide range of user ages and information requirements, so my first challenge here was to come up with a reusable set of elements and components that could fit all the business requirements to allow us to reuse them in other instances and improve the development times.

My role in this project was to lead the design team and be the users-voice between business, marketing, and IT.

Before and after of the clients site

Before and after of the clients site

Phase 1. Discovery

This wasn't the first project I was doing with MetLife, so most of the user research was taken from internal documents from the corporate branch, older research activities conducted by me and complemented with a competitive analysis and interviews between current users and sales representatives to gather information about their past experiences with the platform

Insurance client's site redesign

Competitive Research

I got access to the client's sites to the main Chilean competitors to identify patterns and catalog their offerings to their users.
I got the main ideas of what was available to the customers back then and how we could do things better by looking at immediate competitors in the Insurance sector and smaller competitors in the Fin-tech industry.

Some of the main conclusions

  • The old MetLife's site had by far the worst score in all the evaluated platforms

  • Only one of the competitors have a mobile-friendly version

  • Confusing content hierarchy in all the sites reviewed. 

Phase 2. Ideation
Insurance client's site redesign

Sketches

I started the design process by gathering the business and product team in a room to discuss and sketch rough ideas for the main features. Collecting their ideas helped me align with the team, set the expectations, and gain better knowledge about what will work at the technical level. 

This collaboration allowed me to get a common ground to understand the redesign better and get valuable feedback from the stockholders before getting too attached to a particular idea or layout.

Building Reusable Patterns

One of the site redesign's goals was to build a pattern library to reuse the assets on all other websites redesign they will have to face shortly. Inspired by the Atomic Design Methodology, I collected all the elements from the site to build a reusable library to create a unified design language throughout MetLife‚Äôs sites. 

The Design System

I built the system within a Sketch document that could be easily shared and implemented in our projects, which happened to be critical to the project's success, actually shortening the designing and implementation times.

AI made sure to include some basic marketing guidelines such as colors and typeface and all the UI elements for forms, buttons, and other web elements planned to be reused.

Part of the design system 

Part of the design system 

UI Design

Once I got all the UI elements I needed for my design, I started producing the final screens in Sketch. Using the design system components, I created all the screens required for the redesign.

Main improvements
Insurance client's site redesign

Responsive design

The former mobile experience was very frustrating because the design didn't support a mobile view, so this was a must in this redesign

One of the main challenges was to organize the information for mobile devices, especially the information tables where the number of columns made it impossible to show all the needed information in one sight

Bring back the trust to the customer

The former design, which was over 12 years old, was outdated and didn't inspire trust, especially if you needed to enter sensitive information to update your policy information or pay your insurance. 


Insurance client's site redesign
What did I learn?
Insurance client's site redesign

Consensus is easier if everybody chips-in 

Having co-creation sessions with all the involved teams improves the design process and brings synergy between the different areas. Working this way ends the eternal email threads and feedback over the feedback we were used to having in this kind of project and let us make informed and consensus design decisions in a fraction of the time we had done it in the past.

Insurance client's site redesign