Before and after of the clients site
MetLife Chile. Customer's site Redesign
Ux / UI design
MetLife is one of the biggest health and life insurance providers in Chile. During the term of 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, implementing the new brand guidelines and creating 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.
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 it with a competitive analysis and interviews between current users and sales representatives to gather information about their past experiences with the platform
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, as well as smaller competitors in the Fintech 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.
I started the design process gathering the business and product team in a room so we could start discussing and sketching rough ideas for the main features. Collecting their ideas helped me to align with the team, setting the expectations and gaining better knowledge about what things will work at the technical level.
This collaboration allowed me to get a common ground to better understand the redesign 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 in the near future. 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 key to the success of the project, actually shortening the designing and implementation times.
AI made sure to include some of the basic marketing guidelines such as colors and typeface in addition to all the UI elements for forms, buttons and other web elements planned to be reuse.
Once I got all the UI elements I need for my design, I started producing the final screens in Sketch. Using the design system components I started all the screens needed for the redesign.
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 impossible to show all the needed information in one sight
Bring back the trust to the customer
The former design, witch was over 12 years old, was outdated and didn't inspire trust, especially if you needed to enter sensitive information as update your policy information or to pay your insurance.
Consensus is easier if everybody chips-in
Having co-creation sessions with all the involved teams improves the design process and bring synergy between the different areas. Working this way ends the eternal email threads and feedback over the feedback we were used to have 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.