Engagement Portal

The Context

Maybank is Malaysia's leading bank, operating at a massive scale. 45,000 employees serving over 10 million customers across eight countries in Southeast Asia.

The challenge: How do we enable employees—relationship managers in branches, customer service teams, and marketing staff to manage customer engagement in a unified way?

At the time, these teams were juggling eight different systems to reach customers. Email through one platform, SMS through another, mobile app notifications through a third, branch communications through something else entirely. It was chaos.

A unified engagement platform that enables bank employees to create, orchestrate, and optimize customer communications across all channels from a single interface with built-in personalization, approval workflows, A/B testing, and real-time analytics.

What is the Engagement Portal?

The Engagement Portal is the bank's centralized hub for customer communications. It enables bank employees to orchestrate personalized interactions across all digital and non-digital channels, such as email, SMS, mobile app, branch signage, and ATM screens from a single platform.

The goal: streamline all customer engagement to make communications more personal, more consistent, and ultimately more meaningful and humanized.

My Role & Approach

As Lead UI/UX Designer, I:

• Led end-to-end design from research through launch

• Conducted 30+ stakeholder interviews across Marketing, IT, Compliance, and Leadership

• Shadowed employees to understand existing workflows and pain points

• Designed and validated prototypes through iterative usability testing

• Built a comprehensive design system with 120+ components

• Collaborated closely with engineering on technical feasibility

• Defined approval workflows to balance speed with compliance

Design Approach:

Research → Define → Ideate → Prototype → Test → Iterate → Launch → Measure

Why it Mattered?

We set out to solve three fundamental problems:

1. Effortless Journey Design

The Problem:
Bank employees needed to set up communications across all channels, such as email, SMS, mobile app, branch signage, and ATM screens in one place.

Before this platform, creating a multi-channel campaign meant juggling eight different systems. Logging into the email tool, then switching to the SMS platform, and then manually coordinating with the branch team for signage updates. It was fragmented and exhausting.

Our goal was to make multi-channel orchestration feel effortless. One platform. One workflow. All channels

2. Quick & Easy Setup

The Problem:
Marketing teams and relationship managers aren't technical people. They shouldn't need IT support to launch a simple customer communication.

We needed to streamline processes and minimize effort. If a campaign that used to take five days could be set up in 30 minutes, we'd unlock massive efficiency.

Speed wasn't just nice-to-have; it was critical for business agility. Markets move fast. Customer needs change. Employees needed tools that kept pace

3. Real-Time Optimization

The Problem:
In the old world, employees would launch a campaign and wait weeks to see if it worked. By then, it was too late to adjust.

We needed to enable real-time tracking of engagement and experimentation for better results.

That meant built-in A/B testing. Live analytics. Instant feedback loops. Employees could see what's working, learn from it, and optimize on the fly, not weeks later.

The Problems Employees Faced

What were bank employees actually struggling with daily?

1. No Visibility

If a customer called asking, "Did you send me something about my credit card?" the service rep had no way to see the full communication history. They couldn't answer basic questions about their own bank's outreach.

2. Inconsistent Messaging

Marketing might send one message via email, but the branch team wouldn't know about it and would say something completely different. The customer experience was disjointed—not because employees didn't care, but because the tools didn't enable consistency.

3. Painfully Slow

Launching a simple campaign took days of manual coordination across teams.

4. No Personalization at Scale

Everyone got the same generic messages because creating personalized communications for different customer segments was manually impossible. The tools weren't smart.

Research & Discovery

Before we designed anything, we invested heavily in research. And I mean really invested, we spent six weeks just understanding the problem space.

Research Method:

1. Stakeholder Interviews

We talked to marketing leaders, CRM managers, relationship managers in branches, IT teams, and even compliance, because in banking, you can't design anything without understanding regulatory constraints. We interviewed over 30 stakeholders across the organization.

2. Employee Shadowing

This was critical. We spent full days following relationship managers as they worked—watching them toggle between systems, listening to their frustrations, seeing where they got stuck. We shadowed customer service reps in call centers and marketing teams launching campaigns. You learn so much more from observation than from asking people what they do.

3. Analytics Audit

We dove into existing channel performance. Which communications were customers actually engaging with? Where were the drop-offs? What did the data tell us about what was working and what wasn't?

4. Competitive Analysis

