XLend / Decentralized Aggregated Financing Platform

Designing XLend as an aggregated finance platform Designing XLend as an aggregated finance platform

CompanyExtra Labs

Year2024/06 - Present

TypeFinance · Aggregated Financing Platform

RoleDesign Lead

XLend is a decentralized aggregated financing platform evolved from Extrafi's product philosophy. I led the design from concept to public launch, covering the project's logo, product-line visual planning, VI, product UI, UX interactions, and official website.

01 - Visual Effect System

XLend blends Linear-style clarity with liquid glass depth to build a precise luminous visual system.

Linear and Liquid Glass

A rational interface atmosphere with fluid glass-like light.

The visual direction combines Linear's restrained structure, sharp hierarchy, and product-first clarity with liquid glass transparency, refraction, and soft luminous depth. This gives XLend a look that feels calm and precise for financial decision-making while still carrying a strong sense of motion and liquidity.

Across the hero, product illustrations, UI surfaces, and website sections, the system uses dark spatial layers, blue-purple light, rounded glass forms, and subtle glow to connect brand memory with product readability. The goal was not decorative lighting, but a visual effect language that makes XLend feel structured, modern, and fluid at the same time.

Design system direction

Linear x Liquid Glass

One disciplined system for market data, account states, and glass signal colors.

XLend's UI direction keeps the restrained, data-first rhythm of Linear, then adds liquid glass only as a controlled signal layer for depth, liquidity, and selected states.

Surface system

Linear cards, single-pixel borders, restrained glass accents.

Use 8px radius, muted fills, compact padding, and subtle hover/active changes. The interface should feel like a professional trading table before it feels like a visual effect.

Linear foundation

Dense financial clarity with liquid glass depth.

Compact navigation, thin separators, precise typography, quiet active states, and readable market rows form the base. Glass treatment stays soft and contained, appearing on banners, account chips, selected tabs, and high-value financial signals.

01Operational shell uses low-contrast panels and clear table rhythm.

02Blue-purple marks borrowed, selected, and leverage-related moments.

03Glass highlights support hierarchy without competing with numbers.

Signal palette

Compact signal color tokens.

Active Indigo#6B6EF6

Token Blue#2F89FF

Yield Green#5BC85D

Borrow Orange#F28A32

Risk Red#FF4D5D

Glass Surface#2C2B36

XLend Brand System

02 - Project Responsibilities

I owned the full design track from project kickoff to public launch.

Core Visual Design

I led XLend's main visual direction, including the project logo, product-line visual planning, VI system, UI design, and cross-surface style consistency.

End-to-End Product UX and UI

I guided all VI, product interface, and UX interaction design from project initiation through public release, keeping the design rhythm close to an agile development workflow.

Official Website

I designed the official website as XLend's public entry point, aligning brand narrative, product explanation, and launch communication with the product UI.

Loading sequence

03 - Highlights Showcase

Visual widgets for real-time account status monitoring.

Account status intelligence

People often find that when they use financial apps, it is difficult to understand the state of their accounts in a direct, concise, and intuitive way. This becomes especially critical in financial derivatives, where many users may blindly push their account leverage higher and unknowingly remove the safety cushion that protects them.

With that in mind, I drew inspiration from Apple's desktop widgets and designed a group of small widgets that can monitor user account status information in real time, turning abstract account data into visual information. The widgets use a liquid glass material: the glass surface allows them to blend into different scenarios, while the highlighted glass edges remind users to pay attention to potential risks in their accounts.

I then combined these widgets into a status banner that can monitor account data continuously and remain persistently visible on selected pages. Thanks to the widgets' strong data visualization design, users can quickly understand their account status, further reducing investment risk. After launch, this feature was highly praised by users.

XLend product interface with account status banner

04 - Outcome

The end-to-end design work helped XLend ship quickly and enter Coinbase's first partner cohort.

I personally completed all design work for XLend, keeping brand, website, product UI, and interaction details aligned within an agile development workflow. This helped the project move from concept to public launch with a complete design system and become one of Coinbase's first partner projects.

Full scopePersonally completed the project's full design work across logo, VI, website, product UI, and UX interactions.

Agile launchKept design decisions close to development so the product could move quickly from setup to public release.

CoinbaseSupported XLend becoming part of Coinbase's first partner cohort.

One visual system across brand and product

XLend needed the logo, VI, website, product UI, and interface states to reinforce the same product memory instead of feeling like separate launch materials.

Finance UX needs clarity before decoration

The interface had to make aggregated financing choices readable and trustworthy, so structure, hierarchy, and interaction flow became the foundation of the visual language.

Systems become stronger when they overlap

Different design systems do not have to stay isolated. Blending their rules, materials, and interaction logic can often create a more distinctive and surprising visual direction.

Next project Extrafi

Product System / V2.0 Visual Upgrade