B2C · Pricing · IoT · SaaS
Mapped
Pricing for B2C SaaS is complex. The user experience shouldn't be. I designed a self-serve onboarding flow for a building intelligence platform.
My Role
UX Research, UX & Marketing Design, Copywriting
Team
Executive Team, Architecture Advisor, Lead Developer, Director of Marketing
Focus
Pricing UX · Self-Serve Onboarding Marketing Design · Two Design Systems
01
Overview & Problem
An OS for the built environment, sold simply
Mapped is a startup in the building technologies and IoT sector. Their platform provides an "independent data layer" for commercial and industrial spaces, helping property owners, facility operators, and solution providers access real-time data from building systems (temperature, motion sensors, lighting, and more) through a digital twin. The main users are software developers.
The company was successfully selling to enterprise customers, but needed a self-serve path so individual developers and small teams could access the platform quickly, without a sales conversation. I had to tackle two layers of complexity at once.
SaaS pricing structures are inherently complex. Terminology and data structures for commercial building systems are also highly complex. My challenge was solving both simultaneously and delivering a transparent, frictionless flow into payment and data setup.
The pricing model had several moving parts to wrangle:
Pricing based on number of buildings deployed, plus a variable API usage fee based on data consumed.
A gateway connection fee, either virtual (VPN, free) or physical hardware, that most self-serve developers would never need.
Contract term length as an additional pricing variable, which we ultimately cut to reduce friction.
02
My Role & Process
Research, structure, then simplify relentlessly
Working directly with the executive team, I gathered best practices and competitive examples, then presented a research exploration on how to frame the pricing model. We landed on three tiers: Starter, Basic, and Pro. From there I had to align the pricing criteria to both the marketing page and the in-app welcome experience at the same time.
Starter
A free-forever model with thoughtfully placed upgrade prompts that didn't interfere with developer workflows.
Basic
The self-serve sweet spot for individual developers and small teams getting started with the platform.
Pro
Scaled access for larger teams with higher API usage needs and more building deployments.
Marketing Page
Slider-first pricing
A building-count slider became the centerpiece of the pricing page: interactive, estimable, and immediately useful. I added "sticky stops" post-launch to reinforce expected slider behavior.
Progressive Disclosure
Hiding the complexity
I moved API fee details into an FAQ, tucked FAQs into accordions, sent the full feature list to a secondary page, and separated gateway costs from the main flow entirely.
In-App Flow
Mirroring the marketing site
I worked closely with the VP, CTO, and Lead Developer to design the payment and data setup flow in parallel with the marketing page. Two flows, one cohesive experience. View in Figma →
Upgrade Prompts
Effective without annoying
I placed upgrade prompts on the free tier to serve the business goal without disrupting developer flow. View in Figma →
03
Key Design Decisions
Simplicity is the hardest thing to ship
Every decision on this project was a negotiation between business transparency and user clarity. The default instinct from the team was to show everything: every fee, every variable, every edge case. My role was to advocate for progressive disclosure at every turn.
The slider as anchor. Everyone aligned on a building-count slider as the primary interaction. Making it prominent and interactive gave people a sense of control over their cost estimate before committing.
Gateway costs separated. Most self-serve developers would only ever use the free virtual option. Showing hardware pricing upfront would have added confusion without value, so I moved it out of the main flow.
Term length dropped entirely. Contract term length started as part of the pricing model. I cut it from the initial design that shipped, which reduced the decision load at a critical conversion moment.
Early launch with contact forms. The pricing page launched before payment was fully ready. Tiers led to contact forms, so sales could capture leads and message at the full launch.
Org switcher as an edge case catch. Rapid iteration surfaced the multi-org use case late. People belonging to both a business and personal account had no way to switch. I caught this and we resolved it before launch. View in Figma →
04
Outcomes & Impact
Self-serve, shipped, and a lesson in edge cases
Over three months, we delivered a smooth self-serve experience that lets developers log in, pay, and get data uploaded to begin mapping, all in one flow. The final result is live.
Self-serve achieved
Single developers and small teams can now access the platform end-to-end without a sales conversation.
Two design systems bridged
I unified the marketing site and platform design systems into a cohesive experience across both touchpoints.
Small wins shipped early
The pricing page launched ahead of full payment readiness. I used contact forms to capture leads and build pipeline during the gap.
If I could change one thing, I would pressure-test edge cases more deeply before design and development began. We could have caught the org switcher and connector issues much earlier with more structured discovery upfront.
Next Case Study
Comfy