Logan Biesterfeldt

Portfolio

Logan Biesterfeldt

Design Engineer · Frontend Lead

Figma to production: design systems, React, TypeScript, blockchain

Open to opportunities
View workDownload résuméGitHub

About me

I work at the intersection of design and engineering, owning product problems from Figma to production code without handing off between the two.

My background is DeFi and blockchain infrastructure, which means I bring technical depth to domains most product designers approach from the outside. At Neptune Finance I built the design function from scratch: custom Figma component library, full design system, and every line of production TypeScript and Tailwind, while maintaining the engineering rigour required for live financial systems where on-chain state, wallet behaviour, and transaction reliability are non-negotiable.

I use AI tools (Cursor, Claude, and agentic workflows) as a core part of how I prototype and ship. I've directed fully agentic engineering flows, maintaining product and design ownership while accelerating implementation significantly.

Selected systems

Case studies & shipping scope

Neptune Finance

Frontend Lead / DeFi Interface Systems

Built and operated a production lending interface on Injective with contract-aware transaction flows, low-latency market data, and wallet-driven execution paths.

Live AppLanding Page

Role

Design Engineer / Frontend Lead

Stack

Next.js, TypeScript, Tailwind, CosmWasm

Domain

DeFi / Lending / Liquidity

Scope

  • -Full product ownership: Figma design system through production TypeScript
  • -Custom Figma component library and visual design language
  • -UX architecture for lending, staking, and liquidity flows
  • -Full frontend architecture and engineering systems
  • -Contract and wallet integration surfaces
  • -Smart contract integrations (Mito, Astroport)
  • -Staking, airdrop, and liquidity systems

Context

Neptune Finance is a DeFi lending protocol on Injective with CosmWasm contracts.
The frontend coordinates wallet actions, contract state, and market data to keep lending and liquidity flows correct during live transaction execution.

Problem Space

  • ✦On-chain and UI state can drift during pending transactions; users making financial decisions need accurate state at all times
  • ✦Market-sensitive screens require low-latency updates and interfaces designed for fast decision-making
  • ✦Multi-step flows across lending, staking, and liquidity must feel simple despite significant underlying contract complexity
  • ✦Wallet signing and broadcast failures need explicit recovery paths; confusion at this moment breaks user trust and risks funds

Approach

  • ✦Model transaction lifecycle states as first-class UI states
  • ✦Use reusable query and component primitives for protocol modules
  • ✦Align user actions to contract message boundaries
  • ✦Provide deterministic error and retry handling around wallet operations

Architecture & Implementation

Frontend

  • Modular component systemUsing Next.js + TS for robust structure.
  • Reusable UI primitivesTailwind-driven foundation for consistency.

Performance

  • MemoizationPreventing unnecessary re-renders in heavy data tables.
  • Render optimizationStreamlined React lifecycles for real-time tickers.

Data Layer

  • Onchain integrationInterfacing directly with CosmWasm contracts.
  • Unified multi-source dataAggregating indexing APIs, RPCs, and in-house databases.

Integrations

  • MitoAutomated trading vaults integration.
  • AstroportAMM liquidity pools and routing.

Feature Gating

  • Access controlNEPT staking-based tiered model.
  • ComplianceGeographic gating for regulatory requirements.

UX & Product Design

  • ✦Simplified multi-step flows
  • ✦Custom liquidity / LP UX patterns
  • ✦Clear user state visibility
  • ✦Designed for fast decision-making

Landing Pages

  • ✦Data-driven visuals (interest rates)
  • ✦Consistent product + marketing UX

Self-Directed Feature: Balance Menu

The wallet area showed only an address and a disconnect button, dead real estate at the most-visited point in the UI.

I identified the gap independently, designed the solution in Figma, and built it in production without a brief. The redesigned balance menu surfaces an asset chart and table, customisation toggles, and an inline swap, allowing users to act without breaking their current flow.

Outcome: users cited it as one of the most useful additions to the product. Teammates began referencing it as the standard for how to approach UI improvements across the app.

Design System

  • ✦Custom Figma component library
  • ✦Consistent visual identity
  • ✦Reusable assets
  • ✦Midjourney-assisted exploration

Features

Lending / borrowing
Staking + NEPT token
Airdrops
Liquidity pools (Mito + Astroport)
Gated features
Landing pages

Feature Deep Dives

Impact

  • ✦Shipped lending, staking, airdrop, and liquidity workflows to production users with real funds at stake
  • ✦Improved transaction reliability and reduced user confusion through explicit state handling and recovery UX
  • ✦Built a design system that kept Figma components and production code in sync across a fast-moving codebase
  • ✦Identified and shipped the balance menu independently: no brief, designed in Figma, implemented in production

Improvements

  • ✦Add automated integration tests for contract message permutations
  • ✦Expand observability around failed and delayed transaction states
  • ✦Harden cache invalidation for high-frequency market updates

Experience

Representative roles, protocol work, and projects. Select an entry to open the full write-up above.

Professional Experience

Neptune Finance

Design Engineer / Frontend Lead. Full product ownership from Figma to production

  • React
  • TypeScript
  • Next.js
  • CosmWasm
  • Injective
  • Wallet interactions
  • Transaction reliability
  • Astroport integration
  • Mito integration
  • State synchronization

Protocol / Ecosystem

stakefish / f2pool

  • Protocol education
  • Validator workflows
  • Staking operations
  • Cross-chain documentation

Professional Experience

Open Source Contributions

  • TypeScript
  • React
  • CW3 Multisig
  • Injective SDK
  • Caching
  • Transaction pipeline

Professional Experience

Cryptech Developments Ltd.

  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • Frontend architecture
  • Component systems

Protocol / Ecosystem

All About Blockchain

  • TypeScript
  • React
  • Next.js
  • Figma
  • Tailwind
  • Vercel
  • Cosmos
  • Injective

Protocol / Ecosystem

Cosmoverse 2023 / Hackathons

  • React
  • TypeScript
  • Cross-chain flows
  • Wallet interactions
  • Protocol integrations

Projects

Personal Projects

  • TypeScript
  • React
  • Next.js
  • Tailwind CSS
  • Vercel

Stack

Tools and domains I work across most often.

Frontend Systems

React · TypeScript · Next.js · Tailwind CSS · Component architecture

AI-Assisted Development

Cursor · Claude · Agentic engineering flows · Figma AI · Local model experimentation

AI tools are a core part of how I prototype and ship, from directing agentic implementation flows to integrating AI into design iteration and code review.

On-Chain Integration

CosmWasm contracts · Injective SDK · Wallet interactions · Transaction flows · Contract interface alignment

Data and Performance

State synchronization · RPC/indexer aggregation · Caching · Render optimization · Reliability patterns

Delivery

Technical scoping · Cross-functional execution · Design system implementation · Production deployment

Let's talk

Links

github.com/1biestnept.finance

Social

Résumé

© 2026 Logan Biesterfeldt