Payment Experience
Redesigning Sonnet's Payment Experience
Before you dive in: this project is under NDA and still actively in development, so details here are intentionally high-level. I’ll share updates as things evolve, but feel free to reach out if you’re curious to learn more!
ROLE
Product Design, User Research, Interaction Design, Wireframing
TEAM
1 Product Owner
1 Product Designer (me!)
1 Copywriter
6 Developers
1 BSA
DURATION
March 2026 - Current
TOOLS
Figma, Claude
OVERVIEW
Turning a top call driver into a self-service win
Billing and payment issues were one of the top call drivers at Sonnet, costing the customer care team thousands of hours annually on repeated questions. Many of these calls didn't need an agent, they needed a clearer interface.
Problem
Designed for Success, Not for Failure
The existing payment page worked on the happy path but broke down in the moments that mattered most, particularly around missed payments and failed withdrawals.
Research revealed the core insight: customers could navigate the page, but they couldn't diagnose it. In failure scenarios, they were being asked to infer information the system already knew.
I inherited the project mid-flight from a senior designer, taking ownership from research synthesis through to development handoff.
IMPACT
The redesign shifted the experience from reactive and confusing to self-service and confidence-building.
Measured outcomes
Higher task success rates across key payment scenarios
Improved comprehension, especially during failure states
Users moved from guesswork → informed decision-making
Business impact (early signals)
Reduced reliance on customer support for payment-related issues
Lower operational strain on call centers
Stronger user trust through increased transparency
SOLUTION
Core improvements
The redesign focused on making the system’s logic visible, contextual, and actionable — especially in failure scenarios.
Clear payment history with built-in context
Introduced an expandable table with an embedded timeline for missed payments
Helped users understand not just what happened, but when and why
2. Inline financial breakdowns
Displayed premiums, taxes, and service fees directly within each payment
Eliminated the need to cross-reference or mentally calculate totals
3. Mobile-first restructuring
Reorganized layout to follow natural reading patterns (top-to-bottom, left-to-right)
Improved scanability and reduced cognitive load
Payment timeline for missed payments
Helps customers understand exactly where their payment stands and what to do next, reducing confusion and uncertainty
REFLECTION
Takeaways
Taking over the project mid-flight reshaped how I think about ownership. Instead of focusing only on refining what was already there, I had to step back and understand where the experience wasn’t fully aligning with how customers actually think and navigate these situations.
Running three rounds of user research really reinforced how critical those insights are. Each round uncovered something new — not just about usability, but about how people interpret, question, and make decisions in moments of uncertainty. It became clear that without that input, it’s easy to miss what actually matters.
One of my biggest takeaways was learning to treat ambiguity as a signal. When users said “I guess” or “maybe,” it consistently pointed to where the design wasn’t doing enough — and where clearer communication could make a meaningful difference.
NEXT UP