We looked at Salesforce Marketing Cloud, Braze, and Adobe Experience Platform—what were best-in-class orchestration platforms doing? What patterns could we borrow or improve?

Key Findings

1. "Staff spend 60% of their time on administrative tasks instead of actually talking to customers."

Think about that. Relationship managers exist to build relationships, but they're drowning in system navigation and manual data entry.

2. "No single source of truth."

If you asked three different people, 'What did we send to this customer last week?' you'd get three different answers. The data was scattered.

3. "Mobile access was critical but completely neglected."

Relationship managers work in branches, in the field, at client sites—they're not at desks. But every existing tool was desktop-only.

Great product design starts with a deep understanding. We could have built a beautiful interface that solved the wrong problem. Instead, we built the right solution because we took the time to truly understand the pain.

The Solution

So here's what we built: a unified platform that puts all the power in employees' hands.

Instead of juggling eight systems, employees now have one interface where they can create, orchestrate, and measure customer communications across every channel.

Key Capabilities:

1. Multi-Channel Orchestration

Employees select from seven channels: email, SMS, mobile app push, in-app messages, branch digital signage, ATM screens, and website banners. One creation workflow, automatic distribution.

2. Smart Personalization

Dynamic customer segmentation with drag-and-drop filters. No technical skills required.

3. Content Library

Pre-approved templates that ensure brand consistency and regulatory compliance. Employees can customize within guardrails.

4. Real-Time Analytics

Not just 'here's your data,' but 'here's what it means and what you should do about it.'

5. Compliance Built-In

Approval workflows, audit trails, and regulatory language checks. Banking has strict requirements; we designed for them from day one.

Design System

Building the Foundation

When you're building an enterprise platform with over 80 screens serving thousands of employees, you can't just design page by page. You need infrastructure.

So we built a comprehensive design system.

Over 120 reusable components—buttons, form inputs, data tables, cards, modals, navigation patterns, status indicators. Every component documents every state: default, hover, active, disabled, error, loading, and success.

This means whether you're looking at the Dashboard, the Campaign Builder, or the Analytics view, patterns work consistently. Users build muscle memory.

We created a semantic color system with design tokens. Not just 'blue' or 'red,' but Primary-500, Success-600, Warning-400. When designers and developers talk, they speak the same language. No more 'make it that shade of blue-ish.'

Why We Invested in the Design System

First, consistency. When a button looks and behaves the same across 80 screens, users don't have to relearn patterns. Cognitive load drops.

Second, scalability. We knew this platform would evolve—new features, new channels, new user types. The design system means we can add new modules without starting from scratch every time. We're building with Lego blocks, not custom-crafting every piece.

Third, speed. Developer handoff is seamless. Instead of me saying 'make this button medium-sized with rounded corners and a shadow,' I say 'use Button-Primary-Medium.' They know exactly what to build. Design-to-development time cut in half.

Fourth, accessibility is baked in from day one. WCAG 2.1 AA compliance standards are built into every component—color contrast ratios, keyboard navigation, focus states, ARIA labels. Every new screen starts accessible by default. We're not retrofitting accessibility later; it's foundational.

And fifth, multi-language support. Maybank operates across eight countries. The system handles English, Malay, and Chinese—different character sets, text expansion, and right-to-left layouts where needed.

Working with Developers

I worked closely with a team of 5 engineers to develop the designs for the Engagement Portal. I scoped out tickets for the front-end engineers with user stories and product requirements. I also encouraged the team to look into using a third-party component library to quicken the implementation process and spend less time worrying about the component interactions.


As part of the future vision, I created an Information Architecture of the platform to help engineers understand how the overall site architecture worked.

Results and Takeaways

Working on this project was an extremely steep learning curve. It was an eye-opening experience that taught me a lot about being lean and knowing when and where to focus your energy and efforts.

Some key takeaways from this project are:

1. Focus on building an MVP: There is only so much time and effort that you can invest so it's important to focus on the features that can deliver the highest value for your users.

2. Don't worry too much about the details: Earlier in my journey, I made the mistake of worrying about the look of the UI. Taking a step back and reassessing the user flows helped me to reprioritize the UX.

3. Focus on the problem: At the end of the day, it is your user's pains that you will be solving for, so keeping that front of mind is important as it's easy to lose sight of this when you're bogged down in the day-to-day.