Billing refactor
Existing functionality - improved usability
A content-heavy project that included creating or updating content for all flows, headers, subheads, labeling and CTAs, new information architecture and navigation naming conventions and an empathetic approach to some sensitive aspects og billing, such as restrictions and payment failures.
Legacy designs vs new prototype improvements
Baseline testing vs. updated usability testing - task completion skyrocketed due to label changes and design updates
Post launch analysis - All of the expected task completion rates jumped, one as high as 145%!
Problem
Legacy designs didn’t scale and online billing was a disconnected, frustrating experience.
Business goal
Improve UX to reduce calls for billing tasks that should be easy to self-manage online.
My role
I led content design. All content - headers, CTAs, informational messaging, error states and more - were written, considered or edited by me. I also heavily influenced IA, flows and design patterns as I partnered with product designers.
Legacy Designs
Content issues I noted for improvements
H1 and navigation (bills) is interesting for enterprise-level account management
Account number feels hidden
Hierarchy between account number and address
Duplicating header and sub header on each card
Mentioning past due on every account
Ambiguous label: “posted on”
Large font and weight of amount due
Content that doesn’t follow style guide
Capital A in CTA
Auto Pay, not Autopay
Account details
Selecting ‘Manage Account Details’ on the bills page, brought you to Bills Account Details. The top repeated the information from the bills page.
The bottom held saved payment methods. This is where Auto Pay is managed, but no one would likely know.
Baseline usability
We did baseline usability testing of certain tasks. The findings did not surprise the design team.
Other findings
60% felt amount due should reflect payment immediately
80% missed messaging that said it could take 24 hrs for amount due to reflect payment
71% were unable to find unenroll in Auto Pay
Other things we learned
People were looking for enroll in Auto Pay from the make a payment flow or when adding a new saved payment method
The account number wasn’t apparent enough when enrolling in Auto Pay.
Usability heuristics
Testing helped us see where we should focus our attention to improve usability:
Visibility of system status
Error prevention
Recognition rather than recall
Aesthetic and minimalist design
Recognize, diagnose and recover from errors
Design goals
Show pending payments in real time
Add account number and billing address to action flows for better recognition over recall
Add clearer launch points for paperless billing and statements
Eliminate bills details page and complexity of single vs. multiple billing account numbers
Add statement amount to statements table view
Add clearer CTAs and launch points for Auto Pay
User flows
Because this was a refactor, user flows existed, which helped us prepare and eliminate steps.
Workshop to define direction and strategy
Who: Design leadership - director, principal content designer (me!), principal product designer
How: We each started with a blank card component in Figma and were asked to re-imagine the account summary card. We time boxed for 20 minutes.
Results: We were all pretty aligned in what should be on the cards and what hierarchy we should test
2 product designers focused on more “pixel perfect” vision
I (content design) focused more on hierarchy, brevity, clear labeling and CTAs
Prototype
Content updates I made
Connected account number and billing address
Past due is mentioned only on past due accounts
Pending payments are front and center
Added launch points on cards, eliminating bills details page
Enroll and manage Auto Pay from cards
Followed style guideline for CTAs and naming conventions
Reduced amount due to a more reasonable size
Prototype usability
Test results gave us the green light from leadership.
Baseline testing
Prototype testing
Heads down in Figma
This was by far the largest feature work our team has worked on together. There were lessons to be learned on organization, division of work and trust.
API failure sample messaging
The lead developer provided all of the API failures so I could offer contextual support.
Statement tab
H1 and navigation was updated to billing to align to all tasks one can do in this section outside of paying a bill.
Copy at the top guides what they can do on the page.
Adding ‘statement’ in pagination grounds users to what they’re looking at. Previously, it said “Viewing: 1 - 12 of 48”.
Right-aligning dollar amount for easy number scanning.
Previous CTA was ‘download’ but it opens in a new tab. Initially I suggested ‘view’, but accessibility preferred ‘view PDF’ so we rolled with it..
Added ‘payments’ to pagination.
To reinforce the desire to see pending online payments immediately, we included them in payment history. The tool tip reads “Payments can show as pending for up to 24 hours.”
We used five bolded asterisks for data redaction which was visually cluttered. I suggested mid-line ellipses which is now our style guideline for data reduction.
Payment history tab
Auto Pay happy path
Revisiting some of the heuristics we planned to focus on and how they play out in Auto Pay.
Aesthetic and minimalist design
Launch point for managing Auto Pay is no longer hidden behind a more menu.
Instead of a simple on/off label, we decided to show a visual of what payment method was enrolled.
Recognition over recall
We created a standard to support the 50% of customers who identify their billing account by an account number and the other 50% who identify by an address by putting both in the heading box.
We also were consistent with informational copy under the H2 all throughout billing.
When saving a payment method, users can add a customized nickname so they can easily pick out the right method.
Visibility of status
We gave users their first Auto Pay date, here, but also repeated it on the billing card.
We reminded people that it may show as pending for up to 24 hours, repeating critical information in multiple stages in their journey.
Recognize, diagnose and recover from errors
We customized error messaging as much as was possible in the refactor, for example when someone leaves a field blank verses entering information wrong.
Please enter an account number.
Please double-check your account number.
Humanizing messaging throughout
Billing has a lot of messaging and scenarios, from restricted payment types, fully restricted accounts, inactive accounts, monthly credit card limits and more. This was the perfect time to touch up messaging, using a more empathetic approach.
We learned that payment methods can be restricted one day and unrestricted the next. Also, accounts can go into what’s referred to as “soft disconnect” for non-payment, but sometimes payments are entered into the wrong account or even delayed by mail. Empathy was critical.
Example 1:
Top was original, and this was placed under saved payment methods H2 (then called ‘stored payment methods’ - another content update I made).
Example 2:
The original lacked empathy and direction. If they can’t make online payments, how can they make payments? In the refactor we did a full-screen lockout so they didn’t start on the path of making a payment only to be blocked after effort was made. I also made sure there was no blame put on the user, that they knew what to do to resolve their blocker and continued the ‘at the moment’ language for softness.
Pending payments descoped
Once we started refinements, we learned of the API call lift it would take to show pending payments upon landing on the page. Leadership quickly descoped that from the project. Given that direction comes directly from customer data, we plan to revisit.
Impact
It was clear from the very first month that our efforts created a more user-friendly, friction-free experience. In a data pull from 25 days before launch to 25 days after launch, appropriate rates of engagement went up.
Here are a few highlights:
One time payment start - up 26%
One time payment complete - up 9%
Statement download - up 4%
Enroll in Auto Pay - up 10%
Turning on paperless billing - up 145%
Project reflection
This design-led project and it made me more thankful for the hard work PMs do.
HUGE projects like this can’t be done well without an amazing dev collaboration to help define all of the possible errors or scenarios to design for. During our retrospective on this project, we all shared our great appreciation of each other and the design/dev maturity we brought to this project.
Content design + product design = true design partners. Our lines were very blurred here in the most spectacular way. Designers are designers!
Core team
This was a design-led project. Including myself, there were three designers on this project.
Supporting teams:
Research
Product management
Development
Product owner
Research
Engineers
Accessibility
Analytics