Enhancing the DBS Singapore digibank credit card payment experience
Making ibanking easier.
--
As this was a design exploration project on enhancing an app of our choice, our team had decided to give ourselves a bit of a challenge to design the DBS digibank mobile application.
The main goal of this project is to enhance the user experience of the mobile application.
Working in a team of 3, our group consisted of Ridzwan, who has a background in Consultancy, Khai Liang, who was an Art Director from the Advertising industry and I, the psychology grad.
I was mainly involved in the preliminary competitor and heuristic Research and the UI prototyping of the final presentation, while the other two members also involved themselves in the Research, User-testing and other stages of prototype creation. Working together with aspiring UX-ers Koh Khai Liang and Ridzwan Haron, this was our third project in our UXDI course.
“Digital design is like painting, except the paint never dries.”- Neville Brody
Our Design Process
To give ourselves a clear picture of our progress throughout this project (a 2-week timeline) we decided to structure our flow as such: Research, Analyse and Prototype. This flow helped with some of the documentation that our team would contribute to, and aided in project management.
The Research Phase
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.
The result of the Task Analysis is shown below:
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 looked up 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.
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 pieced together the various pains and challenges that users face. Taking this into account, we crafted an interview to fully understand users’ online banking behaviour. We also interviewed users who currently use other online banking/credit card applications.
We have identified two distinct categories of which the app is used for: general online banking and more specific Credit Card usage. We recorded and organised the interview findings into two separate Affinity Maps.
The Personas
Through the various interviews and user studies, we organised the users into two distinct Personas. The ‘Vanessa’ persona would belong to the group of users who perform general tasks, such as Transferring Funds, whereas the ‘Matthew’ persona would be 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 belong to a higher interest group at DBS Bank, as they are a higher spender on credit cards.
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.
Analysis Phase
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.
Given that there are currently two pathways to achieve the same solution, we have decided to reduce that to a single pathway.
Creating Matthew’s Customer Journey Map
Highlighting several key points from the user research we have collected, we created a customer journey map to review and understand the behaviours and possible attitudes and reactions to specific steps within the journey. This also allowed us to focus on where improvements can be made to the experience.
Prototyping Phase
Upon understanding the various conditions of the current app experience and what possible improvements can be made, we proceeded to sketch some ideas and rapidly prototype them.
In order to retain the branding and familiarity of the mobile banking app, we referenced and designed our prototypes to follow the look and feel of the current app.
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. We had also decided that running user tests on the two prototypes simultaneously could allow us to conduct a very qualitative A/B testing method.
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.
- Reviewing and refining research methods
Taking a step back after the project was done, I realised that some of the methods we had implemented in this project could be further improved. One such method was the testing of the two prototypes with the same user. I had realised that it does not achieve accurate user testing results, and it won’t be something I would repeat again.
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.
- Staying within 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 prototyped with Flinto.
