Bank Chukwuka Portfolio

File 001 · Plugg

Live

Plugg

Buy a verification number for WhatsApp, Telegram and 150+ apps, pay in Naira, and watch the code arrive on the same screen.

My role: Product designer. UX research, user flows, UI, prototype, brand, front end build.
Platform: Mobile web first (390 wide), then desktop
Live at: plugg.com.ng
Tools: FigmaFigJamHTML/CSS/JSSupabasePaystack

Logo intro

Launch screen · about 3 s

9:41

Plugg

Don't get played, get Plugged.

Plugg opens dark, then floods green, the colour people already trust from WhatsApp. The plug drops into its socket with a spark, the name lands letter by letter, and the slogan types itself.

0.1sGreen floods out from the centre
0.55sApp tile pops in with a little overshoot
0.9sPlug slides up into the socket
1.35sSpark: the connection is made
1.4sP, l, u, g, g rise one by one
1.9sSlogan types out in mono

The brief

Why it exists

The problem

People buying numbers on chat lose money to dead numbers, slow codes and sellers who never refund.

Who it's for

Nigerians who need a quick code for an app, many on a phone, paying by card, transfer or USSD.

My goal

Price first, no surprises. One clear path from "I need a code" to "code copied", and money back when it fails.

How I worked

6 stages

01Understand
Listed where buyers get burned today: dead numbers, no refunds, fake sellers.
FigJam
02User flow
One happy path to a copied code, plus the refund and retry branches.
FigJam
03Wireframes
Phone first at 390 wide: price list, buy sheet, wallet, code screen.
Figma
04UI design
WhatsApp familiar greens, big tap targets, plain language labels.
Figma
05Prototype
Clickable buy flow to check every step before writing code.
Figma
06Build and ship
Coded it, connected payments and number providers, shipped.
HTML/CSS/JS

Onboarding

Three screens before the shop: what Plugg does, why your money is safe, and the scam checker. Sign up waits until the last screen, and you can skip straight to prices.

Onboarding: Why it's safe — 02 / 03Why it's safeThe wallet and the refund rule, shown before anyone pays.

Onboarding: A reason to stay — 03 / 03A reason to stayThe scam checker, then two ways in: sign up, or browse prices first.

User flow

Browse prices
Pick operator
See the price
Sign up
Welcome
Add money
Wait for code
no code? money back
Code arrives
Order history

The screens

Running on a phone

Screen 01 / 10
Prices before an account
Guests see every service, price and stock count straight away. Nothing asks for sign up until you choose to buy.
WhyPeople trust a shop that shows the price first.
Screen 02 / 10
Operator choice in plain words
Each route shows its delivery rate and price. The recommended one is marked and explained, so nobody pays twice.
WhyThe cheapest route often fails. Saying so up front saves money and support chats.
Screen 03 / 10
The buy sheet
A bottom sheet with the price in big type, stock left, and one green button. Cancel is always one tap away.
WhyA sheet keeps the list behind it, so you never lose your place.
Screen 04 / 10
Sign up in 30 seconds
Name, email, password, optional referral code, or Google. A note tells you it takes 30 seconds.
WhySign up arrives only when it is needed, and says how long it takes.
Screen 05 / 10
Top up the wallet
Quick amounts, then Paystack, card, bank transfer or USSD. Each method says who it is for.
WhyMany buyers have no card. USSD and transfer keep them in the flow.
Screen 06 / 10
Waiting, with a timer
The number is ready to copy. Six empty boxes wait for the code while a bar counts down.
WhyWaiting feels shorter when you can see progress and know the refund rule.
Screen 07 / 10
The code lands
The code appears large on a dark card with its own Copy button, then the steps to use it.
WhyThe one thing you came for gets the strongest contrast on the screen.
Screen 08 / 10
Order history
Every order with its status: code arrived, refunded, cancelled, active rental.
WhyClear refund labels stop "where is my money" messages.
Screen 09 / 10
Rent a number for a week
The rental shows the number, every SMS it receives, and a copy button for each code.
WhySome apps send codes again later. A rental keeps them in one place.
Screen 10 / 10
Scam checker
Paste a vendor's number before you pay. The full page scrolls here so you can see the layout top to bottom.
WhyThe whole brand promise: don't get played.

9:41

01 / 10

States

The screens nobody screenshots but every user sees: nothing there yet, still loading, something went wrong, and it worked.

Empty state — EmptyNo numbers yet: the empty orders tab points straight to buying one.

Loading state — LoadingSkeleton rows hold the layout while prices load.

Error state — ErrorCard declined: says no money left, then offers transfer.

Success state — SuccessTop up done: new balance and what it can buy.

Design system

Built in Figma

Colour

Plugg green#25D366 · buttons

Deep green#0B8F4A · headings

Ink#0B141A · text, code card

Mint#E9F3EC · panels

Teal#075E54 · trust notes

Telegram blue#2AABEE · channel

Type

Plugg headline and intro text — Bold two tone headline, plain body, mono for instructions

Components

Pill buttons with hard shadow — Pill buttons with a hard offset shadow

Service row with price and Buy button — Service row: icon, stock, price, Buy

Number field with Copy and timer — Number field, Copy, countdown bar

Dark code card — Code card, highest contrast on the page

Component library

Figma components page

Every reusable piece I designed for this product, with its variants: default, pressed, disabled, error and the rest. Built with auto layout so a developer gets one source of truth. Tap to zoom.

Brand guidelines

Logo, colour, type, voice

The rules that keep Plugg looking and sounding like itself: logo and clear space, colour with proportions, type scale, voice, misuse and how it carries into ads and the product. Tap to read the full board.

Launch ads

3 social ads

Three ads in the brand's cheeky, chunky voice: a giant code, a refund that lands in the chat, and a red stamp on a scammer's number.

Motion and interaction

What moves, and why

Sheets slide up
Buying, signing up and topping up open over the list, so the shop never disappears behind you.
Countdown bar
The number's time left drains as a bar beside the clock, so waiting has a visible end.
Code boxes fill
Six empty boxes wait for the SMS and fill when it lands. You know exactly what you are waiting for.
One tap copy
Number and code each get a Copy button with feedback, because one wrong digit sends the code elsewhere.

On desktop

Same system, wider grid

plugg.com.ng

Results

Live product

250+vendors listed

150+apps covered by the numbers

4ways to pay: Paystack, card, transfer, USSD

₦0lost when a code fails: money goes back to the wallet

File 002 · Bothaus

Built

Bothaus

A shop for tested Telegram bots, sold on a monthly plan. I made the brand, the product and the 3D catalogue.

My role: Brand identity, UI/UX, design system, motion, front end build
Platform: Web, desktop and mobile
Site: bothaus.net
Tools: FigmaFigJamAfter EffectsHTML/CSS/JSSupabase

Logo intro

Launch screen · about 3 s

9:41

Bothaus

754 tests passing

The house is drawn in one line, then fills. The orange dot is a status light, so it flickers on like a machine booting, and the name rises out of a mask. It ends on the proof: tests passing.

0.2sThe outline draws in one stroke
1.1sThe shape fills solid
1.5sThe status light flickers, then holds
2.0sWordmark rises out of a mask
2.5sGreen light: 754 tests passing

The brief

Why it exists

The problem

Small businesses sell on chat all day, but good bots are expensive, untested and hard to set up.

Who it's for

