Swivl

Problem

Swivl is software for plumbers, HVAC techs, electricians and cleaners, competing with Jobber and Housecall Pro. When I joined there was no shared process, no documentation and no design system. Speed beat quality, and every screen was a one-off.

The brief wasn't "make it look better". It was how to build a design function from nothing, for owners who set up on a desktop, work from a phone at the job site, and don't want software at all. My bar: if it needs a tooltip, it's too complex.

Context

Before I joined, nobody owned design

Design had passed through many hands. The founders made the early calls, then the PM. A founding designer built most of the product, a senior designer followed, and a contract design lead came in to run the team. Swivl brought in Studio Carbon, a design studio, to diagnose what wasn't working. They embedded two of their designers to help, and their headline recommendation was a senior design lead who owns the output.

I joined as a Senior in February 2025, took on that ownership piece by piece, and was made Lead a few months later, in the middle of the revamp.

Process

A workflow anyone on the team can run

Design decisions used to be made by PMs. Moving them to designers meant earning trust, so I gave PMs and engineers a clear way to work with design instead of around it.

1. 1

   Requirement

   Feature Alignment Note, filled in with the PM before any tool opens.

2. 2

   References

   What others already do, so we don't invent what users already know.

3. 3

   Ideate

   Options on the table, thinnest slice first.

4. 4

   Prototype

   Built in milestones: M1, M2, M3.

5. 5

   Finalize

   Design Checklist self-review before dev handoff.

Designing for Non-Designers. A three-tier rule so small calls don't wait on design.

• Ship it

  Small decisions PMs and engineers make themselves.

• Check in

  A quick word with design first.

• Pull in fully

  Design leads, with the whole flow in scope.

Work is tracked in Linear: a parent issue, a sub-issue per milestone, and comment prefixes for decisions, blockers, questions and updates.

Team

A team of ten through the revamp

The revamp was the peak. The existing designers, Studio Carbon's two, two contractors in Ukraine, and a senior then a junior I hired took the team to ten. Once the product was rebuilt, Studio Carbon and the contract lead moved on, and the product team settled at about six, me included.

Studio Carbon deserves real credit here: their audit set the agenda, and their designers worked through the revamp alongside us.

Design system

A system engineers can rebuild without designers

Built with an agency on a shadcn foundation, chosen for turnaround.

Engineers started on hard-coded values. Once the system shipped design tokens, they adopted the same token names, so a value copied from Figma lands in code unchanged and the two drift less. A maintained Storybook mirrors the system: when a component changes in design, it changes there too.

Color

Semantic tokens, three alias tiers, light and dark

Type

Geist for product UI, Satoshi for marketing

Spacing

4px base grid

Components

shadcn base, every state covered

• Design for scale, not for today.
• Familiar patterns over new patterns.
• Engineers should recreate components without designers.
• Mobile-first is non-negotiable.

A set of product principles sits behind it. If a component needs explanation, it's too custom.

Brand

A brand that looks like the product now does

With the product rebuilt, we turned to marketing: the website, the brand and every asset around them. The old logo and purple look didn't read like a modern SaaS product, so we made the case for a new direction in pitch decks, and won it.

Before redesigning anything, we researched the brand internally with card sorting and other tests so the team stayed aligned, and mapped competitors by color to see where the market sat and where Swivl should stand. That moved the palette toward teal, to read as SaaS without turning trendy or dull: clean and professional, not playful.

Marketing design started as a single graphic designer. I mentored them, brought in more people for motion and visuals, and built a marketing design system that sits apart from the product's so the two still read as one brand.

Growth

From sales-led to product-led

The biggest strategic move I was part of. It changed what we prioritised, how onboarding worked, what the free tier looked like, and how marketing and product connected. I joined the roundtables, pitched ideas for the transition and started executing on the new direction.

Impact

After the product revamp and marketing work, Swivl moved from sales-led to product-led growth, with a free tier and a free-to-paid funnel, and reached 6,000+ users.

Shaped by product, engineering and marketing as well as design.

Looking back

What I'd do differently

• Hire faster. A bigger team sooner means less load per person and more weight in planning.
• Make the invisible work visible. Design often filled gaps in product clarity with flows and requirements. I would document that.
• Timebox exploration. Agree stopping points before naming and logo rounds begin.