DBS PayLah! Redesign

Redesign of an ewallet app, DBS PayLah!



Project Summary (TL;DR)

For further details, read the full case study on Medium.

Problem: A personal project inspired by personal frustration with the PayLah! app experience - too many steps in completing payments and many unused features on the home screen.

Opportunity: I conducted guerrilla user research, redesigned the app interactive prototype, and shared my findings via a case study on Medium.

Impact: The project reached 6,000 views within a week, got me invited to Development Bank of Singapore (DBS) to talk about the project, and received praise from Senior Managers of banks such as UOB, OCBC, DBS, and Designers from companies like IBM, PayPal, and Pivotal.

Interactive prototype available here.

Introduction

With Singapore’s recent push towards adopting cashless payments, the development of new technology and adoption of digital payment methods became rampant. Paylah! is a mobile payment solution by Development Bank of Singapore (DBS) utilizing a registered mobile number/QR codes.

*I am not affiliated with DBS and did this redesign on my own volition.

Details

  • Tools: Sketch, Principle, InVision
  • Timeline: May 2018
  • Project Type: Redesign
  • Role: Product Designer
  • Skills: User Research, Interaction Design, User Experience



Problem

Despite the new look on the app from an update this year, the peer-to-peer transfer process still felt sluggish and the app is cluttered with a surplus of underutilized features that potentially impedes frequent use. I felt that the user experience had much room for improvement.

To develop a better understanding, I recreated the existing PayLah! experience for non-users:



The home screen is littered with tons of features and the payment process has redundant steps like repeated confirmations. PayLah! has great potential to encourage the move towards cashless as the bank has a relatively large user base of 785,000. However, the service only has 15,000 daily transactions, or about 1.9% of total number of accounts (not accounting for multiple transactions per account).

Thus, this redesign was inspired to encourage usage and adoption through a better user experience - for users, by a user. My process is guided by qualitative user research, identifying and solving user needs, and utilizing Google's Material Design guidelines.




Research: a closer look at the app

Problem Validation

I conducted a guerrilla user research in 2 weeks and interviewed 30+ participants of different demographics including working adults, a former employee of DBS, and young adults in their 20's with experience using payment apps in USA and China.

  • 100% don't use/didn't noticed the everyday payments section
  • 91% don't see/didn't notice the deals on the front page
  • 'Pay' and 'Scan QR' are the most-used functions in the app
  • Most don't know about the availability of PayNow function (method to transfer inter-bank) inside PayLah! Few who knows about it said that it is not obvious



"Personally, its a bit messy. PayLah! has so many 'squares'. You wouldn't want to go and explore. It's not straightforward. It was first introduced as a concept and notion of fund transfer. So I didn't bother to go explore because of that first impression." - Recent Graduate, Male, Mid-20's

An interesting finding from the ex-DBS employee was that banks like DBS are aggressive in pushing for cashless to reduce ATM transactions. The cost of maintaining ATMs is high due to security, transportation, and insurance expenses for the machines implemented islandwide. Therefore, going cashless is a win-win for both parties; saving costs for banks and providing convenience for users.



Competitive Analysis of DBS PayLah!

To better assess the depth of the problem, I conducted a competitive analysis with similar services. I had a great experience with Venmo when I was in the Bay Area in 2017 and will be using Venmo as a comparison/benchmark.

Seamless, frictionless peer-to-peer transfers

Making payments to my friends has never been so simple with Venmo. Venmo has a seamless transfer process where it takes only 8 steps (taps & events) to complete a transaction to a contact compared to DBS requiring at least 13 steps.

image-1



In Venmo, payments are people-centric  where the recipient's field is placed first, followed by the amount and a description of the payment. When the 'pay/request' button is pressed, a contact list immediately pops up to your top people (people whom you had often transactions with) and friends list, skipping an extra tap. The process is also hastened by considerations such as a confirmation prompt on the same button and bringing the user directly to the home page displaying their successful transaction.



Home Page/Social Feed

