Accounts & Billing

Video source missing

Marketing Cloud · Accounts

Billing you can scan

I owned Accounts and Billing from research through hi-fi. Plan, usage, overages, add-ons, invoices, and payment methods needed to form a workspace people could navigate and understand – including the Stripe handoff and the payment-failed edge.

Role
UX / UI and Product Design
Platform
Maropost
Scope
Overview through invoices
Outcome
Clearer billing workspace

The jobs were buried in a dense layout

Accounts and Billing is where Maropost customers manage plan, usage, overages, add-ons, invoices, payment methods, and upgrades. The old surface buried those jobs. Customers could not quickly see which plan they were on, what they owed, or how to make a change.

I owned the redesign inside the Maropost design system. Product, engineering, and customer success were in the room from the start. Interviews, surveys, and product usage pointed at the same friction: plan and usage were hard to find; upgrade was a guess; invoices were a hunt.

Information architecture

Overview, Company, Subscription, Payment methods, Invoices, Quotes.

Upgrade, add-on, and cancel sit on that map. If payment has failed, upgrades stop. Stripe handles payment—the interface has to explain the redirect and return customers to the correct account state.

Information architecture and upgrade, change, and cancel flow for Accounts and Billing
IA and the change-plan flow Overview with current plan. Company info. Subscription packages by location. Payment methods including card, Stripe, and wire. Invoices you can filter and download. Quotes. Red note: upgrades are unavailable while an account has an unresolved payment failure.

The prototype is the product map

The information architecture remained stable from low-fidelity wireframes through high-fidelity prototypes. The wired prototype covers legacy plans, new vs existing customers, add-on changes, usage, and the Stripe redirect – not a restyle of one settings page.

High-fidelity Accounts and Billing prototype map including plans, add-ons, and Redirect to Stripe
High-fidelity prototype Subscriptions with a Legacy badge. Plans for new users vs plan plus add-ons. Add-on modal. Redirect to Stripe. Confirmation after the handoff.

What changed

The billing workspace is easier to scan. Plan, add-ons, payment methods, and invoices sit in a clearer structure, including the Stripe handoff. Customer feedback was positive, but no engagement or conversion baseline was captured; outcomes are therefore reported qualitatively.

Low-fidelity wireframes for the Accounts and Billing workspace
Low-fidelity design on the same map Structure before visual polish. The IA did not change between wireframe and prototype.