smapay
Case Study · Payment Gateway · 2025

Brand & Product Design Case Study

smapay

Designing Zimbabwe's next-generation payment gateway — from the first pencil line to a full brand, product and exhibition system.

Client
SmartPay Africa
Sector
Fintech · Payments
Year
2025
Scope
Brand · Product · Print · Stand
Scroll

01 — Overview

One brand across every touchpoint a Zimbabwean merchant sees.

SmartPay is a merchant payment gateway built for the realities of the Zimbabwean market — many wallets, thin margins, mobile-first customers. The design brief was to give a young fintech a voice confident enough to sit beside a bank, and warm enough to belong in a market stall.

The engagement ran from blank page to launch. It produced a wordmark and visual language, the mobile app interface, a Visa-issued card, a print trifold, and a full exhibition stand debuted at the Zimbabwe International Trade Fair in Bulawayo.

Brand identity Mobile app UI Card design Trifold brochure ZITF booth Mood boards
Role
Brand & product design, art direction, print & environmental
Deliverables
Identity system, app screens, card, trifold, 3×3 exhibition stand
Sector
Payments infrastructure for merchants & SMEs
Market
Zimbabwe — EcoCash, InnBucks, OneMoney, Omari, Zimswitch, Visa
Launch
ZITF 2025, Bulawayo
Studio
UltraJoy Booking

02 — The brief

A fast-growing market held back by clunky checkouts.

Zimbabwean e-commerce is climbing quickly, but the payment layer underneath it is fragmented. Shoppers juggle half a dozen wallets, merchants stitch together mismatched gateways, and fees eat into already thin margins. SmartPay needed a design system that made a complicated backend feel effortless — and trustworthy enough to hand your card details to.

$1.9B
Projected Zimbabwe e-commerce market by 2025 — the opportunity the brand speaks to.
19.5%
Annual growth rate driving demand for a modern, mobile-first payment layer.
6+
Local payment methods to unify in one checkout — from EcoCash to Visa.

03 — Process

From napkin to trade-fair floor.

Five stages, each feeding the next. The dot-burst motif you'll see throughout was found early — in a sketch — and carried all the way to the physical stand.

01

Discover

Audit the market, the rival wallets, and how Zimbabweans actually pay. Define the promise: many methods, one tap.

02

Sketch

Fast pencil passes on the wordmark, the login flow and the card. Cheap, ugly, and where the dot-burst idea appeared.

03

Structure

Grey-box wireframes for the app and a column grid for print. Lock hierarchy before a single colour goes down.

04

Brand

Two mood boards, one direction chosen. Set the violet system, the halftone texture and the type pairing.

05

Apply

Roll the system across app, card, brochure and a 3×3 stand — one language on every surface.

04 — Mood boards

Two directions, tested before committing.

Before touching the logo, I built two mood boards to argue two different personalities for SmartPay — then chose the one that could carry both trust and momentum.

Direction A

Quiet Trust

Bank-grade calm. Deep indigo, restrained type, security cues, low-poly facets like a minted card.

Indigo · restraint
Low-poly facet
AaArchivo · Heavy
card facet study
securemintedPCIcalminstitutional
Depth · gradient
$1Transact from
Vaulted
Direction B

Kinetic Purple

Mobile-first energy. Vivid violet-to-magenta gradients, the dot-burst in motion, big friendly wordmark.

Halftone burst · signature
Violet → magenta
smapayRounded geometric
app screen energy
tapinstantmobileboldyoung
#C026B8 · hot accent
Chosen

Kinetic Purple, grounded by Quiet Trust. The final direction keeps the vivid violet energy and the dot-burst signature from Board B, but borrows the low-poly card facets and security restraint from Board A. Momentum you can feel; trust you can bank on.

05 — Sketch to interface

Watch the login screen grow up.

Same screen, three fidelities. The pencil pass fixes intent, the wireframe fixes hierarchy, and only then does the brand get to speak.