Shop owners and agencies who want a bot that already works, on their own server, without a developer.

My goal

A brand that feels engineered and trustworthy, and a catalogue you can browse like a hardware store.

How I worked

6 stages

01Brand
Bubble house mark with an orange light, colours, type, voice.
Figma
02Site map
Catalogue, shelves, bot pages, setup guide, pricing, sign up.
FigJam
03Design system
Colour and radius variables, 44 text styles, 70 components.
Figma
04Screens
25 screens: 16 desktop, 6 mobile, 3 key states.
Figma
05Motion
Logo animation and the page interactions, timed in After Effects.
After Effects
06Build
Coded the site and the 3D catalogue from the Figma file.
HTML/CSS/JS

Brand identity

Mark, lockup, uses

Lockup. The gap is half the mark's width. The wordmark's cap height lines up with the roof, not the full box.

The mark. A speech bubble that is also a roof. The orange dot is a status light: the bot is running. Built on a 24 grid.

App icon. Safe for iOS, Android and Telegram's round crops.

One colour. For foil, embroidery and print where orange can't be used.

Outline. For photos and watermarks. The stroke keeps the opening clear at small sizes.

Logo animation

19 seconds · sound on

The mark built on camera: a dot, a 24 by 24 grid, the house drawn around it, then chrome, ink and paper versions, the five parts snapping together, and the app icon landing on a home screen.

Launch film

60 seconds · sound on

A minute that sells the promise: a chat that pays and releases on its own, 115 bots, 684 tests running in a real terminal, then the whole catalogue and one line. Bots that work when you download them.

Onboarding

Three screens that answer what it is, how you get a bot, and what you keep.

Onboarding: Explain the Builder — 02 / 03Explain the BuilderA business description goes in, passing tests come out.

Onboarding: Remove the risk — 03 / 03Remove the riskDownload, verify, run. Plans side by side, cancel any time.

User flow

Home
Catalogue
Bot page
Builder
or describe your business
Sign up

The screens

Running on a phone

Screen 01 / 07
Home, top to bottom
The promise, a live chat demo, the shelves, how it works and pricing. The page scrolls inside the phone.
WhyEvery section answers one buyer question in order.
Screen 02 / 07
Show, don't tell
A real ordering conversation: a voice note in Pidgin becomes a confirmed order with a total.
WhyA working demo sells a bot faster than a feature list.
Screen 03 / 07
A catalogue you can turn
Every bot is a point on a 3D object you drag with a finger. Shelves glow when picked.
Why118 products feel browsable instead of endless.
Screen 04 / 07
The bot page
Part number, test count, what it does, what it stops, and the price in one card.
WhyLike a spec sheet in a hardware store: the facts a buyer checks first.
Screen 05 / 07
The Builder
Describe your business in your own words, and get a bot filled with your items and tested.
WhyShop owners think in their products, not in settings.
Screen 06 / 07
Sign up
Google, Telegram or email on a dark panel, with the 3D mark filling as you complete fields.
WhyThe form rewards each field you finish.
Screen 07 / 07
Menu
Big tap rows with arrows and the two actions that matter pinned at the bottom.
WhyOne thumb, no hunting.

9:41

01 / 07

Desktop screens

1440 wide · 16 in Figma

States

The screens nobody screenshots but every user sees: nothing there yet, still loading, something went wrong, and it worked.

Design system

Built in Figma

Colour

Ink#0A0A0B · text, panels

Paper#FFFFFF · ground

Signal#FF4D1C · the light, actions

Live#12B76A · passing tests

Panel#F5F5F3 · cards

Line#E6E6E4 · rules

70components

44text styles

24variables

25screens

Type

Tested bots.Bricolage Grotesque
display

Download what you need.Inter Tight
body

BO01 · 31/31 PASSINGJetBrains Mono
part numbers

Screen

Bothaus home on desktop — Desktop home, 1440 wide

Component library

Figma components page

Every reusable piece I designed for this product, with its variants: default, pressed, disabled, error and the rest. Built with auto layout so a developer gets one source of truth. Tap to zoom.

Launch ads

3 social ads

Three demo first ads for small business owners: the bot answering at 2am, the tests it passes, and an order landing while the owner works.

Motion and interaction

What moves, and why

Mask reveals
Headlines wipe in line by line, so the page reads in the order I wrote it.
Magnetic buttons
Main buttons lean toward the cursor. It makes the next step feel close.
Scroll driven steps
The how it works ladder fills as you scroll, one stage at a time.
Counters that roll
Bot and test counts roll up like an odometer when they come into view.

+ the logo animation for launch, made in After Effects

Results

By the numbers

118bots across 13 shelves

754conversation tests passing

25screens designed in Figma

70reusable components

File 003 · Eutopia ID

Prototype

Eutopia ID

An NFC bracelet for children. One tap on any phone opens the child's emergency profile, texts the parents and tracks the ambulance live.

My role: Product designer. UX flows, UI, prototype and the 3D tracking scene.
Platform: iOS and Android, plus a no app page for helpers
Stage: Clickable prototype, 13 screens
Tools: FigmaFigJamThree.jsReactTwilio SMS

Logo intro

Launch screen · about 3 s

9:41

Eutopia ID

Every child, one tap from help.

A soft teal sky, like the app. Three orbit rings ripple out the way an NFC tap does, the help icons settle into orbit, and the mark draws itself: a child inside two rings, with a coral signal dot that keeps pulsing. Calm first, because parents open this app when they are scared.

0.0sOrbit rings ripple out
0.3sThe centre pops in
0.5s to 0.9sSix help icons settle into orbit
0.7sThe rings of the mark draw on
1.1sThe child appears
1.35sCoral signal dot, then it pulses
1.4sName and promise rise
1.6sNFC waves pulse out twice

The brief

Why it exists

The problem

When a child is hurt or lost, the adult who finds them can't tell who the child is, what they're allergic to, or who to call.

Who it's for

Parents of young children, schools, and any stranger who finds a child in trouble, usually with no app installed.

My goal

One tap on any phone shows only what saves time in an emergency, and parents know within seconds.

How I worked

6 stages

01Understand
Mapped the first ten minutes of a child emergency: who is there, what they need to know, who must be told.
FigJam
02User flows
Two flows: a parent setting up, and a stranger tapping the bracelet with no app.
FigJam
03Wireframes
Helper screen first: big name, blood type, allergies, one red button.
Figma
04UI design
Soft teal gradients, frosted cards and pill buttons for parents. Coral appears only when a child needs help. Type is Lexend for headings, made to be read fast, and Atkinson Hyperlegible for body, made by the Braille Institute so a scared stranger can still read an allergy in a second.
Figma
05Prototype
Clickable flow, plus a 3D city to test how tracking should feel.
Figma
06Build
Built in React with SMS alerts and the live 3D scene.
React

Onboarding

Three steps that mirror a real emergency: tap, alert, track. Pairing comes last, with a heads up before the notification prompt.

Onboarding: Alert — 02 / 03AlertThe exact SMS parents get, so they trust it when it arrives.

Onboarding: Track — 03 / 03TrackHelp on the map, then pairing, with notice before the permission prompt.

User flow

Pair bracelet
Child profile
Helper taps
no app needed
Parent alert
Track ambulance
Services
Report

The screens

Running on a phone

