Crypto Prediction Market Platform

End-to-end design and front-end for a DeFi options app (web, iOS, Android), including its design system and brand.

Client: Rolla
Role: Senior Product Designer & Front-end Developer
Timeline: 2021 — 202326 months
Skills: Web3 UX, React, Next.js, TypeScript, Data Visualization, Mobile App Design, Design System, Frontend Development, Product Design, Brand Design

Case study

Rolla is a DeFi options platform for short-term crypto price predictions — built to be simple enough for newcomers without dumbing down the trading.

I was the product designer and a front-end developer for over two years: I designed the product end to end, created the brand and the cross-platform design system, and shipped production React/Next.js code for the web app. The result: a landing page, a responsive web application, and iOS and Android apps with one consistent experience.

Process

01
Discovery
The core question: how do you make options trading approachable for people new to crypto, without losing what experienced traders need?
02
Requirements
Reliable real-time prices, secure wallet connection and fast trade execution — all behind an interface that hides blockchain complexity.
03
Design & Prototyping
I prioritised clarity: one decision per step, minimal UI and plain language, refined over quick prototype rounds with the team.
04
Design System
I built a design system covering web and mobile, which let us move from idea to shipped screen quickly.
05
User testing
Testing with target users refined the trade flow and how price data is shown on charts.
06
Front-end engineering
I built trading-form and chart components in React/TypeScript, documented them in Storybook, and built the Next.js views for trading, positions and withdrawals.

Main features

Trading form
Pick an asset, a direction (up or down) and an expiry — the whole trade in three choices.
Trading form
Trading Chart
Live chart showing your open trades and their expiry. Hovering Up or Down previews that direction on the chart. Includes the asset selector, chart types and P&L.
Withdraw
Withdraw on-chain or through an integrated fiat provider.
Withdraw

Mobile app· Selected screens

Trading
Pick an asset, direction and expiry
Trades
Net portfolio value with income and loss over time, a forecast past the current moment, and the list of active positions with their countdowns.
Position details
One position end to end: the asset, forecast P&L, market, collateral, strategy, strike and payout, and the expiration clock.
Bridge
Review a cross-chain transfer before sending: from and to networks, routing, estimated time, minimum received and every fee spelled out.
Profile
Wallet and identity in one place: the address with a network switch, the balance with deposit, bridge and withdraw, and token holdings.
Settings
Theme, language, address book, security and trading defaults such as base currency, chart style and order submission.

Design System

Colour tokens
The semantic palette: page, card, nav and modal surfaces, pressed and hover states, borders, disabled and muted text, link and focus. Each is a named token shared by web, iOS and Android.
Buttons
Every button the app uses: brand blue, green and red for up and down, neutral and ghost styles, all sizes, icon-only, loading and disabled, in light and dark.
Asset rows
The list row for an asset in all its states: symbol and name, amount and value, a change badge and a countdown; selected, default and placeholder.
Trading chart across breakpoints
The same chart with open trades and expiries on a phone, a small tablet, a wide tablet and desktop, with the trade panel docking to the side when there is room.