PayLah App Redesign

Tan Meng Jun
8 min readMar 10, 2021

Introduction

Is it time for a change yet? Probably not. This was the response most of us would give as we are in our comfort zone for some time. Then one fine day, Covid-19 took over the whole world and we are faced with the harsh reality of needing to quickly adjust the way we do things.

The shift in behaviour is also found in banking. More people are migrating to the online platform to do their transactions. There are apps to help us carry out our tasks with just a few taps away. However, with the prevalence of digital banking, there is also an increase in cybercrimes which is a worrying problem that we all face.

Project Background

Team: Charles, Eilin, Sharon, Yvonne(UX), Meng Jun(UI), Ida (Project Management)
Project time: 6 months
Tools: Figma, Illustrator, Photoshop

The whole process of this team working together had not been a bed of roses. Since we had been working together fully online, issues like miscommunication, connection from the various project collaboration platforms were unstable at times, and facing disagreements as we had our own ideas surfaced. I am very thankful that despite all the setbacks, we managed to resolve our conflicts amicably and headed in a single direction with the objective to complete this project well.

In the initial phase of this project, we were deliberating on what kind of banking project we would like to work on. Through our preliminary desk research, we realised PayLah is the most used app in Singapore so we have decided to work on this app and explore the possibility of enhancing its features.

Defining the Problem

Based our preliminary research, we came up with this problem statement:

“How might we make fund transaction safe?”

Conducting Research

Qualitative research: Desk Research, Contextual Inquiry, User Interviews
Quantitative research: Surveys/Questionnaires

How do we know the things we do not know of? There is no way we can allow ouselves to be ignorant as we go through this project. We had to make sure we know what we were doing by figuring things out through research. We are here to solve problems and not simply come up with a beautiful app. That is why comprehending these problems cannot be banked on some pointless guesswork but it should be based on proper research which will be relevant to the users. Our objective is to identify the areas which we can improve on and come up with viable solutions to create a improved version of PayLah.

Desk Research

We went to different websites to understand what are the functions of the various banking apps, unique selling points, positive reviews as well as the pain points these users face. We also delved into the digital financial landscape to understand more about the current trends.

Contextual Inquiry

Observations were carried out from PayLah users to help us learn about their habits and what struggles they may be facing. We noted down every step they took though recording videos and screenshots.

User Interviews

We crafted a set of questions to gain insights of what e-wallet users’ experiences using their respective apps. The findings are mainly qualitative which helped us understand their struggles and the unique selling points that attract these users which we could study them further.

Surveys/Questionnaires

For this segment of research, we surveyed 42 participants. This helped us to acquire quantitative data to back our findings which brought more clarity to this whole research phase.

Findings

  • 38% are aged between 30–39
  • 81% of the 36 participants use PayLah
  • 36% use PayLah weekly
  • 86% transfer funds to family and friends, 57% receive funds, 36% shopping using PayLah
  • 36% of PayLah users want rewards, 33% want easy cancellation of transactions, 33% want better security

Building UX

Persona

We developed 2 Personas that are tied back to our research so we could figure out the living patterns and mindsets of our target audiences.

Customer Journey Map

A Customer Journey Map had been formulated to highlight the experiences of using PayLah.

Ben Lim

Sylvia Koh

Heuristics Evaluation

We did an analysis based on the different metrics of the user experience to expand our knowledge on what the PayLah users are facing which would aid us in the design phase.

Key Findings

Key Finding #1
Fund transaction is unsafe
Key Finding #2
Fund transaction does not allow rectification of mistakes
Key Finding #3
Payments are not seamless enough

Proposed Solutions

Solution #1
Change “Let’s Go” to “Proceed to Pay”
Solution #2
Include One-Time Password (OTP)
Solution #3
Add recall function when making fund transaction
Solution #4
Integrate the Near-Field Communication (NFC) function into the app
Solution #5
Add biometric scan for the NFC usage

Information Architecture

