A mobile wallet for PayFast, Pakistan's licensed payment gateway. I mapped the whole app and led the MVP design. Live on iOS and Android.
The short version
PayFast already moved money for online stores. Next it wanted an app people would open every day.
PayFast is the payment gateway run by Avanza Premier Payment Services, and the first in Pakistan to get a commercial licence from the State Bank. In early 2022 it hired Grocode, my studio at the time, to design a consumer wallet: add money, pay bills, and send or request money from friends. PayFast pointed to Venmo as the feel it wanted.
I led the project. I ran the client calls, agreed the scope with PayFast, drew the UX flow and kept the screen checklist. A designer I hired worked under me on the wireframes and the UI, to the direction we settled on in those calls. PayFast's own team built the app and launched it on iOS and Android.
Venmo works because paying a friend takes a few taps and feels social. PayFast wanted that feeling, but its users would pay in rupees, top up from Pakistani banks and wallets, and spend much of their money on utility bills.
The brief also changed shape halfway. The flow covered the full app, and PayFast asked for a smaller first version its developers could start building straight away.
K-Electric, SSGC and KWSB bills are a monthly job for most households, and each needs a consumer number.
Money arrives from a bank account, a debit or PayPak card, or another mobile wallet.
A wallet needs CNIC details before it can hold money. Signing up and opening the wallet are different steps.
We agreed the full flow with PayFast first, so cutting the MVP meant choosing what to leave out.
The complete app mapped as one flow with PayFast: onboarding, home, payments, bills, wallet, profile.
Every screen listed and tracked as done, needs changes or missing, so PayFast and the design team worked from one list.
PayFast picked the first release: sign-up, wallet, bills, pay or request, history and settings.
Each MVP screen in grey first, including its empty, error and success states.
Final screens on PayFast's brand, linked into a clickable prototype and handed off in Figma.
Designed, prototyped and handed off.
On the flow, waiting for a later release.
Design decisions
Venmo set the tone. These calls made it fit the way people in Pakistan pay.
Payments
Home leads with a single Pay or Request button. The payment screen asks who, how much and what it's for, and the choice to pay or request comes last, as two buttons side by side. Quick amounts sit under the field, and every payment is confirmed with an MPIN. A note on each payment keeps the history readable: "Netflix bill" says more than a transaction number.
Onboarding
PayFast wanted sign-up to stay short, so the ID check moved out of it. Sign-up takes an email or a Google or Facebook account, an OTP and a security PIN. The wallet opens later, from a card on the home screen, with the CNIC number, issuance date and mobile network. Until then the home screen shows the wallet as inactive, so people can look around before they hand over their ID.
Bills
A bill is saved once with its consumer number and comes back every month under Starred or Frequent. Before paying, the app shows what the biller holds: due date, status and the amount due. Paying a bill becomes two taps and a PIN.
Receipts
Bills, transfers and top-ups all finish on the same screen: a transaction ID, the details, and buttons to share it or save it as an image. A payment people can show as proof is one they trust.
The MVP, from the first launch to a paid bill.
01 / 08
PayFast supplied its brand guide, so our job was to apply it well. Its indigo leads, and the blues and greens follow it. We stretched the indigo into a scale of tints for cards, selected states and charts, so the app had enough shades to work with while staying on brand. The guide pairs Nexa headings with Poppins body text. In the app, Poppins does both jobs.
Live
Built by PayFast's own team, on iOS and Android
We handed off the MVP designs, the prototype and the full flow in 2022. PayFast's developers built the app, customised it along the way, and launched it. QR payments, which sat on our map outside the MVP, are in the app today.
What I learned
Because the full flow existed, the MVP was a cut along clear lines. Features we mapped for later, like QR payments, had a place waiting for them.
Venmo gave us pay or request and the social history. Bills, CNIC, rupees and Pakistani banks had to be designed here.
The screen checklist meant PayFast, my designer and I argued about the same screens, marked the same way.
PayFast came with a reference app and a brand, and wanted something its developers could start on fast. My job was to keep the full picture in view while we drew the first slice. The app PayFast launched grew from that slice.
EdTech, 2020-2022
Another Grocode project: a school platform researched module by module, now offered to other schools.
Read the case studyHealthcare, 2024
A new parent app and a headset redesign, led from VR research to handoff.
Read the case studyPlanning a fintech or payments app? Send me the brief, and I'll show you how I'd map it before we design a screen.
Get in touch
