A visually better and user-centered Redesign of GTBank Mobile app — UX Case Study

About GTBank

Guaranty Trust Bank Plc. (GTBank) is a multinational financial institution that provides individuals, businesses, private and public institutions across Africa and the United Kingdom with a broad range of market-leading financial products and services.

GT Bank allows its customers to conveniently Tranfer money to accounts, Buy airtime/data, pay bills, Get Loans and a lot more on their mobile app. This means GTBank customers/users don’t have to frequent the bank to perform these activities and this makes it easier for both the business and the users; This boils down to our need to have a useable and user centered interface.

A few weeks ago i installed GTBank Mobile app to make some transactions and wow! it really took some time to understand how things worked and from that i figured a lot of things that aren’t right with the platform and listed them down. (That was after i managed to make the transaction though). Afterwards i ventured into a quick research with other GTBank users, asked a couple of questions regarding the problems they face with the GTBank Mobile app, and ways they think would make it easier for them to navigate the app.

The Process

I’m going to try to keep this and short and detailed as well, so I’ll explain my process visually and wordily.

While I don’t really see any problem with the existing splash screen, I figured it can be better so I did something better.

• Changed the visual hierarchy of information so that it’s easier for users to easily figure out actions to take.
• Although this option is only available when you enable it in settings in the mobile app, i added a fingerprint option for users who would want to always sign in with their fingerprints.

Problem: The problems discovered are gotten From my personal experience and research insights from users who actively use the app; problems are listed below:

• Visually, the interface looks messy and confusing, starting from the use of colors down to hierarchy of information, it’s too busy for the eyes.
• The way the search option is tailored, it’s really difficult for a user to know it’s an input field, looks pretty much like a button.
• There’s no means to see the particular time a transaction is made or when a transaction alert comes in.
• There are no quick links to make it easier for a user to perform primary actions once they get on board.
• While details are provided on sign-in, there is no means for a user to view profile details and make adjustments accordingly.

Solution:

• Removed all the unnecessary information, arranged the information hierarchy so a user doesn’t get confused by a busy interface.
• The home page isn’t meant to display all transactions because that is not the major reason a user visits the app. According to research, 80% of users visit to perform transactions and not view transactions history because there are other ways users get notified of transactions without using their app. To cut it short, a user only has a search option on the transactions page where all transactions over time is displayed. There’s a date picker too that allows searching transactions by time range.

Transaction page: Displays all transactions overtime

• I added quick links for primary actions 80% percent of users perform on the platform.
• A small profile icon is displayed on the top for users to quickly access their profile and see other details associated.
• There was never a separate transactions page, the home page was so stressed and burdened with it, so I tried to relieve her of the stress by getting the transactions to page separately lol.

• For the side navigation; used better icons, improved the copy on some parts, example instead of ‘Transfers’, I replaced it with ‘Transfer money that gives a clearer picture so I don’t have to think twice about what I have to transfer.
• Improved the layout and structure of information. Instead of ‘settings and help’, I differentiated between ‘account settings’ and ‘help and feedback’ as different options because I believe it plays a very important role here. Users should be able to give feedback so you know what they think and feel while using the app.

• The existing settings page looks disturbing to the eye with the arrangement and color usage.
• Improved on the colors, text arrangement, and icons to simplify it and give it more space to breathe so it can be more effective (We all need to breathe you know, so we can be productive lol)

• While I don’t see anything so wrong with the existing payments page, working with the feedbacks I got; I figured it has a different feel altogether, Why exactly? I ask a lot of ‘why’ questions! so that brought about my redesign of it, gave it the same feel as others so it feels natural there’s really nothing to confuse you as a user.

• Well, this page comes in when a user wishes to view complete details about a transaction you’ve made, you click on a specific transaction to see full details.
• Improved on both the layout and contents, in the redesign you can see a specific time a transaction alert came in.
• The existing transaction page doesn’t feel complete because It’s impossible to see the account number or bank name of the sender, I asked these questions in my research, and according to feedback, it would be nice to have a feature because what if I want to transfer the funds back to you immediately or something of that sort? haha, it happens! and should be considered.

Problem

• Based on my research insights, the transfer flow can really be confusing for a first-time user, as it was for me the first time I tried.
• When a user clicks on ‘transfers’ the next page he gets is this.

While this isn’t so bad, I believe it can be better. There’s always room for improvement.

• As a user using this app for the first time, this page causes a lot of cognitive load(this is the total mental effort it takes to process information related to reasoning and decision-making) That doesn’t create a good experience for both a first time user and an existing or old user.
• User complains that there are specific account details they consistently transfer funds to and they would like it if there was a way to save a beneficiary or receiver and easily find them for recurring transfers.
• In the existing design, the flow is so complex and difficult to even explain. For example; a user has to select a bank first, enter saved details and try to search beneficiaries of which each search throws in errors so it’s really so difficult. 75% of users I spoke to said they don’t use the feature cos they don’t even understand the process and how it works.
• The screenshot below is an example of the search process. In the search input field, it’s not really clear what a user has to enter in the search input field to easily find the saved details he/she wants to transfer to. Should it be the receiver’s account name or account number or bank name? it’s not really clear.
• The saved beneficiaries aren’t listed so a user can’t scroll down to select. This screen makes a user feel lost too.

Solution:

• In the designed solution, it’s pretty easy to navigate between New Receiver or recipient and saved receivers that are already listed for you. You can also search receivers by any detail of them you remember.
• The redesigned app reduces a lot of cognitive load for the user, in the sense that the information architecture is straight to the point.
• In the proposed solution, there’s a way for the users to look through their saved recipients and also search for information. The search is going to be pretty advanced such that when a single alphabet is entered in the search input field, any detail with such alphabet is displayed. You can search by bank name and account number too, it’s tailored to be pretty versatile.
• In the proposed solution, the flow is so simple and doesn’t need to be explained. Here’s how it works; Once a user clicks on ‘Send money’ or transfer money this page comes in.

• It’s going to display the new receiver option for you by default so you just provide the receiver’s details. To search from saved receivers, as the image above implies, click on saved receivers.
• you see a list of saved beneficiaries/ receivers listed so a user can scroll down to select or just search.

Conclusion:

The aim of this redesign is to create a better interface and experience for users. I believe I did my best to create an improvement that would suit GT Bank users better. I tried to test my solutions with them so I know this really works better for them. Although some screens were left out, picked a few core screens to improve on; I'll want to believe the few you’ve seen explains enough about the whole idea. I tried to be as detailed to the best of my knowledge, and really hope you enjoyed reading this.

This being my second attempt at writing a case study, I’d appreciate your honest reviews, feedback and questions. I would be glad to reply.

Thanks for reading!