pencil · intent
01 Sketch — the idea in 60 seconds
wireframe · hierarchy
02 Wireframe — structure & order
smapay
Empowering Businesses with Next-Gen Payment Solutions in Zimbabwe
Login
Sign up
03 Interface — brand applied

Print, too — the same discipline shaped the trifold: a three-column grid roughed in pencil, boxed as a wireframe, then dressed in the violet system.

06 — Identity system

A wordmark, a texture, and one bright accent.

The identity is deliberately small: a friendly geometric wordmark, a halftone dot language that can scatter or converge, and a single hot magenta reserved for moments that matter.

smapay

Wordmark

Rounded lowercase grotesque. The overlapping stem gives the mark a single connected silhouette that reads at any size.

Halftone dot-burst

The signature. Dots converge to a point of focus — payment, connection, a single tap — and scale from a card corner to a full stand wall.

Low-poly facet

Faceted metallic texture borrowed from the physical card, signalling a minted, secure, premium object.

07 — Colour & type

The system, in numbers.

A tight violet spine from near-black to lilac, one magenta accent, and paper white for print. Archivo does the shouting; Inter does the reading; Space Mono keeps the receipts.

Aubergine
#120A24
Deep Violet
#2E1065
Royal
#4C1D95
Violet
#7C3AED
Magenta
#C026B8
Lilac
#C9B3F2
Display
Archivo Black — headlines that carry the room
Body
Inter — long-form clarity for merchants reading terms, fees and flows.
Utility
Space Mono — labels · $0.00 · #C026B8 · VALID THRU 00/00

08 — The product

The app: one tap, every wallet.

The interface leads with the card cluster and the promise, then gets out of the way — two buttons, no clutter. The violet gradient runs top to bottom like a receipt printing.

SmartPay mobile app — login and sign up screens

Login & sign-up — card cluster, tagline, two actions. Supports EcoCash, InnBucks, OneMoney, Omari, Zimswitch and Visa behind one checkout.

09 — The card

A card that feels minted.

Faceted low-poly silver, the wordmark in violet, Visa-issued. The texture is the same one that shows up as a hero motif — the identity earning its keep on a physical object.

SmartPay Visa card, faceted low-poly design
Three SmartPay cards fanned out

Card system — faceted foreground, halftone-ready background, Visa acceptance mark. Built to photograph well in-app and in print.

10 — Print

The trifold: the pitch you can hold.

A six-panel trifold to hand across the stand. The outer face opens with the market story and contact; the inside spreads out the features and the "why us".

SmartPay trifold outer face — About Us and Contact

Outer face — brochure cover, About Us, and a Contact panel that anchors the fold.

SmartPay trifold inner face — features and why choose us

Inner face — Key Features and Why Choose Us, set on the same column grid roughed in the sketch stage.

SmartPay trifold printed mockups

In the hand — folded mockups showing how the panels meet at the creases.

11 — Environmental

The stand: the brand at 1:1.

For ZITF 2025 in Bulawayo, the system scaled up to a full 3×3 exhibition stand — giant wordmark, dot-burst floods, floating phones and a co-branded counter. The proof that a small identity can fill a room.

SmartPay ZITF exhibition stand — multiple angles

Stand system — three angles of the modular 3×3 booth built for ZITF 2025.

SmartPay booth front elevation
SmartPay booth angled view
SmartPay booth perspective with counter

ZITF 2025 · Bulawayo — wordmark wall, dot-burst podium, and a curved counter carrying the mark to eye level.

12 — Outcome & reflection

One system, every surface, ready to launch.

A coherent debut

App, card, brochure and stand all speak the same language, so SmartPay arrived at ZITF looking established rather than new.

A motif that scales

The dot-burst works at a 2mm card corner and a 2-metre stand wall — a single ownable device instead of a pile of decoration.

Built to hand off

A documented colour and type system means the client's team can extend the brand to ads and product without redrawing it.

What I'd refine next

Tighten the wordmark's letter-spacing for small sizes and add an accessible contrast variant of the violet for body text on dark UI.