Paying Meter Bill using CB Mobile app in Myanmar(Burma)

While having coffee at Shwe Palin Tea House, my mom brought up meter bill and said ‘last date so close. We got to go billing office to make payment’.

Right away, I took out my iPhone and opened CB Bank Mobile App. Negatived to Meter Bill page where I was asked to enter Bill Number. On meter slip, there is a 6 digit number called Computer SR No. So I put it in and tap Submit button. Then app asked me to enter 10 digits number. All of us, mom, grandpa and I, struggled to get that 10 digit number. I, my mom, even my grandpa were finding that 10 digit number desperately. We had no idea where that 10 digit number was. We flipped slip up and down again and again. Finally, we gave up.

Both grandpa and mom said

“You in Myanmar now. We need to ask either CB bank or Meter office in-person to know how to use this feature”.

But I know this is not about being in Myanmar or anywhere else. It is all about BAD DESIGN.

So, What is wrong here?

Knowledge is both in the head and in the world. — Don Norman

Designers completely missed out to design for knowledge in user’s head & knowledge in environment where the app is going to be used. To be more specific, they forgot to answered the following questions.

1. Where to get Bill Number?
2. How does it looks like?

Next Steps

As I could not used the app, I do not know whether these questions are answered or not. But anyway, I will describe here.

1. Bill Amount. Is the amount correct?
2. Am I making to Meter bill payment or phone bill payment?
3. When will they receive my payment?

Improvement

By answering questions described above, following changes are made to provide better user experiences.

1. Increase Font Size for aunties & uncles
2. Increase Textfield size and added large button to support large fingers. Minimum button/tappable area size is 44 pixels wide 44 pixels tall.
3. Changed Navigation bar Title to indicate where user is so that they know they making Meter Bill Payment not Phone Bill.
4. Added sample number and explanation what Bill Number is. This provides required knowledge for user to perform desired actions.
5. Amount TextField. Currently it is disabled. If users are responsible for entering the amount, this is going to be same as Bill Number.

old design(left), new design(right) — description is just an example. Not correct.

Confirm Payment

By having confirmation stage, users can change their mind or if they have made some mistake, they can still fix it. By allowing users to make mistakes and correct them increase users satisfaction.

Branding

Using color blue from CB Bank logo is much better than current dark blue.

Submit & Confirm Payment

Final Prototype

Improved UIs

CB Mobile App — Redesigning Meter Bill Payment Process

Thanks for reading. Please Feel free to give your opinions at the comment section below.

Upcoming Story related to CB Mobile App — Phone bill top up: painfully entering super long mobile numbers and wrongly sending money to strangers.

*I do not work for CB Bank. This is just a volunteer contribution for CB Mobile App users. I wish CB Mobile App team read this and improve their app far better than the design suggested here.