Context & Initiative
Billing is the highest-trafficked area of the Cox Business My Account (CBMA) portal. Despite this, digital adoption for self-service billing remained below target, with a significant portion of customers still calling customer service to pay bills or resolve billing questions.
Initiative
This project aimed to increase digital adoption of self-service billing by:
- Modernizing the billing UI to align with current design system standards
- Transitioning from an account-based architecture to a location-based structure
- Reducing the steps required to view and pay bills
My Role
Lead designer responsible for research synthesis, problem framing, information architecture, and solution design. After stakeholder approval of the proposed solution, I onboarded a junior designer to execute high-fidelity visual designs for approved flows while I continued to lead design direction and iteration.
Success Metrics
Primary metric: Call Effectiveness: the percentage of billing page visits that result in successful self-service (no call to customer support).
- Baseline: 90% of billing page visits resulted in no call
- Target: Increase self-service completion rate by reducing the 10% of visits that still required a support call
Constraints
- Solutions had to work within existing technical architecture
- Limited development capacity: net-new features required strong justification
- Any additions beyond the core redesign had to be carefully prioritized against dev time and resources
Discovery
Channel Landscape
Cox Business customers interact through three primary channels:
- Website (CBMA): ~50% of interactions
- Mobile App: ~30% of interactions
- Phone (Customer Service): ~20% of interactions
The 20% call volume represents a significant operational cost and a signal that digital self-service isn't fully meeting user needs.
Leveraging Previous Work
Retrospectives from the CBMA orders redesign revealed that location-based architecture significantly reduced user confusion. This insight became a foundational input for the billing project, allowing us to apply validated patterns rather than starting from scratch.
Understanding the Legacy State
Historically, billing information was structured around the sales process, account-based and assigned during order creation. Users with multiple locations had to navigate billing through account identifiers that held no inherent meaning to them. The only personalization available was an account alias feature with statistically low adoption.
Research Methods
Page flow analysis, drop-off points, and feature usage patterns to identify where users struggled or abandoned tasks.
Personas
The "Pay and Go" User
Typically single-location SMB
Monthly visitor (unless on autopay)
“I just want to know what I owe, why I owe it, and pay it without hassle.”
Goals
- ✓Pay the bill quickly and leave
- ✓Clear total amount due with minimal steps to payment
- ✓Confirmation of success
Pain Points
- Too many clicks to reach payment
- Unclear which account to select
- Information overload
The "Detail-Oriented Manager"
Multi-location franchise or enterprise
Bi-weekly to monthly, checking for discrepancies
“I need to see exactly what each location is being charged, quickly spot issues, and pay without chasing down details.”
Goals
- ✓Understand billing across locations
- ✓Track changes and reconcile transactions
- ✓Ability to compare and audit
Pain Points
- No way to view by location
- Forced to memorize account IDs
- Difficult to get a consolidated picture
Problem Definition
Customers with multiple accounts face unnecessary friction when managing bills, services, and account settings. The root cause: billing information is displayed at the account level (an internal sales construct) rather than the location level, which reflects how customers actually think about their business.
“Users think in locations. The system speaks in accounts. This mismatch drives confusion, support calls, and abandonment.
Supporting Evidence
- The account-vs-location mismatch was a known pain point flagged by product management
- Surveys and call center reports consistently surfaced confusion around navigating multiple accounts
- The existing workaround (account alias labels) had minimal usage
Why This Matters Beyond Billing
Solving the location-based architecture problem is foundational. Future initiatives (including Roles and Permissions) depend on this structure. This project was about laying architectural groundwork for the platform's evolution.
Scope
Out of scope:
- Functional changes to billing actions (already implemented as modals)
- Recent transactions table redesign (relies on a separate invoice system)
Process & Rationale
Approach
- Segments, Analytics & Feedback → Personas: Synthesized quantitative data with qualitative feedback to create actionable personas
- IA Flows: Mapped personas against the current billing architecture to identify friction points and opportunities for consolidation
- Wireframes: Conceptualized a summary-first billing view with clear action paths per location
Why This Process
Why personas? With two distinct user types requiring different information hierarchies, personas ensured we didn't design for an “average” user that doesn't exist.
Why IA flows? Mapping the billing process across variations surfaced friction in the current architecture and served as a validation tool for proposed solutions.
Why wireframes? Given the holistic redesign scope, wireframes provided a consistent template for iterating on what information and actions should be available to each user type.
Why not journey maps? The billing experience had limited steps and low variation between user paths. The value was in understanding who the users were and what they needed.
Collaboration
Stakeholders were embedded throughout the process, from problem definition through solution conceptualization to iterative design. Weekly whiteboarding sessions ran through the wireframing phase. I participated in engineering refinement meetings and onboarded a junior designer during the high-fidelity phase.
Solution
Architecture: Before & After
- Billing structured around sales/account IDs
- Multiple locations required account identifiers
- Fewer self-service payment entry points
- Location-based structure aligned with orders
- Clear path per location to statements
- Additional payment opportunities at each level
Original account-based structure vs. location-based structure with additional payment opportunities.
Key Design Decisions
Scalable Layout Architecture
The billing layout accommodates varying functionality across views. Sections that don't apply display contextual messaging instead of shifting the layout, reducing cognitive load as users navigate between levels.
Statement Selector Cards
Replaced truncated tab-based statement selection with card-based selection, giving users clearer understanding of both the interaction and the content through complete statement labels.
Activity Since Your Last Bill
A new dynamic section surfacing recent charges and credits in plain language, giving detail-oriented users at-a-glance insight without parsing dense transaction data.
Validation & Iteration
Key Iterations
Function Placement & Layout Consistency
Early wireframes placed the location selector as the second-highest priority action. The challenge: single-location users don't need a location picker, creating inconsistent function placement. Solution: relocate the location selector to a simplified version in the page header, freeing the main content area to maintain consistent function placement across all user types.
Result: Consistent layout regardless of user type
Statement Selector: Tabs to Cards
Originally, statements were displayed as tabs. With labels averaging 60 characters, tabs were severely truncated. Word wrap strayed too far from expected tab behavior, and inactive tab styles failed contrast ratio targets. Solution: horizontally-scrollable cards that accommodate full labels, provide stronger visual emphasis for the selected state, and pass contrast requirements.
Result: Readable labels, accessible contrast, clearer interaction model
Validation
- Continuous stakeholder alignment: Weekly whiteboarding sessions with PMs and BAs served as ongoing design validation
- Engineering feasibility: Participation in refinement meetings validated implementation within constraints
- User acceptance testing: UAT against defined criteria and step-by-step scenarios
- Rollout support: Pendo guides created to help users navigate the redesigned experience
Outcome & Reflection
Post-launch, the average billing page visit-to-no-call rate increased from 90% to 98%, an 80% reduction in the proportion of users who needed to call support after visiting the billing page.
Learnings
- Edge cases reveal better patterns. The single-location user scenario forced us to rethink the location selector placement. The solution improved the experience for all users, not just the edge case.
- Previous work compounds. Leveraging patterns from the orders redesign and dashboard billing widget accelerated this project significantly.
- When a component fights the content, question the component. The statement selector evolution from tabs to cards happened because we stopped trying to make tabs work and asked whether tabs were the right pattern at all.
What I'd Do Differently
I'd push harder for direct user access. We adapted well with surveys and call center feedback, but direct user testing would have strengthened confidence in specific design decisions. I'd also capture more baseline data. Having more granular “before” metrics would make the impact story even more compelling.
Future Implications
The location-based architecture established in this project creates a reusable foundation for other account management areas. As Cox Business continues to modernize CBMA, this model provides a consistent framework that users will recognize and understand, reducing the learning curve for future feature rollouts.
