Tayyab

Islamic fintech: everyday banking and payments built to Shariah principles, designed to earn trust from the first screen.

Years: 2022 — 2023
Scope: Mobile app · Website
Role: Product Designer

Overview

Tayyab is an Islamic fintech service — everyday banking and payments built to Shariah principles. For most users it was their first faith-aligned bank on a phone, which meant earning two kinds of trust at once: trust in a new app, and trust that it truly plays by the rules.

In finance, clarity is the product. A rule you can't see is a rule you can't trust — so every screen had to make the money, the terms and the next step legible at a glance.

Product Designer across the mobile app, onboarding and the marketing site — from the design system out to the first screen a new user sees.

Selected work

Flagship

Onboarding — trust before the first transaction

Decision

I treated onboarding as a trust contract, not a form. Each compliance step was reframed to answer the user's real question — is my money safe, and are you who you say you are — before asking for anything.

Alternative

The faster path was a stripped sign-up that defers verification. Lighter to start, but in a faith-based bank a thin first impression reads as a thin promise.

Why

KYC and Shariah requirements are non-negotiable, so I spent the budget on sequence and wording: front-loading reassurance, deferring effort, and never asking for a field without saying why. Friction I couldn't remove, I made legible.

Artwork pending Sign up

Artwork pending Verification

Verification

Deep dive · 01

The app — a system that can grow

Decision

The redesign wasn't a reskin — it was giving the product a spine. I built a component library and a navigation model the team could extend without redrawing screens for every new feature.

Alternative

Polishing the existing screens would have looked better next week and cost more every week after, as each feature bent the old patterns a little further out of shape.

Why

A design system turns 'design each screen' into 'assemble from known parts.' Navigation became predictable, releases got faster, and the product could scale without the interface drifting.

Artwork pending

Deep dive · 02

The site — the product's first screen

Decision

I designed the marketing site as the opening chapter of the app, not a separate brochure — same type, same components, same promises — so moving from reading about it to using it felt like one continuous surface.

Alternative

A standalone site could chase conversion tricks, but the seam between a slick landing page and a plainer app is exactly where trust leaks out.

Why

When the site and the product speak the same language, the first tap inside confirms what the site promised instead of surprising the user. Continuity is a trust signal.

Artwork pending

Across the app

The surfaces the everyday experience is built from — each one carrying the same rules about clarity and trust.

Dashboard

Balance and next actions first — the answer to 'where do I stand?' above the fold, before the detail.

Cards

Physical and virtual cards with their controls close at hand — freeze, limits, details — where a cautious user expects them.

Transactions

History written to be read: grouped, searchable, each entry saying what it was in plain words.

Authentication

Sign-in that feels like a lock, not a hurdle — biometrics up front, fallbacks that never dead-end.

Design system

The shared library underneath it all — tokens, components and patterns that keep every surface feeling like one product.

Outcome

Shipped a component library that let the team build new features without redrawing the basics.

Reworked onboarding so compliance steps read as reassurance rather than obstacles.

Aligned the app and marketing site into one visual language and one promise.

Made everyday banking legible — balances, cards and history readable at a glance.

Reflection

Tayyab taught me that in financial products clarity isn't a nicety — it's the trust mechanism. People don't extend trust to interfaces they have to decode. Every ambiguous label quietly asks the user to assume good faith; every clear one earns a little more of it. Design's job here was to remove the need to assume.

Let's talk

Have a role or a product in mind? I'm one message away.

Write me an email→Message on Telegram Connect on LinkedIn