UX Case Study · Mobile Banking

SNB, reimagined: an everyday banking app designed around Nafath, sarie and SADAD, with the woven Sadu pattern as its signature

A concept redesign of the SNB mobile banking app, designed around Nafath, sarie and SADAD: 59 screens in English and Arabic, a design system, and a clickable prototype.

Screens, English and Arabic

Flows

Prototype links

Arabic screens

RoleProduct designer, solo concept

PlatformiOS · English and Arabic

DurationSeptember 2026

LinkVisit →

walkthrough.mp4 · 1920 × 1080 · 31 s · muted loop

// walkthrough

Unofficial concept · iOS · English and Arabic

The challenge

Saudi banking runs on local rails: Nafath for identity, sarie for instant transfers, SADAD for bills. I wanted an app where those are the core of the experience, not add-ons, and where Arabic is designed rather than translated at the end. Five principles guided every screen.

Local rails first.

Nafath sign-in, IBAN-first transfers, SADAD bills.

Money never moves on one tap.

Review, then slide or tap the handle, then Face ID.

Arabic from day one.

Every core screen has a mirrored Arabic version.

Accessible by default.

Measured contrast, 44 pt targets, no drag-only actions.

Saudi craft, used with restraint.

The Sadu zigzag as texture, the Najdi triangle band as a hem, warm illustrated avatars.

Hero mockup: the Send money, Home and Cards screens on three phones over the Sadu-textured green

// preview

One change of direction

Process

The design changed direction once, and that change made it.

References

I collected modern fintech patterns on Mobbin to benchmark sign-in, transfers and card controls.

A dark first draft

It was glassy and dark, and it looked like every generic fintech mock, with nothing Saudi about it. I scrapped it.

Light, warm, and local

I rebuilt it on a warm canvas with SNB green and gold accents. The green hero with a faint Sadu zigzag started on the Send Money screen and became the signature across the app.

A Home that says something

Home went from a bland list to a balance chart that marks when the salary landed, a “Send again” row with illustrated avatars, and a “Coming up” bill card.

States and edge cases

Loading, empty, offline, over the limit, and a failed transfer.

Accessibility, then Arabic

A measured contrast and tap-target pass, then right-to-left versions of the core flow.

Home: balance chart with the salary marker, quick actions, Send again row and the Coming up bill card

// preview

Send money: recipients, SAR 500 amount over the Sadu green hero, purpose row and keypad

// preview

Transfer sent: confetti, “Arrived instantly via sarie”, and a tear-off receipt

// preview

Key flows · 01

Sign in

Nafath number match, or Face ID for returning users. Nothing to remember: Nafath is already how Saudis prove who they are.

Open an account

ID and mobile, Nafath, Absher details, terms. Four steps with a progress bar; Absher details arrive prefilled and read-only.

// preview

Nafath verify: the number to match in the Nafath app, with the timer and a resend option

// preview

Account ready: the confirmation screen at the end of the four-step onboarding

// preview

Key flows · 02

Home

Balance chart, send again, coming up. The chart explains why the balance changed (a salary marker), not just that it did.

Home: the balance chart marks when the salary landed

// preview

Insights: spending by category on the green chart palette, always paired with labels

// preview

Transaction detail: merchant mark, amount, and the split-bill and report-a-problem actions

// preview

Key flows · 03

Send money, at home and abroad

Send money

Pick a person or IBAN, amount, purpose, review, slide. New beneficiaries need an SMS code; slide-to-send also works with one tap.

Send abroad

Rate held for 30 minutes, fee and VAT up front, tracking. The total is shown before review; tracking answers “where is my money?”

Money moves: Send money, Review transfer, Transfer sent, Send abroad and Sent abroad on five phones

// preview

Key flows · 04

Cards and bills

Cards

Freeze with undo, limits, PIN, details behind Face ID. Freezing lists what stops and what keeps working, and one tap undoes it.

Bills

SADAD bills with usage history and auto-pay. Bill detail shows why this month costs more (summer AC).

Cards: the Platinum card, freeze, limits, PIN and details actions, and card controls

// preview

Freeze card: the sheet lists what stops and what keeps working before you confirm

// preview

Card frozen: the frozen state with a one-tap Undo

// preview

SADAD bills: billers with amounts due and auto-pay status

// preview

Bill detail: Saudi Electricity with usage history explaining why this month costs more

// preview

Bill paid: confirmation with the SADAD reference

// preview