Screen 01 / 07
Pair in one step
The first screen explains the whole product in one line and offers two doors: parent or helper.
WhyA stranger helping a child must never be asked to sign up.
Screen 02 / 07
The profile parents control
Blood type, allergies, needs and who to call first. Parents decide what helpers can see.
WhyOnly information that changes what a helper does in the first minutes.
Screen 03 / 07
What a helper sees
A tap on the bracelet opens this on any phone. Red header, name and age, allergies in red, one big button.
WhyUnder stress people read the biggest thing first, so the biggest thing is the action.
Screen 04 / 07
Parents know in seconds
An alert with the place, a live map dot, and the exact SMS that went to both parents.
WhySMS still arrives when a parent has no data.
Screen 05 / 07
Live ambulance tracking
A dark map, the route in blue, the ambulance on its way, and a sheet with the minutes left.
WhyA parent who can watch help arriving panics less than one waiting blind.
Screen 06 / 07
Help near you
Ambulance, police, fire and the nearest hospital, each with distance and a call button. 112 is always on screen.
WhyIn an emergency nobody should have to search for a number.
Screen 07 / 07
The incident report
Every step with its time, from scan to hospital, ready to share with the school.
WhyParents and schools need a record of what happened and when.

9:41

01 / 07

States

The screens nobody screenshots but every user sees: nothing there yet, still loading, something went wrong, and it worked.

Design system

Built in Figma

Colour

Deep teal#1E5A61 · headers, selected

Teal#2D8487 · buttons, links

Mint#D3E8E4 · tiles, tab bar

Mist#EEF4F3 · background

Coral#E4574F · emergency only

Ink#12292C · text

Type

Every child, one tap from help.Lexend Semibold
headings, buttons, numbers

Her parents have been told where you are.Atkinson Hyperlegible
body, labels

Components

Profile header with status

Component library

Figma components page

Every reusable piece I designed for this product, with its variants: default, pressed, disabled, error and the rest. Built with auto layout so a developer gets one source of truth. Tap to zoom.

Brand guidelines

Logo, colour, type, voice

The rules that keep Eutopia ID looking and sounding like itself: logo and clear space, colour with proportions, type scale, voice, misuse and how it carries into ads and the product. Tap to read the full board.

Launch ads

3 social ads

Three quiet, warm ads for parents and schools. Real moments, very little text, no sirens and no fear.

Motion and interaction

What moves, and why

Bracelet pulse
Rings ripple out from the chip on the welcome screen, showing how NFC works without words.
Ambulance moves
The marker glides along the route and the minutes count down in the sheet.
Sheet over the map
Details slide up over the map so the route never disappears.
Service cards deal in
Emergency cards arrive one by one, nearest first.

Results

The prototype

13screens in the prototype

2flows: parent and helper

1tap to open a profile

0apps a helper needs

File 004 · Stitch Flow

Designed

Stitch Flow

A workflow app for tailoring studios. Clients follow each garment from measurement to pickup, and tailors run the cutting table.

My role: UX structure, UI design, component library
Platform: Mobile, with client and tailor portals
Stage: Design file, 22 frames
Tools: FigmaFigJamRecraftAuto layout

Logo intro

Launch screen · about 3 s

9:41

A sewing machine drops onto the screen and starts working: the needle bobs, the hand wheel spins, the thread spool shakes, and the cloth feeds through leaving a line of red stitches. Then the name settles in under the seam.

0.0sMachine drops in and settles
0.9sNeedle starts bobbing, wheel spins
0.9s to 2.5sCloth feeds left, red stitches trail out of the needle
2.4sName settles in
2.75sTagline

The brief

Why it exists

The problem

Tailors run on notebooks and WhatsApp. Measurements get lost, fittings get missed, and clients keep asking 'is it ready?'

Who it's for

Small ateliers and their clients, mostly ordering native wear like agbada, iro and buba, and senator suits.

My goal

One order record both sides can see: measurements, fabric, stage, fitting date and money owed.

How I worked

6 stages

01Roles
Split the product by who uses it: a client portal, a tailor portal and one shared sign in.
FigJam
02Order stages
Defined the five stages every garment passes: measured, cut, sewing, fitting, ready.
FigJam
03Wireframes
The order card with a five step bar became the core component.
Figma
04Visual design
Kraft paper and espresso ink, with a serif for headings, like a ledger. Art directed a set of hand made 2D illustrations in Recraft: a wrapped garment, tape and scissors, a pin cushion, a spool and a hanger with a booked date.
Figma
05Components
Auto layout cards that stretch cleanly for long garment names.
Figma
06Handoff
22 frames, named and grouped by portal, ready for a developer.
Figma

Onboarding

Three slides drawn from the shop itself: a garment, a tape measure and the fitting calendar.

Onboarding: The measurements — 02 / 03The measurementsKept in the app and verified by the tailor.

Onboarding: The fittings — 03 / 03The fittingsBooked in two taps, with a text the day before. Tailors get their own way in.

User flow

Sign in
My orders
Measurements
Order detail
Book fitting
Cutting table
tailor side
Job card

The screens

Running on a phone

Screen 01 / 07
One door, two roles
Clients and tailors sign in at the same door and pick their side. A phone number and a texted code, no password.
WhyMost people here already live on their phone number.
Screen 02 / 07
Every order at a glance
The next fitting sits on top, then each garment with a five step bar and a stage label.
WhyIt answers 'is it ready?' before the client has to ask.
Screen 03 / 07
Measurements that don't get lost
A body diagram shows where each number is taken. The tailor verifies them and adds notes like extra ease.
WhyPaper measurement books get lost. This one stays with the client.
Screen 04 / 07
The order, in full
Fabric photo, progress with dates, fabric details, and money owed with one button to pay the balance.
WhyMoney and dates are what clients worry about most, so they sit together.
Screen 05 / 07
Book a fitting
A month view with closed days greyed out, open times as chips and taken times struck through.
WhyFewer messages back and forth to agree a time.
Screen 06 / 07
The tailor's cutting table
Jobs grouped by stage, like piles on a table. Late jobs turn red.
WhyTailors think in piles of work, not lists of tickets.
Screen 07 / 07
One job card
The client's measurements, notes and a checklist. One button moves it to fitting and texts the client.
WhyFinishing a step should update the client without a phone call.

9:41

01 / 07

States

The screens nobody screenshots but every user sees: nothing there yet, still loading, something went wrong, and it worked.

Design system

Built in Figma

Colour

Espresso#3B2A20 · text, main buttons

Kraft#C9A57A · accents

Paper#F5EDE1 · background

Thread red#B4442E · current stage, late

Sage#6F8B6A · paid, ready

Line#E0D2BD · borders

Type

Morning, AmakaFraunces
headings

Sewing · due 9 NovDM Sans
body, UI

ORDER SF0418IBM Plex Mono
labels

Components

Component library

Figma components page

Every reusable piece I designed for this product, with its variants: default, pressed, disabled, error and the rest. Built with auto layout so a developer gets one source of truth. Tap to zoom.

Brand guidelines

Logo, colour, type, voice

The rules that keep Stitch Flow looking and sounding like itself: logo and clear space, colour with proportions, type scale, voice, misuse and how it carries into ads and the product. Tap to read the full board.

Launch ads

3 social ads

Three editorial ads styled like a fashion magazine: a cover, a client measurement card with a tape, and a fitting invitation.

Motion and interaction

What moves, and why

