When “It Works” Isn’t Enough — Redesigning Bill Payments at blu Bank

It Started with a Simple Question

Sometimes a feature stays unchanged for years, not because it’s great, but simply because “it works.”

The bill payment experience at blu Bank was in exactly that situation.

Users could pay their bills and get the job done. But the experience wasn’t smooth or complete enough to say that everything was working as it should.

So this project started with a simple question:

Wasn’t it time to take another look at this feature?

About the Project

blu Bank is an Iranian neobank with more than 26 million users as of Sep 2026. It has been operating since 2020, and bill payment is one of the app’s core and frequently used services — covering water, electricity, gas, landline, mobile, and more.

The feature had been part of blu since its early versions and had gone through very few significant changes. The version we had was only slightly beyond an MVP and left plenty of room for improvement from a UX perspective.

I’ve been working as a Product Designer at blu since October 2022 across the Reward, Payment, and KYC teams. In this project, I was responsible for evaluating the existing experience, collaborating on usability testing, designing new solutions, and preparing the final designs for handoff.

The Original Experience

Add new bill and payment

In the original experience, the flow for making a first-time payment looked like this:

Tap “New Bill” → Select bill type → Enter information → View inquiry in a bottom sheet and select current or final-period bill → Pay

Choose bill and payment

For subsequent payments:

Select a bill from the list → See the automatic payment prompt bottom sheet → Close it → View the bill inquiry and Select the bill type → Pay

This is where one of the main problems appeared: an intrusive bottom sheet that popped up every time the user tried to make a payment.

Problems We Already Knew About

We had already identified several issues with the existing experience:

  • The automatic payment bottom sheet appeared in the middle of the payment flow every time, distracting users from the primary action.
  • Managing automatic payments, renaming a bill, or deleting a saved bill depended on a long-press interaction. This behavior had very low discoverability.
  • The information shown was limited. Users could only see the bill amount and its name. We decided to provide more details, such as the owner’s name, address, and other relevant information, to give users more clarity and confidence — especially those managing multiple bills.
  • There was also an important business goal: promoting automatic payments. We wanted users to set up automatic payments once and never have to open the app every month to pay their bills. Instead, they would simply receive a notification once their bill had been paid. But this promotion shouldn’t interfere with the regular payment flow. In the previous experience, we hadn’t found the right balance.

What We Learned from Usability Testing

Together with Elham Tarakmeh and Sarina Salemi, we conducted usability testing with 10 users — 5 on Android and 5 on PWA.

Bill Payment Usability Test Scenarios

1. Pay a bill
Imagine you want to pay your home phone bill.

1.1 Regular payment
Pay the bill normally.

1.2 Automatic payment
Imagine you want the bill you’re paying now to be paid automatically every month.

2. Transaction history
Imagine you want to see the bills you’ve paid before.

The usability tests revealed several important insights:

  • Inquiry failures from third-party services happened frequently, but we were showing them using Toasts — a component that wasn’t appropriate for handling such important errors.
  • Users expected to see the payment history of each bill directly on its bill page rather than having to look for it in the financial reports section.
  • The bottom sheet shown during bill payment was distracting. Almost all users simply ignored it.
  • Users wanted to save bills with custom names such as “Mom’s Mobile” The feature technically existed through a long-press interaction, but users didn’t discover it.
  • Users also wanted a dedicated place where they could manage all their automatic payments.

These findings gave us a much clearer picture of the problems we needed to solve.

Looking at Competitors

To avoid designing inside our own bubble, I looked at several other apps.

We wanted to understand how other products handled bill payments and automatic payment management, and which interaction patterns could potentially work for us.

Starting the Design: From Small Ideas Like Icons to Rethinking the Structure

Based on what we learned, we focused on four main changes:

  1. Remove the intrusive automatic payment bottom sheet from the beginning of the payment flow.
  2. Find a better place for automatic payments and make setting up an automatic payment contract simpler.
  3. Give users easy access to the payment history of each bill.
  4. Improve the bill-renaming experience.

I started exploring the ideas with paper sketches and then developed them further in Figma.

Exploring some ideas in early stages of design

In one of the iterations, I moved automatic payments to a small icon next to the payment button, created an animation for it using LottieLab, and prototyped the design for usability testing. The results weren’t convincing.

So I changed the icon, We tested it again, The problem was still there.

That’s when it became clear that the problem wasn’t the icon — it was the structure of the experience.

Exploring some ideas with Coin design system

Eventually, I came up with two alternative solutions and laid out the pros and cons of each.

Together with Arash Nekouei-mehr, who sadly passed aways, Amir Ahmad Bagherabadi, and Ebi Aghapour, we reviewed the options and discussed the trade-offs.

First solution base on two bottom sheets

As we got closer to the deadline, the pressure around the decision increased. But having the options and their reasoning clearly documented helped us reach a shared decision rather than relying on personal preferences.

Second solution based on one rich page

In the end, we chose Second Solution and tested it with a usability prototype. It worked well.

Final result with a few adjustments

A Simple Suggestion to Remove One Click

Suggested limit as the default under the main amount

In the previous version, when users activated automatic payments, the minimum amount was selected by default.

After discussing the technical implementation, we realized that we already had access to the user’s latest bill inquiry.

So I suggested using the latest bill amount as the reference when entering the automatic payment setup screen, and showing one step above that amount as the suggested maximum limit.

Since bill amounts usually fall within a relatively predictable range, this small change helped users make the decision faster — while removing one unnecessary click from the flow.

After Implementation

After the redesign was released, negative feedback related to the experience and UI decreased significantly and eventually reached almost zero.

There were still issues related to unsuccessful inquiries and unpaid bills, but these were mainly rooted in third-party services. We also defined follow-up improvements to make error states easier to understand and reduce the need for support calls.

The final result, which you can see in the video below, includes:

  • A simpler bill payment flow
  • Clearer management of automatic payments
  • More complete bill information, including the owner’s name and address
  • Direct access to each bill’s payment history
  • An easier way to rename bills

You can watch the video below to see the final outcome of the redesign.

What This Project Taught Me

  • A product working doesn’t necessarily mean it provides a good experience.
  • Promoting an important feature matters, but never at the cost of disrupting the primary user action.
  • When there are disagreements, clear and well-documented reasoning works better than insisting on a personal preference.

Acknowledgments

This project wouldn’t have been possible without the collaboration of the team.

Special thanks to Arash Nekouei-mehr, who sadly passed aways, and Amir Ahmad Bagherabadi, the Product Managers for Payment products, for their constructive collaboration throughout the project.

Thanks also to Elham Tarakmeh, Sarina Salemi for conducting the usability tests with great attention to detail, and to Ebi Aghapour for his feedbacks throughout the process.

If you found this journey interesting, I’d love to hear your thoughts. And if you think it could be useful to someone else, feel free to share it with them.


When “It Works” Isn’t Enough — Redesigning Bill Payments at blu Bank was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

添加评论
点赞收藏
点踩分享查看原文
评论
?
参与讨论