Conversion · Multi-Market · Payments
Context
Only 17 of every 100 customers who completed the web sign-up form went on to buy Xero.
That 83% drop-off across the full signup funnel was one of the company's OKRs the year I worked on this. The loss was spread across a long journey: from the website sign-up screens to account activation by email, again at organisation creation, again during setup inside the product, and again at a second, product-side checkout.
The underlying problem was a disjointed flow that made customers repeat a decision. Xero's signup gave people two ways in: a 30-day free trial with access to all features and no payment details, or a plan-specific "Buy now" path that also didn't take payment on the website. In the buy-now path a customer chose a specific plan on the website, then left for their email inbox, activated an account, set up their organisation inside the product, and chose a plan again in a product checkout that looked different from the website and used slightly different labels.
Customers had to make the same high-stakes decision twice, in two visual languages, across two platforms. Xero's customers are small business owners — sole traders, creatives, hospitality operators — and most aren't accountants. Many rely on a bookkeeper or pick whatever their accountant recommends, then get back to their work. Earlier research showed this repetition and mismatch stalled them.
The decision to move payment upfront to the website was set at a business level; my role was to make it work as an experience. Taking payment earlier would typically increase drop-off, but the hypothesis was that the real friction wasn't the payment details — it was the fractured journey and the repeated decision. A single continuous flow would attract higher-intent customers rather than low-intent trial sign-ups.
Before: free trial → re-select plan in-product → enter payment in-product
After: choose plan and pay on the website → single continuous flow into product
My Role
The work ran across two phases, growing in scope as I moved teams. Phase 1 introduced and validated the new flow on the website sign-up screens in the US and NZ. Phase 2 scaled it to the UK, AU and CA, and carried into the in-product checkout, with the added complexity of tax, discounting, and the emails.
Across the project I:
Designed the order summary panel across desktop, tablet and mobile. I built the desktop prototype; the senior designer built mobile and owned the form fields and confirmation page.
Ran 4 of 8 moderated sessions with US participants, and synthesised the findings alongside the senior designer.
Mapped how the new flow would coexist with the live trial and buy-now paths, including every website entry point into signup (pricing, feature and plan pages).
In Phase 2, contributed to localising the experience for the UK and AU rollout alongside a peer designer, and owned the tax-communication redesign across the US, NZ, UK, CA and AU. The in-product discount error handling and the post-signup email redesign applied across all regions.
The experience rolled out gradually rather than all at once: it launched in the US in 2024 as a
subscription-opt-out experiment at 5% of traffic, scaled to a 50% A/B test, then to 100% on the main pages, and lifted conversion in both the US and NZ.
The Design
Order Summary Panel
The order summary panel is the persistent "receipt" beside the signup steps — a constant reference for what the customer is buying. I designed it to feel familiar, following the mental model of a receipt, so customers could take it in at a glance without leaving the form to check.
Four key design decisions shaped the final component.
1. Panel placement: left to right
The first iteration inherited the existing trial and buy-now layout, with the panel on the left and the form on the right. That worked for a single-page form. But the new flow is multi-step, and here it broke down: the form — the customer's actual task — sat on the right, while the unchanging panel held the primary reading position on the left. Following an F-reading pattern, customers met secondary information first at every step. Moving the panel to the right matched standard SaaS checkout convention, where action leads and the summary supports, and let the panel hold one consistent position across all four steps.
2. Discount colour: blue to green
Baby-blue was the established discount signal across Xero's website, so it seemed the obvious choice for "get one month free." But in the context of the page, rather than in isolation, the blue flattened into the pale-blue background and lost all signal. Green isn't the established promotional colour, but it reads as positive, works as an accessible standalone colour for the saving and the "$0.00," and stays legible against the background. Green was used to signal the discount over the established blue — clarity for the customer was prioritised over consistency with an internal convention.
3. Discount summary: many lines to one
My first version mirrored the website pricing table, showing each saving where it happened: the usual plan price, the discounted price, the saving and its period, a highlighted dollar saving, then the totals. Stress-testing against stacked promotions (one-month-free, a percentage discount, and multiple add-ons) showed that in a narrow panel it became a long, repetitive column where every section carried its own maths, and on mobile the total needed scrolling to reach. I listed the usual amounts cleanly per line and resolved all the discounting once, at the bottom — same information, less to process, total always in view.
4. Price wording: removing "usual"
Research showed "usual" ("usual monthly total") created uncertainty — it implied the price was provisional and might rise later. Around the same time the business changed how tax worked (covered in Phase 2), so the panel also had to show that tax depended on the billing address entered. "Usual monthly total" became "recurring total," a fixed and predictable price that gave customers more certainty about what they'd continue to pay. I added a "subtotal / tax — calculated at final step" line so a tax amount never appeared as a surprise, and let the wording flex with progress: "per month excluding tax" before billing details, "including tax" after.
A note on the stacked-promotion versions in these frames: I designed for the stacked complexity so the component wouldn't break. The business later decided promotions wouldn't stack in this flow on the website, so the live experience uses the simpler state.
Research
The flow was validated through 8 moderated sessions with US participants: 4 sole traders and 4 owners of small-to-medium businesses with employees. I ran 4 and synthesised alongside the senior designer.
What we learned:
Upfront payment wasn't a blocker. People weren't there just for the free month, and entering a card didn't put them off, especially with the reassurance they could cancel within it. As one participant put it: "switching accounting software is too much effort to only do it for the one month free."
The order summary panel worked as a visual anchor. Participants valued the constant reminder of what they were buying, and the price breakdown in particular. One said the layout "helps my eyes to read and process the information simply. I like that the summary panel is a constant reminder of what you're purchasing throughout the sign up process."
People wanted certainty about dates and future price. They understood the free month but wanted the exact billing date and confirmation the price wouldn't change. This drove the wording changes above.
"One month free" and "free trial" blurred. Some used the terms interchangeably, which later mattered for discounting (see Phase 2).
Two CTAs weren't confusing. Despite internal concern about showing both "get one month free" and "buy now" in the pricing table, testing showed people handled it fine.
Localisation, Tax and Discounting
Phase 2 rolled the flow out to the UK and AU, which meant working in the in-product checkout as well as the website. Complexity grew as the validated flow was integrated with everything around it: tax, discounting, in-product error handling, and the emails.
Tax
Previously Xero absorbed the tax component. A business change meant tax was now passed on to customers — and because tax varies by country, and by state in the US, the final amount couldn't be known until the customer entered their billing address. This gave the panel a new problem to solve: it had to show that tax was coming without showing a number it couldn't yet calculate, which is where the "calculated at final step" line and the excluding/including-tax wording came from. Getting this right meant aligning the same tax logic and wording across five markets and three surfaces — website, emails and in-product — each needing legal sign-off.
The discount trap
Moving payment forward created a hidden cost. By creating the account early in the "get one month free" path, those customers became ineligible for the heavy promotions marketing runs (for example 50–90% off for several months), which they could still get through the old "buy now" path. So a flow sold on less friction could quietly hand someone a worse deal.
The root cause was our legacy billing system, which only supported discounts for new subscribers, new subscriptions and upgrades, not for existing payment-first customers. Resolving it properly meant opening discounting up to payment-first customers in Phase 2. One constraint shaped the approach: the billing platform was being replaced, a multi-year migration to Chargebee. The job wasn't to build a perfect discounting system, it was to build something functionally solid that wouldn't block promotions for the two-to-three years until the new platform had migrated. Right-sizing the effort to that reality was part of the design decision.
In-product discount error messaging
Offering the discount in-product introduced messy failure states: the discount was already applied, or it was linked to a different organisation, or the customer was logged into a non-linked org when they clicked through from the email. One option was a separate message for each case. Instead I collapsed them into a single scalable message that listed the possible reasons and gave one recovery action, "check your subscription list," resulting in far less for engineering to build and maintain. I grounded the pattern in Xero's existing in-product system: a toast for passive confirmation, a banner when action was required, and colour to signal severity before the words (green confirm, red error bar), so people read the outcome at a glance.
The emails
The confirmation and lifecycle emails come after signup is completed. The website and in-product checkout had been streamlined, but the emails were inconsistent: oversized headers with imagery that pushed the billing information below the fold, and different treatments across the set.
There was a specific issue with the confirmation email. My order summary panel had already been carried into it, lifted directly from the checkout, with a date line added. The panel had been built as a persistent anchor during an active checkout, and it didn't hold the same meaning read cold in an inbox days later. Research on that email caught the problem: seeing the recurring price first, some people weren't sure whether they'd been charged.
So I redesigned the receipt for the email. All email copy had been approved by legal, so improvements came from hierarchy and structure. I surfaced "Today's total £0.00" at the very top, in bold, so the first line shows that nothing is being charged today. I confined green to the discount lines only, split billing and account details into a separate container for chunking, and chose a longer but clearer single-line billing layout, since the £0 was already surfaced up top. I stress-tested it across the shortest and longest receipts: no add-ons, and all add-ons with stacked discounts. Across the rest of the set I removed the heavy header images, cut unnecessary padding, and balanced each layout, leaving the plain verify-account email alone since it didn't need it.
Because I was changing hierarchy and structure rather than the legally-locked copy, the work fit within the brief's scope — and the PM who owned the emails agreed and approved it. The redesigned emails shipped.
In A/B testing, the flow contributed to:
+6.40% website sign-up → paid organisation uplift (US), with a +9% improvement in session-to-paid-org
+1.51% uplift (NZ), with +13% session-to-paid-org and a +11% increase in second-billing-cycle retention
Signup reduced from 12 → 9 screens
It launched in the US in 2024 and rolled out to NZ, then the UK (2025, staggered 10 → 30 → 50% over a five-month experiment) and AU. It's now live across all four markets (US, NZ, UK, AU).
A few things I conceded, or would push on with more time:
Discount lock-in (resolved in Phase 2): reducing friction created a hidden cost — customers on the new flow became ineligible for better deals still available through the old buy-now path.
The "get one month free" CTA loop: the nav CTA sent people back to the pricing page to pick a plan, a redundant loop. A cleaner entry would have been better, but routing people into the payment-first flow was a business priority.
Feature-name inconsistencies: the same feature was named differently across surfaces ("Pay bills (GBP)" vs "Submit CIS returns" vs "CIS Contractor" on one screen). It belonged to another team and sat outside the project's scope, so the inconsistency was flagged and backlogged.
Subscription-cancellation copy: "cancellation due on [date]" wasn't clear about whether the subscription had actually been cancelled. Engineering was scoped to this project, not subscription management, so this was logged for a future solve.
The lift didn't come from the headline idea of taking payment early — it came from removing a duplicated decision and making one continuous journey. The project also reinforced how to ship complex change incrementally: validate in simpler markets first, then scale into the ones where tax, legal and promotional complexity compound.