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 it with a competitive analysis and interviews between current users and sales representatives to gather information about their past experiences with the platform
1. 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, 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.
Phase 2: Design
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.
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.
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