ONBOARDING
THE PROBLEM
Network import lived in settings, which made it easy to miss. Because the core product aggregates networks and surfaces the connections already available to each person, importing needed to become part of the first-run experience.
We needed onboarding front and center. Get users to import their networks, then immediately run a search. That's the magic moment.
APPROACH
I used Claude Code to prototype directly in the existing design system, turning the complete flow into a working interaction model.
The video below shows a working prototype rather than a static mock. It gave the team a richer review surface and gave our front-end engineer a functional reference to build from.
DESIGNING IN CODE
Working in code let me evaluate real interactions earlier, keep the prototype aligned with the production system, and hand engineering a clearer reference for implementation.
MY ROLE
STATUS
THE DESIGN
Prototype walkthrough built with Claude Code, not Figma
States and flow documented from the Claude Code prototype
The first thing a new user sees when landing in the app
Networks loaded with connections imported and visible
Hover state showing details for a single network
Command palette with Linear-inspired quick search and AI coming soon