AtlasCase 04 / 07Design system / five DeFi products

Dev House Labs

One interaction grammar across five products

An L1 ecosystem needed a shared product foundation across trading, lending and borrowing, stablecoin minting, an AMM, and governance. The work had to move quickly without turning five different jobs into one generic interface.

Role
Senior UI/UX Designer
Period
Jun 2023 – May 2024
Scope
Design-system leadership / Product architecture / Interface design / Responsive behavior / Figma system ownership / Engineering partnership
5DeFi products
4 weeksSystem foundation
4 monthsFirst product versions

The problem

A multi-product ecosystem can accumulate inconsistency quickly: the same action changes labels, components drift, feedback behaves differently, and each new screen becomes a local decision.

I led the creation and implementation of a Figma system integrated with a Next.js product environment, then helped apply that foundation across the first versions of five applications.

Working idea
Consistency should reduce relearning, not erase product meaning.

How it fits together

One foundation. Five different jobs.

Explore the system

  1. Type, color, spacing, surfaces, feedback, and responsive rules.

    See it in the workShared exchange patterns

  2. Connect, select, enter, review, sign, confirm, and recover.

    See it in the workThe same grammar in lending

  3. Domain-specific language and risk stay visible.

    See it in the workTrading and its risk controls

  4. Feedback loops keep design and implementation aligned.

    See it in the workThe governance portal
The whole system

Key decisions

The choices that shaped the work.

01

Standardize the transaction grammar

The reusable layer focused on behavior: how assets are selected, how values are entered, how risk is explained, how a transaction is reviewed, and how success or failure is resolved.

02

Preserve product-specific information

A lending position, swap, governance allocation, and leveraged trade do not deserve identical hierarchy. The system provided rules and primitives while allowing each product to foreground its own consequence.

03

Keep design and code in sync

The design system stayed connected to implementation and team feedback. Decisions remained visible so they could be challenged, improved, and reused instead of recreated.

The work

01 / 04

  1. BEX / exchange. A focused transaction surface with onboarding guidance placed before the swap.

BEX / exchange. A focused transaction surface with onboarding guidance placed before the swap.

The work

02 / 04

  1. BEND / lending. Product-specific expression sits on top of shared navigation and transaction patterns.

BEND / lending. Product-specific expression sits on top of shared navigation and transaction patterns.

The work

03 / 04

  1. Berps / perpetuals. Dense market information is organized around the action and its risk controls.

Berps / perpetuals. Dense market information is organized around the action and its risk controls.

The work

04 / 04

  1. BGT Station / governance. The same ecosystem language supports a very different information model.

BGT Station / governance. The same ecosystem language supports a very different information model.

What this case shows

A system that did real work

The strongest outcome is not a single polished screen. It is the compression of repeated decisions: a four-week foundation that could support the first versions of five products over the next four months.

What the work delivered

  1. 01

    Standardized interaction and interface patterns across five decentralized-finance products.

  2. 02

    Balanced ecosystem consistency with the different language, hierarchy, and risk model of each product.

  3. 03

    Established design and engineering feedback loops so the system could evolve transparently.

Next case study

05AsymmetryProduct / brand / motion

What changes when product education lives inside the interface?