Banking App – Sign-In Flow
Traditional online-banking flows often make users feel uncertain about transaction accuracy and lack accessible light/dark modes. My goal was to redesign a transfer-money experience that felt secure, intuitive, and accessible while introducing clear visual hierarchy and mode flexibility.
1. The Problem
Create a high-fidelity interactive prototype that improves clarity, contrast, and navigation across both light and dark modes — reducing cognitive friction during financial transactions
2. Design Goals
-
Streamline the money-transfer flow into five intuitive steps
-
Introduce progress indicators for transaction confidence
-
Implement dual-mode design for accessibility and personalization
-
Improve WCAG contrast compliance for text and CTAs
-
Maintain trust and brand consistency through color and typography
3. User Research & Scenario Insight
I want to schedule or send a transfer quickly and know exactly what step I’m on.
I studied pain points from common mobile-banking behaviors:
-
Users often lose orientation during multi-step transfers
-
Low color contrast causes visibility issues in bright environments
-
Terminology such as “Review Transfer” caused uncertainty about next actions
4. Define & Ideate
Rooted in my values-based leadership training, I approached this project through empathy and integrity — ensuring accessibility and trust guided each decision.
Problems Identified:
-
Vague call-to-action labels leading to hesitation.
-
Missing progress indicators across screens.
-
Insufficient color contrast in light mode.
Design Opportunities:
-
Clarify button language → guide users confidently.
-
Add breadcrumb/progress tracker → maintain orientation.
-
Adjust color tokens → meet WCAG AA contrast ratios.
5. Prototype & UI Design
Light Mode vs Dark Mode:
I created a consistent system for both modes, ensuring parity in information hierarchy and motion.
Light Mode:
Soft teal palette → modern and approachable.
Dark Mode:
Deep navy/graphite palette → focus and contrast in low-light environments.
Consistent iconography & typography across both modes.
Screen Flow:
-
Welcome / Login Screen
-
Account Balances
-
Transfers Hub
-
Schedule Transfer
-
Review Transfer
-
Transfer Scheduled Confirmation
6. Usability Testing & Critique Session
Evaluate if the prototype was user-friendly, visually clear, and accessible across modes
Key Questions:
-
Was switching between light and dark mode intuitive?
-
Did users understand the transfer flow and CTAs?
-
Was text contrast sufficient for readability?
Findings:
-
Users hesitated at “Review Transfer” → label unclear about next step.
-
Color contrast too low in light mode for text and inputs.
7. Iterations & Improvements
Insight
Ambiguous button labels
Low contrast in light mode
Orientation confusion
Action Taken
Updated to “Next: Review Transfer Details” and added progress bar
Adjusted color palette and validated via WCAG checker
Added breadcrumbs and state indicators
Impact
Increased clarity and flow confidence
Improved accessibility and legibility
Reduced navigation errors and anxiety
8. Final Prototype
Seamless light/dark mode toggle
Simplified transfer flow in five steps
Improved contrast and visual hierarchy
Micro-animations for confirmation feedback
Tone of trust aligned with financial brand
9. Reflection
This project reaffirmed that good design is honest design.
My background in compliance and values-based leadership shaped how I validated accessibility, transparency, and clarity at every step.
“Designing for trust means respecting the user’s time, eyes, and peace of mind.”
Key Learnings
Empathy and testing reveal invisible friction points.
Iterating through values builds user trust faster than features alone.
Balancing creativity and compliance creates more inclusive experiences.
Impact
Improved task completion time by ~20 % during testing.
Users reported greater confidence in transfer steps.
Contrast ratios met WCAG AA standards for both modes.