Published on | Prototyping: From UX to Front End — Medium Shabir Gilkar

This is how I envision a simple, modern looking, design & experience rich mobile banking app in context to customer base and region in which Jammu & Kashmir Bank is operating.

I started using mPAY (JKBank’s Mobile Banking app) just few weeks before , earlier I was using eBanking which intern has come through many changes but nothing so far fascinating or easy to use.

Since world is moving fast towards mobile and tech companies are putting their heads together to put all tiny or big technologies into user’s hands. Therefore it would be appropriate for companies to bring in their products/services/support etc into mobiles which are simple to use, easy to navigate, contextual, useful, purposeful and solves users problems.

Since the customer experience, requirements, needs are ever changing and therefore companies need to make sure that they are in sync with customer needs

I know it is easy to say but a genuine try would never go in vain

Starting from onboarding process to actual use of this app i thought it needs a better retouch of design which would overall enhance the user experience.

Let me share with you some screenshots of this app to give you an understanding.

Current App design

I have also tried to come up with ‘As Is’ information architecture which would give us an understanding about how information is currently flowing through the app. In order to complete one task user has to click on multiple times to navigate through the pages. It is time consuming and too much is expected from the customer that too on mobile app.

IA only covers sections which are covered under this redesign activity

How it works today?

User opens the mPAY app and immediately is asked to enter his registered mobile number and then click on proceed button.

App is informing user that a SMS with phone information (type of phone, phone number etc) would be sent to server to register his phone.

After successfully sending the SMS user is then asked to enter his Debit Card details like Debit card number, PIN and expiry date and then click on submit.

If you complete the above step then literally God is listening to you. My friend is stuck at this step from few months and the bank customer care is not able to fix it.

After success at step 3 you would be asked to set your login password and then login.

Please note that in this app there are 2 password types one is App login and another is Transaction password/pin called as mPIN.

After successful login user would be taken to landing page which is called as home. There would be few options available and you can also personalise this page to add few more option or deselect few. On home page you would find a green dashboard icon at centre bottom area to take you to Dashboard.

Dashboard would contain multiple options which would help user to transact, check, request with in this app.

Typically what a Banking App should do

As a user I should be able to login app as quickly as possible ( i.e. by entering Password, TouchID, FaceID)
As a user I should be able to see my all accounts (Saving, Current, Loan, Credit card etc) and easily check statement.
As a user I should be able to register my Payees or Beneficiaries (both internal and external)
As a user I should be able to transact money through the app (Transfer)
As a user I should be able to register my billers and pay the bills
As a user I should be able to contact my branch for any requests or feedback.
As a user I should be able to locate other branches and ATMs etc
As a user I should be able to see info of other products in offer.
As a user I should be able to pay merchants via UPI, QR Code Pay or transfer
As a user I should be able to see current offers in bank

The primary motivation for users to use Banking app is purely to transact and access the information which includes Transfer Money, Pay Bills, Receive Money and Access Accounts(s) information like statements and rest of the other options are secondary needs but are equally important.

Secondly we need to take into consideration about when a user is using the app and in most cases it is in hurry, at bus station, in metro, gas station, shop, office etc while they are either purchasing anything or expecting/transferring the money. But overall money is big deal to deal with therefore we need to provide an easy, seamless, informative, fail-safe and honest experience to users by which they can both transact and access information with confidence.

Let me take you through the initial paper wireframes i have designed to redesign the JKBANK mPAY app which in my opinion is both moderate, simple and easy to use.

Covers wireframes for Login page, Dashboard, Mini statement, Transfer pageCovers. Transfer in Account, Transfer by Mobile Number, Transfer to UPI and Transfer by QR CodeCovers Account info/verification page, Confirm Page, Transfer to other Banks Page and Transfer Page.More page

Final Visual Design of the App

As per the current flow user’s initial identification and verification would be done via a SMS sent from his smart phone to server to register phone details, check the mobile number etc. Therefore via this mechanism we can personalise the login page of user to show his profile picture and display name and then request use to enter his login password. Apart from password user would be given option to set/reset his mPIN aka transaction password or reset his login password. User can also search offers, IFSC Code of branches, Bank Branch and ATMs etc. Branch details and ATM details would also include map location section which would allow users get directions to reach the address.

After successful login user would land on Dashboard page which include user accounts as cards and user can navigate to all his accounts like Saving, Loan, Credit card etc by swipe to left.

User can also either transact or access different information via small cards on Dashboard like access list of Accounts, Transfer, Pay Bills etc. User can also customise his App Dashboard by clicking on customise link to only select cards of his choice (Personalisation of Dashboard).

On bottom tab bar user can navigate to Search, Emails, Alerts and More details/settings page.

On Statement page user is mostly interested in what goes-in or comes-out from his account(s) and therefore green and red Plus(+) and Minus(-) icons would act as signifiers to users to easily understand the transactions just by a glance. We would also need to simplify the transaction text as has been tried in above statement page.

Advance statement would allow user to get statement by selecting date range or month etc.

The Transfer workflow would trigger by clicking on Transfer tile on Dashboard and would navigate user to Transfer page. Onclick Fund Transfer button(s) would navigate to respective Fund Transfer Pages (Refer wireframes to see different transfer types). By selecting an account From Account dropdown; current balance of that account would be displayed. Amount can be either selected by predefined buttons like 100, 500, 1000 or user can enter the amount in input field.

Confirmation page would inform user with transfer details and after verifying user can enter the mPIN to complete the transaction. Incase at this stage user has forgotten his mPIN then user can click on Reset mPIN link.

Additionally I have also tried to show how we can combine and design More page which can accommodate lots of options and details to show.

App in other Languages

I know there would be more appropriate words in URDU to define some sections

Since the majority of the users of this app can read and write Urdu and therefore it would be an appropriate move to allow users to access this app in multiple languages.

— — — —

This case study doesn’t include all the functonality which is currently in app. I have tried to give an idea about how we can design and improve certain sections of the app in order to improve the user experience.

In case you like this case study please add some cheers. You can connect with me on Twitter at Shabir Gilkar

I first time used JK Bank mPAY app so thought to redesign it was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

I first time used JK Bank mPAY app so thought to redesign it

Cool stuff, every week

More Articles