Axal

Jump to Solution

Designing end-to-end flow to democratizing decentralized-finance .

Axal is an a16z-backed yield lending platform that makes decentralized finance simple, secure, and accessible. As the only designer on the team, I focused on bridging the gap between traditional finance and decentralized finance, making participation more inclusive and less intimidating by leading the 0-1 process in design. I also learned a ton about decentralized-finance and lending protocols.

[1]

Overview

Project Type: Full-time Design Engineer

Role: Product Designer collaborating with engineers

Duration: June 2025 - Present (Gap Semester)

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

Final Product Preview

I designed and coded production-ready UIs, and shipped onboarding and marketing experiences that scaled the platform to:

Unique Active Users

1,300+

Deposit Amount

$3.4M

Social Media Impressions

300k+

[2]

My Role

[3]

Process Timeline - Double Diamond

STAGE one - Week 0-2

Research & Understanding

STAGE TWO - Week 2-4

Synthesis & Framing

STAGE three - Week 4-6

Ideation & Prototyping

STAGE four - Week 6-8

Implementation & Testing (LAUNCH DAY)

[4]

Business Goals

1/Simplicity

Simplify blockchain abstraction for users not familiar with blockchain and defi.

3/Credibility

Elevate Axal’s trustworthiness through high-quality design and marketing experiences.

2/Technicality

Build and engineer a scalable design system to maximize conversion.

To deepen my research, I analyzed Axal’s v1 onboarding flow step by step in Posthog.

I mapped out exactly where users were dropping off: the seed phrase step, unexplained jargon like “gas fees,” and the confirmation screen before first deposit.

Before I joined, Axal launched their V.1 product for yield optimization. But the product was plagued with high-churn rate and lack of trust and security.

[5]

Existing UX

V.1 Autopilot Onboarding Flow - pretty sure the team might have vibe coded this before me :p

[6]

Major Churning Points

I mapped user retention across key touch points in the user journey to identify major churn points. These include the lack of secret key protection, intimidating color scheme, and just overall unintuitive UX.

To deepen my research, I analyzed Axal’s v1 onboarding flow step by step in Posthog.

I mapped out exactly where users were dropping off: the seed phrase step, unexplained jargon like “gas fees,” and the confirmation screen before first deposit.

[5]

Research/Personas

I started by conducting in-depth interviews with product leads and design counterparts from Coinbase, JP Morgan, and Stripe.

My goal was to understand how these organizations thought about onboarding, wallet creation, and user profiles. These interviews informed my creation of different user personas for Axal.

I also started conducting in-depth competitive research in centralized exchanges and brokerages toI document how many steps they required, how they introduced deposit, and what trust signals they used. This gave me a library of patterns to borrow or avoid.

[7.1]

Competitive Research

[7.1]

Competitive Research

Key Findings:

Onboarding flows diverge between Centralized Exchanges and DeFi.

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

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.

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.

My research and interviews with our whitelisted beta-users informed my planning for different type of Axal users with varying level of blockchain knowledge.

[7.2]

User Personas

[7.2]

User 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.

"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."

Start small: deposit ~$50 and make his first crypto purchase. Learn gradually without feeling overwhelmed. Be reassured that his funds are safe and recoverable.

Deposits funds but hesitates before hitting “Confirm.” Completes the first deposit but isn’t confident he could do it again alone.

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.

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.

Manage wallets and chains seamlessly. Customize gas, slippage, and transaction details. Reuse past actions quickly. Verify everything with direct links to block explorers.

“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."

Dana is 33, a freelance developer who’s been in crypto since 2017. She actively uses MetaMask, Phantom, and multiple DeFi protocols.

User Journey

Goals

Quote

Runs a test transaction, then looks for gas controls. Checks history to confirm it posted correctly. Considers adopting Axal if it offers more flexibility.

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.

Requests documentation and transaction logs on block explorer. Prepares a report for internal leadership.

"I need to trust that this platform is compliant and auditable. Without clear breakdowns and transaction hash, we can’t even consider adoption."

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.

Goals

I synthesized all the insights into actionable features using an affinity map for brainstorming, where I clustered ideas directly from user pain points.

To prioritize, I plotted these on a 2x2 impact–effort matrix, which helped us focus on high-impact, low-effort solutions like clearer microcopy and guided onboarding, while postponing heavier lifts like multi-chain wallet management.

[8]

Affinity Mapping

[8]

Affinity Mapping

[9]

Converging Ideas

After converging on our teams ideas, I focused on designing features that emphasized simplicity and trust:

making wallet creation as seamless as signing up for a centralized exchange,
building a clean, minimal dashboard that surfaced only essential actions to avoid overwhelming users,
incorporating clear and reassuring microcopy throughout onboarding with clear chain logos,
embedding credibility signals like partner logos to reinforce user confidence from the start.

