UX Case Study: Designing Mobile Banking App for the Elderly
BTS Bank — UX Design Challenge
During my study at Purwadhika Startup & Coding School, I was given the challenge to complete a case study. The case study is about how to create banking applications for the elderly by considering physical conditions, helping without having to go to the bank, and their emotions. This challenge was solved in a team, me, Billy, and Taufik. The concept is mainly intended to identify existing problems and to suggest potential solutions or alternative approaches. So, here’s what we came up with.
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. The challenge was that regular mobile banking app are often made with designs that only cater 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?
With the limited time, we had to complete this challenge, we weren’t able to conduct a full Design Thinking process to develop our design concept. However, we developed the 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.
We worked together as a team in defining the problem and generating a general solution. However, each of us worked independently for each user flow as follows:
- I designed the sign-up process
- Billy designed the sign-in process
- Taufik designed the transfer process
1. Specify the End-User
The elderly age 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+ who owns and uses smartphone”
2. Conduct Desk Research
Since our users are based on older adults, it is more challenging to empathize with given their entirely different physical, and 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
- 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
- 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
3. List Desired Outcomes
The following are the expected outputs from the BTS Bank app based on the user needs:
- Provide minimal design to accommodate different physical and cognitive conditions
- Provide enough information for easy to use interface
- Displays only highlights that are essential for the user
- Has a simple and easy navigation
- Accessible motion control
4. Brainstorm Design Solutions
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. We chose these as competitive analysis because BCA & Jenius are the most popular bank in nowadays. Here’s the highlight of features from each app that we liked:
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
- Font Family
- Icons
- Button style
Our goal is to create an app design that is accessible and user-friendly for all ages. Readability remained as our focus throughout all our design:
- 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
- When it comes to font size, we used font size that is not smaller than 14 points to make it easier for older adults to read
- We provided the same attention to font type for readability. Default fonts, like “Roboto”, usually are the easiest to read
- We provided large enough spaces between interactive elements, such as buttons, so that users can click on or tap the correct item. This rule holds, especially in cases when there are more than one interactive elements on a page
5. 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.
6. 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.
7. Wireframes (Sign-up Process)
The picture above is the wireframe that I designed for the sign-up process. The sign-up process here is more likely how a user can do registering from home without having to come to the bank (by an online process). This reference was obtained from Jenius which is can register from the application or online. So what are highlight of this process? The following is the explanation:
Remind your user by “the progress”
On the first page of BTS Bank, I show the progress bar above. What is the function of this progress bar? According to Jakob Nielsen in Heuristic Evaluation explained that one of the requirements for a good UX Design appearance is there’s visibility of system status. Definition: The visibility of system status refers to how well the state of the system is conveyed to its users. Ideally, systems should always keep users informed about what is going on, through appropriate feedback within a reasonable time.
Help your user with “clear information”
In every sign-up screen, I tried to giving clear information to make sure that the user understands what to do. According to Jakob Nielsen in Heuristic Evaluation explained no. 10 of the top 10 UX design heuristics is provided user assistance at appropriate times in the interaction, making sure that such information is easy to search, focused on the user’s task, lists concrete steps to be carried out, and not too large.
Also, it should be clear where the user has to click, in the screen above, I am using a big Call To Action (CTA) button.
Easier activation from bank Visit
I came up ideas from the challenge’s task which is helping without having to go to the bank, so I create a sign-up process by a visit from bank parties. The user only needs to giving information about when and where they want to activate their bank account. Here is the screen looks like:
8. Define Success Metrics
The list of desired outcomes we defined, in the beginning, came in handy again in this process. I wanted to measure the success of the sign-up user flow that I made by how well it can accommodate the objectives that the users are expecting.
Some metrics I wanted to measure included:
- Number of users who understand the progress bar above the screen
- Number of users who understand & successful filling all form
- Number of successful sign-up until finished
9. Concept 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:
- Although the signup screen that I have made is very convenient to simple screen, many elderly are not familiar with the concept of online registration. From our survey, although they are open to the idea, they need someone to explain how to fill all forms the first time they use it. Maybe the user can request a visit from a bank in the first place so the bank parties can directly explain all the things about the bank application.
- I got a new insight when doing this testing. Some of them think that SMS banking used to be very simple and easier to understand. The display of sign-up screens maybe even simplified like the days they used the SMS banking system.
Key Lessons
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 helped me conceptualize a solution in a short period.
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 a few assumptions that hadn’t been validated yet.
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
Thank you for reading my group project! I enjoyed the whole process while creating this project, I hope you all feel the same as me. I am very grateful having my mentor during the making of this project, thank you ka Kenneth Mahakim (UX Instructors Purwadhika).
Also, thank you for all discussion and new insight from my team! Here are some of my team’s reflections on the case study: Billy Setiawan’s version & Taufik Efendi’s version.
I’m looking forward to your feedback, please reach me out at sarahalfiani204@gmail.com or my LinkedIn.
Thank you :D