Progress fills
The five step bar fills to the current stage when an order opens.
Current stage pulses
The active stage dot breathes gently so it reads as now.
Checklist ticks
Steps tick off one by one and strike through.
Jobs move between piles
Marking a job ready slides it from Sewing into Ready.

What it covers

The design file

22frames in Figma

3portals: sign in, client, tailor

5stages per garment

1shared order record

File 005 · Cardplug

Built

Cardplug

Gift card rates from every buyer, ranked, so traders sell to the one that really pays the most.

My role: Product design, data design, front end build
Platform: Mobile web
Stage: Working app
Tools: FigmaFigJamRecraftHTML/CSS/JSSupabase

Logo intro

Launch screen · about 3 s

9:41

Three gift cards deal in and fan out, each with its rate. The best one lifts and turns green while the others sink. Then it grows two prongs and becomes the logo: the card that's plugged in.

0.0sThree cards rise in a stack
0.9sThey fan out, rates pop above each
1.55sThe best rate turns green and lifts
1.95sTwo prongs grow: the card becomes the plug
2.3sName and tagline

The brief

Why it exists

The problem

Rates for the same card change by the hour and differ from buyer to buyer. Most traders sell to whoever replies first.

Who it's for

Nigerian gift card traders, from students selling one card to people trading every day.

My goal

One screen that ranks every buyer by what you really get, and explains why.

How I worked

6 stages

01Research
Listed what traders check before selling: rate, payout time and whether the buyer is reliable.
FigJam
02Scoring
Turned those checks into one Plug Score out of 100.
FigJam
03Wireframes
Three tabs from the start: Compare, Trends and Learn.
Figma
04UI design
Dark, number first screens with mono digits so rates line up.
Figma
05Data
One rate collector per platform, stored so trends can be drawn.
Supabase
06Build
Built the app and connected it to live rates.
HTML/CSS/JS
07State art
Art directed four glass pieces in Recraft, one per state: a lens over cards for loading, a quiet bell for empty, a stopwatch for stale rates and a ringing bell for a saved alert.
Recraft

Onboarding

Three screens for the three jobs: compare, watch trends, get alerts. Each slide previews a real screen.

Onboarding: Trends — 02 / 03TrendsThirty days of rates and the best day to sell.

Onboarding: Alerts — 03 / 03AlertsSet a target, get a Telegram message.

User flow

First open
Pick card
Ranked buyers
Plug Score
Trends
Rate alert
or wait for a better rate
Learn

The screens

Running on a phone

Screen 01 / 07
First open
Three buyer cards show the idea before the words: the best buyer lifts out of the pile.
WhyThe product's whole point fits in one picture.
Screen 02 / 07
Pick the card
Card tiles, amount and type in a few taps. Physical and e code are split because they pay differently.
WhyThe question traders really ask is 'how much for this card?'
Screen 03 / 07
Ranked by what you get
The best offer sits on top in green, with how much more it pays than the lowest. Every buyer shows payout time and a score.
WhyShowing the gap in Naira makes the choice obvious.
Screen 04 / 07
Why a buyer ranks high
The Plug Score ring and the four parts that make it up.
WhyA score you can't explain is a score nobody trusts.
Screen 05 / 07
Trends
Thirty days of the best rate, the best day to sell, and the gap between buyers.
WhyTiming a sale can matter as much as picking the buyer.
Screen 06 / 07
Rate alerts
Set a target and get a Telegram message when any buyer reaches it.
WhyTraders shouldn't have to refresh all day.
Screen 07 / 07
Learn
Short reads on card types, safety and how rates move.
WhyNew traders often lose money to scams before they lose it to rates.

9:41

01 / 07

States

The screens nobody screenshots but every user sees: nothing there yet, still loading, something went wrong, and it worked.

Design system

Built in Figma

Colour

Night#0E1116 · background

Card#161B22 · surfaces

Plug green#2BD47E · best offer, actions

Amber#F5B83D · middling score

Red#F0605D · weak score

Fog#8C97A5 · secondary text

Type

Who pays the most?Inter
headings, UI

₦142,000IBM Plex Mono
every amount

Components

Component library

Figma components page

Every reusable piece I designed for this product, with its variants: default, pressed, disabled, error and the rest. Built with auto layout so a developer gets one source of truth. Tap to zoom.

Brand guidelines

Logo, colour, type, voice

The rules that keep Cardplug looking and sounding like itself: logo and clear space, colour with proportions, type scale, voice, misuse and how it carries into ads and the product. Tap to read the full board.

Launch ads

3 social ads

Three ads where the number is the hero: a live rate board, the gap between the first buyer and the best one, and a target being hit.

Motion and interaction

What moves, and why

Rates roll up
Amounts count up when results load, so fresh numbers feel fresh.
Best offer lifts
The winning buyer rises above the list once ranking finishes.
Score ring fills
The Plug Score ring draws to its value on the buyer screen.
Chart draws in
The trend line draws left to right, ending on today.

Results

The product

3tabs: Compare, Trends, Learn

100point Plug Score per buyer

6card types to compare

1rate collector per platform

File 006 · Namedesk 95

Demo

Namedesk 95

A domain registrar dressed as a 1995 desktop. Search, cart, DNS and WHOIS all open as windows.

My role: Concept, UI design, front end build
Platform: Web, works on phones
Stage: Interactive demo, one HTML file
Tools: FigmaFigJamHTML/CSS/JSRecraft

Logo intro

Launch screen · about 3 s

9:41

Starting Namedesk 95...

New mark: a pixel art desk bell, the kind you ring at a front desk to get served. You ring the desk, you claim your name. The intro boots like a 1995 PC, the bell drops in, the cursor rings it, and the name you wanted comes back free.

0.0sBlack boot screen, text types out
1.25sBell drops onto the desktop in chunky pixel steps
1.6sThe arrow cursor glides to the bell
2.45sDing: the bell presses down, pixel rings burst out
2.9syourname.ng types into the address field
3.2sWordmark with the 95 badge
3.65sFREE ✓ pops in

The brief

Why it exists

The problem

Buying a domain is a boring form, and new website owners get lost in DNS jargon.

Who it's for

First time website owners, and resellers who buy domains in bulk.

My goal

Make a dull, technical task feel like play, without hiding a single real feature.

How I worked

6 stages

01Concept
Matched every registrar feature to a desktop object: search is a program, DNS is a spreadsheet.
FigJam
02UI kit
Rebuilt a 1995 style kit: bevelled buttons, title bars, sunken fields, a taskbar.
Figma
03Screens
Search, cart, DNS editor, WHOIS, deals and the bulk checker.
Figma
04Details
Promo codes, renewal toggles, and plain notes like 'changes go live in about 5 minutes'.
Figma
05Easter egg
A blue crash screen when Beast Mode is pushed too hard.
Figma
06Build
All of it in one self contained HTML file.
HTML/CSS/JS

Onboarding

Onboarding as a 1995 setup wizard. Back, Next, Cancel: everyone already knows how it works.

Onboarding: First domain — 02 / 03First domainType a name and watch 12 endings get checked.

Onboarding: Finish — 03 / 03FinishThe domain is in the cart and new icons are on the desktop.

User flow

Desktop
Search
Cart
DNS editor
WHOIS
if taken
Beast Mode
bulk
Crash

The screens

Running on a phone

