arrow: upwards
TOP

Online utilities portal

Pay your utilities easily and access your bill history instantly.
Contribution:
User research
User journey
Wireframes
Flow diagrams
UI design
Prototyping
User testing
Team members:
  • Product designer: Celine Li
  • Cross-functional team members (discussion and design review)
Duration:

5 weeks

App design
Municipal service
mockup of the final design app, used in the banner

Overview

City of Lacombe, Alberta is partnering with us to digitalize municipal services. We already established a business license portal via mobile app for the city. This project is to create a utility portal and implement it to the app. According to the interactive prototype test, the account setting feature saves each user 12 minutes on average, while every payment registration saves city staff 5 minutes compared to the existing method.

Design steps

Step 1: understand
Step 2: ideate
Step 3: design and test
Step 4: finalize

Step one - Understand

Client meeting and 1 on 1 user interviews

To understand the problems clients faced regarding billing utilities, I met the Utility department lead, the technical lead and 2 utility clerks from City of Lacombe.  During the client meeting, I understood the issue with the current solution and their future vision. Then I conducted user interview with 8 citizens and figured out the problems citizens had in terms of managing utility.

Target users: Current Lacombe residents and businesses

Client: City of lacombe

Opportunities:‍

  • The city currently uses a database to store all active meter readings and generate bills
  • We can pull account info from this database and present it somewhere else
User interview protocols and findings
A screenshot of the user interview protocols and findings
divider line
Problems summary from client meetings and the user journey
Screenshots of the problems summary from client meetings and the user journey

Problem grouping and journey map

After gathering all problems, the team and I grouped them into 5. Then I mapped the user journey to get a holistic view of what support we can expect from infrastructure and where the solution sits in the problem space.

Problems (from the client)‍

  • Manually collecting utilities payment from citizens takes a lot of time
  • Mailing out utilities bills costs time, money and human resources
  • The city is adopting a new tiered rate structure, but they don’t have a channel to inform citizens or address inquiries (low priority)

Problems (from the citizens)‍

  • Current payment methods including online banking are not satisfying due to complex setting up process or unexpected disruption
  • Physical mail of utilities bills are hard to find after a while (low priority)

Step two - Ideate

User flow

As the clients required, we will use mobile app as our platform for this project. I drew out the happy path to reach the end goal — complete paying for utilities easily.

image of the simplified version of user flow
The screenshot of the user flow. Blue represents users behavior and green represents the product response
divider line
A section of the user journey and some feature tickets
A section of the user journey and some feature tickets

Feature brainstorming

The team and I brainstormed solutions based on the problems we found in the Understanding phase. The server team added their thoughts about solving the client's problems from the backend perspective.

Core feature:‍

  • Simplify account set-up by introducing the mobile app and support adding payment method  — To solve the first problem from the citizen side
  • Process utilities payment online and automatically register the payment in the city's database — To solve the first problem from the clients side
  • Make utility bill(s) e-copy available to users  — To solve the second problem from the clients and the citizens
divider line
 A screenshots of critical finding from the client meeting
A screenshot of critical finding from the client meeting

Sync with clients

We confirmed with the clients about the user flow and the feature list. Clients added a few new points:

Bill payment amount
Citizens don't have to pay the full balance. They can pay any amount more than 0 to avoid penalties.

Linking account by mistake
‍
Based on the experience of linking business licenses, some people linked to the wrong account when they typed the license number wrong.

Step three - Design & test

Wireframes & Rapid prototype test

I made clickable wireframes and walked the team (developers, product manager and QA) through every page. Externally I tested with 4 citizens using single-task method. Here are a list of insights we found during the test:

High priority
  • Users don’t understand the purpose of “Overview of your account”
  • Users have doubts about security and authority of the payment
  • The city doesn’t generate detailed receipts normally because citizens can pay any amount they want
  • Users are confused why they can still pay after they paid in full and where the money will go
Low priority
  • Users find notification settings under “Account Info” confusing given that they have notification settings for Business license too
  • Some users prefer to check off the reminder items by themselves because they might have other related things to do
Enlightening ideas
  • Users have the need to unlink an account so that someone else in the household can link
  • Some users have multiple properties and they want to manage the utilities in one place
  • Users would like to share the invoice rather than download it
Updated wireframes (working file):
A screenshot of partial wireframes after the update
divider line

Flow diagrams

divider line

Hi-fi mockup

A screenshot of hi-fi mockup pages
divider line

Hi-fi prototype test

I set up 3 tasks — Link account, Pay for bill and Check the receipt of a paid bill using Maze. Then I sent the test link to 11 test participants to perform tasks following instructions without facilitator being present.

Participants: 11

Results:

Success rate
  • Link account: 100%
  • Pay for bill: 90.9%
  • Check the receipt of a paid bill: 90.9%
Task completion time
  • Link account: 29.2s
  • Pay for bill: 21.3s
  • Check the receipt of a paid bill: 12.7s
Feeling about tasks
  • "Easy, friendly, fast. " (7/11)
  • "easy. understandable. straightforward. " (3/11)
  • "Intuitive, simple, quick" (3/11)

Step four - Finalize

Updated hi-fi screens

Link utility account

Users link their account using the account number and access code shown on their physical bill. The 2 pieces of data prevent linking to the wrong account due to typing mistakes.

The interaction flow users take to link their account with the online portal
The interaction flow users take to pay for their utilities bill with the online portal
Payment process

When a bill is available, users can  pay from Account Overview or they can read in details and then pay for it. The payment amount is flexible based on the client’s preference. Any payment amount(greater than 0) is counted as task completion.

divider line

Interactive prototype

I used Protopie to create the prototype, which involved using formulas and variables to link account(s) and facilitate payment calculations.

What's next?

After release metrics

The project is released after I left the project. Here are metrics I helped to define to track the product's performance after it’s released.

Problems
Solutions
Metrics

The work related to manually collecting utilities payment from citizens takes a lot of time

Process payments online and automatically register the payment

Comparison between the amount of time utility staff spend manually collecting one payment and collecting one payment through the utility portal

Mailing out utilities bills costs time, money and human resources

Email citizens utility bills if they opt in E-copy through the utility portal

Comparison between the time and financial cost utility staff spend on mailing one utility bill and emailing one bill

The city is adopting a new tiered rate structure, but they don’t have a channel to inform citizens and address inquiries

Inform the users about the new tiered rate structure on the utility portal

Percentage of portal users know about how the new rate structure works (Survey)

Current payment methods including online banking are not satisfying

Provide an online payment portal that supports multiple payment methods and auto-payment

Comparison between the satisfaction rate on pervious payment methods and the online payment portal

Physical mail of utilities bills are hard to find after a while

Give access to citizens’ bill history on the utility portal

The easiness of finding history bills through the online portal

divider line

What did I learn from this project?

Be open-minded about who your target users are

Before we talked to users, we thought users were happy with existing online payment methods. We didn’t design questions to ask users who adopted payment plans. But when interviewing users, we realized this group could be our target users too. That’s why we support multiple payment methods and auto-payment in our product.

Always keep users informed when asked for something from users

To use this product, we asked users to input information, such as account number and payment info. During the rapid prototype testing, one of the participants hesitated to provide his information because he didn’t know if it was secure. That taught me that a good product should not only be functional, but also be transparent. Winning user trust is key.

Other projects