case study 07

Developing a self-serve onboarding flow

OverviewFull-stack dev internship @ ResQ
TechReact, TypeScript, GraphQL, Python
Timeline1 month
StatusShipped
Onboarding mockups

Business overview

ResQ provides repair and maintenance services to restaurants, working closely with service partners who deliver the actual work.

Pain points

Every new service partner required the ops team to manually call them to build a profile. If they couldn't reach them, the profile got built with whatever information was available — creating data discrepancies. As ResQ moved toward automation, that meant the wrong partners could get scheduled, directly undermining the business value automation was supposed to deliver.

How might we build a solution that gets the most accurate Service Partner data with the least manual work from the ops team?

Product thinking

Proposed solution

A self-serve onboarding flow built on top of the existing Partner Management Centre. Each partner gets an invite link, logs in, and fills out accurate, up-to-date information themselves.

Workflow

To ship fast, we scoped the first version down to the core steps: terms of service, general info, service categories, dispatch info, and rates.

Onboarding workflow

Product development

I used React's component model and Material UI to keep each step reusable and modular, intending to reuse the same pieces across other products later.

One key component was a reusable category-selection module built on Material UI's Chip component — the same chips also powered the dispatch module.

Category selection component

A shared design system

Design system

The same components were reused across two more surfaces:

Partner Management Centre

Partner Management Centre

Ops Portal

Ops Portal

Learnings

Bridging design and development was the biggest takeaway. Building modular components in Figma and watching them come together in code was great — next time, I'd move those reusable pieces into a shared library like Storybook, so front-end developers can reuse and inspect component states without rebuilding them, and designers can build their systems against the real code.

up next
The prompt to avatar tool