Haven1

Designing an accessible Web3 portal by delivering a consistent UX and a scalable design system.

Haven1 set out to create a secure and user-friendly Web3 portal that lowers the barrier for newcomers while maintaining depth and transparency for experienced blockchain users. The goal was to unify fragmented DeFi tools: bridge, swap, staking, NFTs, and many more, into a cohesive ecosystem where anyone can interact confidently.

As one of two product designers, I helped craft the full user experience and developed a design system that accelerated delivery, improved developer handoff, and ensured long-term visual and functional consistency.

Live Product:

https://portal.haven1.org/

Period:

2023-2025

Deliverables:

Multi-product Web3 Portal
Scalable Design System
Core dApp Interfaces

Team:

2 Product Designers (Lead + Me)
12 Developers
1 Product Manager
1 QA Engineer

Abstract dark background with deep blue gradient and subtle grid lines.MacBook laptop displaying the Haven1 hApp Store dashboard with navigation menu and app options.

The Challenge:
Building a scalable foundationwhile shipping fast

Haven1 was scaling 15+ DeFi products in parallel: Bridge, Swap, Staking, NFTs, etc, and other platform functions while preparing for Testnet launch.
Without a shared system, every new feature required re-creating basic patterns, slowing down design  team (4 team members at the beginning) and development.

My goal was to establish a scalable, developer-friendly system that could evolve with the product instead of blocking it.

Approach & Process:
From fragmented screens to a unified language

The process began with defining a clear semantic token structure - building a foundation for consistent color, typography, and spacing logic across all apps.
After that, we conducted a design audit of created products - Bridge, Swap, Staking, etc
- to identify repeating UI patterns and opportunities for systematization.

Based on these findings, we created reusable components and aligned them with developers through close collaboration, ensuring technical feasibility and smooth token mapping for implementation.

Key Steps:

Building the Design System

1. Structure & Tokens

Established color, typography, spacing, and layout foundations.

2. Audit & Alignment

Gathered visuals from 6+ dApps, mapped inconsistencies.

3. Component System

Unified UI elements with clear naming and logic.

4. Developer Collaboration

Introduced Dev Mode and props for clean React mapping.

5. Iteration & Validation

Refined components through real use in Testnet features

Design System Overview

A design system is more than visuals - it’s a shared operational language between design and engineering.

The Haven1 system established this shared foundation, enabling faster delivery, consistent UI, and long-term scalability across 15 DeFi apps.

Design System Overview

Semantic Colors & Tokens

Semantic palettes for product and brand use, structured for clarity and consistency

Two-page digital color guide showing brand colors, semantic colors, color roles for light theme, background, surface, and inverse colors with labeled color swatches and hex codes.

Light and Dark Modes

Semantic palettes for product and brand use, structured for clarity and consistency

Haven1 cryptocurrency exchange interface displaying light mode on left and dark mode on right with theme options menu showing Auto, Light, and Dark selections.

Type Hierarchy & Roles

Semantic palettes for product and brand use, structured for clarity and consistency

Two white cards showing typography styles labeled typography/label and typography/title with font sizes and line heights like large 14/24 and medium 16/24.

Type Hierarchy & Roles

Semantic palettes for product and brand use, structured for clarity and consistency

UI panel showing grid spacing values with 24 units selected and spacing scale listing multiples of 4 up to 24.
Grid of nine icons each shown in white and blue colors including fingerprint, stamp, shield security, gas pump, and gear icons within dotted purple rounded squares.

200+ Icons

Semantic palettes for product and brand use, structured for clarity and consistency

Toggle switch graphic on a blue diagonal striped background with code-related tags reading spacing/3 and spacing/4.

Dev Mode

Semantic palettes for product and brand use, structured for clarity and consistency

Reusable Components

Semantic palettes for product and brand use, structured for clarity and consistency

A dark-themed cryptocurrency payment interface showing Pay and Receive sections with 0.00 ETH and balances of 25.00 ETH; toggles on the right control visibility of options such as Show $ Value, Show Balance, Show Max, and Show Active In with some toggles on and some off.

Responsive Layouts

Semantic palettes for product and brand use, structured for clarity and consistency

Haven1 platform dashboard displayed on a tablet and phone, highlighting secure DeFi apps, rewards, and navigation options.

Impact

By introducing a unified design language, we transformed how designers and developers worked together - eliminating rework, speeding up delivery, and enabling fast scaling across 15 interconnected apps.

~99%

Achieved 1:1 parity between Figma and code

~60+

Unified components across 15 dApps

~40%

Reduced design-to-dev handoff time

~95%

Efficient light-dark mode design switch for all new screens

~75%

Faster responsive screens preparation

~25%

Redundant components cut

~30%

Delivery velocity for new features improved

~3x

Simplified onboarding for new team members

Learnings:

Designing for both creativity and code

Creating the Haven1 design system reinforced that design isn’t just about aesthetics - it’s about building bridges between creativity and engineering.
Balancing visual clarity with technical precision allowed the team to ship faster while maintaining a cohesive product identity.

Before Design System
Fragmented UI and duplicated patterns
User interface with three sections: Bridge Assets for selecting networks to transfer tokens between, Deposit Gold with options for low, medium, and high yield to earn platinum tokens, and Swap section displaying silver and gold balances with swap info below.
Building Unified Components
One Flexible Component covering multiple apps and use cases
User interface design showing a DeFi swap input card, token selector, base input toggles, and dropdown states with Enabled selected.
After Design System
15+ dApps unified under one design system
Mobile app interface with three sections: Bridge Assets showing ETH to WETH transfer and fees; Swap section for exchanging hETH to hUSDC with price impact and fee details; Flexible Staking section displaying total TVL, APR, position, rewards, stake amount, and summary with daily rewards and fees.

What’s Next:
Design Systems for the New Era

The next stage of design systems is not just about maintaining consistency - it’s about intelligence, adaptability, and continuous collaboration between design and code.

With the release of Figma’s MCP Server and Make Kits, the line between design and engineering is becoming fluid. Now, systems can sync live with production code, auto-generate components, and use AI agents to maintain design parity across tools.

This evolution perfectly resonates with my work on Haven1 - where bridging design and development wasn’t just a process improvement, but the foundation for scalable, human–machine collaboration.

Exploration Focus:
Design systems in the AI age

I’m currently exploring how token-driven architecture and AI-assisted Dev Mode
can enable self-updating systems where components understand their logic, context, and behavior in both design and code.

DeFi interface displaying MCP server section with an option to enable desktop MCP server, and component information showing a swap component with size M and enabled state, plus MCP server settings panel with status toggle on and image source set to Local server.
Refining the Bridge experience:
Evolving Haven1’s bridge from a single-chain MVP into a scalable, intuitive multi-chain experience.