Danara: Sharia-Aligned Neobank for Qatar
Danara is a digital bank for Qatar, built with QIIB on Sharia principles. I designed it and built its prototype in code: 40+ customer journeys on one React foundation, made with Claude Code as a pair and reviewed by the bank as working software.
Client
QIIB
DELIVERABLES
Product Strategy
UX/UI Design
Design System
Interaction Design
Prototyping in Code
AI-Assisted Engineering
3D Mockup Tooling
Year
2026
Role
Product Designer & Design Engineer
Home: everything you hold, in one number
Total wealth leads, counting investments beside cash, with this month’s money in and out and four actions within thumb reach. Rewards and the breakdown wait one scroll below.
A digital bank for Qatar, built on Sharia principles.
QIIB asked for a digital-first bank for a new generation in Qatar: citizens and residents, Arabic-first and English-first, Muslims and non-Muslims. Every product had to be Sharia-compliant and still feel as simple as the best neobanks anywhere.
The people we designed for often read English as a second language, bank one-handed on the move, and may be worried about their money when they open the app. Trust had to come before delight: serious, calm, never a gamified toy.
Pictures of a bank don’t behave like a bank.
Banking concepts usually live as static screens. They look finished but hide everything that makes money hard: empty states, pending and failed payments, 200% text, the Arabic mirror. Stakeholders approve pictures, and the gaps surface in development.
With dozens of journeys, a regulator in the loop and copy that has to be exact about money, we needed something the bank could hold, click through and argue with.
A product designer who ships the material itself.
In a small team sharing one codebase, I designed and built across onboarding and registration, payments, Plan (goals, budgets and salary split), Insights and Invest, and the shared foundation underneath them: bottom sheets, amount entry, the payment record and the reading-direction work.
I wrote the specifications the screens trace to, built the screens in React and TypeScript, and wrote the checks that keep them honest.
4
months, from an empty repository to a walkable bank
40+
customer journeys, each a self-contained prototype
187
components in one shared foundation
1,250+
pull requests reviewed and merged
The prototype is the product.
Every screen is a real React component on one shared foundation. Each journey is its own small app on top of it, so work on one can never break another. The brand arrives later as a token swap, not a rebuild.
01
Specification first
Every journey starts as written stages, states, conditions and copy. If a screen isn’t in the spec, it isn’t built: the one rule that stops an AI from inventing screens nobody asked for.
02
One foundation
Semantic tokens, 187 components, one money formatter and a shared set of states every screen must handle: loading, empty, error, offline, and the outcome we can’t confirm yet.
03
Journeys on top
Onboarding, payments, cards, goals, budgets, insights and invest, each walkable on its own in a three-pane Prototype Library: the journeys, an iPhone canvas, and what to try next.
04
Checked, not trusted
Guardrails run on every build, a browser harness walks every journey, and nothing reaches main without a reviewed pull request and a live preview.
Eight journeys, captured from the running prototype.
Onboarding: one chapter at a time
Opening an account is split into short chapters with an honest time estimate. Each one says what you’ll need before it asks for anything, one question per screen.
Invest: principles before products
The way in to Sharia-aligned investing explains itself before it sells: an investor profile, the checks, then the account.
Send money: the amount comes first
Pick a favourite, type the amount, see the fee. The review states the source, the beneficiary, the arrival and the total before a swipe commits it, and a swipe that’s missing something refuses in place.
Goals: set up in three steps
Name it, set the amount, pick a date. The last screen offers to add money now or save on a schedule, and progress is framed by milestones, never by comparison with other people.
Budgets: they inform, never block
A Danara budget flags spending and never stops a payment, so the copy never calls it a cap or a limit. Being over is stated as a fact, not a warning.
Cards: control in one tap
Lock is the customer’s own reversible control, named for exactly what it does. Card payments sit right under the card they were made with.
Insights: where the money went
Spending by category for the month, with the upcoming payments that will shape the rest of it.
Rules the bank can read, enforced in code.
Colour
Terracotta is the ceiling
Every warning and error tops out at terracotta. Red has a short list of named jobs, like the destructive action or an unread mark, each written down with its reason.
Payments
Never call an unknown outcome failed
If the bank can’t yet confirm a payment, the app says it’s checking and asks the customer not to try again. A duplicate payment is the most expensive thing bad copy can do.
Money
One format for every figure
Sign, comma thousands, then QAR. Whole amounts drop the decimals; receipts always show two. One formatter draws every figure, so no two screens can disagree.
Direction
Built to mirror
Logical properties from the first component, so Arabic can arrive without a rebuild. A sweep proves every screen mirrors, reached every way in.
The AI drafts. The spec, the guardrails and the review decide what ships.
Claude Code was my pair, not my autopilot.
The repository carries its own operating contract: what counts as the source of truth, how a journey is built, what done means. More than 800 decisions are written down, one file each, so every session starts where the last one ended instead of re-arguing it.
Thirty guardrail scripts hold the copy, the colours, the money format and the spacing. Twelve browser sweeps walk every journey in both appearances and both reading directions. A person reviews every pull request against a live preview. That loop is what let a small team keep a bank-grade prototype consistent through dozens of changes a day.
A 3D mockup studio, built into the workspace.
For the executive review we needed Apple-grade mockups of the real product, not redrawn screens. So I built a studio into the prototype workspace: it captures live screens in a headless browser and puts them on a photoreal iPhone rendered in three.js, with camera presets, motion, and 4K still and video export.
Every phone on this page came out of it, from the same code the bank reviews.
From an empty repository to a walkable bank in four months.
More than 40 journeys on one foundation, with a written decision behind every rule. QIIB reviews Danara as software, on a phone, rather than as a deck of screens.
When the brand lands it’s a token swap, and the specification the prototype enforces becomes the build brief for engineering.