My team racked our brains to map out the flow of using PayLah with the addition of the proposed solutions (these solutions’ selections are grey-filled).

Designing the Experience

Not all of us in the team are designers, let alone app designers. Being our first time working on such a project, there were great struggles as we were designing our solutions. We took references from PayLah and other banking apps to acquire more ideas to help us move forward. By having 2 Use Cases, we had to ideate for both of them. Solutions #1–3 fall under Use Case 1 while Solution #4 and #5 are under Use Case 2. This is the process where ideas come alive while we still adhered to the guidelines which stem from the Personas.

Use Case 1

Problems:
1. CTA is misleading
2. Fund transaction is unsafe
3. Mistakes cannot be retracted

Solutions:
1. Change CTA to “Proceed to Pay”
2. Include OTP
3. Add Recall function

Use Case 2

Problems:
1. Payments are not seamless enough

Solutions:
1. Near-Field Communication (NFC) is integrated into the app to speed up the payment process
2. Biometric scan functions as additional layer of security

Low Fidelity Wireframes

We started getting hands-on by sketching out our ideas to have a glimpse of what our final product might look like.

Mid Fidelity Wireframes

It is Figma time! We were taught using Figma but still needed some time to be more adept at using this tool. We had to take awhile to familiarise ourselves with using it before we could come up with decent wireframes. This stage of wireframing has more details added to our designs but they might be subject to changes as we worked on the final User Interface (UI).

Use Case 1

Use Case 2

Building Prototype

Style Guide

Before working on the final product, we had to produce a set of visual rules for the designer to follow in order for the artworks to be consistent. As we think about it, this has to be in line with the branding of PayLah as well right? We took careful considerations so fret not. Our additional research on the brand guideline helped to shape our style guide as well. This section consists of 3 parts-Colours, Typeface and Iconography.

Colours

Typeface

Iconography

Mock-Up

It is finally the moment to reveal our solutions! This is the toughest part of this design phase as we had to make sure our fonts and colours were in line with the Style Guide. Mistakes were inevitably made while we were doing up the final UI. Thankfully, with 6 pairs of eyes checking the work, the multiple refinements made the UI something we can feel proud of.

Use Case 1

Use Case 2

Road Map

At last, the project is coming to an end but we cannot call it a day yet. As we look at the the solutions we came up with, we had to be real with ourselves; be the devil’s advocate by challenging our work in order to identify the potential areas of improvement surfacing in the near future.

Use Case 1

  1. Changing the CTA to “Proceed to Pay” is a good solution to prevent any misunderstanding of the action to confirm the fund transaction.
  2. Including OTP is going to increase the level of security of the app but this extra step taken will be tedious for the user to process the transaction.
  3. Adding the Recall function allows blunder to be undone which makes the app more flexible when making fund transaction.

Use Case 2

  1. Through the integration of NFC into the app, it speeds up the whole payment process.
  2. The biometric scan acts as an enhancement of security which is quick and easy to use.

Final Thoughts

More is less and less is more. I foresee more functions being added to this app. Like security in this instance, when we tend to incorporate more layers of security, it can frustrate users as more time will be taken to complete a single task. The extra security has to be seamless yet safeguarding every transaction. Probably the mobile device has to have certain touch function that is similar to touch ID or voice recognition that acts as Two-Factor Authentication (2FA).

All in all, this project had taught me to be more empathetic towards others, especially in this case when it is the users. Our solutions have to revolve around them in order to create workable designs. By letting go of our ego; our self-centered perspective, it is the first step of us truly trying to learn more about others. When we step into their shoes, we can gain valuable insights which propels us to develop solutions that enrich their experiences. Ultimately, our goal is to change lives. Let this sink in.

I’m Tan Meng Jun

Designing solutions is my calling. Apart from UI/UX, I also work on graphic design projects. We can have a chat at tanmengjun91@gmail.com. For more of my works, you can check out on Behance.

--

--

No responses yet