# Bytefi — case study

> A crypto wallet designed to feel like a banking app: trade, keep your assets and spend them through a virtual or physical card — with balances in naira and one clear action per screen.

- **Client:** Bytefi
- **Type:** client
- **Industry:** Fintech & crypto
- **Role:** UI/UX design
- **Platform:** Mobile app
- **Tools:** Figma
- **Status:** Designed in Figma

- Case study: https://ministar-samuel.com/project/bytefi
- Figma file: https://www.figma.com/design/b7fkAvQLvVyHXnH1iROnuk/Bytefi?node-id=0-1

![Bytefi screens on a yellow background: sign-up, wallet currencies, funding options, Home, a Buy/Sell form and the physical card offer](https://ministar-samuel.com/covers/bytefi.webp)

## Overview

Bytefi is a crypto wallet: people trade cryptocurrency, keep their assets in one place, and spend them through a virtual or a physical card. This project is the mobile app’s UI/UX design in Figma — the full set of app screens, plus a definitions frame for colour, type and components.

The idea running through it is **clarity first**: make the wallet feel like the banking apps its users already know, with balances in naira, plain verbs, and one clear action on each screen.

- **110** App screen frames
- **7** Sections, sign-up to settings
- **37** Card frames — the largest section

## Challenge

*the problem*

### Crypto is hard to start with.

Wallets, coins, networks, swaps and trades come with their own vocabulary, and a crypto app can easily greet a newcomer with charts and long addresses before they have done anything.

Bytefi wanted all of it — trading, storing assets, paying by card — in an app a first-timer can use, without taking away the depth an experienced user expects. And because it holds people’s money, every screen also has to feel safe.

![Bytefi sign-up: “Hello, Welcome”, a blue Sign up with email or phone button, Continue with Google, and a log-in link](https://ministar-samuel.com/case-studies/bytefi/figma/03-sign-up-options.webp)
*Sign-up: email, phone or Google — nothing about wallets yet.*

## Goals · clarity first

*banking patterns, with crypto inside*

- **Naira first.** Every balance leads with its naira value; the coin amount sits underneath, in grey.
- **Plain verbs.** Send, Receive, Order — and history rows that read “Swap NGN to BTC” or “Sent to 0002345555”.
- **One action per screen.** A single full-width button closes each form.
- **Progress you can see.** Peer-to-peer trades get a three-step tracker: order created, pay the seller, release crypto.

*home*

### An account overview, not a trading desk.

The header shows one number — the **combined wallet value** — in the currency chosen in the switcher (NG Naira here). Under it sit four actions: Send, Receive, Order and More.

Assets read like bank accounts: the naira wallet, then Bitcoin and Ethereum, each with its naira value first and the coin amount below. Activity is a short statement — “Received BTC”, “Sent BTC” — with dates and both amounts.

![Bytefi Home: ₦1,000,000.00 combined wallet value on a charcoal header, Send, Receive, Order and More, an assets list and recent activity](https://ministar-samuel.com/case-studies/bytefi/figma/02-home.webp)
*Home (sample data)*

## Research & discovery

The work starts from what Bytefi’s users already do on their phones: they bank in naira, buy airtime, pay bills and verify their identity for banking apps. Those habits became the template, and the crypto features were fitted into them rather than given conventions of their own.

*bills*

### Ask what a bank would ask.

Bill payments show the idea at its plainest. Buying airtime asks exactly what a banking app asks — phone number, amount in NGN, network (MTN, Airtel, Glo, 9mobile) — and nothing about crypto.

Money moves in the same way: the wallet holds naira, US dollars, British pounds and euros, and a funding screen offers P2P trading (tagged “Quickest option”), the Bytefi wallet, or a card or bank account.

![Airtime screen: phone number and amount fields, a list of networks with MTN selected, and a blue Continue button](https://ministar-samuel.com/case-studies/bytefi/figma/04-pay-bills.webp)
*Airtime*

## Information architecture & flows

The App Screens page is split into seven sections, and together they read as a journey: sign up or log in, get verified, land on Home, then go to cards, transactions or settings.

**App Screens page · seven sections as a journey** (flowchart):

1. Sign up — 14 frames: email or phone, or Google.
2. Log in — 14 frames.
3. Account verification — 13 frames: country, personal information, government ID, liveness check.
4. Home & options — 16 frames, including wallet options in NGN, USD, GBP and EUR.
5. Card options — 37 frames — the largest section.
6. Transactions — 4 frames.
7. Profile & settings — 12 frames.

Cards is the largest section, and the place the banking pattern pays off most. A segmented control switches between the virtual and the physical card. The virtual card looks like a bank card, with Add funds and Withdraw; the physical card screen explains what it’s for and what it costs **before** offering to create or activate one.

**Cards · virtual or physical** (flowchart):

1. Cards tab
2. Virtual or physical? — A segmented control at the top of the card screen.
3. Virtual card — Balance, masked number, expiry and a hidden CVV.
4. Add funds or withdraw — A withdrawal from the card lands in the Bytefi wallet.
5. Transaction details — A sheet over the card: type, amount, date, a sentence on what happened, and Report a problem.
6. Physical card — For online shopping, subscriptions and cash withdrawals. As designed: a $20 creation fee, $1 or $2 per transaction (below or above $100), and a possible delivery fee.
7. Create or activate a card — Two buttons: Activate new card and Create a physical card.

*The steps inside card creation and activation aren’t shown in the frames covered here.*

## Visual design & system

The look is light and bright: **blue** for primary actions and headers, **yellow** for secondary actions, selections and icon tiles, and charcoal for text on near-white pages. A faint pattern of yellow Bytefi coins fills the bottom of the welcome screens.

The definitions frame on the Components page sets it all down — colours with their hex values, Plus Jakarta Sans and its sizes, buttons in every state, a P2P step tracker, tags, toggles, checkboxes, option buttons, toasts and the curved main header. It includes a Dark Mode switch, though no dark screens are among the frames shown here.

- **Bytefi blue** #2c7ffa — Primary buttons, active tab
- **Deep blue** #1f5ab1 — Bottom of the curved header gradient
- **Sunflower** #fdd800 — Secondary buttons, icon tiles, selected options
- **Charcoal** #2c2c2c — Text, Home header
- **Canvas** #f9f9f9 — Page background
- **Alert** #e66f6f — Error toast
- **Success** #44bd97 — Success toast

- **Plus Jakarta Sans** — The only family: 20 Bold headings, 16 and 14 SemiBold text, 14 and 12 Regular, 10 Bold tab labels (definitions frame)

![Bytefi definitions frame, top half: colours, fonts and sizes, primary and secondary buttons, spacing redlines, step tracker, tags, toggles, checkbox, text group and option button](https://ministar-samuel.com/case-studies/bytefi/figma/01-definitions-01.webp)

1. **Colour** — Blue primary, yellow secondary, three greys and the header gradient, each with its hex.
2. **Type scale** — Plus Jakarta Sans at six sizes, from 20 Bold headings to 10 Bold tab labels.
3. **Primary button** — Blue, in standard, hover, pressed and disabled states.
4. **Secondary button** — Yellow, in the same four states.
5. **Spacing** — Redlines mark 16 px either side of a button label.
6. **Step tracker** — For P2P trades: order created, pay the seller, release crypto.
7. **Toggles** — Including a Dark Mode switch.
8. **Option button** — The yellow radio used for choices such as the mobile network.

## Key screens

**1. Verified in one sitting**

Before money moves, the account is verified. The first screen asks one thing — the country of residence — then lists the three steps ahead: personal information, a government-issued ID and a liveness check, with an estimate of 10 minutes.

![Account verification: “Let’s get you verified”, a country selector set to Nigeria, three steps listed, and a Continue button](https://ministar-samuel.com/case-studies/bytefi/figma/07-account-verification.webp)

**2. A card that behaves like one**

The virtual card shows its balance, a masked number, the expiry and a hidden CVV, with Add funds and Withdraw underneath. A transaction’s details open as a sheet over the card: type, amount, date, one sentence on what happened — here, a withdrawal from the card into the Bytefi wallet — and Report a problem.

![Virtual card screen with a Debit sheet open: withdrawal from card, −₦5,220.00, the date, details and Report a problem](https://ministar-samuel.com/case-studies/bytefi/figma/05-virtual-card.webp)

**3. A statement, not a ledger**

Transactions are grouped by day and written as sentences — a swap from naira to Bitcoin, a transfer to an account number, a deposit — each with a signed naira amount and a time. A download button sits in the header.

![Transactions: two days of rows such as Swap NGN to BTC, Sent to 0002345555 and Bytefi deposit, each with a naira amount and time](https://ministar-samuel.com/case-studies/bytefi/figma/06-transactions.webp)

## Outcome & learnings

Bytefi is a complete design file: 110 app frames in seven sections, with a definitions frame for colour, type and components. How it was built afterwards isn’t covered here.

Read back now, clarity-first holds up best where it is most literal — the card and the statement. The part to settle is the shell: Home and Transactions use different headers and tab bars, while the cover composition shows Home with a blue header instead of a charcoal one. One shell, and a copy pass on receipts and step labels, would come before handoff.

![Home with a charcoal header and the tabs Home, Refer & Earn, Transaction, Profile](https://ministar-samuel.com/case-studies/bytefi/figma/02-home.webp)
*Home — charcoal header; Home, Refer & Earn, Transaction, Profile*

![Transactions with a blue header and the tabs Home, Cards, Transaction, Settings](https://ministar-samuel.com/case-studies/bytefi/figma/06-transactions.webp)
*Transactions — blue header; Home, Cards, Transaction, Settings*

*open in the file*

- ☐ One header and one tab bar across every screen
- ☐ A copy pass on receipts and step labels
- ☐ Dark screens for the Dark Mode switch — or drop the switch

---
By Samuel Ministar · https://ministar-samuel.com/project/bytefi