Note: This is speculative work. The contents of this page were viewed as presented below by the Metrobank product design team. Annotations on the work are placed in a gray box, just like this.
Metrobank Mobile Banking: Bills Payment on iOS
In reviewing the responses, a question arose: ‘If the experience already delivers the bare minimum, how else can it be improved?’.
The collated responses helped me in determining some principles to my approach: the app should be easy to use, reassuring, ‘guiding’ (there’s clarity in wayfinding), straightforward.
Online Demo Walkthrough + Outlining Steps + Initial Wireframes
- The color blue, in different shades
- Similar looking sans-serif typefaces (with weights in Regular and Bold used within the same layout)
- Icons (mostly outlined)
- Rounded rectangles
- Gradient backgrounds
- Photography/illustrations featuring happy-looking subjects
- Color palette: Mostly has hues of blue, each one selected to work effectively to contrast when placed along with another hue, and using the same blue hues to generate a linear gradient as the app’s main background
- Shapes: Rounded rectangles, used as information containers with an approach inspired by Google’s Material Design
[Download updated PDF file of all screens here .]
Note: I made a simple tracking system by using bit.ly URLs to track number of visits on the actual page (as I don’t use analytics on my site, for personal reasons) and for views on the sample UI screens linked above as a PDF file.
This preview covers the following (click on screen or press and to navigate):
Welcome screen/Your Accounts
Bills Payment: Select Biller
Bills Payment: Select Account to Debit
Bills Payment: Payment Details
Bills Payment: Summary
Bills Payment: Confirmation
- Menu (expanded submenu based on location within the app, applicable to Bills Payment and Funds Transfer)
A follow-up thought on possible additional screens, in extending the exercise (not included in this submission):
- Error messages, confirmation messages, and empty states - if developed well, may be a solution for possibly addressing the concern on security in using the app (e.g. If the phone loses internet connection in the middle of a transaction, how does one assure the customer of the state of the transaction/inform them of possible next steps to take?).
Sample Design System Implementation
- Typography (500% scaled)
- Select components
Considering the simplicity of the app interface, I wanted the icons to be clean outlined graphics but had more detail than a singular stroke outline, consistent in stroke width and art style.
I found these at The Noun Project , designed by Sergey Demushkin from his Interface and Web Icon collection . Some icons were tweaked to fit the concepts they represent within the app.
In working on this assignment, I tried to make the visuals clear, with subtle wayfinding cues (e.g. progress bar on display for tasks that go through >3 screens, the and arrows being almost always present), ‘breadcrumbs’ in the form of overline text aiding in recall as to what option was last chosen, etc.
📁 Download PDF file (updated!) of all screens here .
Thank you for reading!
How did you find this submission?
Nice! / Just OK / Meeeeh
Note: A simple feedback system was made, also using the bit.ly tracking tactic. ‘Nice!’ seems to be a favorite.