Role
Product Designer
Company
Bank Negara Indonesia (BNI)
Platform
Mobile App (iOS & Android)
Timeframe
3 Weeks
Overview
This project is in collaboration with PT. Daya Gagas Indonesia and BNI. BNI (Nank Negara Indonesia) is one of the leading banking service providers in Indonesia. Mobile Banking App is one of their main products.
Context: When Legacy Meets Growing Expectations
BNI's mobile banking app had remained largely unchanged for over 5 years. In that time, the competitive landscape had shifted rapidly. Newer banking apps offered sleeker UI, more intuitive UX, and integrated services that were grabbing user attention.
BNI wanted to revamp their app experience to better serve existing users and compete with digital native banks but with a strict constraint: only the UI layer could be redesigned within this project timeline. No backend changes, no new features—just a new face for a complex system.
This case wasn’t about reinventing the wheel. It was about refining it under constraints.
Discovery & Key Problems
Feature Discovery Gap : Existing features were buried in long, flat lists. Users often didn't know what's available.
Home Overload : The home screen lacked structure and focus. Banners, menus, and promotions competed for attention.
Mutation Overload : The account mutation (transaction history) page was long, redundant, and visually noisy.
Cluttered Transfer Flow : Fields like recipient name, account number, and destination bank were too compressed, leading to transactional errors.
Reframing the Redesign Challenge
"How might we enhance clarity and confidence in key banking flows, while respecting the limitations of legacy systems?"
Rather than layering more complexity, we focused on reorganizing, refocusing, and reclassifying the UI.
Design Decisions & Transformations
1. Home Screen: A Simpler Launchpad
Image : Before-After Home Screen
- Introduced tabbed structure to group core actions (Transfer, Payment, My Account).
- Created room for scalable feature growth using icons rather than lists.
- Placed banners more purposefully to avoid cognitive overload.
2. Transaction History: Clarity in One Page
Image : Before-After Transaction History
- Redesigned the mutation page to fit key transaction data into a single screen.
- Used whitespace and typographic hierarchy to reduce visual fatigue.
- Removed redundant transaction details and emphasized reference clarity.
Transfer Flow: Confidence in Every Step
Image : Before-After Transaction Page
- Redesigned the mutation page to fit key transaction data into a single screen.
- Used whitespace and typographic hierarchy to reduce visual fatigue.
- Removed redundant transaction details and emphasized reference clarity.
Visual System: A Modern Set of Icon
Image : Before-After Transaction Page
- Standardized field sizes for readability.
- Improved label-field relationships.
- Used consistent spacing and emphasized destination account info to avoid user errors.
Collaboration & Constraints
This project demanded tight alignment across teams. With only 3 weeks, and multiple stakeholders (BNI team, PMs, developers, designers), I prioritized:
- Fast wireframe-to-mockup iteration cycles
- Daily async handoffs with devs
- Negotiating UI constraints with legacy backend flows
One key moment: I proposed a promotional banner based on the location where the transaction occurred (for example; when buying electricity tokens, a promotion for that transaction appears). The team liked the idea, but the backend system didn't support it. The solution? I changed it to a promo highlight system that is on every page.
Results & Reflections
- Improved clarity on high traffic screens like mutation & transfer
- Increased discoverability of underutilized features via icon based navigation
- Positive feedback from internal UAT and external user sessions
“Now I know what to press without scrolling everywhere.” — UAT user feedback
This project reminded me: not all redesigns need to be revolutions. Some are refactors that build clarity, trust, and usability under real-world constraints.
Would I design differently if there were no technical constraints? Yes. But even within boundaries, design can move the needle.