Enterprise sales agent app

Overview

An immersive agent portal in three months

MetLife's Global Design team set out to redefine the Agent Portal experience for Relationship Managers (RMs) in the field, supporting transactional flows for the agent and the prospective client they're meeting with. The brief: deliver a high-fidelity prototype within a tight three-month MVP window, ready to scale across international markets. I joined as a Product Designer working alongside the GBM (UX, Content, Brand & Design) and GTO Agile pods to take the experience from research through delivery.

The challenge

Redefine the field experience and what we ship

Redefine the mobile sales experience for RMs when they're meeting prospective and existing customers, and surface ways to ease the conversation for both the agent and their client.

The legacy app

Off-brand, and tasks RMs couldn't finish

Before the rebuild, the existing app sat off-brand and behind the way RMs actually worked. Several primary scenarios couldn't be completed end-to-end inside the product. The two captures below illustrate the legacy case-management and product-illustration flows we set out to replace.

Our process

Agile method, with lean UX inside

We worked in a linear progression to hit the business deadline, but inside each sprint the UX team applied lean UX practices: rapid feedback loops, multiple iterations, and validation at every step. I collaborated daily with the GBM and GTO Agile pods so research, design, and engineering stayed in sync from kickoff through delivery.

Research phase

An immersive workshop in the field

An immersive design thinking workshop took place in Dubai to understand RM pain points firsthand. Across the trip we ran four core activities (empathy mapping, As-Is mapping, user-scenario building, and one-on-one interviews) with multiple groups of agents and regional stakeholders. Time-to-complete and a lack of personalization rose to the top as the highest-priority blockers for the new experience.

Inside the empathy mapping sessions

During empathy mapping, participants articulated what they knew about an invented persona: what they say, expect, do, and how they feel. We ran the exercise with multiple groups of RMs and regional stakeholders, capturing observations on the wall in real time.

Quotes, expectations, actions, values

Four essential dimensions structured every session. Participants moved between them as they articulated what the persona says, thinks, does, and feels:

Time-to-complete, and a need for personalization

Pain points across the empathy maps consistently clustered around two themes: how long primary tasks took to finish, and the lack of personalization in the existing experience. Both became guiding constraints for the new app.

Mapping the existing journey

In the As-Is mapping activity, participants combined what they knew about an RM's behavior with their own experience using the existing sales app, stepping through it together to surface where the current journey broke down. Each new pain point became a new area of opportunity to design against.

Needs statements, written together

RMs, designers, and business delegates ran user-scenario sessions, essentially "needs statements" workshops, to pinpoint solutions and goal findings against a set of mock scenarios. Reading and refining the statements together kept everyone aligned on the problems we were actually solving.

Twenty-two voices from the field

Across the workshop and follow-up sessions we interviewed 15 Relationship Managers, 4 bank-specific delegates, and 3 regional managers to understand day-to-day tasks. Their feedback grounded every downstream decision, from the dashboard's primary actions to language selection on first open, and gave us the confidence to ship a personalized agent experience inside the MVP window.

Ideation

Wireframes for the dashboard experience

After research wrapped, we ideated rapidly with wireframes to surface the high-level actions RMs cared about most. Variations explored different dashboard layouts, each pressure-tested against the highest-priority RM tasks before we committed to direction.

Visual design system

MetLife's new visual language, applied

Working with the brand team, we adopted MetLife's refreshed visual system and translated it into the sales app: gradient palettes, iconography, and component styles that read consistently from dashboard to in-meeting flows. Components were built to be reused across screens so future flows could be assembled, not redrawn.

Prototyping

Hybrid prototypes for complex flows

Multiple hybrid prototypes were built in quick succession to illustrate the flows that mattered most: dashboard, language selector, and the case-management tasks RMs hit daily. Each iteration was reviewable as a real interaction, not a slide-deck approximation, so stakeholders could click through and react in the moment.

Testing

Recorded sessions, graded against tasks

With the primary surfaces in place, we ran moderated sessions, recorded for later analysis and scored on a grading scale that classified each task as success, partial, or fail. The concept tested strongly across the board: participants validated functionality and usability, and surfaced additional features they'd want next.

Testing feedback

What participants told us

Overall, the design concept tested as a strong success. Participants made positive remarks about the functionality and usability, and surfaced additional features they'd want as the product matured. Their reactions, summarized below, validated direction and shaped the post-MVP roadmap.

Delivery & analysis

Specs in Zeplin, heat maps in production

Final delivery covered usage guidelines, an interaction file library, supporting code snippets, and the rest of the assets needed to ease handoff into development. Post-launch, we kept evaluating the product with analytics and heat maps, surfacing patterns that continue to validate decisions and feed enhancements as the app rolls out into new markets.

The impact

Recognized across the Middle East