Projects
Transforming the Experience of Utility Collection
Transforming the Experience of Utility Collection
A major U.S. utility company that needed to modernize its approach to customer payment installments program.
A major U.S. utility company that needed to modernize its approach to customer payment installments program.
Project Overview
Project Overview
In January 2024, I joined the DTE Energy Project as the leading UX designer from Launch by NTT DATA side to DTE's Collection team, working alongside a UX Director and a UX Writer. Our mission was to transform an existing experience available through the Call center into a seamless digital experience.
In January 2024, I joined the DTE Energy Project as the leading UX designer from Launch by NTT DATA side to DTE's Collection team, working alongside a UX Director and a UX Writer. Our mission was to transform an existing experience available through the Call center into a seamless digital experience.
What's the ask
What's the ask
What's the ask
Problem
Problem
Every time a user fell behind on their bill or had a huge balance due, they had to go through a series of phone calls to learn about DTE’s Payment Programs and be able to pay off their bill over time without penalty or service interruption.
Every time a user fell behind on their bill or had a huge balance due, they had to go through a series of phone calls to learn about DTE’s Payment Programs and be able to pay off their bill over time without penalty or service interruption.
Objectives
Objectives
The goal was to reduce customer calls about overdue balances and optimize resource allocation, while also enhancing the promotion of the Payment Agreement experience to increase user satisfaction.
The goal was to reduce customer calls about overdue balances and optimize resource allocation, while also enhancing the promotion of the Payment Agreement experience to increase user satisfaction.
Solution
Solution
Developing a system that identifies users who are eligible for DTE’s Payment options and direct the user to a page where they could easily compare their options. Provide a breakdown of monthly payments, required down payment, and scheduling options, empowering users to select the best solution for their situation and prevent service interruptions.
Developing a system that identifies users who are eligible for DTE’s Payment options and direct the user to a page where they could easily compare their options. Provide a breakdown of monthly payments, required down payment, and scheduling options, empowering users to select the best solution for their situation and prevent service interruptions.
My Role
My Role
As the main UX designer on the project, I was responsible for all ideation, user flows, wire-framing, prototyping, and UI changes. The DTE team conducted user research, though I was able to observe the testing. I worked with the Agile Lead, Product Manager, Product Owner, DTE's Business team, Crossfunctional development teams involved, and Quality engineers daily to ensure we met our goals at Launch & DTE.
As the main UX designer on the project, I was responsible for all ideation, user flows, wire-framing, prototyping, and UI changes. The DTE team conducted user research, though I was able to observe the testing. I worked with the Agile Lead, Product Manager, Product Owner, DTE's Business team, Crossfunctional development teams involved, and Quality engineers daily to ensure we met our goals at Launch & DTE.
Challenges & Constraints
Challenges & Constraints
No Access to Users
No Access to Users
DTE is very careful when it comes to dealing with its users, and they don’t allow contractors to speak to them directly. I could not conduct user interviews or user testing and had to rely solely on Customer management to understand the users I was designing for.
DTE is very careful when it comes to dealing with its users, and they don’t allow contractors to speak to them directly. I could not conduct user interviews or user testing and had to rely solely on Customer management to understand the users I was designing for.
Technical Constraints
Technical Constraints
The technical constraint for this project was the lack of a web-based Payment Agreement experience. The development team needed to build APIs to enable data flow between the existing CRM system and the web platform. This required collaboration with other DTE teams, including Newlook and the Payment Center, to ensure seamless integration and functionality.
The technical constraint for this project was the lack of a web-based Payment Agreement experience. The development team needed to build APIs to enable data flow between the existing CRM system and the web platform. This required collaboration with other DTE teams, including Newlook and the Payment Center, to ensure seamless integration and functionality.
Design Constraints
Design Constraints
Considering the involvement of multiple databases and the sensitive nature of the users' financial distress, I made deliberate design decisions that prioritized functionality over visual or conceptual design in certain instances to ensure the experience remained effective and supportive for the end users.
Considering the involvement of multiple databases and the sensitive nature of the users' financial distress, I made deliberate design decisions that prioritized functionality over visual or conceptual design in certain instances to ensure the experience remained effective and supportive for the end users.
Big Pivots
Big Pivots
A major pivot occurred during Phase 1 of the design process. While finalizing designs for the development team hand-off, the team uncovered an issue with the existing system. This discovery necessitated changes to the user flow and required significant design adjustments to address the issue effectively.
A major pivot occurred during Phase 1 of the design process. While finalizing designs for the development team hand-off, the team uncovered an issue with the existing system. This discovery necessitated changes to the user flow and required significant design adjustments to address the issue effectively.
Research
Research
How Payment Agreement Works
How Payment Agreement Works
DTE Energy's Payment Agreement (PA) allows eligible residential and commercial customers to extend the payment of their outstanding and current account balances. This installment plan requires a down payment, with the remaining balance spread over 3 to 36 months. The installment must be paid alongside monthly energy charges.
DTE Energy's Payment Agreement (PA) allows eligible residential and commercial customers to extend the payment of their outstanding and current account balances. This installment plan requires a down payment, with the remaining balance spread over 3 to 36 months. The installment must be paid alongside monthly energy charges.
Importance of Digital Transformation
Importance of Digital Transformation
Research Insight
Research Insight
The DTE research team gathered extensive feedback through their call center. This included insights from users familiar with the Payment Agreement and those unaware of it, guiding our design approach.
The DTE research team gathered extensive feedback through their call center. This included insights from users familiar with the Payment Agreement and those unaware of it, guiding our design approach.
Current limitation
Current limitation
Payment Agreement enrollment was only available through the Call Center.
Payment Agreement enrollment was only available through the Call Center.
Efficiency Gains
Efficiency Gains
Introducing a web experience aimed to reduce approximately 16,000 annual calls.
Introducing a web experience aimed to reduce approximately 16,000 annual calls.
Performance Metrics
Performance Metrics
The project targeted improvements in the Digital Collections Completion Rate, Digital Engagement Rate, and overall Customer Satisfaction and NPS scores.
Mathematical Clarity
Mathematical Clarity
Users found the calculation of new monthly payments unclear.
Users found the calculation of new monthly payments unclear.
Perceived Costs
Perceived Costs
Users felt that PA implied higher monthly payments.
Users felt that PA implied higher monthly payments.
Program Duration
Program Duration
Users were not always given a choice of the program duration.
Users were not always given a choice of the program duration.
Understanding the Users
Understanding the Users
Our primary users were individuals in financial distress, facing the stress of potential service shut-off due to overdue balances. They needed a straightforward, informative way to manage their payments online without the hassle of calling the Call Center.
Since we didn’t have direct access to users for interviews, I created proto-personas based on insights gathered from the Customer Management team and feedback provided by DTE’s research team. These proto-personas represented key user groups and their primary goals, frustrations, and needs. They helped ensure our designs remained user-focused despite the research constraints.
Our primary users were individuals in financial distress, facing the stress of potential service shut-off due to overdue balances. They needed a straightforward, informative way to manage their payments online without the hassle of calling the Call Center.
Since we didn’t have direct access to users for interviews, I created proto-personas based on insights gathered from the Customer Management team and feedback provided by DTE’s research team. These proto-personas represented key user groups and their primary goals, frustrations, and needs. They helped ensure our designs remained user-focused despite the research constraints.
How Might We Questions
How Might We Questions
To frame our design approach and ensure we addressed both user pain points and business objectives, I formulated How Might We questions. These questions helped guide brainstorming sessions, prioritize features, and maintain a user-centric focus throughout the project. Here are the key HMW questions we explored
To frame our design approach and ensure we addressed both user pain points and business objectives, I formulated How Might We questions. These questions helped guide brainstorming sessions, prioritize features, and maintain a user-centric focus throughout the project. Here are the key HMW questions we explored
How might we make it easier for users to understand their payment options at a glance?
Users in financial distress often experience anxiety and confusion when navigating their options. We aimed to create a simple, visually clear interface that quickly communicates eligibility criteria, payment plans, and key differences between options.
How might we reduce the need for users to contact the call center for basic information?
By anticipating and addressing common user inquiries through an intuitive design, we sought to empower users to manage their payments independently and save time.
How might we design a seamless and supportive digital experience that aligns with the emotional needs of financially distressed users?
Recognizing the stress and urgency these users face, we focused on creating a calming experience with empathetic messaging, clear instructions, and a straightforward user flow.
How might we provide flexibility for users to tailor payment plans to their specific needs?
Users’ financial situations vary widely, so we aimed to include features like adjustable payment schedules, upfront cost breakdowns, and customizable options where possible.
How might we balance technical and business constraints while ensuring the solution remains user-friendly?
With multiple databases and strict business rules in play, our challenge was to design an experience that feels fluid to users while working within these limitations.
How These Questions Shaped the Design
How These Questions Shaped the Design
These HMW questions became pivotal in aligning the design with user and business needs.
For example:
To address question #2, we implemented tooltips near key terms and inputs to provide instant, relevant explanations without overwhelming the user interface.
For question #4, we introduced options to compare plans side-by-side and allowed users to view detailed breakdowns of monthly payments, ensuring transparency.
These HMW questions became pivotal in aligning the design with user and business needs.
For example:
To address question #2, we implemented tooltips near key terms and inputs to provide instant, relevant explanations without overwhelming the user interface.
For question #4, we introduced options to compare plans side-by-side and allowed users to view detailed breakdowns of monthly payments, ensuring transparency.
Design Constraints and Consideration
Design Constraints and Consideration
To make any design decision we had to navigate through:
Complex possible scenarios
Strict business rules and preferences
Eligibility constraints, ensuring users could only choose one program if eligible for both Payment Agreement & Payment Extension program
To make any design decision we had to navigate through:
Complex possible scenarios
Strict business rules and preferences
Eligibility constraints, ensuring users could only choose one program if eligible for both Payment Agreement & Payment Extension program
Design
Design
Design Process
Design Process
For the MVP, we focused on residential accounts only, even though the Payment Agreement is available to both residential and business accounts.
For the MVP, we focused on residential accounts only, even though the Payment Agreement is available to both residential and business accounts.
The design process began by mapping the existing call center user journey to uncover pain points and identify areas for improvement.
This journey served as the foundation for reimagining the experience, combining insights from the call center with the constraints of a web-based platform.
Our primary goal was to ensure the new digital flow replicated the clarity and support users were accustomed to during phone interactions while leveraging the benefits of digital interfaces.
The design process began by mapping the existing call center user journey to uncover pain points and identify areas for improvement.
This journey served as the foundation for reimagining the experience, combining insights from the call center with the constraints of a web-based platform.
Our primary goal was to ensure the new digital flow replicated the clarity and support users were accustomed to during phone interactions while leveraging the benefits of digital interfaces.
Payment Agreement initial Flows
Payment Agreement initial Flows
One Page at a Time
One Page at a Time
To stay on schedule and follow the user flow, I created a prioritized list of new pages that needed to be designed and all the other pages affected by this program to focus on:
Current Bill
Payment Offer Page*
How Payment Agreement Works*
Payment Agreement Contract Details*
Enrollment Confirmation*
Payment Center
Agreement Status*
Current Bill After Enrollment
Pages marked with * are new pages, and the experience affects the rest.
To stay on schedule and follow the user flow, I created a prioritized list of new pages that needed to be designed and all the other pages affected by this program to focus on:
Current Bill
Payment Offer Page*
How Payment Agreement Works*
Payment Agreement Contract Details*
Enrollment Confirmation*
Payment Center
Agreement Status*
Current Bill After Enrollment
Pages marked with * are new pages, and the experience affects the rest.
Ideation and Wireframing
Ideation and Wireframing
With these insights in mind, I created low-fidelity wireframes to visualize potential solutions. These initial designs prioritized:
A streamlined Payment Offer Page to help users compare their options side by side.
Tooltips strategically placed within the interface to offer contextual guidance without adding unnecessary clutter.
Feedback from stakeholders informed multiple iterations, ensuring the designs addressed both user needs and technical requirements.
Here are a few early concept examples that haven't been selected in grayscale for new pages:
With these insights in mind, I created low-fidelity wireframes to visualize potential solutions. These initial designs prioritized:
A streamlined Payment Offer Page to help users compare their options side by side.
Tooltips strategically placed within the interface to offer contextual guidance without adding unnecessary clutter.
Feedback from stakeholders informed multiple iterations, ensuring the designs addressed both user needs and technical requirements.
Here are a few early concept examples that haven't been selected in grayscale for new pages:
Collaboration and Iteration
Collaboration and Iteration
Daily standups and iterative design sessions with stakeholders were crucial to aligning objectives. I worked closely with developers to ensure that the designs were both technically feasible and user-friendly. Midway through the project, a significant pivot required revising the user flow to account for previously unforeseen system limitations. This collaboration ensured the solution remained effective despite the changes.
Daily standups and iterative design sessions with stakeholders were crucial to aligning objectives. I worked closely with developers to ensure that the designs were both technically feasible and user-friendly. Midway through the project, a significant pivot required revising the user flow to account for previously unforeseen system limitations. This collaboration ensured the solution remained effective despite the changes.
Bringing the Vision to Life
Bringing the Vision to Life
High-fidelity prototypes brought the new user flow to life. These prototypes highlighted the journey from the Current Bill page to enrollment confirmation, focusing on transparency and ease of use. By balancing clarity, functionality, and empathy, we delivered a solution that empowered users like Eva and Andrew to navigate their options confidently and independently.
Prototype password: Sara2024
High-fidelity prototypes brought the new user flow to life. These prototypes highlighted the journey from the Current Bill page to enrollment confirmation, focusing on transparency and ease of use. By balancing clarity, functionality, and empathy, we delivered a solution that empowered users like Eva and Andrew to navigate their options confidently and independently.
Prototype password: Sara2024
Prototype
Specs Sheet Example made by EightShapes Plugin in Figma for Dev Handoff
Outcomes and Impact
Outcomes and Impact
The results have exceeded expectations, with user enrollment reaching 48%, significantly higher than the initial target. The digital solution has already shown potential to greatly reduce call center volume and improve customer engagement with the Payment Agreement program, positioning it as a key contributor to future operational efficiencies and customer satisfaction improvements.
The results have exceeded expectations, with user enrollment reaching 48%, significantly higher than the initial target. The digital solution has already shown potential to greatly reduce call center volume and improve customer engagement with the Payment Agreement program, positioning it as a key contributor to future operational efficiencies and customer satisfaction improvements.
39K
Eligible users
48%
Enrollment
53%
Decrease in Call volume.
Reflection
This project reinforced the value of adaptability and collaboration. Designing for financially distressed users required not only empathy but also a willingness to embrace constraints and pivot when necessary. By staying focused on user needs, we delivered a solution that balanced business goals with meaningful impact.
This project reinforced the value of adaptability and collaboration. Designing for financially distressed users required not only empathy but also a willingness to embrace constraints and pivot when necessary. By staying focused on user needs, we delivered a solution that balanced business goals with meaningful impact.