Background
StaffOS is a UK HR, payroll, and team management platform for growing companies. I designed and built it as a self-initiated project, aimed at the people who actually sign off on software like this: HR managers and founders.
I designed five sections in Figma: a dashboard view, a row of integration logos, side-by-side pricing, testimonials, and an FAQ. The goal was to build a modern, trustworthy, easy to read (without the drop-off you get halfway down most SaaS pages) website on webflow
The challenge
Getting the point across before anyone scrolls
People had to know what StaffOS does in about five words, right at the top. The design does that with a full dashboard mockup, which is the hardest part to keep. Shrink it carelessly and it either spills out of its box or turns into tiny unreadable rows, and the message goes with it.
No reason to trust a tool they've never heard of
HR and payroll tools handle private data. If the integration logos and real testimonials don't show up early, people leave. Both were drawn as one-off blocks in the design, so I had to turn them into CMS items without the spacing shifting.
Pricing that works for two very different buyers
The page had to speak to small startup founders and HR managers at bigger companies at the same time, which is why pricing sits side by side with nothing hidden. In the browser the rows stopped lining up as soon as one plan had longer text, and the monthly/yearly switch needed states the design file never covered.
CTAs that had to repeat without extra work
One button at the bottom loses most people, so there are prompts at every stage. Five CTAs plus an FAQ meant building them once as components that all behave the same, instead of tweaking each one by hand.
The solution
A hero about the problem, built to hold its size
The headline "Manage your team without HR chaos" names the annoyance instead of listing features, and the dashboard preview says "Hi Chris" so it feels like yours before you sign up. That preview is a real grid with rem text sizes and a scale-down on small screens, so it stays sharp instead of falling apart.
Proof spread through the page, run off the CMS
Integration logos (GitHub, NASA, Google, Fedora, GitLab, Upwork) sit right under the hero so you can see it fits your setup, and the testimonials have real names, roles, and quotes instead of generic five-star lines. Both pull from the CMS into components I sized against the design.
Clear pricing on a locked grid
Free and Pro sit next to each other with real feature lists and no small print. I built the table on a grid with set row heights so both plans line up no matter how long the text gets, and the plan switch runs on IX2 states instead of code.
CTAs everywhere, and one FAQ component
There's a prompt in the hero, mid-page, in the features, on the pricing table, and in a full-width banner at the end, each worded for where someone's head is at that point. The free trial wording keeps it low pressure. The FAQ uses one animation set up once, so new questions open the same way.
“Every choice came back to one thing: making HR feel easy instead of annoying. The build had to keep that, down to the pixel.”
— Nnamdi Ogbonna,
Key outcomes
Easy to follow, top to bottom
You find out what StaffOS does, who it's for, how it works, what it costs, and what people think without scrolling back up, and that order holds on every screen size.
Honest pricing that helps people decide
Free and Pro side by side gets rid of the "contact us for pricing" drop-off most B2B sites have, and the locked rows keep it lined up however the text changes.
An FAQ that answers the doubts on the page
The "Everything you need to know about StaffOS" section clears up objections before people hit the button, and because it's on the CMS, new questions get the same spacing and animation automatically.
Works properly on every screen
Every section matches the design on mobile, tablet, and desktop, with nothing reflowing, no broken grids, and the dashboard mockup still readable.
Technology stack
- Figma
- Webflow
- Webflow CMS
- IX2
