How design improves the payment experience

We recently redesigned our web invoice to make it better than ever. It’s now easier to understand, navigate, and most importantly, pay. In this interview with Billogram’s design researcher Koert Jobse, we learn about how our invoice was reinvented.

Read on for insight into our product design, creating great customer experiences, and the future of payments.

Q: How do you create a good payment experience from the design point of view?

Koert: Many factors that go into a payment experience, such as the type of payment being made, the customer's preferences, etc. We started by looking at a few key questions: What people are paying for? Why do they pay the way they do? Which parts of the transaction are most important?

Every part of the payment process is important to us and needs to be securely handled. That said, there are differences in making smaller versus larger payments, including the tolerance that customers have for issues or complications.

Payments aren’t something that people want to spend a lot of time on, it’s not fun or exciting to pay a bill. So you might think that simplicity is the main objective, but one very interesting thing that we have to consider is how we build in enough friction so that the payment doesn’t happen too quickly. When a payment happens too fast, it’s easy for a customer to overlook important details. In my field they often say that the best design is invisible, you don’t realize that it’s there, it just works.

But that doesn’t hold true for payments. Keeping some friction helps maintain Billogram's and our clients’ trustworthiness and transparency. Our job is to balance that reliability with an easy and foolproof payment experience.

Q: Why do you think that design is crucial to creating a positive payment experience?

Koert: Design is just one part of the puzzle. The real value is how we integrate our design into product development. I see this as an extension of our company values, and of our goals. What I like about design at Billogram is that we have a mandate to investigate and test our designs, rather than to punch out new material fast as possible. That’s how we make informed decisions and create features that meet the needs of our clients and their customers.

Q: What kind of research do you do to make data-driven design decisions?

Koert:The data we are driven by stems from the needs expressed by our clients, and by the market in general. When you use the term ‘data-driven’, you need to consider what data you mean, and how you obtain it. The way our organization works is we continuously have people out in the field, so we are aware of how our clients work, what their markets look like, and what changes might occur. Having our finger on the pulse of these markets lets us anticipate what tools and features our clients need.

We also look at how our product is used, so we can modify based on that data. For this project we looked at all sorts of data, because we revamped the entire invoice. We looked, for example, at what activities our clients did most often, what activities their customers did most often, what pages were engaged with the most, and more. Once we create new product designs, we test them to find out how people react to the changes we’ve made, so it’s both a creative and a data-driven process.

Being data-driven requires us to stay focused on a specific task, and the problems we are trying to solve. But design is not only about processing data to create something better, we also generate new ideas. In this process, the designers tested different ideas that came from our data exploration. They shared their designs with the rest of the team, and then the entire company, to stimulate discussion. This created a feedback loop about what worked well, what other ideas could be interesting to incorporate, etc.

So design receives briefs that we work from, but our work also stimulates new ideas. In this project we delivered new ideas based on our goal of helping customers complete their payment journey in the best way. Many of the improved features we delivered were not specifically requested in the brief. For example, nobody asked for a recipient dashboard, but when we mapped out all the user journeys and looked at the components, we were able to rethink how they helped us meet our goals and whether they could be improved.

Q: What was your focus in this project, and what were you looking to change and improve?

Koert: We knew it was time for an update, but we started out with several ideas on the table.We first identified the most important user journeys, and looked at how to restructure to make the most improvement. We deconstructed our web invoice, then looked at all the different features and thought about how to fit it back together in a way that made the payment experience better. Doing that really helped us see what was most crucial.

We want customers to clearly see pending payments, handle them with ease, and then feel a sense of calm and reassurance that they were taken care of. This meant removing things that were unclear, confusing, or hard to see. We made font sizes bigger, made buttons more pronounced, decreased the amount of information shown at one time, and more.

Q: How do you decide what information is most important?

Koert:We found that two areas were most important; situations that commonly occur, and situations where poor design can create bad experiences. We really wanted to make it easy for customers to handle new or unexpected situations. For example, what do they do when a utilities bill is significantly higher than usual? In that type of circumstance, we want to make it easy to find more detailed information. Another example is when sending reminders. Bill reminders often come with fees, which can cause negative reactions. But even positive situations can be confusing, such as when you receive an IOU when you’ve overpaid a bill. We’ve done our best to remove any question marks or cause for anxiety.

Q: What’s new about this invoice?

Koert:

• The navigation bar now has icons, and new content. Where we previously had invoice messages and settings, we now have ‘Payments (the dashboard), invoices, and settings. The dashboard has a summary of what is currently ongoing (unpaid invoices). Invoices is the list of all the invoices the customer has received. Settings has customer contact details, which can be updated.
• We made the cover image a lot larger. This gives our clients more opportunity to add their own flavor to the invoice experience, integrated elegantly into the background.
• The invoice itself is very straightforward.
• The invoicer’s logo stays in the navigation bar when you scroll, so wherever a customer is on the page they’ll have that reminder of what bill they are paying.
• The customer’s name is clearly shown, so that it’s very unambiguous that this is for them.
• Outstanding invoices are shaped like cards. It’s very easy to navigate from them to ‘Pay’. You can also see any scheduled payments, and once completed the card is moved from the dashboard to the ‘Invoices’ page.
• The actual payment flow is the same as before.
• Any offers or banners will show up underneath the outstanding payments.

Q: What kind of feedback has there been about the new web invoice?

Koert: People tell us that the new format is very straightforward, and that it’s a more pleasant user experience over all. Visually things are softened, and there is more space, which makes it easier to go through and understand the content on the page. It’s always exciting to release something with this many changes, and I’ve no doubt that we’ll get a lot of feedback in the next few months. It’s up to us as an organization to listen to and process that feedback. We’ve just started scratching the surface of what we can do here, and we have so many more ideas for things we can do. We have to keep our focus on what is most essential.

Thank you to Koert for giving us the opportunity to pick his brain, and for explaining the new web invoice to us! We’re excited to share this with the public, and can’t wait to see where the future of payments takes us. Make sure you’re subscribed to our blog so you can follow us on that journey.