I began prototyping Axal’s low-fidelity mockups in Figma, with simple wireframes using plain colors, minimal styling, and just the Axal logo. I made sure to streamline and simplify the UX flow as much as I could with each screen only having one CTA, inspired by Robinhood

My focus wasn’t on visual polish yet, but on mapping the sequence of steps and testing how users would move through wallet creation, deposits, and withdrawls. This stripped-down approach allowed me to quickly validate the flow without the distraction of detailed UI design.

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

[10]

Starting the Designs

Dashboard

The stripped-down, rough prototype of Axal’s dashboard. The design leans 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

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, conveying reliability and credibility.

Incorporating OTP-based login and then continuing seamlessly with wallet connection.

Deposit. Page

On the left, the wallet balance is displayed in fiat first with supporting crypto denominations shown second.

The right side presents a clean confirmation and top up interface with clear action buttons for bank, card, or crypto deposits.

Abstracts away blockchain complexity, such as chain addresses, gas fees, or wallet delegation.

WAIT…

LET'S DO A SANITY CHECK

[11]

Iterative Feedback

After completing the lo-fi designs, I felt I had captured the Web3 aesthetic quite well, so I ran a quick design sanity check with both colleagues and users ranging from crypto natives to whitelist newcomers.

The feedback was mixed, and one key theme stood out: the current Web3-inspired look: sleek gradients and glossy glass effects, did not communicate trust or credibility. Instead of feeling established and reliable, the design came across as flashy and less trustworthy. This made me realize that the standard Web3 visual language may not be the right fit for Axal.

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

My low-fidelity testing gave me valuable validation: users understood the flow and always knew what step they were on, which confirmed the information architecture was solid.

The main critique was that people felt the interface “worked” but didn’t look right.

This feedback pushed me to move beyond black-and-white wireframes and start exploring a color theme and visual identity that could give Axal’s product a sense of personality, trust, and polish, while still keeping the overall experience simple and accessible.

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

[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]

The Solution

A user-friendly platform that makes decentralized finance lending accessible to everyone, combining a sleek, modern design with an intuitive and welcoming experience that feels familiar even for traditional Web2 users.

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

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

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]

More Issues Arise

Right before launch we identified a major security gap around wallet private key export and first time logouts, which made multi factor authentication essential.

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

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. 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.

Referral

Added referral designs for max conversion and network effect post-launch. Users can input another user's referral code to earn mutual benefits with boosted APYs, listing clear advantages to convey trustworthiness.

I ran an A B test on the onboarding layout to see whether a single page scrolling experience or a step by step experience produced higher first deposit completion. I instrumented both flows with Posthog events, split our whitelisted users randomly, and ran the experiment for a week.

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

[15]

A/B Testing

Hypothesis:

A step-by-step onboarding would reduce cognitive load and increase first deposit completion compared to a single-page flow.

Setup:

Built two variants (single-page vs. step-by-step), instrumented with Posthog, and split ~200 new users randomly over three weeks.

Metrics:

Primary metric was first deposit completion; secondary metrics were time to deposit and seed phrase drop-off.

Results:

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%.

Decision:

Step-by-step was statistically significant (p < .01), so we rolled it out as the default while monitoring retention in Posthog.

I would talk more about my final design, but my designs are live, so you can actually just go check it out yourself at axal.com!

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

FINALLY

KEY TAKEWAYS

Even though I was the only designer at Axal, I never designed in a vacuum. I made it a priority to stay in constant conversation with both engineers and users. This rhythm not only helped me grow as a designer by sharpening my collaboration and research skills, but it also helped us grow the product itself, ensuring every feature was both technically sound and genuinely valuable.

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

[16]

Never design in a vacuum

At Axal I learned how closely design and engineering can work together. Before this job I did not even have a GitHub account, but I quickly started pushing everything I designed directly into code using TypeScript and CSS and deploying straight to development and production. I became half designer, half engineer, and discovered that being technical is never a drawback. In fact it is far more helpful than being purely one or the other. 1+1≥2

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

[17]

Designers can be technical

Seeing my designs go live on launch day and be featured by Ethereum Foundation and MoonPay was surreal. Watching real users interact with my work and receiving feedback from the broader crypto community taught me lessons that no classroom ever could. I realized especially in a lean startup, every opportunity to learn must come from me, as there's no "professor" that teaches you ways to navigate obstacles.

Project type: Product Design

Role: Sole Design Engineer

Duration: June 2025 - Present

Tools: Figma, Adobe Illustrator, Blender, Typescript, CSS, Github, Posthog

[18]

Eager to learn; Be a Sponge

®2024

®2024

®2024