PASHA Bank
PASHA Bank’s online bank for companies: accounts and statements, payments — own accounts, FX, SWIFT, tax — currency exchange and payroll. I designed it while the bank moved its key processes — onboarding, payroll, payments and reporting — off a legacy system, and kept the design system that held them together.
Team 4–6 product teams, each with 1–2 designers, a product manager and developers. My part: research, flows and UI in my workstreams, the design system shared by all of them, prototypes and specs for developers. Monday and Friday team alignments, daily stand-ups.
I don’t have the bank’s outcome data from 2018–19, so there are no before-and-after numbers on this page — and I won’t make them up. What you’ll find instead: the decisions I can stand behind, the system that carried them, and for every change I’d make now, the number I would watch.
One payment, three people, five states
A company account is never one person. The accountant prepares a payment, the director signs it, the bank executes it — and at every step the screen has to say whose move it is. Follow one payment; each step links to the chapter where it lives.
Payments, payroll files, statements. In the bank all day, so speed and repeatability matter — templates, purpose chips, the account picked without opening it.
Comes for one thing: what is waiting for a signature. Reviews and signs in batches with an OTP code or ASAN İmza, the national mobile signature.
Balances per currency, money in and out, the exchange rate, statements e-mailed on a schedule.
The busiest path in the product, and the one with the highest cost of a mistake. Four screens, scroll through them.
-
1 / 4
Land on what needs you
The signer’s view opens on Need actions. A red pill counts what is waiting; a thin red edge marks every row that waits — the only red on the screen, so it reads before anything else.
-
2 / 4
Tick a batch
Select as many as you like. Cancel, Reject and Sign appear in a bottom bar with the selection — and Sign is the only green, so the main action is never a search.
-
3 / 4
One code, totals by currency
One OTP signs the whole batch. Before typing it, the director sees what they are signing in money, not in rows: 23 payments in manat, 2 in dollars, 1 in euro, each with its total.
-
4 / 4
Say what just happened
With two signers, “signed” does not mean “sent” — so the result screen says it plainly: 24 went to the bank, 2 wait for a second signature, none rejected.
Own accounts, FX, SWIFT, tax and budget, domestic manat — each with fields the regulator demands. Underneath it is the same document: where the money comes from, who gets it, how much, why — then Create. Learn one form, fill all five.
No counterparty — both accounts are yours
No counterparty — the bank is the other side
Salaries go in as a file exported from the company’s own accounting. When something is wrong, the bank names the row, the field and the reason — instead of bouncing the whole file and leaving the accountant to guess.
Seven errors, each on its own row with its own reason. The fix still happened outside the bank — edit the file, upload it again. That is the first thing I’d change; see the end of the page.
A quiet system, so the numbers speak
Five rules held the whole product together. They are why a SWIFT form and a payroll file feel like the same bank — and why the numbers always win the eye.
Paper, not interface
A #FAFAFA canvas, white cards on a 5% shadow, dividers drawn as 0.5-px hairline shadows instead of borders. Nothing argues with the figures.
Hierarchy by size, not by weight
One typeface, Formular, in 13 text styles. Medium only for labels and buttons. Table headers and the menu are 11 px uppercase with tracking — quiet, but scannable.
Specimen set in Golos Text, the typeface of this site; the product itself uses Formular, as on the screens above.
One colour per meaning
PASHA green only on the main button and section titles. PASHA red only on the active menu item and on whatever needs you. Everything else is three greys.
An 8-pt grid with fixed parts
136 margin, 1168 content, two columns of 568 with a 32 gutter. Header 80, action bar 104, controls 40 and 48, account picker 72. Switch the grid on — it lands on every edge.
Money is the main content
Amounts align right, with + and −, currency as a symbol. A foreign amount carries its manat equivalent underneath, small and grey. A total gets a green band.
One list at 1440, 768 and 375
Desktop first, because accountants work at a desk. On a tablet the status tabs fold into one menu that keeps its counts; on a phone a table row becomes a card — counterparty, date, amount, and the reason if the bank said no.
The system, counted
The key screens, rebuilt in Figma on one library: three layers of variables, named text styles, components with variants. These are counts from the file itself.
green/500 #099A71red/500 #E24353neutral/25 #FAFAFAneutral/500 #8B8E8Dneutral/800 #343836action/primary → green/500status/danger → red/500bg/page → neutral/25bg/selected → green/50text/secondary → neutral/500layout/page-marginlayout/contentlayout/columnsize/select-lsize/bottom-barThree fixes I’d make now
Each one starts from a weak spot of the original design and comes with the number I would watch. Concepts in the same components — switch between the original and the concept.
One inbox for the signer
- Problem
- Signers come for one thing, but payments wait in Payments, payroll in Salary, FX in its own section — three places to sign.
- Change
- “Waiting for my signature” first on Main: every document type in one list, totals per currency, one OTP or ASAN İmza for the batch, and who signed before me.
- Measure
- Time from creation to signature; share of documents signed on the day they were created.
FX with a locked rate
- Problem
- “The rate may differ at the time of the transaction execution.” You don’t know what will leave the account or what will arrive.
- Change
- The rate is locked for 60 seconds with a timer, compared with the Central Bank rate. Before signing: you pay, of which commission, the receiver gets.
- Measure
- Drop-off at the FX step; rate complaints; share of FX done online rather than in a branch.
Fix payroll errors in place
- Problem
- “7 errors in the file.” To fix one IBAN the accountant edits the file in Excel and uploads all of it again.
- Change
- Broken rows are edited right in the table; the format is checked before upload; a file template to download; a comparison with last month — new and missing employees.
- Measure
- Uploads per payroll; time from upload to signature.
Six more are worked out in the same file: a payment timeline with “fix and resend”, a smart AZN form that fills the bank from the IBAN, repeat and recurring payments, ⌘K search, one colour scale for statuses, and signing from a phone.
PASHA Bank · 2018 — 2019Designed for the moment money leaves the company
Corporate internet banking: accounts, payments, FX, payroll and statements, in three languages and four widths, on one design system.