Good vs Bad Design: Episode-3
This is a series where I’ll be breaking down various app’s UI design to point out the good and the bad User Experience of the app. Please note that I’m not being paid or influenced in any way to review App designs.
For this episode, I’m planning to dissect City Touch an online Banking application from Bangladesh.
Usually, banking applications are feature-heavy and put great emphasis on security. Usually, when an app puts a focus on security it loses a lot of usability. Feature heavy applications are usually quite cluttered and increase the cognitive load of the user.
Let us take a look at how the city touch organized its interface to maximize the ease of access while still maintaining security.
Login
The login page is as simple as it can get. It’s very clean. And there’s a localization option on top that lets the user switch between English Or Bengali before login. Kudos for that. Plus point for clean User Interface design.
But after I logged into the application I could no longer find the localization option. They only way I could change the language was to log out and change the language or at least I couldn’t find it easily. Even though it’s a great attempt to increase user experience it ended up in a hassle. I’ll mark it negatively.
Bottom navigation
This is one of the core reasons behind this app’s great experience. As I have previously mentioned feature-heavy application tend to be cluttered. This is explained in Hick’s Law.
City Touch did a great job of working around this law. I never felt burdened with finding the feature I wish to use. Each of its navigation pages is very intuitively organized.
City Touch categorized it’s most used features into the bottom navigation. And jammed other features that are used less often in the last navigation option called more. The bottom navigation gets a plus point. Now I’ll visit each option and break down the details.
Dashboard(Accounts)
The accounts icon on the bottom navigation is questionable. Although I’ll be letting icons out of my marking criteria as this application is not intended for the illiterate. I’ll just leave my opinion on the icons.
My dashboard is very empty as I don’t take other services but it’s pretty neat. It summarizes all of my accounts here. here’s a sample dummy of the full-featured dashboard
This is a pretty clean summary of a banking application. Most other banking application makes these very cluttered. And show too much information. I’ll give this another plus point.
Even in this elegance, there’s a bad design on this page. If you wish to check a summary of the previous few transactions you can tap on the account name to get to that page.
But there is no indication that those are buttons and can be tapped or pressed. This is known as a lack of affordance in terms of design. The first few days I thought maybe there’s no summary option then I tapped on the numbers on a whim and found that it shows me a breakdown. Buttons should always look like a button. Minus points for this bad design.
Dashboard(Transfers)
This section is very well organized. Even the icons are very well defined. Except for Beneficiary Management. I had no clue what it was or why we even need it. At this point, I’d say it only added confusion to me. But this feature is indeed a very important one in terms of security as well as making life easy. But I’d have been happier if they didn’t confuse me at first by not explaining what it was or what’s the purpose.
But as soon as I try to make a transfer they hit me with this dialogue. If I press cancel they take me back. So it’s a mandatory requirement.
If I press yes they take me to this page where this happens.
Now, this is very weird. First of all, dropdowns are globally known bad design. What’s worse this dropdown is a pop-up. which is also a known bad design. I don’t know why they mixed two bad designs in one place. Also, I don’t think it looks cool. It could have been replaced with a set of radio buttons as the whole screen is empty. Any argument about saving screen space is invalid. Also, the selection options are quite small for my fat finger. I always have to be very cautious to press the option I want. This needs improvement.
Once you do make a selection and press next you are taken to another page where you need to fill up some information depending on the type of beneficiary account. There are quite a lot of variances hence I won’t be showing any of them. And those are pretty neat.
Now if you recall I mentioned security about this feature. It certainly does feel a bit bloated work to transfer money. But it’s worth it.
Firstly, You can only add a beneficiary if you know the PIN of your card. So even if someone has access to your phone he can’t just add a new beneficiary. And without that, he can’t transfer any money. And this is true for every transaction in the application. Every type of transaction requires you to set up the intended beneficiary. And it requires a secret pass that only you should know. Even though the app always asks for OTP for every transaction, this won’t be useful if the mobile itself is stolen. Without the PIN of your card, the thief can not send money to anyone else other than those already added as a beneficiary.
Secondly, You would very likely to make some sort of transaction in the future. So once you do set up all those bloated pieces of information. You can just make transactions in a few taps.
This one architectural design made a huge UX impact. Made the app friendlier while making it more secure. Massive plus point for this.
Then you are sent back to the transfer page. There are quite a lot of kinds of transfers. But all of them look more or less similar in the design. Have a few fields added or removed according to context
There are some templates available for quick input. Which is a very good design. I’m not sure if this is an intelligent system that updates suggestions depending on previous transactions but if it is then it’s cool. Even if it isn’t it’s still cool.
Cash by code is a feature that allows users to withdraw cash from ATM without any card. This feature is very vulnerable. If your phone has been stolen the thief could withdraw 20k BDT with the app if he can log in to the application. Now, why did I mention this? This is a vulnerability assessment. But do you know why this is allowed? To allow the users to use this feature. Remember the Trade-off matrix I mentioned earlier? To make it user-friendly you might have to sacrifice some security. To add some security you might have to sacrifice some user-friendliness.
It’ll take ages if I start pointing out every feature that’s offered by the application. So I’ll be moving on to the next good/bad feature.
Dashboard(Payments)
There’s not much to be explained. Like the previous page, we have Beneficiary Management, Favorite Payments, Payment History at last. This is a design consistency. Consistent design helps the user to find features easily. For example, if he wants to find a history of a category he can just select the bottom navigation and press the last button on the page. Design consistency plays a vital role in the user experience. Even though the beneficiary management shows different input fields the user knows what is it for without being explained. The payment options are more or less similar to fund transfers hence we won’t be diving any deep there.
Dashboard(CityPay)
This section is a bit different. Instead of sending money via accounts it’s possible to create/scan QR code and pay or receive money. The UI is pretty self-explanatory.
But here’s something smart they did in the scanner. What if the phone camera was broken? or what if it’s just not good anymore to scan the QR code? Well have no fear you can just type in the string in the field and you are good to go.
So this feature will always stay relevant no matter what phone the user is using.
More
This application isn’t as small as it looks. It packs a load of features. Far too many to be explained in detail in one single article. But this application balanced the Security and User Friendliness very well.
One significant example would be the choice of security. Instead of imposing security options the app allows it’s user to choose what level of security he/she wants. So far the app offers 4 different kinds of security measures.
- User ID( 2 Keys)
- PIN Code(1 key)
- Touch ID(Bio Metric)
- Retina(Bio Metric)
Depending on your need, you get to control how the security of your application is managed. This is something that most other applications won’t offer. Because not everyone needs the same level of security. Imagine if everyone was forced to use Bio Metric locks for maximum security. This feature has increased the usability of this app by a lot.
Animation Feedback
This is a very important modern UX design. One of the fundamentals of Human-Centered Design is to provide feedback. The animation is a great way to provide feedback. When you press the navigation buttons the pages slide in. This is a great way to hide background data loading. But it’s very easy to mess up this feature. And CityTouch did mess up this one. When you press anything on the right the pages slide in from the right. That’s great.
But when you press something on the left it still slides in from the right.
That completely fails to meet users’ imaginary feedback expectations. This expectation is built up from the books. As the pages slide in from the right the user expects it to act like a book. If he goes back the pages should be flipped back, Here it should go from left to right. This destroys the whole point of adding animation. Always follow the defined feedbacks. If there’s feedback expected, meet that.
To fix this, they could add left to right transition where necessary. Or change the animation into a stack. Or remove it altogether.
Conclusion
After taking a look at it’s good and bad sides. I’ll give it an A-.
They thought to give a lot of importance to UX, yet it feels like there is a lot to improve on. Hopefully, they will.
Please note that this rank is totally a personal opinion. It’s done with respect to my expectations from the application. This rating has no meaning outside of the blog.
