Creating a consistent banking experience

Metrobank aimed to modernize and unify its digital experience across mobile and web, aligning with its brand promise of “Meaningful Banking.” Over several months, we worked with multiple business units to understand user pain points, identify strategic UX gaps, and create a scalable design system. The result: a streamlined, consistent interface that improves usability and positions Metrobank for future growth — with the mobile app launched in late 2023.

The Challenge

Metrobank’s digital platforms — both web and mobile — had grown organically over time, resulting in an inconsistent and fragmented user experience. Different teams maintained different flows and visual patterns, creating friction for customers trying to complete tasks across channels.

At the same time, Metrobank was evolving its brand promise around “Meaningful Banking,” and needed a digital experience to reflect this positioning. The organization also sought to improve internal alignment among its many business units.

Problem Statement

How might we design a medical product that can support Singlife's end of the year targets?

Problem Statement

Singlife needed a simple, affordable, and scalable medical insurance product that could perform better than existing offerings and appeal to a broader segment of customers — all within a tight two-month delivery window.

Research Methods

Research

Stakeholder Interviews

We spoke with multiple business units to align on goals, constraints, and definitions of success. Key questions included:

“What are your team’s KPIs?”
“What must this redesign get right?”]
“What do you know about your audience today?”

This surfaced overlapping issues across the organization — from visual inconsistency to scalability limitations.

Research

Usability Testing

We tested the current mobile and web platforms to identify pain points:

Users struggled with unclear navigation and redundant flows
Lack of visual hierarchy made task completion difficult
Interaction patterns varied too much between platforms

‍

A moderated usability test using a realistic prototype created in Figma

Design Approach

Consistency

We created a pattern library as part of a design system to ensure consistency, speed up delivery, and make the experience feel seamless across Metrobank’s digital products.

Responsive Design

We designed responsively to provide a consistent experience across devices, so customers could access the product whether on mobile, tablet, or desktop.

Light and Dark Mode

We designed for both dark and light modes to give users comfort across different environments while aligning with modern system standards.

Details

The Outcome

A Successful Launch

The project was successfully launched as Metrobank’s mobile app, now serving thousands of customers nationwide

Key Takeaways

UX Strategy & Research

Uncover insights through research and strategy to create experiences that truly meet user needs.

Interaction & Visual Design

I craft intuitive, visually engaging interfaces that enhance usability and brand identity.

Prototyping

I create interactive prototypes to test and refine designs before they go live.

Final Thoughts

Working with Metrobank gave me the opportunity to shape design at scale. Creating a pattern library and designing for both light and dark modes taught me how consistency and flexibility can work together to improve customer experience. More importantly, it showed me how design systems aren’t just about components—they’re about enabling teams to move faster, stay aligned, and build trust with users across every touchpoint.