Simplifying Metrobank’s Online Login Experience

– Improving security without compromising usability.

🧭 Overview

Role: Senior Product Designer
Collaborators: Mustafa.D (UX Designer)
Tools: Figma, Balsamiq, Zoom, Google Forms
Goal: Redesign Metrobank’s online login experience to reduce cognitive load and improve user satisfaction—while maintaining robust security protocols.

⚠️ The Problem

Metrobank customers expressed growing frustration with the online login experience. The current flow required multiple hard-to-recall credentials, such as a 12-digit customer number, security codes, and passwords. Compared to competitors like Barclays and Monzo, the process felt inefficient, overly complex, and mentally taxing.

“I never remember my customer number—I always have to search for it.”
— User from usability testing

🎯 Target Audience

Metrobank’s digitally active customers aged 18–35 who expect a fast, intuitive, and secure login experience comparable to other modern banking apps.

🧠 My Approach: Design Thinking Framework

1. Empathize – Understand user pain points through qualitative and competitive research
2. Define – Synthesize findings into key insights and reframe the problem
3. Ideate – Generate concepts using rapid sketching and wireframing
4. Prototype – Build interactive flows to validate new ideas
5. Test & Iterate – Gather feedback, uncover usability gaps, and refine

👂 Empathize: Understanding the Real Pain – Research Methods

• 1:1 Usability Testing with 2 Metrobank customers
• Secondary Research on short-term memory and cognitive load
• Competitive Analysis of login processes (Barclays, Monzo, Revolut)

Key Findings

• The human brain can typically hold 7±2 digits in short-term memory (Miller’s Law). Metrobank’s 12-digit customer number exceeds this.
• Barclays offers login via bank card number or app—removing reliance on memorization.
• Users were prone to errors during the second authentication step, often needing to retry the process.

📌 Define: Framing the Opportunity

We reframed the challenge into a “How Might We” statement:

How might we reduce the cognitive burden of logging in—without compromising Metrobank’s strong security standards?

The core problem wasn’t security—it was how security was being implemented at the cost of usability.

💡 Ideate: Designing Smarter, Not Harder – Crazy 8s Sketching

I used the Crazy 8s technique to explore a wide range of login flows—focusing on simplicity, clarity, and minimal memory dependence.

🔲 Wireframes

I developed low-fidelity wireframes in Balsamiq, incorporating:

• Start-of-flow entry using information found on the user’s bank card
• Verification code via text, maintaining two-factor security
• Streamlined error messaging and feedback loops

🧪 Prototype & Test – High-Fidelity Prototype

Built in Figma, the clickable prototype demonstrated:

• Step-by-step login using recognizable card details
• Real-time verification timer
• Alternate verification method toggle (added post-feedback)

👥 Usability Testing Round 2

Participants praised:

• Familiarity of using card numbers
• Added confidence from visible verification timer
• Ease of remembering login information

🔄 Key Iteration:

Based on feedback, I added an option to verify via the Metrobank app or text message—giving users control and flexibility.

Final design

✅ Final Design Highlights

• Reduced cognitive load by allowing users to start login with their card number
• Maintained security through two-step verification
• Improved satisfaction by introducing user control over verification method
• Lowered error rate with real-time feedback and clearer UI states

🎓What I Learned

This project wasn’t just about good UX—it was about balancing user needs with business constraints.

• Even well-researched UX improvements require stakeholder buy-in to drive implementation.
• System constraints (e.g. legacy infrastructure, backend limitations) must be accounted for early.
• Strong design decisions are anchored in research but must also be viable and scalable.

💬 TL;DR

This case study demonstrates my ability to:

• Apply design thinking to solve real-world problems
• Conduct research that influences product direction
• Create accessible, secure, and user-friendly flows
• Iterate based on data and user feedback
• Collaborate cross-functionally and think systemically as a senior designer