Landing Pages
Harbor Payroll
Pricing and onboarding pages
A pricing page that finally explains a per-employee model, plus the onboarding pages sales had been sending as PDF attachments.
- Client
- Harbor Payroll
- Industry
- Fintech
- Category
- Landing Pages
- Year
- 2025
- Plan comparison readable on a phone without pinching
- Sales pages replaced a set of emailed PDFs
- Pricing copy changed by the team, not by a developer
01Client goal
What they came to us with
Harbor charges per employee per month with three tiers and a set of add-ons. The old pricing page flattened all of that into a wide table that was unreadable on a phone, and the sales team had quietly started emailing a PDF instead. The goal was a pricing page that answers the actual question, what will this cost us, and a small set of onboarding pages sales could link to in a follow-up.
02Scope
What we agreed to build
- 01Pricing page with an interactive seat count
- 02Three onboarding explainer pages
- 03Design-to-Webflow build from an existing Figma file
- 04Accessibility pass on the plan comparison
03Delivery
What maztech delivered
Pricing that answers the question
A seat count control updates the monthly figure on each plan directly, so the visitor sees their own number rather than a per-seat rate they have to multiply themselves. Add-ons are toggles that fold into the same total.
A comparison table that works on a phone
On desktop the plans are columns. Below the tablet breakpoint the same content reflows into stacked plan cards with the feature list repeated per plan, which is longer but readable. The table is marked up as a real table with scope attributes so screen readers announce the plan a cell belongs to.
Onboarding pages sales can send
Three explainer pages, migration, first payroll run and support, built from one shared template with a consistent structure so sales knows exactly what each link contains before sending it.
Everything priced in the editor
Plan names, rates, feature rows and add-on costs are all editable content rather than baked into the layout. A pricing change is a five-minute edit by the finance team.
04Components
Components used
- Seat count stepper with live total
- Plan card with featured variant
- Responsive comparison table
- Add-on toggle row
- Explainer page template with in-page navigation
- FAQ accordion with keyboard support
Each one is a named, reusable component in the project, not a one-off section. That is what lets the team add pages later without the design drifting.
05Performance
Performance notes
No layout shift on interaction
Price figures use tabular numerals inside a fixed-width container, so updating the seat count changes the number without nudging the card or the buttons underneath it.
Minimal custom code
The seat calculator is a short inline script with no dependencies. Nothing else on the page loads a library, so the pricing route stays the lightest page on the site.
Keyboard complete
The stepper, toggles and accordion are all reachable and operable from the keyboard with visible focus, and the accordion reports its expanded state rather than silently opening.
06Gallery
Screens from the build
Next step
Want a build like this one?
Tell us about the project and we will come back with a scope, a timeline and a price, plus an honest note on anything we think should change.
Or reach us directly
Studio hours are 9am to 6pm across US and EU time zones, Monday to Friday.