Screen 01 / 07
The desktop is the menu
Each feature is an icon, and a welcome dialog gives a tip of the day.
WhyEveryone already knows how to use a desktop.
Screen 02 / 07
Twelve endings at once
Type a name once and see .ng, .com.ng, .com and nine more, with prices and a one click add.
WhyPeople rarely know which ending they want until they see what's free.
Screen 03 / 07
A cart with promo codes
Years per domain, free email forwarding, and a promo field that shows the saving in green.
WhyShowing the discount line builds trust at checkout.
Screen 04 / 07
DNS without fear
Records in a familiar table, an edit panel with plain labels, and when changes go live.
WhyDNS scares beginners. A spreadsheet doesn't.
Screen 05 / 07
WHOIS, with a next step
Lookup output in a terminal window, plus a way to watch a taken domain or try another ending.
WhyA taken domain should never be a dead end.
Screen 06 / 07
Beast Mode
Paste a list of names, pick endings and watch the progress bar fill. Add every free one in one click.
WhyResellers check names by the hundred.
Screen 07 / 07
The crash screen
Push Beast Mode too hard and the blue screen appears, joking about it and promising nothing was lost.
WhyA little humour makes the product memorable.

9:41

01 / 07

States

The screens nobody screenshots but every user sees: nothing there yet, still loading, something went wrong, and it worked.

Design system

Built in Figma

Colour

Desktop teal#008080 · background

Window grey#C0C0C0 · windows, buttons

Title navy#000080 · title bars, selection

Shadow#808080 · bevels

Free green#007A00 · available

Crash blue#0000AA · the crash screen

Type

Find a domainSystem sans
windows, buttons

chidi.com.ngIBM Plex Mono
domains, DNS

Press any keyVT323
crash screen

Components

Component library

Figma components page

Every reusable piece I designed for this product, with its variants: default, pressed, disabled, error and the rest. Built with auto layout so a developer gets one source of truth. Tap to zoom.

Brand guidelines

Logo, colour, type, voice

The rules that keep Namedesk 95 looking and sounding like itself: logo and clear space, colour with proportions, type scale, voice, misuse and how it carries into ads and the product. Tap to read the full board.

Launch ads

3 social ads

Three ads where the whole canvas is a 1995 desktop, down to the taskbar and a blue screen joke.

Motion and interaction

What moves, and why

Windows open
Each program opens as a window that pops up from the taskbar.
Blocky progress bar
Beast Mode fills its bar block by block, like an old installer.
Blinking cursor
The WHOIS terminal ends with a blinking cursor asking what next.
Draggable windows
Windows can be dragged around the desktop, just like 1995.

What it covers

The demo

12domain endings per search

19deals in the catalogue

6programs on the desktop

1self contained HTML file

File 007 · Kobo

Designed

Kobo

A crypto exchange for Nigerians, named after the kobo: the smallest unit of the Naira, the way a satoshi is the smallest unit of Bitcoin. Calm, honest and drawn in clean lines, with every fee shown before you tap.

My role: Name, brand, UX flows, UI design, component library, 3D art direction and the 3D scenes
Platform: iOS and Android, Naira and dollar accounts
Stage: Design file and a live 3D prototype
Tools: FigmaFigJamRecraftThree.jsAuto layout

Logo intro

Launch screen · about 3 s

9:41

kobo

Every kobo, on chain.

100 kobo = ₦1

Kobo coins rain down and stack into a column, and the stack becomes the stem of the K. A violet price line zigzags up, then snaps straight into the arm. The leg kicks in, the two currency ticks stamp on with a flash, so the K reads as its own money sign like the naira and bitcoin signs. Then a shine sweeps across it every few seconds.

0.1s to 0.8sEight coins drop and stack, each with a little squash
1.05sThe stack becomes the stem
1.25sA price line zigzags up, led by a dot
1.9sIt snaps into the violet arm
2.15sThe leg kicks in with a bounce
2.4sCurrency ticks stamp on, flash ring
2.6skobo drops in letter by letter
3.1s, then on loopA shine sweeps the K

The brief

Why it exists

The problem

Crypto apps all look the same: glowing gradients, neon blobs, numbers everywhere. They feel like a casino, and the real cost hides in the spread.

Who it's for

First time buyers in Nigeria saving in BTC or USDT, and active traders who want an order book without a second app.

My goal

A calm, honest exchange that feels designed by a person: one colour, thin lines, serif numbers, and a receipt before every order.

How I worked

7 stages

01Research
Read reviews of five exchanges and sorted every complaint. Hidden fees and sends on the wrong network came up most.
FigJam
02Name and mark
Named it Kobo, the smallest unit of the Naira, so it says start small. The mark is a K drawn as a currency sign, with two ticks like the Naira and Bitcoin signs, and the rising arm is a price line.
Figma
03User flows
Three flows: first buy, swap, and send to a new address. Every money step ends on a receipt.
FigJam
04UI design
Black and one violet. Flat screens with hairlines, and Inter with tabular figures so every price lines up. The only depth lives in the coins and the card.
Figma
053D set
Art directed glass coins for BTC, ETH, USDT and TON, a vault and coin stacks in Recraft, all in the same smoked glass and violet light, then designed the matte black Kobo card around them.
Recraft
06Components
Ruler slider, receipt rows, depth lines, pattern swatches for the wallet, all as variants.
Figma
073D prototype
Built the live ridgeline markets in Three.js and the coin logo intro in SVG to test the motion.
Three.js

Onboarding

Three screens for the three fears people have about crypto apps: is it simple, what does it cost, and is my money safe.

Onboarding: Clear fees — 02 / 03Clear feesA receipt preview: price, fee, spread, what you get.

Onboarding: Safety — 03 / 03SafetyFace ID on sends, new address warnings, offline storage.

User flow

Welcome
Home
Pulse
all markets
Bitcoin
Trade
Order filled
Wallet

The screens

Running on a phone

Screen 01 / 08
Home: the number first
Your balance in a large serif, the day as one line chart with a hatched fill, four actions in a ruled strip, and a watchlist table.
WhyThe first question is always how much do I have. Everything else is smaller.
Screen 02 / 08
Pulse: every market as a line
Each coin is a ridgeline of its last 24 hours, stacked by volume. Calm coins lie flat, busy ones rise. The top mover is drawn in violet.
WhyA list of prices hides the story. Nine lines show it at a glance.
Screen 03 / 08
One coin, one decision
Price in serif, a chart with a crosshair you can drag, four stats in a ruled grid, and your own position.
WhySell is an outline, Buy is solid, so nobody sells by accident.
Screen 04 / 08
Trade with a ruler
The amount slider is a ruler with ticks at every 5%. The order book uses thin depth lines instead of coloured blocks, and the fee sits on a receipt line.
WhyA ruler says precision. That is the feeling you want when moving money.
Screen 05 / 08
Swap with a receipt
From and to, a round flip button, then rate, fee, route and arrival with dotted leaders, like a till slip.
WhyPeople already trust receipts. Borrowing the format makes the costs feel honest.
Screen 06 / 08
Wallet with the card on top
The matte black Kobo card sits tilted at the top. Below it, one stacked bar shows what you hold, each coin with a pattern (solid, hatch, dots, cross) instead of a colour.
WhyPatterns still work for colour blind users and in black and white screenshots.
Screen 07 / 08
Auto invest as a sentence
The plan reads like a sentence, the calendar marks every buy, and two lines compare what you put in against what it is worth.
WhyA sentence is easier to check than a form.
Screen 08 / 08
Send, checked twice
A perforated receipt with the first and last four characters of the address in violet, a warning for new addresses, then slide to send.
WhySlide is harder to do by accident than a tap. Money that leaves cannot come back.

