Skip to content

04 / Anitra Murphy · US · 2020

Turning a service into self-serve software

A six-stage onboarding wizard that turned a website-design service into self-serve software.

Role
Solo Developer & Architect
Timeline
8 months, alongside Visionerro
Type
Client onboarding portal: beauty industry
Stack
Laravel · Vue 2 · Stripe · Tailwind CSS · MySQL

At a glance

  • Client onboarding portal for a website-design business serving the beauty industry: salons, barbers, nail artists, spas.
  • Six-stage wizard takes a non-technical client from signup to paid project without a single sales call.
  • Plan tiers gate page selection, enforced server-side, because client-side rules are suggestions.
  • One Stripe checkout combines a recurring subscription with one-time design add-ons, atomically.

01 / Context

Selling websites to people who don't buy software

FlexSited's customers are salon owners, barbers, lash artists: people whose relationship with technology is Instagram and a booking app. The business sold them websites; the bottleneck was the sales and onboarding conversation every single client required: which pages, which design, which plan, what content, endless back-and-forth.

The brief was to move that entire conversation into software. Same client as Visionerro, same eight-month window, same team of one.

02 / The wizard

Six stages, zero sales calls

The onboarding flow walks a client from account to paid project: pick a domain, browse design mockups by industry category (hair, braids, nails, barber, spa, makeup, ten in all), choose a plan, pay, then hand over business details and content. Each stage saves progress; nobody loses forty minutes of typing to a closed tab.

self-serve onboarding wizardSign-UpaccountDomainpick / connectDesignmockups by categoryPlantier gates pagesBillingone checkoutInformationcontent + detailspage limits validatedserver-side, the client liesStripe, single checkoutsubscription + one-time add-onslogo $100 · cards $150 · flyer $200after payment: delivery tracker, visible to the client1 · Domain Setup2 · Logo Design3 · Website Design4 · Development5 · Go Live
Fig. 01: the onboarding pipeline, the one checkout, and the delivery tracker clients watch afterward.

The stage that carried real logic is plan selection. Each of the four tiers unlocks a different number of pages from a menu of thirteen: home, services, booking, shop, classes, testimonials, and so on. The browser enforces the limits for usability; the server enforces them for truth. Any request claiming five pages on a three-page plan gets rejected at validation, because a determined client with dev tools open is still a client.

03 / Billing

One checkout, two kinds of money

Clients buy a subscription (monthly or annual) and, optionally, one-time add-ons in the same transaction: logo design, business cards, flyers. Stripe treats recurring and one-time charges as different species, so the checkout orchestrates both: subscription creation and add-on charges succeed together or roll back together. A client charged for a logo on a failed subscription is a support nightmare that simply never got the chance to exist.

04 / After the sale

The progress bar that answers the phone

Post-purchase anxiety is real when the buyer can't evaluate the work in progress. The portal gives every client a five-step delivery tracker: domain setup, logo, design, development, go-live. Plus in-app chat with the admin team. On the other side, an admin dashboard manages orders, subscription changes, progress updates, and client communication.

The tracker did quiet, measurable work: it replaced the "just checking in!" email. A visible state machine turns out to be a customer-service feature.

05 / Lessons

What a non-technical audience teaches an engineer

  • Server-side validation is the product; client-side validation is the UX. Never let the second stand in for the first.
  • Mixed recurring + one-time billing needs atomic orchestration: partial success is worse than failure.
  • Non-technical users need previews and progress, not options. Every decision removed from the wizard raised completion.
  • Building two platforms at once forces honest scope triage. The feature you defer is the velocity you keep.
onboarding stages
subscription tiers
selectable page types
checkout for subscription + add-ons