Mobile banking apps for the elderly? why not (UI / UX study case )

UX Design Challenge

Taufik Efendi
8 min readAug 30, 2020

BRIEF

On my first design challenges at Purwadhika Startup & Coding School, I was given the challenge to complete a case study. I was provided with two other friends, Sarah and Billy to create mobile banking for the elderly. We called BTS Bank.

BTS Bank is a mobile banking app that we designed to help the elderly to save, transact, and manage their life and finance. We designed a new mobile banking app that would accommodate the elder’s needs.

ROLES

For this challenge, my role is as a UI / UX Designer with a duration of 2 weeks from the Purwadhika design challenge. When doing this challenge, we are divided focus because of the density of the material and practice in this course. However, we do my best to cover my design process.

THE CHALLENGES

“The challenge was that regular mobile banking app is often made with a design that only caters to a certain age group while neglecting the other. Wouldn’t it be better if there’s an app that presented age-friendly design and functionality that can be easily and successfully used by older adults and other populations?”.

Finding the solution with design thinking

Design thinking process

I know to find the solution we following the Design Thinking process. But, With the limited time, we weren’t able to conduct a full Design Thinking process to develop our design concept. However, we developed our own framework that worked for us. We focused first on the problem, then the ideas and solutions generated, and finally concluded with a review of the entire process. By structuring the process step-by-step, it helped us break down the challenge into smaller problems that we could solve one at a time.

EMPATHIZE

Specify the End-Users

The elderly aged 60 and above were given as end-users in the challenge. We narrowed it further to a specific type of elderly who would most likely use a mobile banking app:

Elderly age 60+ use smartphone

Conduct Desk Research

Since our users are based on older adults, it is more challenging to empathize with given their entirely different physical, cognitive states, and designing for their accessibility can get quite technical. To understand more about our user, we did some desk research that provided us with some insights about the user and their needs:

  • People over the age of 40 are more likely to experience presbyopia, or long-sightedness, which makes reading small text challenging
  • Color vision problems in the blue-yellow spectrum (tritanopia) are often detected among people in their mid-70s
Source: EyeQue
  • Between the ages of 55 and 65, hand-eye coordination and motor skills tend to decline, and this can make it harder to interact with UI’s
  • The elderly are reluctant to go outside the house due to difficulties they might encounter when traveling, including distance and safety
  • Many elderlies find the internet too difficult and of those believe that they are “too old to learn”
  • Elderly requires a step by step approach at a slower pace while the cognitive structure of millennials enables them to process multiple information at once

DEFINE

Honestly, we didn’t conduct a user interview, but we define the problem based on asking other friends for their parent’s experience using mobile banking. The following are the expected outputs from the BTS Bank:

Provide minimal design to accommodate different physical and cognitive conditions

Provide enough information for easy to use interface

Displays only feature that is essential for the user

Has a simple and easy navigation

Motion control that is accessible

IDEATION

Competitive Analysis

To determine what kind of features to put on our prototype, we did some competitive analysis on two mobile banking apps, BCA Mobile and Jenius. Here’s the highlight of features from each app that we liked:

Feature of BCA mobile
Feature of Jenius apps

We got some interesting features with a competitive analysis to combine with our features. Below the features we will show you:

Phone number account is the main feature of BTS Bank for transaction with the same bank. Because for easy remember when users doing transactions with their family.

Quick a nominal transfer We provide quick nominal transfers such as ATM machines. Because elderlies can choose nominal transfers that are more accessible.

Fingerprint authentification We provide quick nominal transfers such as ATM machines. Because elderlies can choose nominal transfers that are more accessible.

Generate User Flow

The goal is to create a clear and simple flow to help the elderly get from the sign-up process to transfer without any difficulties.

user flow of BTS Bank

Design Guide

To have a consistent design on each of our user flow, we first came up with a small design guide consisting of the elements and components we would use to build our prototype. The design guide consists of information like:

Colors

We used high contrasting colors to make it easier for our target user to read. Older adults are more likely to struggle to see all the items clearly on a more complicated background. The main rule of thumb is that our user should not have any trouble recognizing between colors.

Color Scheme of BTS Bank

Typography

We provided the same attention to the font type for readability. Using Roboto Family to usually are the easiest to read. Because the font features friendly and open curves. While some distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. Below the font used to be applied in BTS.

The typography of BTS Bank

PROTOTYPE

Sketches

The user flow we created in the previous step made sketching the screens a lot easier because we identified the main actions that the user needs to take to complete their objective.

Our goal with the sketches was to quickly jot down any design ideas knowing that we’ll probably make some more changes when we create more detailed wireframes.

Wireflow & Visual Design

In this part, we separate our duty to design BTS banks. Billy designed the sign-in process, Sarah designed the sign-up process, and I designed the Transfer process.

Transfer flow with the same Bank
Transfer flow with a different bank

What is the highlight of this process? The following is the explanation:

Phone Number Account

We replace bank account number with phone number because users can transfer make it easier with the same account BTS. Also, users can search other’s phone numbers on the contact page after they save it.

Quick a nominal transfer

We provide quick nominal transfers such as ATMs. Because elderlies can choose nominal transfers that are more accessible. Although the nominal is set by default, we provide too box input for nominal when they need it.

Check Account Number

When our users want to transfer with a new different bank account, they should double-check for a bank account. The reason is to avoid mistakes when inputting a bank account. Yeah, this is inspired by Jenius’ process when inputting a new account.

Verified PIN Number

On the confirmation page, users should verify the PIN number for secure transactions, this is standard policy every mobile banking.

you can see a full prototype of BTS Bank here.

TESTING

We gathered the feedbacks through user testing with 6 representative users. We found out that our representative users still experience problems while using the app. Here are some insights that we gathered from the user testing specifically for my design:

  • 6/6 users are interested in guidance on the home page. Because it can understand the brief description of features
  • 6/6 users are helped by each option for a nominal transfer because it can make them easier
  • 3/6 users confused about PIN verification because the instruction/interface cannot be clear
  • 5/6 users arduous about transfers between accounts, the interface is very different, making them confused and many steps to finished

LESSON LEARN

I learned a lot from this design challenge:

Be fast and flexible

Most of the time during an interview, you need to come up with something fast and with limited information. Being fast and flexible with ideas and assumptions really helped me conceptualize a solution in a short period of time.

Define goals early

Having a good understanding of the user’s expectation would act as a guideline for your research phase and it would greatly increase your effectiveness.

In Conclusion…

Have you noticed the lack of something in the case study so far?

User-Research!

At this point, the lack of user research was the elephant in the room. Just like what you would normally encounter during an interview, you don’t have the chance to conduct user surveys. So far, the design solution was built on top of some of the little insight and a few assumptions that hadn’t been validated yet.

Defining Problem

We don’t define right the problem and we do not create a user persona to represented users. Basically, the lack of research makes us difficulties gathering data for real users’ needs.

What could I have done better?

Given the opportunity, I would have done a deep dive into researching more about the key solutions offered hereby interviewing users and conducting a survey to validate our initial assumptions.

Read more on design features and guidelines that would help elders use a mobile app.

Test, test, and test. Since the target users are pretty specific, I would try to incorporate user testing in every step of the design process.

This case study was made as a Design Challenge for UX Design boot camp at Purwadhika Startup & Coding School, therefore all the elements were made by the BTS team. During this project, I am very grateful to have Kenneth Mahakim as a mentor and Charlie as a UX / UI Designer Purwadhika.

I am looking forward to your feedback! Kindly email me at taufikefendi0902@gmail.com or my LinkedIn :)

Thank’s for reading!

--

--