Embedded Files
In mid 2017, Tez (now known as GPay) made digital payments in India easy. By the end of 2017, simple was not enough - we can't discount the importance of transactional relationships between users.
With my team, I was part of the ambitious project to bring delight and meaning to the transaction experience for the fastest growing digital payment app in India.
_____
THE CHALLENGE
Current Tez experience on transactions focuses purely on paying, requesting money and chatting with one another.
Current Tez experience on transactions focuses purely on paying, requesting money and chatting with one another.
How might we make these interactions more emotional, more meaningful for users to stick?
How might we make these interactions more emotional, more meaningful for users to stick?
V1 - Purely transactional
V2 - Adding chat experience
_____
MY ROLE
I led the design to implementation of the wrapper experience between December 2017 ~ May 2018, and collaborated with one other designer on the initial brainstorm.
I led the design to implementation of the wrapper experience between December 2017 ~ May 2018, and collaborated with one other designer on the initial brainstorm.
In addition, I worked alongside with a Researcher, Product Manager, Visual designer and Motion designer.
The feature landed on Tez on May 2018. The feature is still supported as of 2023 Jan in GPay Singapore, America, and India.
_____
KICK OFF
EARLY INSIGHTS
EARLY INSIGHTS
I joined the team from Allo Messaging App, and was given a business requirement to retain users. The initial brief was to wrap payment transactions, but there wasn't any pre-existing insights. I started off looking at it from a chat angle to gather insights I have learnt from my previous team.
_____
DEEPER INSIGHTS
Current experiences
Current experiences
Looking at the critical user journey for "returning" payment through interviews done by our researcher, we found potential areas of friction. One of the pain point that stood out, we found were the back and forth communication users have with their peers.
_____
REFRAMING THE PROBLEM
Value of feedback loop
Value of feedback loop
Tez made payment simple, but how might we be able to make relationships in a financial context, simple as well?
Normal chat conversations dynamics usually have an opening and respond. We want to give users the same validation with feedback loop in payment.
_____
REDESIGNING THE PAYMENT EXPERIENCE
Introducing Wrappers
Introducing Wrappers
We want to make digital transaction retain the physical tangible aspects by making it less cold, and more meaningful.
Conceptual mocks designed using visual assets directed by a visual designer
Swipe to express yourself
Without making changes to the critical user pay flow journey, wrappers was added as an optional final steps for users to either proceed to pay, or select a wrapper.
It makes it easy to opt-in or opt-out of this feature, as well as using simple swiping gestures to select the best visual to express further beyond words.
Concept and motion study by me
Current implementation
Consistent journey
Transitioning from chat to payment detail screen continues without bringing too much cognitive load for users.
Concept and motion study by me
Current implementation
_____
HOW WE GOT THERE
Wrappers for everyone
Wrappers for everyone
Three primary questions informed my design strategy:
How do we understand the sentiments on P2P exchange?
What about the wrappers would it make the exchange, memorable?
What kind of tangible things we can adopt from a real transaction between people, and transfer that into a digital transaction?
Early in the project, it was important to understand the conversational behavior in Tez for users that greatly influences the Wrapper experience. With the help of existing research from Young Adult Messaging (YAM) India studies, we narrow down the messaging experiences users are inclined to use.
_____
CLOSING THE LOOP
The current Tez app adopted the conversation paradigm wasn't designed in a way to prompt conversation. Given that we are after all a financial app, we can't remove the relationship behind every transnational activity. To move beyond the concept of not being a chat app in a financial app, I attempted to educate the team to design for a feedback loop.
---
"People are proactive, aspiring organisms. Feedback taps into those aspirations."
"People are proactive, aspiring organisms. Feedback taps into those aspirations."
---
Currently, whenever there is an action input by the payor, the payee receives it. The inaction from payee breaks the cycle of a feedback loop. We want to create a space or trigger for payee to respond to the payor, effectively closing the feedback loop. The goal was to create a design solution that scales and extend to any transactional relationship in Tez.
Payor
Payor
I want to know:
P1: How much I sent
P1: If my payment went through
P2: What I sent look like
P2: If my friend has received it
Payee
Payee
I want to know:
P1: What the payment is for
P1: The amount I have received
P2: If my account received the money
P3: Acknowledge the payment
Brainstorming session with another UX Designer
_____
IDEAS FOR CREATING A REACTION
We brainstormed various ways a users could be delighted, and begin to work backwards on how both payee and payor felt on the broken feedback loop.
How might we let payee express his gratitude or care when making a payment?
How might we encourage payor to let payee know they have received the payment, and feel validated?
How might we make it simple to respond to a transaction, in a medium they are most comfortable with?
_____
SCALING WRAPPERS
To ensure the wrappers we introduced in P2P experience scales, we explore other potential features that may use wrappers for a similar experience. This is to ensure the MVP we designed for considers the different payment experience in Tez.
2nd brainstorming session with a UX designer
_____
TONE AND MANNER
Once the basic MVP was decided, we dive into exploring what kind of wrappers would payor think of using when making a payment. From previous insights we gathered that it is important to ensure content has high relevance to what Tez users can relate to, to establish the human connection with feedback loop.
Cinemagraph approach
Collaborating with 2 other visual and motion designer, we look at the current trend, images and stickers shared in communications app. We propose for cinemagraph imagery that isn't visually too cluttered or noisy with the right balance of delight.
Good morning
Congratulations
Tea time
Good night
Visuals created and art directed by Visual designer. Motion by Motion designer
_____
TECHINCAL SPECS
I gathered technical limitations and understanding from the engineers before jumping into rendering a template that prepares for visual/motion execution.
Visuals art directed by Visual designer. Specs by me.
_____
FROM COLD TO WARM
We created an experience where users can be more expressive with the payments they send, without doing much work.
_____
IMPACT
Supercharged chat and much more to come
Supercharged chat and much more to come
The result of releasing wrappers has increase chat usage, and the trend continues whenever we released a new wrapper design, at the time of writing (2 months since launch).
Transaction rate still maintains, and we have yet to notice any significant increase of people wanting to pay one another more. What we got out from the release of wrapper was, the increased number of people chatting that has yet to make their first transaction. I believe wrappers has gotten users talking about it, but not enough to make them start transacting.
Report abuse