Redesigning cancel, downgrade, and upsell flows for a SaaS platform ahead of a significant price increase — using friction as a design tool rather than an obstacle.
SaaS platform used by contractors across the country to view and submit bids for advertised bid opportunities from state transportation agencies.
The subscription model is built around three tiers, with optional add-ons available to paid accounts:
Add-ons available on paid tiers
The existing cancel flow treated every user identically with a single path regardless of tier, active add-ons, or account history. There was no reliable retention mechanism.
The business needed a cancel flow that could do several things at once: respect users who genuinely wanted to leave, surface real value to those who might not have considered a downgrade, and handle the complexity of tier-aware paths and pending states without feeling manipulative or confusing.
These weren't the only design choices in the project, but they were the ones where the reasoning mattered most.
Modal actions were carefully considered to use placement and weight to lead toward retention. All actions are clearly labeled and always available, but visual hierarchy is doing some heavy lifting. A user must make a slightly more deliberate choice to proceed with the destructive action.
Before any confirmation step, the flow surfaces a clear list of will be lost based on their current tier and active add-ons. Make the decision feel real and considered.
Tier 2 subscribers get a choice to downgrade to Tier 1 or cancel entirely. Free and Tier 1 users go straight to the cancel path. A Tier 2 user may not realize that Tier 1 still covers what they really need. Branching happens early, so the user always knows where they're headed.
Discount offer appears only after the user has cleared the feature loss summary. It's framed simply, and never repeated. Gating it was deliberate: offering it too early feels like a bribe; offering it after a confirmation feels desperate. The timing matters.
Require typing CANCEL or DOWNGRADE to confirm. It's not security theater — something real is happening. The action is permanent (access continues through the end of the billing period) and final. Permanent cancellation is a separate flow available to active, unpaid accounts, and treated with similar friction and an exit survey before permanently shutting the door.
Both downgrade-pending and cancel-pending accounts see a persistent reactivation option in their settings. A single click to reverse the scheduled change before the billing period closes. Continued access to what they've already paid for and the door is temporarily open to maintain that access easily.
The prototype covers the full cancel and downgrade flows for both Tier 1 and Tier 2 accounts — including the feature loss summary, loyalty discount offer, typed confirmation, and pending-state views with single-click reactivation. Built with Vue 3, the Causeway component library, and Tailwind CSS.
Open preset to a specific tier. Try cancelling as a Tier 2 user to see the tier-aware fork — or as a Tier 1 user to go straight to the feature loss summary. Reactivation is available from the pending state.
The full user flow was documented in FigJam, mapping all entry points, tier branches, discount gate, confirmation steps, and pending states.
The feature loss summary appears to be the highest-leverage element in the flow. Without step-level instrumentation it's not possible to confirm this directly, but the abandonment pattern is consistent with users seeing their tier's feature list and reconsidering. The loyalty discount likely captured a smaller segment of high-intent cancellers who had already processed the loss framing.
The reactivation path was used by a meaningful subset of users who completed a cancel or downgrade — a strong signal that the friction introduced was considered rather than frustrating, and that keeping the door open had real value beyond the billing period.