Tariq Rajab

MaxAB

A payments app for shop owners. I redesigned it, then designed how they move from a prepaid wallet to credit.

December 2021 to November 2022 · Product designer, then senior

MaxAB's payments app in Arabic on three phones: the balance, reviewing an instant top-up, and the top-up done

MaxAB Fintech was a mobile app for retailers, supermarket and kiosk owners to print mobile vouchers, recharge customer balances, and pay for utilities like water, electricity, landline and internet, similar to Fawry. I worked on it for a year, in three parts.

The redesign

This was my first project at MaxAB. The app was based on Android Material, so it looked like a generic app. Its users weren't tech savvy, the contrast was bad, several flows were complicated, and the app couldn't grow with new services. I redesigned it, starting with the home page, the transaction history and the top-up flow, and it shipped.

The main idea behind the redesign was one purpose for each screen. A retailer shouldn't have to think while using the app to serve a customer, so each screen asks for one decision and shows one number. The same idea carried into credit later.

The old MaxAB payments home screenBefore
The redesigned MaxAB payments home screenAfter
Transaction history, grouped by day A guide tip pointing at the balance
More of the redesign: the transaction history, and a guide tip for new users.
Choosing instant top-up: balance now, pay later Entering the top-up amount Choosing the collection day Top-up done, with the new balance and the collection day
The top-up flow: choosing instant top-up, the amount, the day it's collected, and done.

Credit

Then came moving retailers from a manual wallet to credit. A shop owner kept money in a wallet and waited for an agent to visit and top it up. If the agent was late and the wallet ran out, the shop couldn't sell.

Many of the retailers were middle-aged or older, not very tech-savvy, and sensitive to changes in their wallet balance, because their livelihood depended on it. The challenge was to move them to credit without disrupting their work or making them uncomfortable.

I did market visits and interviews with retailers. They depended on agents, used several devices from competitors for different top-up amounts, and didn't know they could top up larger amounts. The final messages came down to: no need to recharge manually, the balance won't run out, and you can spend what you need within your credit limit.

The first wireframes of the switch to credit, with three sticky notes
The first wireframes of the switch, with my sticky notes.

The switch wasn't forced, and it couldn't stop anyone. Retailers use the app every minute, with customers standing in front of them waiting. If we stopped them for an update or a change, they would just switch to another device, because they had several laid out in front of them. So the prompt was a small banner on the home page. It takes little space, and its text writes itself out and moves along, so it can deliver all three messages, one after another.

When they did switch, they needed to see their balance grow, and see that they weren't losing any money. It's their business, so they care where the money comes from and where it goes. The switch shows the 4,000 in their wallet carrying over and growing to 12,000 available. It also gave the moment a sense of delight, so the new system felt new and they felt important.

The banner on home
The switch
My prototypes of the banner and the switch.

After switching, the wallet still showed one number: the amount available. A balance breakdown showed the credit limit, the money they'd charged and what they owed, each with its own colour. When money was due, a small banner said how much and when: "You owe 600 pounds, and the agent will be collecting it tomorrow."

Balance breakdown: credit limit, money charged, and what's owed Home after switching to credit: one number, the amount available Home with a reminder banner: 600 pounds due tomorrow
The credit wallet: the balance breakdown, home, and home with a payment due.
Four wireframes of the credit home: money available, a payment due, an overdraft, and zero
Wireframes for the states credit adds to the home page: money available, a payment due, an overdraft, and nothing left.
Five directions for the credit home, in Arabic
Home page explorations.
Five ways to offer the switch to credit, in Arabic
Transition explorations: how to offer the switch.

Questions from my sticky notes

I left MaxAB before credit launched. It did launch, about a year later.

Behind the app

I also redesigned MaxAB's internal dashboard, the web tool our teams used to run the business: offers for retailers, credit, retailer devices and the services we sold. All of it shipped. Three of the tools did the most.

Keeping services up. Each service, like a voucher or a bill, had several providers stacked behind it, such as Fawry, Momken and Masary. We watched each provider's health with a rule, how many transactions failed in the last few minutes, and when it dropped under a threshold the service switched to the next provider on its own. Retailers never noticed. In Egypt providers drop suddenly, every week or month.

The Dynamic Service Provider page: groups of selling schemes, each with a health bar, the number of successful transactions in the last hour, and the provider serving it now
Each group's health over the last hour, lowest first, and the provider serving it now.

A warehouse of vouchers. For when every provider was down, we bought vouchers in advance, like 5 EGP or 25 EGP scratch cards, and kept them in a virtual warehouse to sell directly. Each purchase order set a quantity and a time window, and the quantity was bought at random times through it, so we never hit a provider's limits or got flagged for fraud.

VWH Stock: purchase orders by provider and selling scheme, each with its quantity, whether it sells from the API or the warehouse, its progress and its status
The warehouse's purchase orders: what each one buys, how far along it is, and whether a service sells from the provider or from stock.

MaxAB Stops. Companies with lots of agents on the ground, like Uber, Talabat, Careem, Bosta and Aramex, have drivers holding a lot of cash, and finding places to hand it in was a hassle. MaxAB used its network of agents to collect it for them. I designed the dashboard where those companies follow their collections.

Your Collections: money collected today with a daily chart, recent deposits, and the latest collections with their agent, place and time
The collections dashboard a business sees: what came in today, deposits on their way, and every collection.
Credit profiles: each retailer's credit status, the range they can borrow, tenure and price, edited in place
Credit profiles, where the team set each retailer's credit: whether it's on, how much, for how long, and the price.

While I was there I also built the company's design system and hired the design team.