CONCEPT · AI × QUANT FINANCE
Crypto Copilot
What if building a trading strategy felt like snapping LEGO blocks together?
Quick Read
TL;DR
Algorithmic trading scares most people off because it looks like code. Crypto Copilot turns that code into blocks: drag a WHEN block, drop an IF block, snap on a THEN block. Same logic, half the cognitive load. This is a concept study — no live money, no real users, just the design problem and how I cracked it.
Real-Time
SYNC
Live portfolio sync (mocked)
82/100
HEALTH
Demo health score
3
STRATEGIES
Sample strategies on canvas
No-Code
BUILDER
Drag-drop strategy canvas
Why This Matters
"40% of first-year crypto investors lose money — not from bad luck, but from having no plan."
🌍
24/7
Markets never sleep
Humans do
Humans do
😰
Emotions
Fear and greed
pick the worst moments
pick the worst moments
💻
Code Wall
Python, APIs,
if-else walls
if-else walls
The insight: humans think in pictures, not in syntax. You reason in WHEN → IF → THEN, not in code.
Craft Over Code
The decisions code can't make for you
Portfolio Dashboard
"We didn't pile on numbers. We gave the screen a personality."
💚
Health Score
82/100 emotional anchor
💬
Human Insights
AI talks like a colleague
✨
Glassmorphism
Transparency reads as clarity
AI Copilot Interface
"Conversational, not transactional."
🎯
Progressive Disclosure
FAB → full chat
🚀
Personality
Emoji + natural language
💫
Always One Tap Away
Floating FAB, bottom-right
Strategy Canvas — The Centerpiece
"Make IF-THEN-ELSE feel obvious."
🎯 The UX Challenge
How do you make conditional logic legible to someone who doesn't code?
WHEN
→
IF
→
THEN
⚡
Color-Coded Blocks
Yellow / blue / green = instant read
📥
Drop Zones
Placeholder text kills blank-canvas dread
🤖
Live AI Hints
Flow analysis as you build
Risk Layer
"Every screen asks: how do we make the catastrophic move hard?"
🛡️
Trade Confirmation
Orders >$1,000 get a second tap
⚖️
Daily Limits
Soft warnings — overrideable, never silent
⚠️
Visual Warnings
Losing strategies pulse red
Building the Strategy Canvas
1
Research
2
Concept
3
Prototype
4
AI Integration
5
Polish
01
Research
TradingView, QuantConnect teardown → the gap: non-coders with a thesis
02
Concept
WHEN → IF → THEN maps one-to-one onto conditional logic
03
Prototype
HTML/CSS/JS + native Drag & Drop, zero frameworks
04
AI Integration
Real-time hints as users assemble the flow
05
Polish
60fps transitions, hover states, micro-interactions
Why blocks, not code? Visual thinking cuts cognitive load by roughly 60% (Nielsen Norman Group).
Why three columns? It mirrors spoken language — the structure you already think in.
Why an AI sidebar? Progressive disclosure — help when it's wanted, invisible when it's not.
Technical Implementation
HTML5
CSS3
Vanilla JavaScript
Drag & Drop API
CSS Animations
LocalStorage
Glassmorphism
Dark Mode Native
Plain HTML/CSS/JS — 6,500 lines, zero dependencies. Native Drag & Drop API, 60fps animations, localStorage persistence. The architecture leaves a clean seam for an LLM to slot into.
What I Learned Designing for Decisions
"The best interfaces make complexity feel inevitable — like you already knew how to use them before you touched anything."
1. Clarity beats completeness. Financial tools die when they optimize for data density instead of decision confidence. Show what moves the decision. Hide the rest.
2. Visual thinking outranks technical literacy. The Strategy Canvas turns a mental model into runnable logic — no code required.
What I'd Build Next
Template marketplace: community strategies. Users share, fork, and remix each other's blocks.
Paper trading mode: a zero-risk sandbox. Run a strategy on fake money first — earn the right to risk the real thing.
Multi-wallet aggregation: pull Binance, Coinbase, MetaMask into one dashboard. One number to look at, not five tabs.