Enhancing the DBS Singapore digibank credit card payment experience

Making ibanking easier.

Working together with aspiring UX-ers Koh Khai Liang and Ridzwan Haron, this was our third project in our UXDI course.

The Brief

2 weeks to identify problems or opportunities within an existing mobile application.

Our team decided to work on DBS Bank’s digibank application. It was a pretty good challenge for the team as the app is known to be one of the better ibanking apps in Singapore, and we definitely had to wrap our brains together for this one. Our main purpose: To enhance the user experience of the app. We approached the ‘well-designed’ app with an open mind and an opportunity to try our best.

“Digital design is like painting, except the paint never dries.”- Neville Brody

The current DBS digibank app logo

Our Design Process

We managed the design flow in three distinct phases: Research, Analyse, Prototype.

Research

We understand that every great product largely depends on the satisfaction of its users. Thus, knowing them, their habits, their likes and dislikes, will allow us to find a good starting point in delivering a new improvement to the iBanking app. We organised the research phase of the project into several steps: doing some research on DBS, understanding how people use the app and asking people what they think about it. We also gathered insights on the current app through running a usability test.

DBS Bank

Not too long ago, DBS was named one of the world’s best digital banks by finance magazine Euromoney. Largely known for her foray into the digital realm of online banking, DBS has emerged as one of the prime institutions to adopt Fintech initiatives after having launched the digibank app back in 2016. Given this understanding, the digibank app is clearly well-designed and it was challenging to design yet find fault with the app.

Understanding how people use the app (Task Analysis)

We asked users what the most frequent tasks they performed on the digibank app are. Quickly coming up with available tasks on the DBS citibank app, we scribbled them on post-its, discussed which ones were relevant to our users, refining them then asked existing DBS/POSB users to rate those tasks based on their frequency of use. We also gave users a chance, if applicable, to add additional tasks.

left: A user organising the tasks by order of frequency. right: a User’s Top 5 Tasks

The result of the Task Analysis is shown below:

Frequency of Tasks performed in the DBS digibank app

Based on the results of 5 users, we have found the top tasks that users will perform when they open the DBS digibank application:

  • Transferring of funds within DBS accounts and non DBS accounts
  • Checking their current account balance
  • Checking unbilled and billed transactions on their credit cards
  • Paying for their credit card bills

User Reviews of the Digibank app

To gain a better contextual understanding of the app, we had also gleaned information from user reviews from a myriad of sources online such as: articles on the bank’s Facebook page, feedback on twitter, and reviews from both Apple and Google Play app stores.

Insights from various sources online

Asking users what they think about the app (User Interviews)

After collecting some information both on current usage and comments from a wider pool of users, we have slowly discovered the various pains and challenges that users face. Taking this into account, we crafted an interview to fully understand users’ online banking behaviour. We interviewed users that used other ibanking applications from other banks as well, so as to gain additional insights into what works and what doesn't.

Due to the nature of usage, we have identified two distinct categories of ibanking usage namely: general online banking and more specific Credit Card topics. We recorded and organised the interview findings into two separate Affinity Maps.

The Personas

Through this grouping we had conceptualised two distinct Personas, which we came up with when looking at the kinds of users that used the ibanking application. The Vanessa persona would belong to the group of users who perform general tasks, such as Transferring Funds, whereas the Matthew persona would be more involved with activities linked with credit cards. We decided to focus on the Matthew persona, as we believe that the type of users that fit within that persona would be more aligned to the interests of DBS Bank. This would be because the Matthew persona would be a higher spender on credit cards.

Left: Vanessa persona (general ibanking user),

Usability Testing on Current digibank app

Testing the current digibank app was slightly challenging as the app includes personal information. We had thus created a clickable prototype on Invision, blurring out numbers on the screens and uploaded it onto Invision. We had also tested by users narrating their actions to us while we only listened in. By translating these two different methods, we had summed up the following:

  • Users preferred a simpler authentication process (eg. login, fund transfer, Add Payee tasks)
  • Visibility of credit card details, such as date of transaction
  • Having the need for additional authentication processes, and not being able to complete tasks without them (eg. security dongle)

