MetLife

Client Self-Service App & Web Portal

Role: Senior UI/UX Designer

Duration: 4+ years

Platforms: iOS, Android, Responsive Web

Market: Mexico

Scope: Client mobile app (CSS) & Client Web Portal (CWP)

________________________________________

MetLife Mexico serves customers across life insurance, savings, and medical coverage.

I worked as the sole Senior UI/UX Designer leading the design of both the Client Self-Service mobile application (CSS) and the Client Web Portal (CWP). My role focused on simplifying complex insurance information and actions related to the users policies.

The Challenge

Insurance experiences are naturally complex. At MetLife Mexico, users faced several key challenges:

Cognitive overlad: Policies contained dense complex terminology and financial concepts.
Delicate interactions: Payments, claims and policy changes.
Platform inconsistency: Mobile and web experiences needed alignment without sacrificing usability.

The main goal was to make insurance understandable and actionable.

My Role

As the sole designer, I owned the UX and UI end-to-end:

UX strategy and interaction design
UI design for mobile and web
Creation and maintenance of CSS and CWP design system
Information architecture
Error scenarios and edge-case design
Collaboration with Scrum, Dev and business teams
Iterative improvements based on testing, feedback and constraints

Design Principles

Throughout both products, I had to make some critical design decisions:

Clarity over completeness: Insurance data was displayed progressively to not overwhelm users
Consistency across platforms: Ensured familiarity between mobile and web experiences
Re-imagined stressful flows: Payments, claims and medical scenarios

Key Problems & Solutions

1. Authentication & Account Recovery

Problem: Users frequently struggled with login, password recovery and registration due to complex limitations.

Solution: I Designed step-by-step authentication flows with:

Clear validation feedbcak
Explicit password requirements
Recovery paths and exit options

2. Understanding Policies & Coverage

Problem: Users couldn't easily understand what their policy covered, how much they paid or their benefits.

Solution: I restructured their policy screens using:

Modular sections
New components
Contextual help and tooltips
Visual hierarchy

3. Payments & Financial Management

Problem: Payment Flows were complex , involving multiple methods and billing rules.

Solution: I designed:

Clear payment summaries
New components
Visual priorization of payment methods
Explicit confirmations

4. Claims & Medical Processes

Problem: Flows followed strict steps with stressful situations.

Solution: I developed:

Explained requiriments before starting
Broke processes into manageable steps
Reduced ambiguity with instructional content

Design Systems: CSS & CWP

To maintain consistency and speed across platforms, I built and maintaned two interconnected design systems:

Reusable components
Defined states
Typography and corporative elements
Interaction patters between mobile and web

These systems allowed teams to scale features while maintaining usability and brand consistency.

Impact

While metrics and results are confidential, the goal outcome was devivered:

Improved clarity
Reduced user confusion
Stronger alignment between mobile and web
Great foundation for future MetLife Mexico products

Reflection

Designing for insurance taught me how critical clarity and empathy are in complex flows. This project reinforced my approach for:

Designing complex scenarios
Balancing business rules with user experience
Building design foundations

Page updated

Google Sites

Report abuse