Billing Page Redesign

Nascent Digital for TELUS

Role: Senior Product Designer
Responsibilities: Leading user research, wireframing, low and high fidelity prototyping, support hand-off and development of features, and any other design related tasks.

My Team:
Diana Hu – Product Owner
Linda Nakanishi, Dio Wong — Design Support
Sara Abuzinadah, Tiffany Moreside – Content Strategy & Writing
Jas Lamba, Samuel Junior – Patricio Salazar, Courage Eboigbe – App Development
Dennis Wang, Jorge Ramirez Landa – QA


The Problem

Users are having trouble understanding their bill, leading to lots customers support calls.


Main objectives

Business

  1. Reduce the amount of customer support calls.

Design

  1. Make the billing experience easier to understand by simplifying how the information is presented to the user.

  2. Make self-serve actions more accessible to all users

  3. Introduce the new TELUS brand guidelines to the app


Key solution elements

Make the bill understandable

Simplify the bill breakdown and allow customers to reveal more information when necessary

Empower customers to take control

Customers should not feel or be caught off guard at any point of their journey.

Reduce the amount of time and effort required for a customer to complete quick tasks

Expedite simple tasks

Promote trust with our users

The billing experience should increase our users’ trust in our brand and our service


Getting to work

The design process began with conceptual designs refined through multiple stakeholder meetings to ensure alignment before landing on the first prototype ready for user testing.

We skipped the wireframe stage and began with mid-to-high fidelity designs to quickly experiment and find out how the new branding could be applied to the new UI elements.


First Iteration

My hypothesis was that we could eliminate bill shock and therefore reduce the amount of support calls by alerting users of changes to their bill BEFORE showing them their bill total.

To do that I introduced some big changes to the billing experience:

  1. I introduced a “bill change’ section at the top of the billing landing page that would show users changes in their bill.

  2. I added also one ‘new’ billing state to experiment how users would interact with the bill.

  3. I moved the bill breakdown into a secondary screen to help create space to give more visibility for other billing-related self-serve actions

User Test 1

To test this concept, I created a script with three different user testing scenarios that I then moderated through usertesting.com.

Through testing I discovered that the placement of the bill change section lead users to see it as a ‘banner’ type notification and therefore ignore it - basically, banner blindness.

However, after they had ignored it, I asked all user to go back to it, and tap in to see the bill details. It turned out that not only did all user find this information extremely helpful, but they also liked the transparency we were offering.

Methodology

  • Scripted, moderated user interviews

  • 8 participants

  • 3 billing scenarios

Positive Takeaways

  • All Participants generally liked the new and “cleaner” layout

  • All users liked the information shown in the bill insights screen

Negative Takeaways

  • Half of the participants did not interact with the higher bill callouts

  • Participants were confused with scenario 3, they were expecting to see a bill balance

  • Some participants confused the transaction history link for the bill breakdown.


Iterate -> Test -> Repeat.

Throughout this project, I worked closely with the PO and the development team, iterating and testing each new version to ensure the best feasible experience possible.


We conducted 2 more usability tests and one A/B test resulting in our final designs.


Final Designs

Throughout the entire process, I worked with Product Management to make sure all use cases were considered. Continuous collaboration with the development team to ensured the designs utilized our backend/frontend capabilities effectively.

Bill Landing Screen

We were able to keep the bill landing screen clean and to the point while still including TELUS’ new branding guidelines to it.

Bill breakdown Screen

The bill breakdown was moved to its own screen so users can focus on finding the information they need

Billing states

Automatic Payment Card

Change for good card

Results

Business Outcomes

  • 274k projected reduction in billing related support calls per year.

  • $3.5 Million in yearly savings due to support call reduction.

Design Outcomes

  • 4 out 5 high value self-serve actions had an increase in click rate.

  • 7 new app specific design system components were created.

Learnings

  1. How to balance stakeholder and user feedback and expectations to identify innovative ways of communicating sensitive information to users

  2. The importance of knowing when to use a specific user testing methodology to understand where potential improvements can be made

  3. System-level thinking to design reusable components for a mobile/native platform

Previous
Previous

Launching WeTransfer's first AI feature

Next
Next

Increasing monthly payments by 8% and adding a digital wallet feature