Skip to content
Back
CryptoNight app icon, a faceted crystal
Playground•Personal Project

All your crypto in one place, instead of six tabs and a spreadsheet.

Because crypto never sleeps.

CryptoNight is a concept for how a wallet connector could work: every exchange and wallet aggregated into a single portfolio view. I designed it for fun, to see the idea through end to end.

The idea started in 2019, when my own portfolio was scattered across too many exchanges to track by hand. I sketched a lo-fi first pass in Adobe XD to get the concept down, then let it sit. I came back to it in late 2020, mid-pandemic, and rebuilt it from scratch in Figma with everything I’d learned since.

Type
Personal Project
Focus
Fintech / Crypto UX
Tools
Adobe XD, Figma

Early concept

The first pass, sketched in Adobe XD in 2019.

Before the Figma rebuild, this was the original prototype: a watchlist of top gainers and losers, a buy/sell trade screen, and a portfolio balance with a news feed. Most of the ideas held up; the execution didn’t.

The working file

The 2019 Adobe XD file the screen above came from.

Login, Watchlist, and the trade flowchart, laid out in the original XD document before any of it moved to Figma.

CryptoNight 2019 Adobe XD file showing the Login, Watchlist, and Flowchart frames

The problem

How do you give a multi-exchange trader one honest number for what they own?

Crypto holdings live wherever the user chose to buy: an exchange for spot trading, a hardware wallet for cold storage, a DeFi wallet for staking. Most portfolio trackers either support a narrow set of integrations or ask users to hand over a full-access API key just to see a balance. The design hypothesis was that multi-exchange traders need one number they can trust, updated on its own, without handing over more account access than a balance needs.

Persona

Meet Adrian.

Hypothetical persona for a personal concept, not drawn from formal research.

Portrait illustration of the persona Adrian Kessler
Age
29
Occupation
Product Manager
Status
Married
Location
Berlin, Germany

Description

Adrian works in fintech and trades across four exchanges plus two hardware wallets. He checks prices constantly but has never had one clean view of what he actually owns, so he keeps track of it by hand in a spreadsheet.

Personality

IntrovertExtrovert
AnalyticalCreative
BusyTime Rich
MessyOrganized
IndependentTeam Player

Tags

Data-drivenSkepticalEfficientRisk-aware

Pain points

  • Manually copies balances from four exchanges and two wallets into a spreadsheet every week.
  • Has no single view of total exposure by asset across every account.
  • Missed a rebalancing opportunity because a 20% swing went unnoticed for days.
  • Doesn't fully trust a “connect your API key” flow without a clear read-only guarantee.
  • Wants a quick answer to a market question without opening six different apps.

Scope

The four things it had to do.

01

Multi-Wallet Aggregation

Connect exchanges and wallets through read-only API keys, and see one consolidated balance instead of six separate ones.

02

Real-Time Market Data

A ranked watchlist with live price and 24-hour change, so prices sit right next to the portfolio.

03

AI-Assisted Research

A chat assistant for quick market questions, with a visible disclaimer on every answer.

04

Security-First Connections

Read-only access by default, encrypted key storage, and a visible toggle, so people can see how their keys are protected.

Competitive landscape, 2019 — 2020

The gap between what existed then and what multi-exchange traders needed.

CoinStats

At the time, broad exchange support, but a cluttered interface that buried the total balance under promotional content.

Zerion

At the time, clean DeFi wallet tracking, but weak support for centralized exchange balances.

Delta

At the time, simple tracking built mostly around manually entered trades, so holdings drifted out of date between updates.

Zoomed out, price data, portfolio tracking, and wallets were three separate categories in 2019 and 2020, each solving one piece of the problem and none of them the whole thing.

PlatformCategoryRole
CoinMarketCapMarket DataThe default price reference at the time; no portfolio tracking of its own.
CoinGeckoMarket DataBroader coin coverage than CoinMarketCap, but still just prices, not a portfolio view.
BlockfolioPortfolio TrackerThe most popular mobile tracker at the time, built around manual entry.
MetaMaskWalletBrowser-based Ethereum wallet with no cross-exchange or cross-chain view.
Trust WalletWalletMobile multi-chain wallet, still one wallet at a time, no aggregation.

