SaaS product design

Product design that activates,
retains and scales.

Research-led UX, UI and design systems for B2B SaaS. We design the dashboards, onboarding flows and pricing pages that turn signups into customers, and customers into advocates.

Figma · Storybook · Tokens Studio
WCAG 2.2 AA accessible
Embedded with your team
Designing SaaS for 200+ founders, product teams and scale-ups
◇ MCM SoilsLowry Estates◯ WoodvaleAvon · Ruby△ Harbour HostsKingfisher Co.◈ NorthStarbramley & ivy◇ MCM SoilsLowry Estates◯ WoodvaleAvon · Ruby△ Harbour HostsKingfisher Co.◈ NorthStarbramley & ivy
What we do

End-to-end SaaS product design, under one roof.

Research, strategy, UX, UI, design systems and ops, coordinated by one team that owns the outcome with you.

Product strategy & discovery

Vision workshops, opportunity mapping and feature prioritisation. We turn fuzzy problems into a sharp scope your team can actually ship.

User research & JTBD

Customer interviews, jobs-to-be-done analysis, surveys and analytics teardowns. Decisions backed by what users do, not what stakeholders assume.

Information architecture

Sitemaps, navigation models and content hierarchies. Reduce cognitive load and help users find the feature they actually need.

UX & wireframing

Low-fidelity flows for the critical journeys: signup, onboarding, key tasks, billing, settings. Test the structure before pixels.

UI & visual design

High-fidelity, brand-aligned interfaces in Figma. Pixel-perfect, ready for hand-off, and built to scale across product surfaces.

Design systems

Tokens, components and patterns documented in Figma + Storybook. Speed up development, lock down brand consistency, reduce design debt.

Dashboards & data viz

Charts, tables, filters and reports designed for clarity. Help operators answer business questions without staring at spreadsheets.

Onboarding & activation

First-run flows, empty states, tooltips and product tours that get new users to the aha-moment fast, and lift trial-to-paid conversion.

Pricing & paywall design

Plan tables, comparison grids, upgrade modals and trial paywalls. Tested copy and layout that makes the right plan obvious.

Mobile & responsive

Mobile-first SaaS UX. Touch-target hygiene, gesture patterns, offline states and performance-conscious layouts for real devices.

Accessibility (WCAG 2.2)

Keyboard-friendly flows, screen-reader labels, AA contrast, focus states and reduced-motion support. Audited with Axe and real assistive tech.

Design-to-dev handoff

Figma Dev Mode, design tokens (Style Dictionary / Tokens Studio), spec docs and pairing sessions. Engineers ship faster with fewer questions.

Tools & platforms

The kit our designers and researchers reach for.

We pick tools that match the team operating the product, not whatever is trending in design Twitter.

Research & insight
MazeUserTestingLookbackDovetailNotionHotjar
Design & prototyping
FigmaFigJamFramerProtoPiePrinciple
Design systems
Figma VariablesTokens StudioStorybookZeroHeightStyle Dictionary
Handoff & docs
Figma Dev ModeZeplinNotionConfluenceLoom
Product analytics
MixpanelAmplitudePostHogHeapGA4Microsoft Clarity
How we work

From discovery to dev-ready, in 6 to 12 weeks.

Step01

Discover

  • Stakeholder & user interviews
  • Analytics & funnel teardown
  • Competitive & heuristic audit
Step02

Define

  • Jobs-to-be-done & personas
  • Information architecture
  • Feature prioritisation
Step03

Design

  • Wireframes & user flows
  • High-fidelity Figma UI
  • Design system & tokens
Step04

Validate

  • Clickable prototypes
  • Usability testing & iteration
  • Accessibility audit
Step05

Deliver

  • Dev hand-off & pairing
  • Design ops & documentation
  • Roadmap & quarterly review
Every engagement includes

No surprises, no half-finished hand-offs.

Why HAPA Cloud

A studio that designs for your metrics.

01
Research is non-negotiable

Every engagement starts with users, interviews, analytics teardowns, JTBD synthesis. We don't guess what the workflow should be; we ask the people doing the work.

02
Systems, not one-offs

Tokens, components and patterns documented in Figma + Storybook. New screens snap together; design debt stops compounding; engineers ship faster.

03
Embedded with your team

Slack, Linear, Figma, your sprint cadence. We work as an extension of your product team, not as a black-box agency that disappears between deliverables.

04
Outcomes, not deliverables

We measure activation, retention and time-to-value, not artboard counts. Designs ship to production; metrics move; we iterate. That's the loop.

SaaS we serve

