a image of a black and yellow background

Sync — Subscription Management Redesign

SaaS · 2024

Lead Designer

10 Weeks

Web App (SaaS)

Overview

A legacy billing platform serving 18,000+ customers was losing users to poor UX. I led the redesign from discovery through to developer handoff—restructuring the information architecture, rebuilding the component system, and shipping a product that users actually wanted to use.

The Business Problem Users couldn't understand account health at a glance, took too many steps to complete basic tasks, and flooded support with questions that good UX should have answered.

The Design Goal Reduce task completion time by 30%+, cut support ticket volume, and build a scalable design system that could support the next three years of product growth.



01. Research & Discovery

Before designing solutions, we needed to define the actual friction points. I mapped out the daily workflows of our three primary user segments: Operations Managers, Finance Leads, and Support Agents.

Methodology:

  • 14 Semi-structured user interviews

  • 6 months of Mixpanel analytics audit

  • Heuristic evaluation of the core dashboard

Key Insights:

  1. Status Blindness: 73% of users couldn't identify an account's billing status without clicking away from the dashboard.

  2. Cancellation Drop-off: The existing 6-step cancellation flow caused 41% of users to abandon the task mid-way and reach out to support instead of completing it.

  3. The Search Deficit: The platform lacked global search. Finding a specific account required manual scrolling through paginated, flat lists.



02. Framing the Problem

I synthesized the research phase into a single guiding statement to align product and engineering before a single wireframe was sketched or shared.

How might we help Operations Managers understand account health and take necessary actions in under 10 seconds—without leaving the primary dashboard?



03. Ideation & Prototyping

Before moving into high-fidelity design, I facilitated a 2-day design sprint with PMs and lead engineers. We generated over 40 concepts, dot-voted on the strongest directions, and converged on a unified architecture.

Architectural Shifts:

  • Status-First Cards: Moving away from dense tables to a modular card system where account health drives the visual hierarchy of every screen.

  • Global Command Palette: Introducing a Cmd + K interface for instant account lookup, entirely bypassing the need for manual filtering.

  • 2-Step Cancellation: Collapsing the convoluted 6-step flow into a streamlined 2-step process paired with a built-in retention offer that gives users a reason to stay instead of leaving.


a image of a black and yellow background



04. High-Fidelity Execution

With the structure validated via guerrilla testing, I moved into execution. The visual system was rebuilt on a strict new token set—semantic colors for financial statuses, a rigid 8pt spacing grid, and a modernized type scale.


a image of a black and yellow background



05. Outcomes & Impact

The redesign was shipped to production after a successful 2-week beta with 50 power users. The impact was measured over 90 days post-launch.

The Results:

  • +40% Task completion speed across core billing workflows.

  • -28% Support ticket volume related to account navigation within 60 days.

  • 4.8 / 5 Post-launch System Usability Scale (SUS) score, surpassing the initial targets set at kickoff.

Reflection: With more runway, I would have invested in a comprehensive design system audit prior to kicking off the UX research. We ended up rebuilding several UI components twice due to legacy code inconsistencies that weren't caught soon enough during the early phases.

Create a free website with Framer, the website builder loved by startups, designers and agencies.