According to Hick's Law, the more choices the users are presented with, the longer it takes to make a decision. Including the little padding and lack of distinction between each feature, the home screen looks like a deposit of icons with 14 different buttons/choices. Everything below the fold were more likely to be ignored as observed in my user research.

In comparison, the home screen on Venmo shows only a feed of transactions with only one button at the top right to perform their intended task: monetary transfers.

image-1

"I use PayLah! for one purpose - to transfer to friends. Everything else, I don't really care." - Entrepreneur, Male, mid-20's




The Redesign

Problems to Solve

Based on my interview findings, these were the objectives for the redesign:

  • Remove clutter and improve information architecture
  • Make peer-to-peer payments fast
  • Increase visibility of PayNow service within app
  • Make payment with QR code easier to use
  • Make finding unlisted people easier
  • Lastly, make the experience enjoyable



Wireframes

Understanding the users' problems to be solved, I initially sketched out on pen and paper various versions of mock ups to solve the various problems.

image-1



 My Design Process

From my sketches, I went on to build a high-fidelity prototype. I created a style guide by infering from DBS's latest collateral. I whipped up a UI library within minutes with Google's Material Theme Editor based on the style guide.

image-1

image-1





Final Result

After a few days, I finished designing an interactive prototype of the PayLah I envision. I showed it to some friends and tweaked it a little more after a round of feedback to before getting to a final version. I conducted simple usability tests with <10 participants and checked if my proposed solution resolved their pain points.



Rapid peer-to-peer payments

My design completed payments with as little taps as possible (6 taps) with the reach accessibility of one hand. by adapting Venmo’s method of pulling the contact list and number pad up straightaway and included a ‘Top People’ section showing people whom you frequently and recently interacted with. Additionally, I combined 'Pay' and 'Request' via a tab to increase utilization of the 'Request' function.

I also tidied up the information architecture and hid away the underutilized features for a cleaner home page.

image-1

"What will be awesome if you streamline everything. When you launch the app, it is it to fund transfer/payment of good. Just make it very easy, just 2 options - just transfer funds or payment at stores." - Student, Male, 20's



Brick-and-mortar store payments made easys

The payment page at brick-and-mortar stores can now be accessed before reaching the counter by accessing your location to grab merchants' data. Users won’t have to worry about holding up the line when paying with PayLah!. Photos of the storefront also help users know that they are paying to the right vendors.

image-1

"I like it. I get to do the things I want really fast such as Pay and Scan QR. Now I also don't have to hold the line when paying with QR code. Smart!" - Entrepreneur, Male, 20's



Increasing 'Request' usage

According to my findings, one usually requests for money when they cover bills for a group. Introducing Bill Splitter - add items and its cost (including shared items) to each person. Utilizing Optical Character Recognition (OCR) technology, items and its cost can be dragged from an in-app attached receipt, reducing the need of alternating between your gallery. If you are unable to get a breakdown, costs can be manually input.

image-1

I also added a feature to remind your friends to make payment on time.

image-1



Engineering 'fun' into payments

I included a 'like' button as a form of confirmation feedback for users to acknowledge received payment. Furthermore, I tried to engineer 'fun' into the process - when a user enters an emoji (within standard unicode) as the first character of a message, it replaces the default 'like' button in a transaction line, for a more personalized experience. Messages are still optional but this encourages users to make the experience more personalized.

image-1

"I think it's quite user-friendly! Navigating around is straightforward. And I like the use of emoji. Makes the whole process more enjoyable and fun" - Graduate, Female, 20's






Here's the interactive prototype:




Takeaway

Overall, I was really pleased with the reactions when I present my prototype. The redesign forced me to get out of my comfort zone to learn more about conducting user research and practice Principle for motion design. Throughout the past month, I learned a lot about the importance of research informing my designs and my role as a UX designer to do the thinking of how one accomplishes a task.

Kudos to DBS for developing such a service that improve our lives by simplifying everyday payments to our friends and stores! 👍 and a big thanks to the users who contributed their precious time to assist me with my research. 🙏🏻

For further details, read the full case study on Medium.