9:41

01 / 08

3D set

Art directed in Recraft

Crypto apps love 3D coins, so I gave Kobo its own set instead of stock ones, including one piece for each state: smoked glass, a violet rim light and the same angle on every piece, so they sit together on a black screen. The card was then designed in Figma to match.

Pulse in 3D

Live Three.js · drag to turn

The Pulse screen, built in 3D so I could feel the motion before handoff. Every coin is a line that keeps moving like a live market. Drag to look along the lines, tap one to read it.

Tap a linePulse10 coins · live

Drag to turn · tap a line

States

The screens nobody screenshots but every user sees: nothing there yet, still loading, something went wrong, and it worked.

Design system

Built in Figma

Colour

Ink#0B0B0C · background

Paper#EDEAF4 · text, lines

Kobo violet#8F6BFF · the one accent

Rule#232129 · hairlines

Lilac#A58BFF · price up

Clay#FF7A59 · price down

Type

$11,446.12Inter Semibold
balances, headlines

Every fee before you tapInter Medium
UI and body

66,314.70 · ▲ 2.41%Inter, tabular figures
prices line up in columns

Components

Component library

Figma components page

Every reusable piece I designed for this product, with its variants: default, pressed, disabled, error and the rest. Built with auto layout so a developer gets one source of truth. Tap to zoom.

Brand guidelines

Logo, colour, type, voice

The rules that keep Kobo looking and sounding like itself: logo and clear space, colour with proportions, type scale, voice, misuse and how it carries into ads and the product. Tap to read the full board.

Launch ads

3 social ads

Three quiet, premium ads. No rockets and no promises: the least you need to start, a receipt with every fee, and auto invest on the real app screen.

Motion and interaction

What moves, and why

Coins become the K
On launch, kobo coins stack into the stem, a price line snaps into the arm, and the currency ticks stamp on. A shine sweeps it on a loop.
Live ridgelines
In 3D the market lines keep moving. Drag to look along them, tap one to read it.
Ruler snaps
The slider snaps to each 5% tick with a light tap of haptics.
Receipt prints
After an order, the receipt slides down line by line like a till printing.

What it covers

The design

15screens incl. onboarding and states

13component sets in Figma

73D assets in one glass style

1colour, used on purpose

File 008 · Wink

Designed

Wink

A meme coin app you swipe. Right to buy, left to pass, up for the thread. Anyone can launch a coin in 30 seconds, everyone buys on the same fair curve, and every coin's face is a grainy, many eyed character I art directed for it.

My role: Name, brand, illustration system, UX flows, UI design, motion, component library
Platform: iOS and Android, Solana wallet
Stage: Design file and a live swipe prototype
Tools: FigmaFigJamRecraftGSAPAuto layout

Logo intro

Launch screen · about 3 s

9:41

wink

Swipe right on memes.

The Wink cube falls in and bounces with real squash and stretch. Its face cuts in: the eye pops, the wink and the smile draw on round the corner. After that it never stops: every few seconds it hops and winks at you.

0.2sThe cube falls in, tilted
0.75sLands: squash, stretch, two bounces
1.1sThe eye pops open
1.25s to 1.95sWink, then the smile draws round the corner
1.75swink bounces in
2.1sSwipe right on memes.
every 3.6sHops and winks, forever

The brief

Why it exists

The problem

Meme coin apps look like trading terminals. New people freeze at the charts, can't tell a fair launch from a trap, and the fun gets buried.

Who it's for

Gen Z who came for the memes, not the candles, and creators who want to launch a coin for a joke, a friend group or a character.

My goal

Make finding a coin as easy as swiping a feed, and keep three things impossible to miss: how close it is to graduating, what a trade costs, and that it can go to zero.

The cast

Original illustration system

Every coin needs a face, so I set up a small illustration system and art directed the cast in Recraft: pointy ears, beanies with an eye, puffer jackets, too many eyes, glossy highlights and film grain over flat gradient shapes. Same palette, same rules, a new meme every time.

How I worked

6 stages

01Research
Watched how people use launchpads: they scroll like a feed, buy on vibes and live in the comments. So discovery became a swipe.
FigJam
02Name and mark
Wink: a meme is an inside joke, and a wink says you get it. The mark is a cube with a face cut into it: an open eye on one side, a wink on the other, and a smile wrapping round the corner.
Figma
03Illustration
Set the rules for the cast (pointy ears, beanies with an eye, puffer jackets, film grain, one palette) and art directed each character in Recraft. Each one becomes a coin.
Recraft
04Flow
Swipe, peek, buy, talk, hold, graduate. Every money step shows the cost and the curve before you confirm.
FigJam
05UI design
Near black with one green. The art brings the colour, so the UI stays quiet.
Figma
06Motion
Prototyped the swipe deck in GSAP: cards follow your thumb, tilt, stamp APE or PASS, and spring back if you change your mind.
GSAP

Onboarding

Three screens: what it is, how easy it is to launch, and why the curve is fair.

Onboarding: Launch — 02 / 03LaunchPicture, name, ticker, done.

Onboarding: Fair curve — 03 / 03Fair curveSame price for everyone, then graduation.

User flow

Welcome
Swipe
right to ape
Coin page
tap the card
Confirm buy
bottom sheet
Thread
swipe up
Bag
Graduated

The screens

Running on a phone

Screen 01 / 09
Swipe to discover
One coin per card: art, name, ticker, market cap and the curve. Right to buy 0.1 SOL, left to pass, up to read the thread.
WhyA feed of 200 coins is overwhelming. One card at a time is a game.
Screen 02 / 09
The board
For people who want the full list: king of the hill on top, then filters and a feed of coins with their progress.
WhySwiping is for fun. The board is for when you know what you want.
Screen 03 / 09
The coin page
Art, market cap, a candle chart, the bonding curve in plain words, and the top holders.
WhyGraduation is the moment that matters, so it gets its own card, not a tooltip.
Screen 04 / 09
Confirm in one sheet
Buy or sell, quick amounts, what you get, price impact, slippage and the fee, then a one line warning before the button.
WhyEvery cost is above the button. The warning is honest without being a wall of text.
Screen 05 / 09
Launch a coin
Picture, name, ticker, a line of lore and optional socials. A note says the launch is fair: no presale, no team tokens.
WhyFewer fields means more people finish.
Screen 06 / 09
The thread
Live trades scroll at the top, then the comments, each tagged with what that person bought or sold.
WhyThe thread is where meme coins live. Trade tags show who means it.
Screen 07 / 09
Your bag
Bag value with a line chart, each holding with its art, and creator rewards for people who launched a coin.
WhyArt makes holdings easy to spot at a glance.
Screen 08 / 09
Graduated
The character cheers, the coin moves to Raydium, and you see your holder number and your gain.
WhyGraduation is the win. It deserves a party screen.
Screen 09 / 09
Ranks
A podium for the week, then the leaderboard of traders and creators.
WhyStatus keeps people coming back. A podium is more fun than a table.

9:41

01 / 09

Swipe it yourself

Live prototype · GSAP

