Hatch.
A modern social platform for builders — where proof of work replaces the résumé.
Overview
A next-gen social space for the next generation of builders.
Hatch consolidates five fragmented platforms — feed, events, community, launch, work — into one continuous loop. Discover, learn, build, ship, get found. We partnered with Hatch as their end-to-end design team to take the product from concept to launch.
The problem
Talented people are invisible behind static résumés.
Builders juggle LinkedIn for visibility, Discord for community, Behance for portfolio, Notion for projects, and Eventbrite to learn. Their best work scatters across platforms — and rarely converts into opportunity.
of students say their résumé doesn't reflect the real skills they've built. The brief was clear: replace the résumé with living, visible proof of work — and stitch the five tools they already juggle into one place.
Discovery & Research
We started by listening — to builders, students, and founders alike.
Three weeks of mixed-methods research grounded every later decision. We mapped the real journey from "I'm learning" to "I got hired" — and the seams where people fall through.
What we learned
Four insights set the direction.
Information architecture
Five surfaces, one loop.
We collapsed the journey into five primary surfaces, all reachable in one tap. Every surface feeds the next — the work you ship on Launch becomes content on Feed, proof on your Profile, and a workshop topic on Events.
discover
learn live
connect
ship to the world
your living portfolio.
every action compounds here.
Wireframes · Mobile
Skeletons before skin.
Hatch lives on a phone — every flow was sketched mobile-first. Three rounds of low-fi screens, scribbled in the margins with what each tap should feel like before pixels got involved.
Never two avatars on a row.
Design system
Built to scale — restrained on purpose.
A single type ramp, a tight color set, and 40+ components designed for density without noise. Every token mapped to a code variable so handoff was zero-translation.
#0D0D0D
#6C5CE7
#4CA9FF
#F8F7F3
#ECEBE5
#D8D6CC
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96
Key screens
From wireframe to product.
Final UI shipped with the brand voice fully baked in — clean, intentional, energetic. Below: the surfaces builders actually use to learn, ship, and get seen.
Process
How we worked — end to end.
Weekly sprints, async-first reviews, and a shared Figma file kept the loop tight. Engineering joined design from week one — no throw-over handoffs.
Results
As Hatch's end-to-end design partner.
We delivered the complete product ecosystem — platform, brand, identity, marketing — and stayed on as the ongoing design team. The system holds up: every new feature ships in the same voice without rework.
Product UI/UX
5 surfaces, 60+ screens, end-to-end flows
Design system
Tokens, 40+ components, Figma library
Brand & identity
Logo, type, color, voice, guidelines
Marketing
Website, social, event posters, launch assets
Working with Oli & Hue was a turning point for Hatch. They understood our product vision better than anyone. They don’t just design — they think like founders.
