Overview

Smilee Finance

Smilee Finance built DeFi products on Arbitrum and Berachain: options trading, liquid staking, dust swapping, and onchain identity through Berachain's name service. I led the design system and designed the UX/UI across the product suite.

The challenge

Making Web3 and DeFi accessible

Institutional-grade financial logic had to become a consumer-friendly interface, while accounting for the specifics of Web3 such as wallets, transaction states, onchain confirmations. At the same time, the products needed a single design language that could scale across the suite without fragmenting the user experience.

Design system

Closing the gap between design and code

Smilee's brand is playful, bold, and community-focused, meant to appeal to crypto enthusiasts and non-expert users alike. Building on that identity, I created a scalable design system from scratch, tailored to Smilee's UX and brand, and applied it to every released product.

The Figma file and the Svelte codebase stayed in sync, sharing the same tokens, components, and naming conventions. Thanks to an MCP connection between Figma and the code, I could sketch ideas quickly in Figma, iterate on them, and move the results into code with very little friction. This AI-assisted workflow sped up feature releases and kept the products consistent.

What I learned

A design system is a set of decisions and conventions. Components, layouts, and screens are just their visible results. Documenting the reasoning behind those choices is what makes the system usable by both designers and developers.