After running the usability testing on the current app, we were considered to focus on a key area of the application that could be improved. We discussed this, and it was pretty easy to decide which persona type would be more fitting to the bank’s business goals.

Process Flow Analysis (for Matthew persona)

Based on the Matthew persona, we visualised the process flow to which the user type would pay for credit card bills.

Pathway option for both DBS and non-DBS cards through the hamburger button
Pathway option for both DBS and non-DBS cards from the user’s dashboard

Given that there are currently two pathways to achieve the same solution, we have decided to reduce that to a single pathway.

Proposed new user flow for the digibank app

Creating Matthew’s Customer Journey Map

Highlighting several key points from the user research we have collected, it was time to build a more refined model of what kind of user Matthew is and how he would interact with the app.

Process of building the profile and Customer Journey Map for the Matthew persona

Prototyping

After discovering the needs of our persona, Matthew. We started discussing and sketching some initial ideas for our prototype.

An initial sketch for the Prototype

We referenced the current app design as well, to retain the existing UI styles, while implementing some visual solutions that we felt could be useful or solve the problems that users faced.

After developing low-fi pen and paper sketches, we translated them into digital protoypes using various software. We had come up with 2 different prototypes at this stage, Prototype 1 (P1) and Prototype 2 (P2). We had decided to create two prototypes, with P1, retaining a similar UI to the current digibank design, and a UI change with P2.

Prototype 1 Design
Prototype 2 Design

Running usability testing with two prototypes

Our group ran a test with two different prototypes in one testing session per user. After each prototype was tested, we asked users to fill out a simple post-test survey asking them about their experiences with that prototype.

From those tests we conducted, we had arrived at a few points:

  • The ‘Make a Payment’ in P1 (and the current app) was not very obvious to users. Users had a hard time looking for the payment button. We had then decided to fix this problem by adjusting the position of the Make Payment button to the bottom of the screen. This is to accommodate it within the ‘mobile comfort zone’, areas of the screen where it is easier to tap
  • Users not knowing that the feature where they could change credit cards right away from the main page
  • Lack of a directional cue for the ‘Slide to Pay’ button caused users to be confused with the button, and not knowing how to interact with it.

Making that final prototype

Gathering users’ insights from both P1 and P2, we pushed forward for the final prototype meant for presentation. More details as shown below:

Next Steps for our Project

  • Develop Vanessa persona

Although we have come up with an idea, we felt that it should still need to be tested with users to gain feedback on its usability and functionality. This concept shortcuts the step where payers had to manually add payees to transfer funds. Payees generate a secure link sent via SMS to the Payer, where they will be instantly navigated to the screen to choose the amount to transfer.

  • Categorisation of Transactions

We had users voice out their desire to have their transaction histories, easier to read and interpret than what the current app offers.

  • Better customer support

Users highlighted the fact that DBS customer service officers were sometimes hard to reach. They also had to spend time arriving at the right person to talk to about their specific issues. Improving the customer support would definitely be a good plus to add onto improving the experience.

Project Takeaways

  • Discover and understand the business needs better

This project could definitely have benefitted from more research into DBS Bank’s digital product objectives. Receiving more quantitative user data, such as user statistics for the usage of bank servicesLooking into previous versions of the app and understanding the past issues faced could have also given us an added advantage when redesigning the current version.

  • Remembering project requirements and keeping things in context

This project required us to constantly check base on looking at the bigger picture and keeping both business and users’ needs in consideration. I found it to be extremely valuable to be conscientious about every step and to question the why as we go along.

  • Learning to work as a team to accomplish great things!

Working as a team has its ups and downs. For this project, I was extremely fortunate to be able to work with talented individuals who have strengths in the complementing fields of design and development.

Prototype Preview:

Project designed in Sketch and developed in Flinto.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.