CryptoNight’s angle

Read-only connections to both wallets and exchanges, plus an assistant you can ask about a coin without leaving the app.

Screens

Six screens from the Figma build.

Sign In

Email sign-in, with Google and Apple as one-tap options.

Portfolio

Total balance across every connected wallet, plus a per-wallet breakdown by asset.

Watchlist

Ranked market data with live price and 24-hour change, at a glance.

CryptoNight connect wallet screen

Connect Wallet

API-key connection to an exchange or wallet, read-only by default, with encrypted key storage.

Assistant

A chat interface for market questions, with a clear disclaimer that it's analysis, not financial advice.

News

A filtered news feed, tagged by asset and topic, surfaced next to the portfolio it affects.

Light & dark mode

Designed for any hour.

Traders check prices at all hours, so I designed every screen in both themes from the start. Drag each screen to compare.

CryptoNight Bitcoin detail screen in dark modeDark
CryptoNight Bitcoin detail screen in light modeLight

Coin detail

CryptoNight article detail screen in dark modeDark
CryptoNight article detail screen in light modeLight

Article

Brand guidelines

A crystal that glows in the dark.

The mark is a six-facet gem on a near-black tile, drawn to sit right at home in the dark theme. Below: the geometry behind it, and where its mint shows up across the app.

CryptoNight logo construction sheet: the crystal on a 120-unit grid with its four outer corners and two inner points labeled, the angles of its top and bottom edges, a five-part anatomy legend, clear space, minimum sizes and four misuse examples
Construction. Four outer corners and two inner points cut the gem into six facets, alternating mint and cream so it reads as lit from one side.
CryptoNight color guide: eight swatches with hex and RGB values and roles, a bar showing how much of each color the dark-mode screens use, and four text pairings with WCAG contrast ratios
Color. About 94% of the dark screens are near-black, so Signal Mint does the talking. It needs dark text, and Gain Green only passes contrast on the dark theme.

Component library

Built from a handful of parts.

Every screen is put together from the same few components: six colors, one typeface, one pill shape. Here they are as live components, so the chips, switch and tabs below all work.

CryptoNight design system illustration: the app's components laid out in perspective on a dark surface, including the price module with range chips, the mint Connect Wallet button, form fields, the read-only switch, the tab bar, tags and stats, six color swatches, the crystal app icon and an Inter type specimen

Color

Night#0B0B0D
Surface#1C1C1E
White#FFFFFF
Gray#858586
Signal Mint#77F2BA
Gain Green#65C466

Type · Inter

$113,383Display 32 / Bold

Key StatsTitle 20 / Semibold

Market CapBody 15 / Regular

API KEYLabel 12 / Semibold caps

Price module

$113,383

+2.34% today
Display price, a tinted change pill and a one-stroke line. The range chips redraw the line; the active chip is outlined in mint, never filled, so it never competes with the price. Try them.

Buttons

48 tall, full pill. One mint primary per screen, with dark text; the outline is the alternative and the text button goes back.

Form fields

Mint caps label above a surface field; a picked value gets a check. Focus draws a mint outline.

Toggle row

Read-Only AccessRestrict API to read-only permissions for enhanced security.
A setting in a card: title, one line of why, and a switch that turns mint when on.

Stat list & tags

BITCOINTRENDING
Market Cap
$2.25T
24h Volume
$48.5B
Circulating Supply
19.78M BTC
Label left in gray, value right in white, hairlines between. Tags: outlined mint for the asset, tinted red for urgency.

Tab bar

Four destinations, icon over label. The current one sits in a mint pill with a dark icon. Tap around.

Prototype

Tap through the Figma prototype.

An interactive prototype starting from the Portfolio screen, built in Figma.

Closing note

A problem I actually have.

No client and no deadline. Just something I live with: too many exchanges and wallets and no single number I can trust.