Built for B2B, vertical and dev-tool SaaS.

We've shipped product surfaces for fintech, proptech, healthtech, dev tools, marketplaces and internal-tools-as-a-product. Different verticals, same disciplined method.

B2B SaaSDev ToolsVertical SaaSFinTechPropTechHealthTechMarketplacesInternal toolsAnalytics platformsWorkflow & opsAI productsOpen-source UIs
0+
SaaS surfaces shipped
0%
Avg. activation lift
0%
Avg. retention lift
0wks
Typical first ship
Frequently asked questions

Answers, before you ask.

What does a typical SaaS product design engagement look like?

Most engagements run as a 6 to 12 week core sprint covering discovery, IA, hi-fi design, prototyping and testing, followed by ongoing design partnership at 2-week intervals. We embed with your product and engineering teams via Slack, Linear and Figma so design moves at the pace of build.

Do you specialise in B2B or B2C SaaS?

B2B SaaS is our home: dashboards, admin tools, ops platforms, vertical SaaS, dev tools and internal-tools-for-customers. We've also shipped consumer-facing SaaS surfaces (auth, onboarding, billing) inside otherwise-B2B products.

How much does SaaS product design cost?

Engagement scoping is fixed-fee or monthly retainer. Discovery + core design sprints typically run from £8,000 to £25,000 depending on scope and surface area; ongoing partnership starts around £6,000/month. Every quote is itemised and tied to specific deliverables.

Will you build a design system from scratch, or extend ours?

Both. If you have an existing design system (Material, Chakra, Radix, custom), we extend it with the components, patterns and tokens you actually need, without reinventing what already works. If you're starting fresh, we ship a tokens-first system you can scale.

Can you work directly with our engineering team?

Yes, that's how we work best. Designers join your Slack, attend stand-ups when useful, pair with engineers in Figma Dev Mode, and ship work in 2-week design cycles aligned to your sprint cadence.

Do you cover user research, or just visual design?

Research is core. Every engagement includes interviews, analytics review and usability testing, the only way to design with confidence. We can also embed researchers for ongoing discovery or run targeted studies (tree tests, preference tests, diary studies).

What about accessibility?

WCAG 2.2 AA is the baseline. We design for keyboard navigation, screen readers, sufficient contrast, focus states, reduced-motion preferences and assistive-tech compatibility, audited with Axe, Lighthouse and real users where appropriate.

Do you handle landing pages and marketing site design?

Yes. We treat the marketing site, pricing page and product UI as one continuous brand surface. For build-out, we also offer Next.js / WordPress / Webflow development through our web design service.

Who owns the Figma files and design system?

You do. On launch we transfer the Figma org seats, Storybook docs, design tokens repo and any third-party tooling to your team. No vendor lock-in, no proprietary plugins you can't replace.

Where is your team based?

London, UK. We work with B2B SaaS teams across the UK, EU and North America. Workshops and design reviews run remotely or in person depending on what suits you.

More from HAPA Cloud

One studio. Whole-product outcomes.

Service

Website Design & Development

Bespoke websites, e-commerce stores and web apps.

Service

Digital Marketing

SEO, paid, email, content and CRO that grows pipeline.

Product

HAPA Cloud PMS

The all-in-one OS for short-stay rental businesses.

The people who made it happen.

★★★★★
Hapa is awesome. I like it more and more each day because it makes my life a lot easier. Our direct bookings are up 40% since switching.
JCJohn CarterCFO · Harbour Hosts
★★★★★
We picked Simplicity after deep research. We get 140 field calls a day and their system makes sure all of it is streamlined, nothing slips.
MRMaddison RaeburnCOO · Avon Ruby
★★★★★
I have gotten at least 50 times the value from HAPA Cloud. The AI concierge alone saves us 20 hours a week on guest replies.
MSMeghan SørensenFounder · Woodvale Stays
★★★★★
The channel manager paid for itself in a month. Rates and availability stay in step across every OTA, so double bookings simply stopped happening.
PRPriya RamanRevenue Lead · Lowry Estates
★★★★★
Onboarding was the smoothest we have had with any supplier. The team mapped our workflow first, then shaped the system around how we already work.
CFCallum FraserOperations Director · Braemar Energy
★★★★★
Owner statements used to take three days every month. They are now generated automatically and our owners can see performance whenever they like.
HWHelen WalshFinance Lead · Kingfisher Co.

Let's design a SaaS your customers actually love.

Send a brief, a Loom or just a Figma link. We'll come back within one working day with a clear next step.

Start a design sprintRead the FAQ