Palette
Calm, neutral work surfaces, with lime reserved for the one action that matters on each screen.
Case study · Product design · 2026
Stablecoins to naira. And back again.
Clusteer is a Nigerian service for converting USDT and USDC into naira in your own bank account, and naira back into stablecoins in your own wallet. I designed the brand system, the website and the customer dashboard, starting from an early design package and finishing with one system that both products share.
The problem
Freelancers are paid in stablecoins and spend in naira
Many Nigerian freelancers and small businesses are paid by overseas clients in USDT or USDC. Rent, materials and school fees are paid in naira. Moving between the two often means a P2P desk, a chat thread or an exchange that holds the money in between, and the rate quoted is not always the amount that arrives.
Clusteer connects the wallet a person already has to the Nigerian bank account they already use, and it never holds a balance. The site's FAQ says this directly, and it became the main constraint on the design.
“Clusteer is a conversion service, not a wallet for storing a balance.”
That constraint decided which parts of the early design package were kept.
Starting point
From an early design package to the current product
The starting point was an earlier design package (v1.0, April 2026) with tokens, dashboard designs and handoff notes. Its dashboard designs set the visual direction that the current product builds on.
Type
Sora for headings and monospaced, tabular figures for every amount, rate and reference.
Structure
A fixed radius scale, 4-point spacing and dotted status badges, used the same way on every page.
Brand identity
The mark
The logo kept its shape through every stage of the project. The original drawing is still used for the favicon. The website and the dashboard use a redrawn version of the same shape.
- Shape
- A solid half-disc, curved edge on the left, flat edge facing right
- Dots
- Four dots: three in a column, one to the right of the middle dot
- Wordmark
- Sora 700 with tight letter-spacing
- Drawing
- One path and four circles, on a 36 × 38 grid
Design system
Colour, type and shared rules
The early tokens set the structure that stayed: the radius scale, 4-point spacing, monospaced numerals and status badges. The September redesign refined the colour values: the lime was softened, near-black became forest green, and the status colours were darkened until they met WCAG AA contrast on white.
| Role | Early dashboard designs | Current system |
|---|---|---|
| Action | #C9F542 | #D4EF8A |
| Ink | #0B0E0C | #172B26 |
| Page | #F4F1EA | #F7F8F5 |
| Deep band | #131815 | #19362E |
| Success | #00A86B3.08 : 1 | #21704D6.02 : 1 |
| Error | #E5484D3.91 : 1 | #B637405.82 : 1 |
| Warning | #E8A53A2.13 : 1 | #8557116.23 : 1 |
Contrast ratios are for text on white. Ink #172B26 on lime #D4EF8A measures 11.7 : 1, so lime buttons always carry dark text.
Display · Sora 400
Bring your stablecoins home.
Headings on the website and across the dashboard.
Body · Inter 400
Start a conversion to naira. See the amount, rate and fee before you continue.
Body and interface text on the website and in the dashboard.
Numerals · mono, tabular
₦1,439,125.00
CL-9F2A3D81 Amounts, rates and order references line up in columns.
CL-9F2A3D81 Amounts, rates and order references line up in columns.
Numbers are monospaced
Naira amounts, rates and order references use tabular figures everywhere.
Status uses a dotted badge
“Confirming” in amber and “Completed” in green, with the same wording on the website and in the dashboard.
Every review step shows the full quote
Rate, service fee and final amount appear together before anyone sends money.
Asset and network appear together
Orders read “USDT / TRC20”, never “USDT” alone, because the network determines where funds can be sent.
Radius and spacing
Corner radii of 4, 6, 10, 14 and 20 pixels plus a pill, on a 4-point spacing grid.
Unreleased features are labelled
Anything not yet available is marked “In development” or “Coming soon”.
Decisions
Key design decisions
Designed as a conversion service
your wallet ↔ your bank
Clusteer never holds customer funds, so the product is designed around two routes. Sell stablecoins to your bank, or buy stablecoins to your wallet.
Every screen is organised around an order and its quote. The dashboard layout follows the same model, using the palette and type from the early package.
Honest launch copy
Site copy: “Accounts open · Trading coming soon”
The site makes no claims about volume or user numbers. It is written for a staged launch: the hero, the converter and the FAQ consistently say that accounts open first and that buying and selling follow later.
Error states are designed too. When the list of assets can't load, the converter says so and offers a retry.
Leading with the bank payout
Site copy: “Know the payout, not just the rate.”
Illustrative example
You send500 USDC
NetworkEthereum · ERC-20
Exchange rate₦1,450.00
Service fee₦5,437.50
Bank payout₦719,562.50
Aisha BelloGTBank · •• 4821
This recreates the review card on the homepage with its own sample figures. 500 × ₦1,450 is ₦725,000. The 0.75% service fee is ₦5,437.50, so the bank receives ₦719,562.50.
Placing the payout beside the rate and the fee lets someone check the arithmetic before sending anything.
Network matching as a safety step
Site copy: “An asset's name alone is not enough.”
Sending USDT on the wrong network can mean losing the funds. The site gives this its own section: choose an asset, see which networks it is available on, and select the same pair in your wallet. Short guides cover choosing a network, reading a quote and what happens while a conversion is pending.
Imagery
three compositions → one estuary at dusk
The site avoids coins, glowing charts and other crypto shorthand. Its images are generated scenes of everyday work in Nigeria, such as an architect at a desk, chosen to show where the money ends up being used.
The website
How the homepage is structured
The homepage follows one person's path: what Clusteer is for, the situations it handles, the steps to a first conversion, choosing a network, and reading a quote before money moves.
Customer dashboard
One set of screens for the homepage and the app
The homepage uses the actual dashboard screens rather than a mock-up, filled with sample data. Visitors can click through the overview, orders, history and settings inside the laptop without leaving the page. Because the preview and the signed-in app are built from the same components, they stay identical as the product changes.
After sign-in, navigation is organised around conversions: Overview, Buy / Sell, Orders, History, Billing, Identity, Notifications, Referrals, Settings and Support.
Outcome
What shipped
- Website
Built and ready for launch
The website and dashboard are fully developed. At public launch, accounts open first and buying and selling follow.
- System
One system for both products
The website and the dashboard share colour tokens, type and components, with status colours checked against WCAG AA.
- Product story
A single description of the service
Every page describes the same thing: a conversion between your wallet and your bank, with the full quote shown before money moves.