Metlife Native App Library

Agency

Big Human

Year

2021

Scope of Work

Product Design, UI Library, Animation

Location

New York

MetLife, Inc. is the holding corporation for the Metropolitan Life Insurance Company better known as MetLife, and its affiliates.

MetLife is among the largest global providers of insurance, annuities, and employee benefit programs, with 90 million customers in over 60 countries. MetLife ranked No. 43 in the 2018 Fortune 500 list of the largest United States corporations by total revenue.

Background

The work consisted of a complete redesign of the mobile application for the MetLife insurance company and the creation of a UI library for further use by MetLife's internal teams.
‍
I've been involved in redesigning and improving existing user flows based on user feedback and recommendations from the MetLife team, preparing prototypes for user testing and weekly demonstration to clients, was responsible for creating a library of ui components in Sketch, and creating animated prototypes of user interactions using Principle.

Research

First, we dived into customer interviews and analyzed what people were saying about the app. Combining this data with app analytics from iOS and Android reviews gave us a huge amount of insight into what users were struggling with. Mapping out the user journey through the app helped us identify areas where we could make the app experience better and more comfortable at every stage.

Once we had a complete picture of how people were using the app, we focused on the parts that were causing difficulties. Identifying these pain points during the design process was very important. We brainstormed solutions to fix these problems. Along with this, we collected examples of what works well in other companies in order to integrate these best practices into our design.

Design

Once we mapped out how users moved through the app, we collaborated closely with the clients to decide on the essential elements needed to build a library that would serve as the backbone of the app's design. This process involved a meticulous selection process to ensure that every piece was not just necessary but also aligned perfectly with what the app required.

Following this, we embarked on a visual revamp, reimagining various processes within the app. Leveraging the core principles of the MetLife brand, we crafted a fresh visual identity that married the app's functionality with the established brand aesthetics. It wasn't just about making things look good; it was about creating a seamless blend between function and form, ensuring that every visual element spoke the language of MetLife's brand identity. This overhaul aimed to not only enhance the user experience but also maintain a consistent and recognizable brand presence across the app's interface.

Animations

In response to the client's requests to improve the design, we decided to use interface animation to enhance the visual appeal of the app and improve the user experience. To do this, I utilized the capabilities of the Principle app, creating compelling animations that breathed life into the interface. These dynamic animations weren't just a demo, they were carefully crafted to enhance usability and user engagement.The resulting animations became an invaluable asset in our character library, transforming into dynamic elements that enriched the overall design.

By integrating animations, we aimed not only to create eye-catching visuals, but also to offer users a more intuitive and enjoyable interaction with the app. This step confirmed the idea that design is not only about appearance, but also about the ability to create a visually appealing and functionally user-friendly application.

Creating Native App Library

We've meticulously collected all of the components we've created into one comprehensive Sketch file, providing a neat and organized repository of our design assets. For ease of access and usability, we divided these elements into separate artboards, providing each group with detailed information. Each artboard served as a separate space, providing comprehensive information about each individual element. This library became an integral part of the Native App Components library within the broader MetLife design system.

But our work didn't end there. We held ourselves to the highest standards, scrutinizing each element for ADA compliance. This was key to ensuring that our app would meet all user requirements, regardless of their abilities and preferences. Striving to create an inclusive and convenient experience for every customer remained our top priority throughout the development process. This careful approach emphasized our belief that design should not only be visually appealing, but also universally accessible, providing a seamless and enjoyable experience for all.

Conclusion

Analyzing this project, the key lessons learned were very important. Understanding the pulse of user feedback and merging it with the client's vision was fundamental. The process of refinement, testing and iteration demonstrated the importance of continuous design evolution. Building an extensive library of user interfaces was not just a task, but a strategic investment in future scalability and consistency. The integration of animations to enhance the appeal of the interface emphasized the importance of dynamic and engaging user interactions.

Meticulous attention to detail, especially ADA compliance, reaffirmed the principle of inclusivity in design. This project embodied the synergy between user-centeredness, innovation, and strategic design thinking, paving the way for future endeavors to create effective user-centered solutions.