Scenario: The Johannesburg SaaS at R2m ARR Where Signups Rise and Activated Accounts Do Not
Picture a hypothetical B2B SaaS company in Johannesburg selling a project management tool to mid-sized firms. ARR sits around R2 million. LinkedIn and Google Ads drive traffic to a pricing page listing three plans. The signup form is short: work email, password, company name. Monthly signups have grown 40% quarter on quarter.
Yet activated accounts - teams that create a project, invite a colleague, and hit the first value milestone - have barely moved. Trial-to-paid conversion sits at 8%, well below the 15-25% industry-typical range for self-serve B2B software. Blended CAC is rising because paid channels keep filling the top of the funnel while the bottom leaks. The CFO asks: “We are paying for trials, but are we paying for revenue?”
This scenario is hypothetical and used to illustrate the design and measurement decisions that follow. It is not a client case study.
The problem is not traffic. It is that the self-serve purchase flow - from pricing page to activated subscription - was treated as a marketing page, not as a commerce system. Fixing it means designing the entire journey: pricing surface, signup, in-product onboarding, paywall logic, and the event data that ties them together.
SaaS Ecommerce Platform vs SaaS That Sells Ecommerce: Separating Two Ideas the Keyword Blends
The phrase “SaaS ecommerce platform design” gets used for two very different things. Clarity here determines whether you brief a designer about a storefront or about a billing and account experience.
| Interpretation | Who the reader is | Primary surfaces to design | Typical platforms |
|---|---|---|---|
| SaaS ecommerce platform (a hosted storefront) | Merchant selling physical or digital goods | Product pages, cart, checkout | Shopify, BigCommerce, Squarespace, Wix, commercetools |
| SaaS business that bills subscriptions | Product or marketing lead at a subscription software company | Pricing page, signup, trial, account area, upgrade prompts | Stripe Billing, Chargebee, Recurly, Paddle, Lemon Squeezy |
The first is a storefront design problem: catalogue, merchandising, cart abandonment. The second is a subscription commerce problem: trial conversion, expansion revenue, churn. This article focuses on the second - the self-serve purchase flow for subscription software - while acknowledging that some readers may also be evaluating hosted commerce platforms to sell their product.
If you are a B2B SaaS or subscription business, anchor every design decision to SaaS economics: MRR, ARR, net revenue retention, churn, CAC payback, LTV:CAC, blended CAC and MER. Not revenue per session. Design choices on a pricing page or trial expiry screen directly influence these metrics.
Where the Commerce Layer Actually Sits: Hosted Platforms, Billing Engines and In-Product Onboarding
In a self-serve SaaS, the commerce layer is a sequence of connected surfaces, each with its own design logic and tracking requirements:
- Pricing page - where a visitor compares plans and decides whether to start a trial or book a demo.
- Signup/checkout - account creation, payment method capture, and consent collection.
- In-product onboarding - guided setup, first-value milestones, and usage prompts.
- Paywall or upgrade prompt - where a trial ends or a feature limit is reached.
- Account area - seats, usage dashboards, invoices, plan switches, cancellation.
A billing engine such as Stripe Billing or Chargebee handles the transaction, tax, and invoice logic. But the design of the experience around it determines whether users convert and expand. If the account area shows usage against limits, that surface becomes an expansion lever. If it hides seat management, expansion is unlikely.
Hosted commerce platforms like Shopify are built for product catalogues, not for managing subscription seats or usage-based pricing. If your model involves per-seat or metered billing, a dedicated billing engine is usually the better fit. Do not force a storefront platform to behave like a subscription management system.
Pricing Page as the Primary Commerce Surface: Three Layout Patterns and When Each Fits
The pricing page is where the sale starts. Three common patterns serve different pricing models:
| Pattern | Best for | Tracking implications |
|---|---|---|
| Tier table (2-4 plans, feature list) | Simple per-seat or flat-rate pricing | Track clicks per plan; need dataLayer events for each CTA |
| Usage calculator (sliders, estimates) | Usage-based or metered pricing | Track calculator interactions; server-side events for quote requests |
| Quote builder (configurable options) | Enterprise or hybrid sales-assisted models | Track step completions; pass lead score to CRM |
For a self-serve SaaS, the tier table is the most common starting point. But if your pricing is usage-based, a static table creates anxiety: users cannot predict their bill. A calculator that updates an estimate as they adjust a slider reduces that friction. It also generates a valuable event: calculator_used with the estimated value, which can be sent to your CRM or ad platform as an intent signal.
When designing a tier table, limit choices to three or four plans. Beyond that, choice overload reduces conversion. Use anchoring: place your most popular (or highest-value) plan in the middle or centre-left, and make the default selection visually distinct. Named-logo social proof above the table - “Trusted by [Company A], [Company B]” - is a behavioural lever that works if the logos are recognisable to your audience.
Trial, Freemium and Reverse Trial: Designing the Signup and Expiry Experience Around Acquisition Economics
The trial model you choose affects CAC payback and conversion rate. Three structures dominate:
- Free trial (time-limited): Full access for 7-14 days, then paywall. Common in B2B SaaS. Requires clear expiry messaging and a frictionless upgrade path.
- Freemium (feature-limited): Permanent free tier with limited seats or features. Lowers acquisition friction but can attract low-intent users who never convert.
- Reverse trial: Start with full access, then downgrade to free tier after a period. Uses loss aversion to drive conversion. Works best when the product’s value is obvious during the trial.
Design the signup experience around the trial model. For a time-limited trial, the signup form should capture only what is needed to start: work email, password, and consent. Do not ask for company size, phone number, or role unless that data is immediately used to personalise onboarding. Every extra field reduces completion.
The expiry experience is equally important. Instead of a hard lock, use a grace period with a downgrade path. Loss aversion is powerful: show what the user will lose (e.g., “Your team will lose access to [Project X] and [Report Y]”). Provide a one-click upgrade that preserves their data. This reduces churn and increases conversion.
Measure trial-to-paid conversion as your primary checkout completion metric. Industry-typical ranges for self-serve B2B SaaS sit between 15% and 25%, but this varies widely by price point and product complexity. Use your own baseline to set improvement targets.
The Self-Serve to Sales-Assist Handoff: Routing Enterprise Signals Without Breaking the Flow
Many SaaS businesses operate a hybrid model: self-serve for small teams, sales-assist for larger opportunities. The design challenge is to detect enterprise intent without forcing every user through a sales conversation.
Signals that suggest a sales-assist opportunity include: selecting a plan above a certain seat count, using the usage calculator with high values, requesting a custom quote, or signing up with a corporate email domain that matches your target account list. Route these signals to your CRM with a lead score, but keep the self-serve flow intact. Do not block the trial - let the user proceed while a sales rep reaches out in parallel.
Design the pricing page to support this: include a “Contact sales” link alongside the self-serve CTAs, but do not make it the primary action. The primary action should always be the self-serve path. Sales-assist is an enhancement, not a gate.
The Event Taxonomy a SaaS Design Brief Must Specify Before Design Begins
Before a single pixel is placed, define the events that will measure the self-serve purchase flow. A consistent taxonomy prevents gaps between design intent and analytics reality. Use this as a starting point:
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'plan_selected',
plan_id: 'growth',
plan_price_zar: 1200,
billing_period: 'monthly',
consent_analytics: true
});Recommended events: view_pricing, plan_selected, checkout_started, trial_started, trial_converted, seat_added, subscription_upgraded, subscription_cancelled. Each event should include context: plan ID, price, currency, and consent status. Push these to your data layer, then forward to GA4, Google Ads, and server-side platforms like LinkedIn Insight Tag via a server-side Google Tag Manager container.
Consent gating is mandatory under POPIA. Events must not fire until the user has opted in to analytics cookies. Use a consent management platform that integrates with your data layer to conditionally fire tags.
Map every event to a business outcome. trial_started is a top-of-funnel signal; trial_converted is the revenue event. Do not optimise ad campaigns for trial starts if your goal is paid conversions - use value-based bidding with offline conversion imports.
Designing the Account Area: Seats, Usage Dashboards, Invoices, Plan Switches and Cancellation
The account area is where expansion revenue happens. Design it to make adding seats, upgrading plans, and understanding usage effortless. Key surfaces include:
- Team management: Clearly show current seat count, allow inviting new members, and display the cost impact of adding seats. If seat additions trigger a prorated charge, show that before confirmation.
- Usage dashboard: For usage-based pricing, display current usage against plan limits with clear thresholds. Use visual indicators (e.g., a progress bar) to show how close the user is to an overage. This reduces billing surprises and builds trust.
- Invoices and payment method: Display past invoices with download links, and allow updating payment details. For South African businesses, support both card and EFT payment methods where possible.
- Plan switch: Allow upgrading or downgrading with clear proration messaging. Make upgrading one click; make downgrading require confirmation to reduce accidental churn.
- Cancellation: Do not hide it. A transparent cancellation flow that offers a pause or downgrade option can retain more revenue than a dark-pattern flow that frustrates users.
Track seat_added, subscription_upgraded, and subscription_cancelled events with the same rigour as trial conversions. These are leading indicators of net revenue retention.
Behavioural Levers That Hold Up: Defaults, Anchoring, Loss Aversion and Choice Load
Behavioural science offers levers that influence conversion without manipulation. Four that consistently hold up:
- Default effect: Pre-select the plan you want most users to choose. On a monthly/annual toggle, default to annual if that improves cash flow. Users are far more likely to stay with the default.
- Anchoring: Place a higher-priced plan first or make it visually prominent so that subsequent plans appear more affordable. This is not about deception - it is about framing.
- Loss aversion: On trial expiry, emphasise what the user loses if they do not upgrade, not just what they gain. “Keep your projects and reports” is more compelling than “Upgrade for more features.”
- Choice load: Limit plans to three or four. If you offer many variants, use a comparison table with a recommended column. Too many choices leads to decision paralysis.
These levers must be tested with proper A/B experiments. Do not assume they will work universally; cultural and market differences matter. Run tests with sufficient sample size and measure impact on trial-to-paid conversion, not just click-through.
Currency, Tax and Payment Reality: ZAR, USD Pricing, VAT and POPIA Consent on a Paid Signup
If you sell to South African businesses, price in ZAR and display VAT separately. The standard VAT rate is 15%. Include VAT in the final price or show it clearly at checkout - either is acceptable, but be consistent. Many SaaS businesses price in USD for international markets; if you do, provide a clear currency switcher and show the ZAR equivalent for local visitors.
Payment methods: card payments dominate online, but B2B buyers may prefer EFT or purchase-order invoicing. Offer multiple payment options if your billing engine supports it. For foreign suppliers of e-services to South African consumers, registration for VAT may be required - consult a tax advisor.
POPIA compliance is non-negotiable. Section 69 of POPIA governs direct marketing by electronic communication. You must obtain prior consent (opt-in) before sending marketing emails, and you must provide an easy opt-out. For analytics and advertising cookies, obtain consent before firing tags. Your signup form should include a clear consent checkbox for marketing communications, separate from the terms and conditions acceptance.
Design the consent experience to be clear and granular. A single “I agree to everything” checkbox is not sufficient under POPIA. Allow users to consent to analytics separately from marketing.
How to Brief a Designer on a SaaS Pricing and Product Page: States, Locales and Edge Cases
A design brief for a SaaS pricing and signup flow must cover more than the happy path. Include these elements:
- Locales: If you serve multiple countries, specify currency, language, and tax display rules for each.
- States: Logged-out vs logged-in, trial active vs expired, payment method valid vs failed.
- Edge cases: What happens when a user selects a plan that requires sales contact? What if the payment fails? What if the user has an existing subscription?
- Responsive behaviour: How does the tier table collapse on mobile? Ensure the primary CTA remains visible.
- Accessibility: Ensure form fields have labels, error messages are descriptive, and colour contrast meets WCAG standards.
Provide the designer with the event taxonomy so they can annotate where each event fires. This ensures that tracking is built into the design, not bolted on afterwards.
Measuring Outcomes: Reconciling GA4, Server-Side Events and Billing System MRR
Platform-reported conversions often overstate success. To get an accurate picture, reconcile three data sources:
- GA4: Use Explorations to build a funnel from
view_pricingtotrial_converted. Segment by plan and source. - Server-side events: Send conversion events from your server to Google Ads and LinkedIn using the Measurement Protocol or platform APIs. This captures conversions that browser-side tracking misses due to ad blockers or cookie restrictions.
- Billing system MRR: Your Stripe Billing or Chargebee dashboard is the source of truth for revenue. Compare cohort-level MRR from the billing system against GA4-reported conversions to identify discrepancies.
A monthly reconciliation process: export trial conversions from your billing system, match them to GA4 events by user ID or transaction ID, and calculate the variance. If GA4 reports 20% more conversions than the billing system, you have a tracking gap. Investigate consent gating, cross-domain issues, or duplicate events.
Use the reconciled data to calculate blended CAC and MER. Blended CAC = total marketing spend / new customers. MER = total revenue / total marketing spend. These metrics guide budget allocation more reliably than platform ROAS.
For a structured approach to reporting that ties these sources together, see Prebo Digital's reporting approach.
