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


The task: translate either the Bills Payment or Funds Transfer process (as seen on this demo site ) to a mobile app design. Being someone who turns to her iPhone for a lot errand-related conveniences (i.e. ordering food, grocery shopping, messenger pick-ups, etc.), I chose to design the bills payment feature on iOS.



Task/Goals Review


I started the whole exercise with a quick survey on people’s thoughts when it comes to online banking in the Philippines, particularly in paying their bills on mobile. Their responses were mostly neutral. An already ‘positive’ experience would mean basically getting the job done—a transaction is called a success when payment center/bank lines are skipped. ‘As long as the job gets done conveniently.’

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
To begin the process of translating the feature on mobile, I went through the online demo site and outlined the steps taken to accomplish the task of successfully paying bills via Metrobank. The outline aided the process of creating the initial wireframes.



Visual Direction


A quick online search led me to a number of current Metrobank assets with varied branding executions. Some common things seen include the use of the following:

  • 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



Base Visual Style Guide
Based on the brand materials found, I created a simple base style guide for the visual direction of the app.

  • 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
  • Typeface: Found a close option similar to what is being used in branding materials, and known to be a good UI type choice for its readability and weight options—IBM Plex Sans (served free by Google Fonts  and Bold Monday ), comes in 7 font weights, from Thin to Bold
  • Shapes: Rounded rectangles, used as information containers with an approach inspired by Google’s Material Design  



UI Preview



[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):

  1. Log In
  2. Welcome screen/Your Accounts
  3. Bills Payment: Select Biller
  4. Bills Payment: Select Account to Debit
  5. Bills Payment: Payment Details
  6. Bills Payment: Summary
  7. Bills Payment: Confirmation
  8. 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
The following are included:
  • Typography (500% scaled)
  • Select components



Iconography

For the purposes of this exercise, I searched for a well-curated iconset fit for UI use and the nature of the app.

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.


Closing Thoughts
While people may be familiar with the process of paying bills via online banking, I believe usability improvements can still be made when even the most basic of usability heuristics are taken to heart, to help in making the experience less of a chore.

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.