Kingpin.ai

Kingpin is a B2B platform for brands, distributors and retailers, a faster way for them to find and connect with each other.

For a brand, the old way meant manually browsing, comparing, filtering and contacting distributors one by one. Kingpin replaces that with AI-powered search and matching, and carries the assistance through the whole flow, from building a profile in a couple of clicks to writing the outreach and talking to distributors inside the product.

I joined to design it from the ground up: cross-platform navigation, the end-to-end desktop and mobile UX, the UI across the journey, and the design-system foundation. I worked in a pair with the team's design lead, splitting the surfaces between us.

The core challenge was turning complex screens, overloaded with input fields, into a simple, intuitive flow a first-time user could finish in three steps, consistent across the product and the marketing site.

Each step still carried dozens of inputs; the trick was to let AI pre-fill the most relevant data so the user confirms and adjusts rather than fills from scratch. Onboarding is the clearest example: enter a brand URL and name, and Kingpin generates the whole profile, with everything still editable later.

Tight deadlines made every new or custom component expensive, so I challenged each section to balance the best UX against build cost.

Two streams ran in parallel and shaped each other: building out features and data on one side, simplifying the UX on the other. It's the classic conflict: one side wants maximum detail, fields and data volume; a competitive UX wants reasonable cognitive load, grouped information and fewer required actions.

My job was to strike the balance, carrying arguments from both the business and the user. You can't design purely for user needs and ignore the business, because the product has to stay viable, so I grouped dense inputs into progressive, tabbed steps and let smart defaults do the heavy lifting.

The same structure had to hold across desktop and mobile, reusing the same design-system components to keep hierarchies consistent and development cheap.

The product reads as one guided line: set who you want to reach, let AI surface the most relevant buyers, work them through a pipeline, and reach out, all without leaving Kingpin.

AI does the heavy lifting at each step, analysing the brand profile and preferences to discover prospects, then drafting the outreach, while the user stays in control, editing anything before it's sent.

Kingpin is cross-platform: the whole journey works on mobile too, on the same design-system components, so hierarchies and patterns carry straight across from desktop.

The mobile happy path mirrors the desktop one: set up the brand from a URL, confirm the AI-generated profile, define the ideal customer, review discovered prospects, and track them in the pipeline, each step kept to a single, focused screen.

Under the product sits a scalable, tokenized design system. Styling is driven by variables, so the whole look can be re-themed with minimal effort, which matters for a young product still settling its visual identity.

I also built the cross-product navigation and content structure to be fully flexible: changing or extending it takes minimal development and almost none from design. Reusing the same components across desktop and mobile is what cut front-end development cost by about a third.