Skip to content
All work
CryptoBot

About project

CryptoBot2023Concept

A crypto wallet that lives inside Telegram.

CryptoBot keeps its users' crypto inside Telegram, and the brief was to rebuild its Wallet section as a Telegram Mini App. I designed it solo for iOS: balances in dollars, deposit by address or QR code, and withdraw with its error states. The result is a clickable 26-page Figma prototype where deposit and withdraw share one step pattern.

  • App UI
  • Mobile
  • Crypto
Role
Product & UI Designer, solo
Client
Crypto wallet · Telegram Mini App
Platform
Mobile
Tools
Figma
The whole job at a glance: the wallet in Telegram's frame, a deposit QR code, a withdrawal receipt.

Challenges

The Mini App had to do everything the Wallet section does in the part of the screen Telegram leaves free. In crypto, a coin sent on the wrong network or address does not come back. Every step that moves money had to make the choice plain and the mistake hard to make.

  • 390 by 659 points: an iPhone screen minus Telegram's header and bottom menu
  • Nine coins, some on several networks: Tether alone on TRC20, ERC20 and BEP20
  • Dollar values next to balances, minimums, fees and totals
  • iOS first, Android and desktop Telegram later
The holder
wants each balance, and the total, in dollars at a glance.
The sender
picks a coin, a network and an address, and one wrong pick can lose the coins for good.

Solutions

  1. 01

    I drew iOS in full instead of three platforms

    Telegram runs on iOS, Android and desktop, and the first plan was to cover all three. I drew iOS in full instead, with pressed states that also answer a hover for a later desktop version.

    Trade-offAndroid and desktop were never drawn, and on desktop a hover would look the same as a press.

  2. 02

    Deposit and withdraw share one step pattern

    Both flows share one frame: a title that says what to do, a step counter, a coin grid and a network list. The second flow cost less to design and asks nothing new of its user.

    Trade-offA quick transfer still takes four screens and a confirmation, where a single form could hold every choice at once.

  3. 03

    Every check comes before the money moves

    Deposit warns to send only the chosen coin on the chosen network. Withdraw checks the address before asking for the amount, stops when the balance is under the minimum, and repeats the network, address, fee and total before anything is sent.

    Trade-offEach check is one more message or screen before a transfer goes out, and the confirmation repeats what was just entered.

Wallet

Every coin in dollars, the latest operations below

The wallet opens on the balance in dollars, with Deposit and Withdraw right under it. Nine coins follow, each with its amount and dollar value, and a coin at zero dims its icon to half.

Telegram keeps its header and menu, so the balance, both actions and the first coins fit between them.
The history lives on the same page: five recent operations, then one button for all 128.
Twelve row types tell every kind of operation apart: numbered checks, a red mark on failed trades.

Deposit

Three counted steps: coin, network, address

Deposit takes three steps, and the header counts them. A picked tile or row lights up in its own colour, and Next step stays dim until something is picked.

Deposit, step by step

  • Step one: each tile lists its networks, and Next step stays dim until a coin is picked.
  • Tether picked: the tile takes Tether's green, and Next step lights up.
  • Step two: the three networks Tether arrives on, with Tron picked in Tron's red.
  • Step three: the address and its warning, with coin and network repeated so both can be checked here.
  • Copy answers with Address copied over the field, then hides after a second and a half.
  • The address as a QR code with the CryptoBot mark, the warning repeated above it.

Withdraw

The same steps, counted to four

The counter goes to four, because the address to send to and the amount follow the network. A confirmation, an offer to save the address and a receipt close the flow.

Both flows lined up by step: the same coin grid, network list and step bar, withdraw one longer.

Withdraw, step by step

  • Step one of four: the coin grid from the deposit, with Tether picked.
  • Step two: the network list, with Ethereum picked in Ethereum's colour.
  • Step three: the address comes before the amount, with a contacts icon at the end of the field.
  • Step four: the amount in USDT or dollars, with the balance, minimum and fee right under the field.
  • The confirmation: network, address, what arrives with its fee, and the total in blue, all before Confirm.
  • After confirming, an offer to save the address under a name, with a button to skip it.
  • The receipt: the transaction number to copy, the fee and the total, and a link to Etherscan.

Errors

Three error states, each reachable in the prototype

Picking Tron at step two leads to Not enough coins, with a button back to the networks list. At step three, an empty address field and an address that fails its check each turn red with a message.

Not enough coins: the balance beside the minimum and the fee, so the reason is on the screen.
An empty address field: the field turns red and says what it needs.
An address that fails its check: the address itself turns red, with a message to try again later.
The address book's name field from the kit: focused, filled, left empty, past the 32 character limit.

Kit

All 26 pages are variants of one component

The pages are built from a kit of 49 component sets, and the prototype runs on it: moving between pages is a variant swap with Smart Animate, the same as a button being pressed.

A tile, a row and Next step down their states: the variants the prototype swaps between.

Dark theme

  • Black#000000The base, under blurred blue glows
  • Blue#44A3DDActions, the balance label and the total
  • Green#44DD5CA transaction that went through
  • Red#DD4444Errors and Not enough coins

Light theme

  • Pale#F1F0F6The light base
  • Blue#44A3DDThe same blue for actions

Coins

  • Tether#53AE94A picked tile and a coin with a balance take its colour
  • Ethereum#627EEA
  • USD Coin#2775CA
  • Toncoin#0088CC
  • Bitcoin#F7931A
  • Binance Coin#F0B90B
  • Tron#FF0103
  • Litecoin#345D9D
Type
SF Pro DisplayBold for names, labels and buttons, Medium for amounts and network lists

Themes

Dark drawn in full, light only started

I drew the whole flow in the dark theme, then built the light one from it on a pale base. Light covers the wallet, its loading state and the first deposit step, and every other page exists only in dark.

  • Both themes have a loading wallet: grey placeholders under a thin blue bar
  • The prototype starts from four points: each theme, loaded and loading
Dark
Light
Both themes on one frame, so the light wallet can be checked against the dark one.

Results

A clickable iOS prototype: from the balance into both money flows and back, with the failures drawn, dark throughout and a light theme started.

26 pagesin the prototype, from the loading wallet to every state of both flows
1 patternfor both directions: deposit in three steps, withdraw in four
3 error statesin withdraw: not enough coins, an empty address field, an address that fails its check
12 row typesfor the history, from coin deposits to checks, invoices and market trades

Reflection

  • In a Mini App the frame belongs to Telegram: designing inside 390 by 659 points shaped the wallet more than any choice of style.
  • A light theme built from a finished dark one starts fast and finishes slow. Next time I would carry both page by page, with colours in shared styles.

Next

Uber redesign