Axal
Designing end-to-end flow for a decentralized-finance platform.
Axal is an a16z-backed yield lending platform that makes decentralized finance simple, secure, and accessible. My design focused on bridging the gap between traditional finance and decentralized finance, making participation more inclusive and less intimidating. In this case study I discuss my desktop designs, but I made the mobile version as well.
[1]
Overview
Final Product Preview and Launch Video
I joined as the first and only designer, eigth hire of the entire company, responsible for both product design and frontend implementation. I built the design system, designed and coded production-ready UIs, and shaped onboarding and marketing experiences that scaled the platform to 1,300+ users and $2.3M in deposits.
[2]
My Role
[3]
Process Timeline - Double Diamond
STAGE one - Week 0-2
Research & Understanding
Conducting user interviews
Mapping user pain points.
Benchmarking competitor.
STAGE TWO - Week 2-4
Synthesis & Framing
Creating user personas for different users.
Defining core churning problem in on-boarding
Prioritizing design goals for wallet and deposit.
STAGE three - Week 4-6
Ideation & Prototyping
Sketched and prototyped onboarding flows
Building the Axal design system with color and UI.
Conducted lo-fi usability testing with beta users
STAGE four - Week 6-8
Implementation & Testing (LAUNCH DAY)
Designing and coding hi-fidelity onboarding UIs.
Integrating onboarding live wallet creation and on-ramping.
Running AB tests, and producing marketing content.
[4]
Project Goals
Simplify wallet creation, on-ramping, and blockchain abstraction for non-technical users.
01
Build a scalable design system to unify product, engineering, and maximize conversion.
02
Elevate Axal’s brand credibility through high-quality design, reaching both users and investors.
03
Stage One
RESEARCHING
[5]
Research/Personas
Newbie Nevin
The Cautious Beginner
Background
Nevin is 29. He’s curious about crypto because his friends talk about it, but he’s hesitant. Most of his experience is with mainstream fintech apps like Robinhood and Venmo.
Goals
Start small: deposit ~$50 and make his first crypto purchase. Learn gradually without feeling overwhelmed. Be reassured that his funds are safe and recoverable.
User Journey
Clicks an ad or link from a friend and lands on Axal’s site. Starts wallet creation, passes OTP, pauses at the seed phrase step, unsure what it means. Reluctantly copies it down but feels anxious about losing it. Deposits funds but hesitates before hitting “Confirm.” Completes the first deposit but isn’t confident he could do it again alone.
Quote
"Crypto sounds exciting, but this feels way too complicated. I just want a safe, simple way to get started without worrying I’ll mess everything up."
DeFi Dana
The Power User
Background
Dana is 33, a freelance developer who’s been in crypto since 2017. She actively uses MetaMask, Phantom, and multiple DeFi protocols.
Goals
Manage wallets and chains seamlessly. Customize gas, slippage, and transaction details. Reuse past actions quickly. Verify everything with direct links to block explorers.
User Journey
Logs into Axal with a test wallet to see how it compares. Appreciates the clean defaults but searches for advanced options. Runs a test transaction, then looks for gas controls. Checks history to confirm it posted correctly. Considers adopting Axal if it offers more flexibility.
Quote
“I know what I’m doing, don’t dumb it down for me. Give me speed, control, and transparency so I can trade and deposit the way I want."
Regulator Raj
The Institutional Evaluator
Background
Raj is 41, head of digital assets at a financial institution. He doesn’t trade personally. Instead, he evaluates platforms for compliance, custody, and auditability.
Goals
Confirm custody model and legal compliance. Run test transaction with burner wallets. Ensure role-based access and enterprise-grade controls over fund distribution in de-fi protocols.
User Journey
Meets Axal’s team at a crypto conference. Sets up a OTP and temporary wallet for test deposits. Reviews wallet creation and onboarding from a compliance perspective. Requests documentation and transaction logs on block explorer. Prepares a report for internal leadership.
Quote
"I need to trust that this platform is compliant and auditable. Without clear breakdowns and transaction hash, we can’t even consider adoption."
[6]
Existing UX Diagram
User Flow Diagram
[7]
Competitor Research Findings
Onboarding flows diverge between Centralized Exchanges and DeFi.
01
CEXs emphasize email/password and procedural funding after login, while DeFi apps push wallet-only onboarding to encourage connection. Axal should choose either wallet-first onboarding or adopt a clear Web2-style email login flow
02
Preset deposit amounts increase conversion and ease of use
Both CEXs (Robinhood, Coinbase) and DeFi apps (Yo) use default funding amounts (e.g., $50, $100, $200, max). These anchoring values reduce cognitive load and decision friction, speeding up deposits.
03
Trust-building microinteractions and progress indicators are critical
Robinhood and Coinbase use structured layouts and drill-downs to show reassurance transactions in motion. Loading states, active chain indicators are essential for DeFi credibility.
Stage Two
BRAINSTORMING
[8]
Affinity Mapping
[9]
Converging Ideas
Stage Three
PROTOTYPING
[10]
Starting the Designs
Dashboard
This is a stripped-down, rough prototype of how I envisioned Axal’s dashboard. The design is intentionally simple, leaning toward a bento-box style layout with clear statistics and prominent numbers displayed in fiat.
The goal is to make key information easy to read and remove any confusion that might come from crypto-native representations.
Strategy Breakdown
For the strategy page, I envisioned a pie chart where each segment would use clean gradients and distinct visual blocks to highlight which strategy the user is currently allocated to.
This breakdown serves as an intuitive way to help users quickly understand their investments through a clear, visual representation.
Onboarding Page
For the onboarding flow, I imagine Axal taking a very Web2-like approach, similar to centralized exchanges, since this conveys reliability and credibility while minimizing confusion for both Web2 and Web3 users.
By incorporating OTP-based login and then continuing seamlessly with wallet connection, users can experience a familiar entry point while still being able to easily connect through a Chrome extension or external wallet.
[11]
Design Sanity Check
Stage Four
ITERATING
[12]
Color Scheme and Branding
Gradient Backgound
In coordination with the team, we aligned on moving away from the flashy Web3 aesthetic and settled on gradient backgrounds that convey more trust and credibility. Specifically, the sage green, cream, and blue gradients feel smooth and mellow, projecting confidence while creating a sense of calm.
This stands in direct contrast to the typical high-gloss, high-saturation Web3 and DeFi designs, allowing Axal to differentiate itself while feeling more welcoming and inclusive to a broader audience..
Typography
Together with the team, I also explored typography and agreed on the Test Sohne family. It strikes the right balance between professionalism and approachability
The structured letterforms convey stability and seriousness, while the sans-serif style softens the tone, making the interface feel open, friendly, and easy to engage with.
[13]
Layout and Flow
Login Page
It also helped align with my design goal of reducing cognitive load by giving the main flow room to breathe while keeping instructions easy to follow. I also maintained a principle that one page should always have one clear CTA, as this is the best flow for fintech and keeps users focused on progressing through the journey.
Strategy Breakdown
For the strategy breakdown, I still carried on the low-fidelity version of a pie chart, but by combining a brighter color scheme and putting the main metrics of a liquidity pool on top, it definitely helped with conveying sensitive financial information.
The graphic on the left also helps maximize conversion by illustrating the difference between Axal's yield and other financial tools
Depositing
When it came to funding the wallet, I deliberately stripped the options down to only the three most essential methods:
(1) depositing by directly copying the wallet address,
(2) connecting to an external wallet, or
(3) scanning a QR code.
By limiting choices to these bare bones essentials, the design avoided overwhelming users. I also put in our security partners' logo for credibility.
Dashboard
The Axal dashboard is designed to make decentralized finance feel simple, credible, and approachable by presenting information in a clean, familiar fintech style.
The snapshot card acts as the central focal point and heatmap for the user, immediately clarifying how much has been invested, earned, and the current APY, which builds trust and reinforces transparency.
Supporting elements like fiat denominated balances, a familiar performance chart, and bento style position cards reduce confusion and create an intuitive and confidence inspiring experience that differentiates Axal from the cluttered norms of Web3 dashboards.
[14]
Loading State and Microcopy
Wrapping up
TESTING
[15]
More Issues Arise
MFA Setup
I had to implement MFA quickly, integrating support for authenticator apps and ensuring sensitive steps like recovery key display and QR code sharing were properly protected.
Exporting Private Key
This included safeguards such as blurred QR codes and deliberate confirmation patterns, often referred to as destructive action confirmation, where users must take multiple clear steps to confirm they really intend to proceed.
These measures were critical to making the flow both secure and user aware without adding unnecessary friction.
[16]
A/B Testing
Hypothesis:
01
A step-by-step onboarding would reduce cognitive load and increase first deposit completion compared to a single-page flow.
02
Setup:
Built two variants (single-page vs. step-by-step), instrumented with Posthog, and split ~200 new users randomly over three weeks.
03
Metrics:
Primary metric was first deposit completion; secondary metrics were time to deposit and seed phrase drop-off.
Results:
04
Completion rose from 62% → 74% (+12 points, ~19% lift). Median time to deposit dropped from 5.2 → 3.8 minutes. Seed phrase drop-offs fell ~30%.
05
Decision:
Step-by-step was statistically significant (p < .01), so we rolled it out as the default while monitoring retention in Posthog.
FINALLY
KEY TAKEWAYS
[17]
Never Design in a Vacuum
[18]
Designers can be Technical
[19]
Be a Sponge