01HOME / BALANCE↗
03Fintech
FINTECHZakiPay — Family finance, made human
A finance experience focused on trust, clarity and everyday money decisions rather than intimidating financial density.
PRODUCT / EXPERIENCESELECTED CASE STUDY
01Approved product mockup / presentation visualScroll to explore ↓
INTERFACE STUDY
ZakiPay interface system
Real product screens presented at a standard mobile viewport — the long source screens are intentionally cropped to what one phone can show.
02VIRTUAL / CARD↗
03SUCCESS / CONFIRMATION↗
THE CONTEXT
Start with the why.
ZakiPay is framed as a consumer fintech experience where money movement, balances and activity need to be understood quickly by people with different levels of financial confidence.
01 / DISCOVERY
What the experience revealed.
Before shaping the interface, the work is framed around the user's mental model, moments of friction and the opportunities that can change the journey.
KEY OBSERVATIONS
01
Users scan for balance, recipient and status before reading secondary detail.
02
Financial errors require recovery paths, not only success states.
03
Confirmation should reduce anxiety instead of adding visual noise.
PAIN POINTS
×
Equal visual weight across too many numbers
×
Unclear transaction status
×
OPPORTUNITIESDense confirmation screens
↗
Center each flow on one decision
↗
Make status and recovery explicit
↗
Use progressive disclosure for transaction metadata
02 / INFORMATION ARCHITECTURE
Structure before surface.
The interface follows a clear information hierarchy so visual polish supports the product model rather than hiding it.
01Home→
02Balance→
03Send / receive→
04Review→
05Confirmation→
06Activity
THE PROBLEM
Financial interfaces often give every number equal visual weight. That creates noise at exactly the moment users need certainty: before sending, receiving or reviewing money.
DESIGN HYPOTHESIS
If the interface organizes around decisions and reassurance—what can I do, what changed, and is it safe?—users can complete financial tasks without having to decode the UI first.
WHO IT SERVESEveryday users managing balances, transactions and shared/family money activity on mobile.
03 / USER JOURNEYFrom first intent
From first intent
to useful outcome.
The journey is intentionally expressed as a sequence of decisions, not a list of screens. This keeps the case study about behavior and product thinking.
01Check balance / recent activityentry
02Choose a money actiondecision
03Review recipient and amountdecision
04Confirm with confidencedecision
05See the result and next useful actionoutcome
04 / PROCESS
How the work moved forward.
01
01 — Map risk
Identify where financial errors feel expensive: recipient selection, amount entry, confirmation and transaction status.
Risk mapTask flowsError scenarios
02
02 — Simplify
Reduce each primary flow to one clear decision per screen, while preserving access to supporting detail.
Flow simplificationContent hierarchyWireframes
03
03 — Build trust
Use status, confirmation and transaction patterns that communicate what happened without creating alarm.
Confirmation statesTransaction cardsFeedback patterns
04
04 — Scale
Turn money, status and identity patterns into a reusable component language across mobile surfaces.
Design systemComponentsResponsive behavior
05 / DESIGN DECISIONS
Small choices create the experience.
These are the decisions that make the final interface feel coherent rather than merely polished.
01
Make amount and recipient the visual anchors of payment confirmation.
02
Separate success, pending and failed states with language—not color alone.
03
Keep secondary transaction metadata available but quiet.
04
Design for recovery: users should understand what to do after an error.
06 / UI SYSTEM
A visual language that scales.
Instead of designing each screen independently, repeated behavior becomes a system. That gives future screens the same rhythm and makes implementation more predictable.
COMPONENTS
01Balance cards↗
02Transaction rows↗
03Payment confirmation↗
04Status states↗
05Input / validation patterns↗
Designed around the decision.
07 / OUTCOME
A portfolio case study that shows how visual hierarchy, content design and state thinking can make fintech feel calm without sacrificing precision.
Quantitative outcomes were not available in the supplied project material; metrics are intentionally omitted.