Key flows · 05

Edge cases

Loading, empty, offline, over limit, failed transfer. Every error says what happened, that no money moved, and what to do next.

No connection: the offline state in the simpler line illustration style

// preview

Over limit: the amount exceeds the daily limit, with the remaining limit and what to do next

// preview

Transfer failed: what happened, that no money moved, and a retry

// preview

Ten screens · six rules

Arabic, right to left

Ten Arabic screens cover the core flow, from sign-in to bills. They follow six rules.

Mirror the layout.

Navigation, lists, switches and the tab bar flip; Home sits on the right.

Keep numbers left to right.

Western digits, with masked numbers and IBANs wrapped in LRM marks so they never scramble.

Currency on the left.

ر.س sits to the left of the number, the way it reads in Arabic.

Flip only what points.

Back, arrows and the slide handle flip; search, bell and Face ID don't.

Card faces stay as printed.

Card numbers and names stay left to right.

Same parts, both directions.

Components have Direction = RTL variants, so Arabic screens use the same building blocks as English.

English and Arabic: the Home screen in both directions, side by side

// preview

Arabic Home: mirrored layout, Home tab on the right, numbers left to right

// preview

Arabic Send money: ر.س to the left of the amount, the slide handle flipped

// preview

Arabic SADAD bills: the bills list, right to left

// preview

WCAG AA · four fixes

Accessibility, measured

Every colour pair was measured against WCAG AA, and four failed. I fixed them in the colour variables, so every screen updated at once.

Hint and caption text on the canvas

#69756F at 4.39:1 → #5E6A64 at 5.16:1.

Positive green on white

#0F8A5F at 4.36:1 → #0A7550 at 5.72:1.

Input and toggle borders

#E3E6E1 at 1.15 to 1.26:1 → #7F8983 at 3.3 to 3.6:1.

Secondary text on the green hero

White at 50 to 80%, 2.7 to 4.5:1 → #D5E7E0 at 4.65:1.

44 × 44 pt

Every tap target is at least 44 × 44 pt.

No drag-only actions

Slide-to-send also works with a single tap, so no action needs a drag (WCAG 2.5.7).

The Nafath timer

Announced, and the request can be resent (WCAG 2.2.1).

Never colour alone

Status always pairs colour with an icon and words.

Reduce Motion

Loading skeletons and confetti respect Reduce Motion.

Colour board: every swatch bound to the SNB Light variables, with its measured contrast ratio

// preview

One system · both languages

Design system

One system drives all 59 screens in both languages.

Colour

16 variables in “SNB · Color”, named by role: bg/canvas, text/secondary, brand/primary, status/negative.

Type

Readex Pro for Latin and Arabic, from Display 72 for amounts down to Tab 11.

Components

Status Bar, Tab Bar (Active × Direction), Button, Icon Button (Icon × Surface × Direction), Text Field (State × Direction, with swappable icons), Switch, Checkbox, Radio, Toast, Transaction Row, Merchant Mark, two Cards and six Illustrated Avatars.

Patterns

Bottom sheet, toast with an action, stepper, skeleton, empty state, security note, slide to confirm and the Face ID prompt, each with usage rules.

Handoff notes

A separate page lists behaviour and accessibility for every screen, so the designs stay clean.

Brand elements: Sadu zigzag, Najdi triangle band, success confetti, illustration style, illustrated avatars and card art

// preview

Typeface specimen: Readex Pro for Latin and Arabic

// preview

Components: status bars, buttons, merchant mark, avatars and the two cards

// preview

Patterns: bottom sheet, toast, stepper, skeleton and empty state with usage rules

// preview

Closing

Outcome and next steps

The result is 59 screens across 12 flows, 10 of them in Arabic, with 199 prototype links and a design system that builds both languages. Unofficial concept: not affiliated with Saudi National Bank.

Test with five people

Test send money and freeze card with five people, including someone over 55 and a resident who doesn't read Arabic.

Check the current SAMA rules

For activating new beneficiaries and for daily limits. The limits in the design are placeholders.

Add a before-and-after

Two or three screenshots of the current SNB app next to the redesign.

Large text and dark mode

Run a large-text (Dynamic Type) pass and design dark mode.

Want to go deeper?

Get in touch for the full walkthrough, or browse the rest of the work.

Let's Talk All case studies

SNB, reimagined: an everyday banking app designed around Nafath, sarie and SADAD, with the woven Sadu pattern as its signature