Founding design for a web3 lending protocol across brand, product, motion and marketing collateral
Marketing materials showing the visual system across launch channels.
The Challenge
Volt needed an interface for the full lending and borrowing journey, from comparing terms and setting up a loan to tracking repayments and managing active positions.
I had created the brand identity before product design began. I owned the visual design across product UI, marketing motion and launch collateral, carrying that identity through desktop and mobile interfaces and the materials used to introduce the product.
The Diagnosis
The brand, interface and launch materials needed to feel like parts of the same product. Consistent typography, colour and messaging were important to how Volt presented itself before users connected a wallet.
The interface also had to accommodate different levels of experience. Advanced users wanted direct access to terms and actions, while less experienced users needed guidance before committing capital. The challenge was to make rates, duration and loan-to-value clear without slowing down familiar tasks.
The Prescription
I used the brand identity as the basis for shared interface components and templates for launch collateral. Consistent visual rules connected product screens and launch communication, while Figma components and interface states gave stakeholders and engineers a common basis for design decisions and implementation.
The MVP focused on core lending and borrowing workflows. I developed those designs with stakeholders, bringing related terms and actions together and reusing components across desktop and mobile.
The Execution
I created the brand identity, designed the product screens and shared components in Figma, and produced animated videos and launch collateral for web and social. I edited the videos for pace to reinforce the 'Light Speed Liquidity' message. Most of the motion work was for video and marketing; interface animation remained limited in the MVP.
I developed the designs with stakeholders and worked with engineers almost daily during implementation, using Figma as the basis for feedback and decisions.
Lending flow
Borrowing flow
Auto-Lending flow
Moment 1: Branding System & Trust Foundation
The protocol needed a trust signal before users evaluated lending terms. Brand, UI, motion and launch assets could not feel disconnected.
I built the brand identity around shared typography, colour and messaging, then applied it to product screens and launch collateral. I extended that visual language into marketing animation around the 'Light Speed Liquidity' message.
Product screens and launch materials followed one visual system, giving the team a consistent basis for new work.
Moment 2: Brand messaging for the MVP launch
For the MVP launch, the opening screen needed to introduce Volt's brand message alongside the main lending and borrowing options.
I made 'Light Speed Liquidity' the main headline, with supporting copy, lending and borrowing actions, and key rates beneath it.
The opening screen carried the launch message into the product and gave users direct routes into lending and borrowing.
The Estimate feature shown here was designed in Figma and approved for a future update. It was not part of the MVP launch.
Moment 3: Core Lending Flow
Configuring a lending offer involved several connected choices: duration, rate, loan-to-value ratio and amount. The interface needed to keep those terms visible together before an offer was submitted.
I brought Duration, APY, LTV, ETH Amount and projected earnings into a single lending modal. I also designed the controls for Auto-Lending and Auto-Foreclose, working with engineers during implementation.
Users could review duration, APY, loan-to-value, amount and projected earnings together before submitting an offer, with automation controls available in the same panel.
Figma board showing the shared components, modal states and page layouts used across the MVP.
Impact
- Delivered a launch-ready design package across brand, product, motion and marketing collateral in 16 weeks.
- Established shared components and interface states for desktop and mobile, using Figma to guide implementation with engineering.
- Reused the same visual language and messaging across product screens and launch channels.