This is the real swipe interaction, built with GSAP. Drag a card right to ape in, left to pass, or use the buttons and arrow keys. Cards tilt with your drag, stamp APE or PASS, and spring back if you change your mind.

Tobi the Watcher+214%

$TOBImcap ₦412M

APEPASS

Shocked Kemi+38%

$SHOCKmcap ₦96M

APEPASS

Suya Inu+12%

$SUYAmcap ₦71M

APEPASS

Dayo Gbese-8%

$GBESEmcap ₦28M

APEPASS

Third Eye Flower+63%

$EYEmcap ₦12M

APEPASS

NEPA Took Light-21%

$NEPAmcap ₦4M

APEPASS

Drag a card, or tap a button

Your bag: 0.0 SOL in 0 coins

States

The screens nobody screenshots but every user sees: nothing there yet, still loading, something went wrong, and it worked.

Design system

Built in Figma

Colour

Night#0D0E13 · background

Card#16171E · surfaces

Wink green#9BF26B · the one accent, buys

Pass red#FF5C67 · sells, passes

Mist#8A8D9C · secondary text

Art palette#5B3DF5 · only inside illustrations

Type

winkBricolage Grotesque
headings, numbers

sees everything, sells nothingDM Sans
UI and body

$TOBI · mcap ₦412MJetBrains Mono
tickers, trades

Components

Component library

Figma components page

Every reusable piece I designed for this product, with its variants: default, pressed, disabled, error and the rest. Built with auto layout so a developer gets one source of truth. Tap to zoom.

Brand guidelines

Logo, colour, type, voice

The rules that keep Wink looking and sounding like itself: logo and clear space, colour with proportions, type scale, voice, misuse and how it carries into ads and the product. Tap to read the full board.

Launch ads

3 social ads

Three loud, internet native ads: swipe cards and stickers, a 30 second launch, and a coin riding the curve.

Motion and interaction

What moves, and why

Swipe with weight
Cards follow your thumb and tilt as they move. Past the line they fly off; before it they spring back with an elastic ease.
Stamps fade in
APE and PASS fade in as you drag, so you know what will happen before you let go.
The logo winks
On launch three cards get swiped, then the cube falls in, squashes, bounces, draws its face and keeps winking.
Graduation party
The character throws its arms up and sparkles pop when a coin hits the curve.

What it covers

The design

16screens incl. onboarding and states

8art directed characters and props

1live GSAP swipe prototype

1accent colour in the UI

File 009 · Zobby

Designed

Zobby

Zobby is zobo in a can: the hibiscus drink every Nigerian party has, brewed properly, chilled and sold cold. A loud, happy brand, a landing page that moves like a music video, and an order app for mixed six packs delivered ice cold.

My role: Name, brand, can art direction, 3D cans, web design, motion, mobile app
Platform: Website and mobile web shop
Stage: Design file and a live animated landing page
Tools: FigmaFigJamRecraftGSAPCSS 3D

Logo intro

Launch screen · about 3 s

9:41

ZOBBY

Zobo, canned cold.

A hibiscus spins open on a wine background, a real 3D can drops in, squashes on landing and keeps spinning, ZOBBY falls in letter by letter, the white flecks pop, then torn pink paper rises with the line: zobo, canned cold.

0.1sThe hibiscus spins open
0.7sThe can drops in and squashes
1.3sZOBBY falls in, one letter at a time
1.6sWhite flecks pop
2.1sTorn pink paper rises
2.4sZobo, canned cold

The brief

Why it exists

The problem

Zobo is loved but it is sold in reused bottles of unknown age, warm, from a cooler on the roadside. Nobody trusts how it was made or how long it has been out.

Who it's for

Young people in Lagos who buy drinks for parties, offices and hangouts, and want something local that looks as good as the imported cans.

My goal

A brand loud enough to sit next to the big soda names, a site that makes you thirsty in five seconds, and an order flow that guarantees it arrives cold.

How I worked

6 stages

01Research
Asked 20 people why they stopped buying zobo. Hygiene and warm bottles came up most, taste never did.
FigJam
02Name and voice
Zobby: zobo with a nickname. The voice is a friend at the party: short lines, Pidgin where it fits, no wahala.
FigJam
03Can art
Art directed four flavours in Recraft with one rule: a giant ZOBBY wordmark over a loud cut paper pattern, a different colour world each.
Recraft
043D cans
Unwrapped each label flat and built the cans as real 3D cylinders in CSS, so they spin on any phone without WebGL.
CSS 3D
05Landing page
Three scenes with torn paper wipes, falling cans and a marquee, all on one GSAP timeline you can scrub.
GSAP
06Order app
A flavour page with a spice meter, a mix your own six pack builder, and checkout that promises cold or free.
Figma

Landing page, live

GSAP · drag to scrub

The real landing page, running. It plays itself: the hero drops in, torn pink paper wipes up while a can falls through, the promise and the photo slide in, the marquee runs, then the range lands on its plinths and the wine paper takes you back to the top. Drag the bar to scrub through it.

HIBISCUS

Real zobo, brewed with hibiscus, ginger and cloves. Canned cold, no preservatives, no hangover.

Grab a can

REAL ZOBOWITHOUT THEWAHALA

NO HANGOVER · NO PRESERVATIVES · NO WAHALA · NO HANGOVER · NO PRESERVATIVES · NO WAHALA ·

FOUR WAYS TO ZOBO

01 · Hero

User flow

Home
The range
Ginger Kick
Mix a pack
Cart
On its way

The screens

Running on a phone

Screen 01 / 06
Home: hibiscus, loud
The word HIBISCUS fills the screen behind two spinning cans. One line on what it is and one big orange button.
WhyIn five seconds you know it is zobo, it is cold, and it is safe.
Screen 02 / 06
Four ways to zobo
Each flavour gets its own colour world. A five step spice meter replaces long descriptions.
WhyPeople choose drinks by mood. Colour and spice say it faster than words.
Screen 03 / 06
One flavour, all the facts
The can spins over its name, then ingredients, spice, can or pack, and quantity.
WhySaying how it is brewed answers the hygiene worry right where people decide.
Screen 04 / 06
Mix your own six pack
Six slots fill as you tap flavours. A mixed pack costs the same as a single flavour.
WhyParties have mixed tastes. Letting people mix removes the only reason to buy less.
Screen 05 / 06
Cold, or it is free
The cart totals in Naira with delivery, and a promise card: packed in an ice sleeve, cold or free.
WhyWarm zobo is the biggest complaint, so the promise sits right above the pay button.
Screen 06 / 06
On its way, cold
Rider, minutes left and a progress bar in the same loud type as the brand.
WhyWaiting is part of the brand too. It should still feel like a party.

9:41

01 / 06

States

The screens nobody screenshots but every user sees: nothing there yet, still loading, something went wrong, and it worked.

Design system

Built in Figma

Colour

Hibiscus wine#4A0A26 · backgrounds, text

Petal pink#FFD3DC · second background

Ginger orange#FF9F1C · buttons only

Cream#FFF4EC · cards

Classic#8E1B3A · flavour

Mint Lime#2FA37C · flavour

Type

NO WAHALAAnton
headlines, always caps

Real zobo, brewed with hibiscus and ginger.DM Sans
body, buttons, prices

Components

Component library

Figma components page

Every reusable piece I designed for this product, with its variants: default, pressed, disabled, error and the rest. Built with auto layout so a developer gets one source of truth. Tap to zoom.

