Carlito2s.
Product Designer at Babylon

Building a new payment feature

June to August 2016

Lead Product Designer

A little background

Lyf Pay is an app that enables you to pay as you would with your credit card, receive discounts and loyalty rewards from all businesses that agree to join the program.

Cities like Paris and Strasbourg were the most represented in use and businesses enrollment. Some initiatives were made elsewhere in France but it was still pretty much a chicken and egg problem.

I found the payment technology running behind absolutely great but consumers didn't really understand the value: they were just fine using credit cards so why bother?

Person-to-person payments

Taking all feedbacks and analyses, the entire company was dedicated to making things better for our user and one of the ambitions was a new Person-to-person payment feature.

Payment between people in life is a very common thing but banks solutions were still described as old and unefficient. Then:

How Lyf Pay could make money transfer between people less painfull ?

Behind this, the main goals were to bring more value to our users and observe a better adoption then engagement. And for that we had the early ideas that this new feature should let people:

1 · Send and ask money with a number/email in the app

2 · Receive money with the app or without it through private urls (email + bank account number needed)

3 · Easily transfer founds from the app to their bank accounts

Telling a better story

Before jumping into all this new thing, I felt we needed to find how all the product could tell a better story about hitself. Few key concepts seemed blurry to me in the experience:

opening the app, users will see first a view helping them find new businesses and the second tab was a news feed based on brands with unfortunately few content.

Those things were obviously sending the wrong message about the value of the service from user perspective and a new feature alone wouldn’t be the answer.

Observing what really worked so far backed by some researchs made with the design team, I’ve set a more comprehensive information architecture emphasizing what we really had to offer.

We went from an app "discovery/customer relationship" oriented to one more focused on many forms payment could take in people’s lives. That was the new story.

Research & exploration

First I took time to empathize with people through interviews. I met few of our youngest top users at their universities and some others at their job to listen their experiences, basically understand a little more their relationship with money and what they deeply needed.

Use cases

With previous personas and those new insights we had, we worked on the best use cases we could see. Then we tried to summarize user’s actions in contexts, when and how they would use the app to pay someone or ask for it.

User flow

Besides that, looking at every solution already out there and an opportunity to make the Lyf Pay experience different, I wondered why lot of those apps would focus first on setting the amount to send.

To really capture our users' mental models, one of the things we did was to made cards that we labeled with differents steps of a regular money sending experience.
We asked them to arrange those cards in the order that make sense for them and some cards were blank so they could write something if a step was felt missing.

We got a lot of different responses, especially on how people handle the "after payment" phase but one thing remain the same, they will put choose beneficiary before set amount every time. That confirmed the feeling I had so I felt confident enough to try something different.

Through sketches and wireframes

If the payment screen was simple to imagine at the time, I was more concerned by the main view and how I could make the product pleasant enough to uninhibited people in that "I owe you/You owe me money" context, contrast with all those serious bank apps.

I selected few potential solutions that made sense from early paper drafts and went further. I needed a way to provide quick access to contact also transactions listing felt necessary somewhere, recent contacts interactions, notifications, search, account balance, pending payments, group creation…

But as the first iteration of the feature, the best plan was to start small first. Focus the view on primary payment actions, learn from it and progressively evolve.

Minimal, attractive and enjoyable

I worked now on the user interface at high fidelity since the skeleton had proven to be the way to go during some early tests. Users should instantly feel confident using this and pleasure trough visual hierarchy, colors and interactions.

Elements and functions

The search bar is always there and let users find people by name, phone or email. The contact list is dynamically filtered while taping.

Users can scroll the contact list. Name, number and email are displayed. They can choose one or more contacts to send or ask money.

In requests section, those little colored cards (based on contact picture) informs users on who’s aking what from them. The payment layer slide up on tap.

The payment layer slide up with the keyboard and enables users to set the amount they want to ask or pay and attach a message as well.

Clear and subtle interactions

Having a new payment request

Pay or ask to many - Multi selection

Pay or ask to one - Swipe gesture

Guerilla tests and learnings

Engineers being focus on back-end challenges, I made a prototype in the meantime to gather feedbacks from co-workers in different teams. With this feature being new, they weren’t biased and I thought I could still learn from their thoughts.

They were 10 in total and they all had the same test. One of the things they were asked was to pay/ask money to one or more people and say 3 words to describe the experience. Simple, fast and minimal were the most used words. Regarding our goals, those feelings were the best we could hope to build something on.

You can download the app on the App store & Google Play Store.