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
Reduce the amount of customer support calls.
Design
Make the billing experience easier to understand by simplifying how the information is presented to the user.
Make self-serve actions more accessible to all users
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:
I introduced a “bill change’ section at the top of the billing landing page that would show users changes in their bill.
I added also one ‘new’ billing state to experiment how users would interact with the bill.
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
How to balance stakeholder and user feedback and expectations to identify innovative ways of communicating sensitive information to users
The importance of knowing when to use a specific user testing methodology to understand where potential improvements can be made
System-level thinking to design reusable components for a mobile/native platform