Building a design function inside an engineering-first startup

When I joined, there was no design function. Engineers built, shipped and reviewed every screen, and each one looked like a different product. I came in as the first designer with one mandate. Make design part of how the company decides what to build, not a desk that draws screens on request.

Role: Design lead, first designer

Components in the system: ~80
Design to dev handoff: 2 days → 4 hrs
Until engineers came to design first: 1 month

The redesigned Genius trading terminal with the price chart, order book, order form and open positions

Problem

Design had to help engineers first

No design files, no components, no handoff. Specs lived in chat threads and engineers made UI calls while coding. My first two weeks were an audit. 9 button styles, 14 grays and 3 unrelated error patterns. That audit became my main argument for everything that followed.

A process document in an engineering culture gets ignored. So I started with what slowed developers down. Every spec came with loading, empty, error and edge states before anyone asked. After about a month, engineers came to me before writing code. Design became part of the flow because it was the easiest path, not because it was announced.

Key decisions

Add process only where it saves time

Once engineers were on board, I made it formal. A 30-minute weekly review the founders actually attend. No ticket goes into development without approved designs and states. One handoff format in Figma. A post-release check of what shipped against what was designed.

The Genius Figma workspace: product files for the terminal, web app, mobile, media assets, Ghost and landings, next to a separate design system project — One home for every file. Product surfaces in one project, the design system in its own.

Build the system while shipping, not before

There was no time for a separate system project. Every redesigned screen produced components, and every component went straight into the library. Tokens map to CSS variables, so a change in Figma is a change in code. With around 80 components in place, engineers now assemble simple screens without me.

The design system in Figma: the UI Components library with input states, and DS Core theme variables mapped to primitives — Tokens in Figma, variables in code. Nine button styles became one.

Redesign section by section, never stop shipping

The company couldn't pause for a redesign. We rolled it out area by area, starting where users spend the most time, while three features shipped in the same window. A trading flow cut from 6 steps to 3. A rewards layer where I owned the mechanics and anti-abuse rules, not just screens. Copy trading, where interviews and competitor teardowns showed which trust signals matter before someone copies a stranger.

The redesigned token screener: market cap, liquidity, volume, transactions and security signals per token, filtered by chain — Discover after the redesign. Dense by default, because traders read numbers.

The redesigned portfolio: total equity, spot and perps balances, a PnL chart, trading stats and open orders — Portfolio after the redesign. Balances, PnL and open orders on one screen.

The swap screen exchanging USDC for BNB, with a sponsored transaction that covers the network fee — Swap with sponsored gas. The network fee is on the platform.

Prediction markets browsed by category, with live esports matches shown as cards — Prediction markets, grouped by category and live events.

Own the product work around the screens

I ran prioritization with the founders, wrote the PRDs for all three features, set up analytics events and reviewed results after every release. Marketing, landing pages and store assets came from the same hand, so product and brand speak one visual language.

Outcome

In 8 months the company went from no design function to a working one. A live system, a process built into development, a redesigned platform and three features in production.

Principles that work without me

Density over decoration, because traders read numbers. Every state designed. One way to do one thing. Ship, measure, adjust. These now come up in engineering and founder discussions on days I'm not in the room.

Back