Brand guidelines

Logo, colour, type, voice

The rules that keep Zobby looking and sounding like itself: logo and clear space, colour with proportions, type scale, voice, misuse and how it carries into ads and the product. Tap to read the full board.

Launch ads

3 social ads

Three ads where the can is the hero: cold, surrounded by hibiscus, ginger and cloves, in the brand's poster style. No app screens.

Motion and interaction

What moves, and why

Torn paper wipes
Scenes change with a ragged paper edge sweeping up, like a poster torn off a wall.
Cans that really spin
Every can is a 3D cylinder with the label wrapped round it, lit from one side so the shine stays still while it turns.
Falling can
Between scenes a can drops through the page, spinning, like it was tossed to you.
Marquee
NO HANGOVER · NO PRESERVATIVES · NO WAHALA runs across the screen in huge type.

What it covers

The design

16screens incl. states

4flavours, 4 colour worlds

1live landing page

0WebGL needed for 3D

File 010 · Pingo

Built

Pingo

A job app that watches every job board for you and pings you when a role fits. I made the brand, the app, the landing page and its 3D hero.

My role: Brand identity, app UI/UX, landing page, motion, 3D, front end build
Platform: iOS and Android app, web
Tagline: Jobs that find you
Tools: FigmaFigJamHTML/CSS/JSthree.js

Logo intro

Launch screen · about 3 s

9:41

pingo

Jobs that find you

The mark is a signal. Its arcs draw out from the centre like a radar sweep, the centre point lands, and two mint dots ping in: the jobs it caught. A ring sends the ping out, then the name rises.

0.2sFour arcs draw outward, one after another
1.0sThe centre point drops in
1.3sTwo mint dots ping: jobs found
1.6sA ring pulses out from the mark
2.0sWordmark rises out of a mask
2.5sTagline: Jobs that find you

The brief

Why it exists

The problem

Job hunting has turned into a second job: endless tabs, dead links and fake listings that ask for a fee.

Who it's for

Graduates, career switchers and people stepping up, applying from their phones between everything else.

My goal

A page that feels calm and sure of itself, shows people getting hired, and gets you to start free.

How I worked

6 stages

01Brand
A ping mark made of signal arcs, cobalt and mint, Sora and Geist.
Figma
02Story
Twelve sections, each answering one question: what, how, why trust it, what it costs.
FigJam
03Design
Desktop and mobile, full width, rounded photos, no decoration that doesn't explain something.
Figma
04Art direction
Only hiring moments: interviews, offers, first days. No stock smiles at laptops.
Figma
053D hero
Six career tools that melt into one another inside the headline pill.
three.js
06Build
Coded the page with scroll animations that run on the browser, not on scripts.
HTML/CSS/JS

Brand identity

Mark and colour

pingo

Lockup. Signal arcs around a centre point, with two mint dots for the jobs it catches.

On cobalt. The main brand colour, used for every action.

On night. For the dark interview prep moments.

Launch film

46 seconds · sound on

The launch film: from the feeling of being good at something, to a search that runs all night, to matches waiting in the morning. Designed and animated end to end, scored with voice and sound.

The 3D hero

Six tools, one pill

A briefcase, a stethoscope, a laptop, a hard hat, a graduation cap and a palette. The pill squeezes shut, the tool melts into a glossy drop, and the next career grows out of it. Every job, one search.

pingo.app

Real 3D in the browser. It pauses when you scroll away, so the page stays light.

Onboarding

Three screens that answer what it does, how you set it up, and why you can trust a match.

Onboarding: Tell Pingo once — 02 / 03Tell Pingo onceRole, place and skills in one go. Then it watches for you.

Onboarding: Know why it fits — 03 / 03Know why it fitsA real match with its score and reasons, checked for scams.

The app

Running on a phone

Screen 01 / 07
For you
Matches that came in overnight, each with its score ring, place and pay. The best one is marked Act now.
WhyYou open the app to results, not to a search box.
Screen 02 / 07
The match
A big score on a dark card, then the reasons line by line, including the one that is only a partial fit.
WhyShowing the weak point builds more trust than hiding it.
Screen 03 / 07
A CV for this role
The match before and after, then exactly what changed: lines added, a line cut, skills moved up.
WhyYou can see the edit, so you stay in control of your CV.
Screen 04 / 07
Walk in ready
The night before: practice questions, the company brief and the salary range, on a dark screen.
WhyThe colour changes when the moment changes.
Screen 05 / 07
Scam shield
A fake listing struck through and stamped, with the three reasons it was blocked.
WhyFake jobs are the fear that stops people applying.
Screen 06 / 07
Applications
Every application by stage, from applied to interview to offer. Interviews show when prep is ready.
WhyOne place instead of a notes app and ten emails.
Screen 07 / 07
Offer received
The ping everyone waits for, with the days it took from the first match.
WhyThe app ends on the outcome, not on a feature.

9:41

01 / 07

Desktop screens

Full width, edge to edge

Hero: the promise, the 3D pill and the search

The problem, with a time-lapse of hiring moments

Design system

Built in Figma

Colour

Cobalt#3D5AFE · actions, brand

Night#0B1033 · text, dark panels

Mint#2EE6A6 · good news only

Mist#E3E8FF · the mark, tints

Paper#F4F6FF · sections

Slate#6B7299 · body text

12sections

10text styles

11colour variables

2breakpoints

Type

Get pinged.Sora
display

Tell Pingo the job you want once.Geist
body

01 · MATCHES · 92% FITGeist
labels

Rules

Mint only means something good happened.
Every photo shows a hiring moment.
Corners stay round, 24px on photos.
Nothing glows or scans.

Launch ads

6 of 12

Social ads in the same system, so the ad and the page feel like one brand: one bold line, one real moment, one notification.

Motion and interaction

What moves, and why

Lines that rise
The headline comes in line by line, then the search bar, so you read it in order.
Scroll driven reveals
Sections slide in as they reach you, run by the browser itself, so they stay smooth on cheap phones.
A ring that fills
The match score fills to 92% when it comes into view, so the number feels earned.
Buttons that lean
Buttons lift and the arrow nudges forward on hover. Small, but it says go.

What it covers

By the numbers

12sections, desktop and mobile

63D career tools in the hero

12launch ads in the same system

3plans, one free today

TheDesigner

Selected files

Logo intro

The brief

The problem

Who it's for

My goal

How I worked

Onboarding

User flow

The screens

Prices before an account

Operator choice in plain words

The buy sheet

Sign up in 30 seconds

Top up the wallet

Waiting, with a timer

The code lands

Order history

Rent a number for a week

Scam checker

States

Design system

Colour

Type

Components

Component library

Brand guidelines

Launch ads

Motion and interaction

On desktop

Results

Logo intro

The brief

The problem

Who it's for

My goal

How I worked

Brand identity

Logo animation

Launch film

Onboarding

User flow

The screens

Home, top to bottom

Show, don't tell

A catalogue you can turn

The bot page

The Builder

Sign up

Menu

Desktop screens

States

Design system

Colour

Type

Screen

Component library

Launch ads

Motion and interaction

Results

Logo intro

The brief

The problem

Who it's for

My goal

How I worked

Onboarding

User flow

The screens

Pair in one step

The profile parents control

What a helper sees

Parents know in seconds

Live ambulance tracking

Help near you

The incident report

States

Design system

Colour

The
Designer