Enterprise Billing
Billing dashboard and self-service payment for international expansion
Project Scope
0→1 billing dashboard +
self-service payment flow
Role
Lead Product Designer (90%)
TEAM
Product Manager, Engineering (5), Product Designer (pricing preview)
Timeline
5 months (includes stakeholder alignment, research, design, testing, launch)
The Problem
“We can’t charge enterprises for overages they can’t see coming—but we’re leaving revenue on the table. ”
The core issue wasn’t surprise billing—it was lack of visibility creating mistrust. Customers had no way to track their usage against limits. When account executives tried to recommend upgrades or discuss overage charges, customers couldn’t verify the numbers. This opacity bred suspicion and defensiveness. “How do I know I’m actually exceeding my limit?” became a common pushback.
AEs were stuck: they couldn’t proactively identify upgrade opportunities, couldn’t show customers their usage trajectory , and had no data to justify plan changes. Meanwhile, customers churned from UX mistrust—not from being charged, but from feeling blind to their own usage and unable to control their costs.
For SMB expansion, international prospects expected self-service credit card payment, not 3-5 day wire transfers. The design challenge: create visibility that builds trust and empowers both customers and AEs, while enabling the company’s first payment system.
Before: Opaque billing, manual payments, revenue leakage.
After: Transparent dashboard, self-service payment, systematic charging.
Impact
Revenue leakage stopped—AEs could now justify overages and upgrades with usage data • UX mistrust eliminated—customers could verify their own usage • Billing disputes -91% • CS reported dashboard as ‘very useful and efficient’ • AEs empowered to drive upgrades proactively both in Korea and globally • Self-service payment enabled SMB market entry • Payment: 3-5 days → instant
My Approach
Strategic Alignment
Navigated competing priorities: CFO wanted revenue recovery , Sales worried about relationships, CS was overwhelmed. I brought Sales to customer interviews—hearing clients say transparency prevents disputes changed the conversation. Invited skeptical CS to co-design, turning doubters into champions.
Strategic prioritization: Users requested invoice customization early . I deferred these. The higher-value problem was visibility during the billing cycle, not retrospective analysis.
Research & Discovery
8 customer interviews, CS observation, contract analysis, benchmarking 15 B2B SaaS products, international pattern research.
Key insight: The problem wasn’t paying more—it was not being able to verify usage independently. “How do I know I’m actually exceeding my limit?” Customers didn’t trust numbers they couldn’t see or validate themselves. This opacity created defensive postures when AEs tried to discuss upgrades.
| “Users don’t hate paying more—they hate not being able to verify it”
Cultural intelligence: Having lived across different countries shaped how I approach design for diverse markets. I validated instincts through analysis of B2B SaaS payment flows and testing with colleagues from target markets. For example, trust signals vary: North America values explicit timing, Southeast Asia prioritizes security badges.
Multi-method discovery
Information Architecture:
Creating Order from Chaos
Faced with dozens of contract variations, I led systematic discovery through cross-functional workshops. The breakthrough: what appeared as dozens of unique variations were actually combinations of nine consistent building blocks.
This revealed two problems. First, internal naming conventions were inconsistent—the same concept had different names across teams. Second, our terminology didn’t align with market standards. Through competitive analysis and user interviews, I proposed standardized naming matching user expectations.
The framework:
Contract =
Plan Type + Pricing Unit + Limit per Cycle + Data Point Limit + Overage Rules + Promotional Adjustments
+ Payment Method + Billing Cycle + Support Plan
Why this mattered for design: Finite components enabled adaptive display—the interface shows only relevant information per contract type. This structure also made the system extensible: new plan types or promotional offers plug in systematically.
Cross-functional impact: The unified structure became shared language across Product, Engineering, Sales, and CS. Business team adopted the naming conventions. Engineering built one flexible system instead of special cases.
| “Finite components became predictable patterns”
Framework applied across complexity—from simple SMB targetting pay-as-you-go to enterprise contracts.
Design Solution 1
Usage Dashboard
One interface. Three problems solved.
The dashboard needed to give users visibility and control, enable fair overage charging, and empower AEs to drive upgrades.
Trial to billing transparency—how PAYG users experience proactive guidance throughout their journey .
Contextual Visualization: Matched chart type to usage model.
Proactive warnings: Layered at 70% (awareness), 90% (action with dollar impact), 100% (clear cost per unit).
Transparent calculations: Made every number clickable to reveal source, formula, methodology.
Dual-user design: Served both end users (awareness, trust, control) and account executives. AEs gained portfolio oversight, usage trend visibility, and data to drive upgrade conversations. When customers approached limits, AEs could proactively reach out based on actual usage patterns—turning reactive firefighting into strategic account growth.
Information Hierarchy & Progressive Disclosure
The hierarchy challenge: Users needed different information at different urgency levels. Critical information (overages approaching) required immediate visibility . Supporting details (calculation methodology) should be available but not overwhelming.
Hierarchy decisions:
- Primary level: Current usage vs limit, percentage consumed, time remaining - Secondary level: Projected overage cost, upgrade recommendations - Tertiary level: Calculation methodology , data sources, historical patterns
Progressive disclosure strategy (for Phase 3) : Every aggregated number is clickable. Click reveals: data source → calculation formula → underlying data points. This respects both the user who wants a quick overview and the user who needs to verify accuracy.
Visual weight system: Usage approaching limits gains visual prominence through color intensity , size, and position. Safe usage recedes. The interface dynamically adjusts emphasis based on billing state.
Adaptive Plan & Usage Dashboard
Contextual Visualization
Different usage models require different mental models. I designed adaptive visualizations matching each measurement approach— progress bars for monthly usage, flow diagrams for annual pooled plans, daily breakdowns for peak tracking.
Adaptive visualizations: Each chart type matches the user’s usage model and decision-making needs.
Progressive disclosure: Hover reveals breakdown— balancing simplicity with depth.
Result: 85% less confusion versus generic approach.
Behavioral Design: Building Trust Through Continuous Visibility
The challenge: Enable customers to independently verify their usage and AEs to have data-backed upgrade conversations—without creating alert fatigue or forcing constant dashboard checking.
The solution wasn’t about preventing surprise—it was about creating ongoing awareness and independent verification.
Layered visibility system: - 70% threshold: Continuous awareness. “You’re on track to use 90K MAU this month” —visible in dashboard, not intrusive - 90% threshold: Upgrade opportunity with verifiable data. “Based on your current trajectory , you’ll exceed limits. Here’s your usage breakdown” —AEs can now have data-backed conversations - 100% threshold: Clear communication. “You’ve used 125K MAU of 100K limit” —customer can verify , AE can justify
Design principles: - Independent verification: Any customer or AE can see the same numbers, validate the same data - Graduated urgency: Visual weight increases with threshold severity , but all information remains accessible - Continuous visibility: Not alerts, but persistent dashboard presence—users check when they want - Action proximity: Upgrade CTA appears with usage data and cost preview (Phase 3) - Calculation transparency: Dollar amounts reveal methodology—builds trust through openness
Non-disruptive integration: Information exists within dashboard context. Users aren’t pushed, they’re empowered to pull.
Result: UX mistrust eliminated. Billing disputes -91%.
Design Solution 2
Payment Flow
Dashboard builds trust. Payment feels natural.
Technical Collaboration & Integration Design
Company’s first payment integration. I learned Stripe’s constraints— billing cycle anchoring, async invoice generation, subscription states —and designed within them. Collaborated with engineering on the integration architecture: which data flows client-side, which server- side, how to handle webhook delays in the UI.
Trust-First Sequencing: Behavioral Design for Conversion
Strategic sequencing: Users experience dashboard transparency during 14-day trial (no card required), building trust through actual product value before requesting payment.
Conversion trigger design: When users approach trial end, pricing preview uses their actual trial usage data. “Based on your 85K MAU, estimated cost: $299/month. ” This contextual, data-driven prompt has higher conversion than generic “trial ending” messaging.
I led the systematic UX and integration work for this pricing preview (collaborating 50/50 with another designer), ensuring it worked across multiple plan types and could later support promotional tools recommending annual contracts when more economical.
Result: 34% higher trial signup versus card-required.
Trust-building sequence: Trial transparency → Usage-based conversion → Pricing preview → Payment entry → Confirmation.
Real-time cost preview based on actual usage—informed decision-making through contextual data.
Information Hierarchy in Payment Flow
Priority structure: - Primary: What you’re paying, when you’ll be charged - Secondary: What you’re getting, usage included - Tertiary: Terms, security details, support access
Behavioral design: “Your card will be charged $299 on December 1” appears before payment field entry . Users know exactly what they’re committing to before action. This reduced abandonment through clarity , not through hiding information.
Progressive disclosure in trust signals: Security badges appear contextually—near card entry field, not overwhelming the entire page. “Bank-level encryption” messaging appears on hover , available but not intrusive.
Comprehensive specifications ensuring accurate implementation—interaction states, information hierarchy , accessibility requirements.
Validation
Dashboard: Prototype testing with 12 users, iterated based on comprehension feedback. Payment flow: External usability testing, multiple rounds of refinement. Staged beta: internal team → SMB customers → enterprise accounts. Weekly post-launch monitoring drove continuous improvement.
Reflection
What I learned about information design: Early iterations prioritized visual polish over data transparency . Testing revealed users found this patronizing. When I exposed the underlying math through progressive disclosure, satisfaction increased.
| “Complexity isn’t the enemy . Opacity is. ”
I now start with transparency and layer progressive disclosure based on user needs, not design preference.
Scalable systems thinking: The adaptive display framework became company standard for complex feature design. Post-launch features ship 5-10x faster because the foundational information architecture supports rapid iteration.
Behavioral design insight: The key wasn’t preventing surprise—it was enabling independent verification. When customers can verify usage themselves, trust builds organically . When AEs have the same verified data, conversations shift from defensive to collaborative. The 70/90/100% system works because it’s persistent visibility , not intrusive warnings.
Full Impact
Before → After transformation: UX mistrust eliminated • CS efficiency dramatically improved • Revenue leakage stopped