MetLife: Mobile Redesign & UI Library

— To kick off the project, we partnered closely with MetLife’s internal UX Research and Business Analyst teams. By immersing ourselves in their foundational work, which included customer interviews, app analytics, and iOS/Android store reviews, we were able to fully grasp the context of the problem space. Synthesizing their user journey maps was critical for us to understand exactly where users were struggling and to formulate a strategic design approach.

Armed with a clear picture of the core pain points identified by the research, we transitioned into problem-solving. We brainstormed targeted design solutions to alleviate those specific areas of friction and conducted a competitive analysis of industry leaders to ensure our final product integrated the best UX practices available.

— After mapping the core user journeys, I partnered directly with MetLife’s internal UX Research and Business Analyst teams to audit and define the essential UI elements. Rather than working in a silo, this collaborative selection process ensured that every component was backed by qualitative user data and clear business requirements. Together, we curated a precise set of elements that would serve as the scalable, architectural backbone of the app's design system.

From there, we initiated a comprehensive visual revamp, reimagining key functional workflows. By translating the core principles of the MetLife brand into a modernized digital ecosystem, we crafted a fresh visual identity that bridged form and function. Every design decision was focused on fostering a seamless, empathetic human-to-machine relationship, ensuring the interface not only elevated the daily user experience but maintained a highly recognizable and consistent MetLife brand presence.

— To bring the interface to life, I utilized Principle to design custom UI animations. In response to client requests for a more engaging experience, these interactions were introduced as strategic solutions rather than just decorative flair. They were carefully crafted to improve usability, increase engagement, and provide users with a deeply intuitive digital environment.

These dynamic animations weren't just conceptual demos; they transitioned into invaluable, reusable assets within our component library. By seamlessly integrating motion into the design system, we proved that exceptional design goes beyond surface-level aesthetics, it relies on a perfect balance of visual appeal and highly functional, frictionless usability.

— To establish a scalable system architecture, I consolidated all our custom components into a centralized Sketch library. I organized the elements onto dedicated artboards with comprehensive specs, seamlessly integrating them into MetLife’s broader Native App Component library. Because empathy is at the core of this design process, I worked to do my best towards making the components ADA compliant. This ensured the final product wasn't just visually refined, but universally accessible, creating a frictionless experience for every user.

— Reflecting on this project, the biggest takeaway was finding the right balance between user needs and the client's business vision. Continuous iteration reinforced that design is a constantly evolving process. Building the component library wasn't just an organizational task; it was a strategic investment in the app's structural backbone and future scalability. Furthermore, prioritizing purposeful motion design and strict ADA compliance highlighted my core belief: true design success relies on empathy, creating a frictionless and universally inclusive human-to-machine relationship.