Subscription Management

Context & Scope

The legacy subscription interface was a single, cluttered page that combined plan details, add-on purchasing, invoices, payment methods, and cancellation into an unorganized layout.

Re-architecting information architecture using structured tab navigation.
Designing a native, frictionless in-app checkout flow for plan changes and add-ons.
Engineering an intentional, multi-step cancellation flow with churn feedback collection.

Arcflow dashboard with a weekly cash-flow chart, an 87% collections gauge, spending by category and top products — Subscription & billing lives inside Arcflow, an all-in-one workspace where businesses run orders, expenses, catalog, people and accounting.

Problem Statement

User problem

High cognitive load caused by crammed, unstructured billing controls.
Broken checkout experience where purchasing add-ons or changing tiers redirected users to external links outside the platform.

Business problem

Elevated accidental churn risk due to a prominent, easily accessible "Cancel Subscription" button on the main view.
High operational overhead on Support and Customer Success teams, who had to manually process transactions for confused users.

Key Questions

How can we restructure subscription settings to help users find key data in seconds without cognitive overload?

How can we replace external redirect links with a native, friction-free checkout flow directly inside the platform?

How can we introduce constructive friction to the cancellation journey to prevent churn while gathering valuable qualitative feedback?

Core Insights & Design Decisions

01

Insight

Users need a clear, high-level overview of their plan status and payment defaults, keeping deeper administrative actions separate.

Decision

4-Tab information architecture: segmented the monolithic view into four dedicated tabs (Overview, Add-ons, Billing History, Payment Methods) to minimize cognitive strain.

02

Insight

Upgrades stall when users cannot compare plan differences in real time without leaving their workflow.

Decision

Native in-app upgrades & comparison: replaced external links with an integrated tier comparison matrix and seamless in-platform checkout.

03

Insight

Adding self-service controls for add-ons directly drives expansion revenue (ARPU) when placed in an accessible marketplace context.

Decision

Retention-focused cancellation flow: tucked the cancel action into a secondary dropdown, coupled with a mandatory reason survey and confirmation modal.

Solution & Key Screens

Overview tab — snapshot dashboard showing active plan details, default payment method, real-time add-on usage, and a prominent tier upgrade trigger.
Add-ons tab — dedicated management hub to track consumption, adjust quantities, and purchase new modules natively.
Billing History tab — centralized repository for viewing and downloading past invoices and transaction records.
Payment Methods tab — clean interface to update, add, or switch credit cards and payment gateways.
Comparison & cancellation modals — side-by-side plan comparison table and the step-by-step exit survey flow.

The 4-tab architecture

One crowded page became four focused tabs. Each answers a single question — what am I on, what have I added, what have I paid — so people find what they need in seconds.

Scroll or swipe through the tabs

Subscription Overview tab: Growth plan at $599 a year, paid, renewing February 21, 2027, the default card, and usage bars for each add-on — Tab 1OverviewCurrent plan, renewal date, default payment method and live add-on usage — the answers most people came for.

Add-ons tab: cards for Payroll Coverage, POS Terminals, Additional Locations, Extra Team Seats, Advanced Reporting and API & Integrations, with usage and prices — Tab 2Add-onsEvery module as a card with its status, usage and price, and a Buy Add-ons action — no sales call needed.

Billing History tab: invoice table filtered by date, status and amount, one unpaid invoice with a Pay button and the rest paid — Tab 3Billing HistoryAll invoices in one filterable table, with status at a glance and Pay right on unpaid ones.

Invoice details page: subscription activation notice with line items for payroll seats, checkout terminals and the Growth plan, and a Pay Now button — Tab 3 · DetailInvoice detailsLine items, tax and receipt for a single invoice, with Pay Now when it's due.

Native, in-app plan changes

Upgrading used to mean leaving the product for an external checkout. Now plans are picked, compared and changed right inside Arcflow, so the decision never leaves the workflow.

Scroll or swipe to see every step

Change Plan page: Starter, Team, Growth and Enterprise plans with prices and feature lists, Growth marked 20% off — Step 1Pick a planFour tiers side by side, with the current plan marked and a monthly / annual toggle.

Compare Features view: plan comparison with Orders, Expenses, Catalog, Assets and People groups collapsed — Step 2Compare featuresA comparison matrix grouped by module, collapsed so it stays scannable.

Compare Features view with the Orders group expanded, showing checkmarks per plan for vendors, purchase orders, bills and more — Step 2…and dig into the detailsExpanding a module shows exactly which features each tier includes.

Plan Details side drawer over the subscription page listing everything in the Team plan at $299 a year — AnytimePlan details drawerWhat the current plan includes, one click away from the Overview, with a shortcut to compare plans.

Guarded cancellation

Cancel moved from a prominent button into the plan's actions menu, and leads to a short exit survey with a clear way to keep the subscription.

Tucked into the actions menu

Overview tab with the Change Plan menu open: Plan Details, Subscription History and, last, Cancel Subscription

Exit survey before confirming

Cancel subscription dialog asking why, with reasons like too expensive or missing features, and Keep Subscription next to Cancel Subscription

Validation & Iteration

Telemetry & testing — Tracked user behavioral events via Mixpanel, ran moderated usability tests, and monitored incoming Customer Success tickets.

Release 2 iteration — Addressed minor visual hierarchy inquiries identified in V1, refined interaction states, and eliminated remaining manual intervention touchpoints for support agents.

Before & After

Dimension	Before (legacy)	After (redesign)
Information layout	Monolithic, cluttered single-page view	Contextual 4-tab structured hierarchy
Checkout flow	External redirection (high friction / drop-off)	100% in-app native self-service purchasing
Plan evaluation	No direct tier comparison	Side-by-side interactive comparison matrix
Cancellation UX	Exposed button encouraging accidental churn	Guarded dropdown action with exit feedback loop

Impact

95–97% drop in billing-related support tickets, first month

100% in-app native purchasing — zero external drop-offs

Manual execution → strategic guidance (Customer Success role shift)

Redesigning subscription management for self-service billing

User problem

Business problem