1.0 Introduction
We, Team Foresight, had proposed to create an interactive energy tracking and management application called Brightly. Though, we still need to research and gather requirements on what the application may need to do to ensure that the proposed application may achieve the goal that is to increase users' awareness on energy saving while providing an interactive and intuitive interface for the users to track and manage their energy usage.
For the purpose of gathering requirements for task analysis and user analysis, we had decided to use an existing system that may have similar features to our proposed system. For the existing system, we decided to use myTNB application and Emporia Energy application to gather requirements on how users complete tasks that may need to be done.
myTNB
myTNB is an application provided by Tenaga Nasional Berhad (TNB), a Malaysian multinational electricity company, where users may keep track of their electricity consumption and pay bills through the application.
Figure 1 : myTNB application logo
For the task analysis, we will be observing the users based on 3 task that will be done using the existing system, which are:
Setting up the system and view electricity account
Check and view electricity consumption and make bill payment
Looking for information on energy savings and electricity usage pattern
2.0 Derivation of HTA
2.1 HTA for Task 1: Setting up the system and View Electricity Account
2.1.1 User 1: Professional Home Owner
Link: https://youtu.be/aShkQi0FBCI?si=dqi1MHFadatmOKV7
In this task, since the user has not created a user account with myTNB, the user will first need to create a new account. The user begins with opening the myTNB application. The myTNB will show the login page. The user will click on the Register button, which brings the user to a page to enter the user’s email address and password. After entering the email and password, the user is required to enter her name, choose identification type and enter her identification number and also enter her mobile number. The user will then check on agreement with Term and Condition before clicking on create my account button. The user will then be required to verify her mobile number by entering a 6-OTP code sent to her mobile number. Lastly, she will need to verify her email address by clicking on the verify email address button on the email sent to her email account. After verifying her email address, a new user account is created and activated.
To login into the user account, the user will enter the email address and password, then click the login button. The user will login successfully when the myTNB dashboard is shown.
Before viewing the bill, the user will need to add her electricity account into her user account. The user will click on add electricity account on the myTNB dashboard. After that, the user chooses the account type, followed by entering the electricity account number. The user will need to check on the agreement to Terms and Conditions before clicking the add electricity account button. The application will take time to load and show whether the electricity account is added successfully.
Textual HTA:
0. Setting up the system and view electricity account
1.0 Create new user account
1.1 Click register button
1.2 Enter Email address and Password
1.3 Enter User details (Name, Identification Number, Mobile Number)
1.4 Check on agree with Terms and Conditions
1.5 Verify mobile number by entering 6-OTP code.
1.6 Verify Email address by clicking verify email address button on email received
2.0 Log into account
2.1 Enter Email address and password
3.0 Add Electricity Account
3.1 Click Add Electricity Account button
3.2 Select Electricity Account Type
3.3 Enter Electricity Account Number
3.4 Check on agree with Terms and Conditions
Plan 0: if no user account do 1.0, 2.0, 3.0
If not yet login to user account do 2.0, 3.0
If already login, do 3.0
Plan 1: do 1.1, 1.2, 1.3, 1.4, 1.5, 1.6
Plan 2: do 2.1
Plan 3: do 3.1, 3.2, 3.3, 3.4
Graphical HTA:
2.1.2 User 2: Small Business Owner
Link: https://www.youtube.com/watch?v=W1lYrB7GrPw
In this task, the user begins by opening the myTNB application. This will bring the user to the myTNB dashboard due to the user having logged into a user account, where she can see a list of registered electricity accounts. This is useful for users who manage multiple properties, as the app allows switching between accounts easily. The homepage also offers several quick-access features such as “Pay My Bill,” “View My Bill,” “Usage,” and shortcuts to TNB updates, promotions, and customer support. The user selects Account 1 and taps “View My Bill” to open the detailed monthly bill page. She scrolls to find the total amount due for the month, which is RM496.17, and identifies additional charges such as the 8% service tax and the late payment surcharge. She comments that the digital bill provides more convenience than printed bills because all information, including usage details and payment history, is organised in one place. The task shows how the user accesses the dashboard and navigates through the bill details to understand her monthly electricity charges. She also mentioned that she may easily forget the email and password for the account, which may cause her to not be able to login into the myTNB app.
Textual HTA:
0. Setting up the system and view electricity account
1.0 Login to user account
1.1 Enter email address and password
2.0 View electricity account in user account
2.1 Click on electricity account to view
2.2 Click View My Bill
2.3 View latest detailed bill
Plan 0: if not yet login, do 1.0, 2.0
If already login, do 2.0
Plan 1: do 1.1
Plan 2: do 2.1, 2.2, 2.3
Graphical HTA:
2.1.3 User 3: University Student Renting Room with Roommates
Link: https://youtube.com/shorts/xi7tG3fPAVE
In this task, the user begins by opening the myTNB application. Since Philip previously logged out from his user account, he needs to log back into his user account. To log back into his account, Philip enters his email and password. After login into his user account, Philip is shown the myTNB dashboard, where Philip can view the electricity account for the rented house that his landlord has shared with him. Unlike users who manage multiple properties, Philip only has one electricity account listed that he added previously, but the homepage still provides several quick-access features such as “View My Bill,” “Pay My Bill,” “Usage,” and shortcuts to customer support, updates, and promotions. Philip taps “View My Bill” to open the detailed monthly bill for the current billing cycle.
Philip comments that the setup process is simple and does not require many steps. The task demonstrates how a student setup the myTNB application to gain access to his user account that may contain the electricity account of his room and house that are shared with several roommates.
Textual HTA:
0. Setting up the system and view electricity account
1.0 Register account
1.1 Enter email address and password
1.2 Enter user details
1.3 Verify account
2.0 Login user account
2.1 Enter email address and password
3.0 View electricity account in the user account
3.1 Click on My Account
3.2 Select Electricity account
Plan 0: If no user account, do 1.0, 2.0, 3.0
If have user account and not yet login, do 2.0, 3.0
If already logged in do 3.0
Plan 1: do 1.1, 1.2, 1.3
Plan 2: do 2.1
Plan 3: do 3.1, 3.2
Graphical HTA:
2.1.4 Findings from HTA of Task 1
By analysing the 3 users conducting the task of setting up the system and viewing the electricity account, it is found that the flow of the task is simple and in an ordered manner. The users find that this contributes to the easy setup process and are familiar with it as most other system account registration and login follows the same order. It is also found that users may skip certain steps in the task such as register account and login account if they had already done them. This may allow users to quickly enter the application to perform required tasks, which provide convenience to users not required to enter email addresses and passwords every time they want to use the application. For user 2, which is the small and medium business owner, she had mentioned concerns about losing access to the application when she forgets the email address and password bound to the user account. This shows that the current setup process may still need a change to help non-tech savvy users or forgetful users to access the account, while still maintaining the security of their accounts.
Generally, the task flow start with creating a new account if the user has not created an account. When creating a new account, user are required to enter email address and password, then followed by entering user details which include name, identification number and mobile number. After that the user will enter a 6-OTP code to verify their mobile number, and click the verify email address button to verify their email address.
During login, users are required to enter their email address and password The user will be shown the dashboard when they successfully login.
If users have not added an electricity account, users will need to click on add electricity account section on dashboard, select electricity account type, and enter the electricity account number. After the user adds their electricity account, the user may view the electricity account on the dashboard.
2.2 HTA for Task 2: Checking and Viewing electricity consumption and make bill payment
2.2.1 User 1: Professional Home Owner
Link: https://youtu.be/YjOXNcRfhb8?si=cTqeVlb9weC-n41n
In this task, the user makes her bill’s monthly payment. Firstly, She clicks the Bills tab and scrolls down to look for the bill based on the month that she wants to pay. Besides that, she can click the “Pay My Bill” on the home page where she can see the same information. After selecting the month, her outstanding balance and the breakdown of it will appear. She taps “View Bill” to confirm that the amount is right but the information was clashing. The app said that she already paid an extra RM42.95 on the homepage. However, it states that she has an amount RM57.05 to pay in the bill which makes her a bit confused. Then, she proceeds with showing how to make the bill payment by tapping the “Pay” button, entering the desired amount, selecting her electricity account, and lastly choosing her preferred payment method. This task reflects the common actions a user performs when reviewing and paying a residential electricity bill using the myTNB application.
Textual HTA:
0. Checking and viewing electricity consumption and make bill payment
1.0 Select monthly electricity bill
1.1 Click bill section
1.2 Scroll to find bill based on month
1.3 Click on the month of bill to be selected
2.0 View overall bill
2.1 View overview of charges
2.2 Click view bill
2.3 View electricity consumption and bill charges from detailed bill
3.0 Make bill payment
3.1 Click Pay button on bill page
3.2 Enter amount to pay
3.3 Select electricity account to pay
3.4 Choose payment method
Plan 0: if user want pay bills, do 1.0, 2.0, 3.0
if user do not want to pay bills, do 1.0, 2.0
Plan 1: do 1.1, 1.2, 1.3
Plan 2: do 2.1 (optional), 2.2, 2.3
Plan 3: do 3.1, 3.2, 3.3, 3.4
Graphical HTA:
2.2.2 User 2: Small Business Owner
Link: https://www.youtube.com/watch?v=_GzETL-BRlc
In this task, the user explores how to make a bill payment using different entry points in the myTNB app. She begins on the homepage by tapping “Pay My Bill,” then navigates to the “Bills” section to view the same feature from another angle. The app displays the outstanding balance, previous unpaid amounts, and the current month’s charges. She taps “View Bill” for a clearer breakdown before initiating payment. While doing this, she notices inconsistencies between the bill amount shown on the homepage and the amount shown in the detailed bill, which makes her unsure of the exact total to pay. This reflects a common problem mentioned in user reviews, where myTNB sometimes shows unclear or mismatched values. The user also observes that payment can be done from multiple pages, including the homepage, the Bills tab, and a direct payment link inside the bill details. Although she does not proceed with the actual transaction, the task demonstrates how users identify the correct amount and navigate toward the payment process.
Textual HTA:
0. Checking and viewing electricity consumption and make bill payment
1.0 Make Bill Payment
1.1 Click on Pay My Bill button on myTNB dashboard
1.2 Select electricity account to pay
1.3 Enter amount to pay
2.0 View Bill details
2.1 Click on Bill section
2.2 Select month of bill to view
2.3 View overview of bill charges
2.4 Click on View Bill button
2.5 View Detailed Bill
2.6 Scroll to Bill Charges section
2.7 View bill charges detail
Plan 0:
If user want to pay bill, do 1.0, 2.0
If user do not want to pay bill, do 2.0
Plan 1: do 1.1, 1.2, 1.3
Plan 2: do 2.1, 2.2, 2.3 (optional), 2.4, 2.5, 2.6, 2.7
Graphical HTA:
2.2.3 User 3 : University Student Renting Room with Roommates
Link: https://youtube.com/shorts/Ieuz9RD5HWg
In this task, the user explores how to review the bill and make a payment using different entry points in the myTNB app. Philip begins on the homepage by tapping “Pay My Bill,” which brings him to the payment overview screen. To ensure he is viewing the correct charges, he also navigates to the “Bills” section to see the same information from an alternative route.
The app displays the outstanding balance of RM205.20, along with the billing period (11 October – 7 November 2025) and a summary of current charges. Philip taps “View Bill” to check the full breakdown, including the 570 kWh usage, meter readings, and line-by-line charges such as Caj Penjanaan, Kapasiti, and KWTBB (1.6%). Reviewing this helps him understand how the total was calculated before paying.
Philip notices that the app provides multiple ways to complete the payment, through the homepage shortcut, the Bills tab, or the direct “KLIK DI SINI UNTUK PEMBAYARAN” link within the bill itself. Since his landlord has granted access, he is able to proceed with the payment directly in the app. After paying, he intends to share the digital receipt with his housemates so they can transfer their portion to him.
Although no inconsistencies appear in his case, the task highlights how student renters like Philip verify the bill amount, explore payment options, and navigate toward completing the payment process in a clear and organised manner.
Textual HTA:
0. Checking and viewing electricity consumption and make bill payment
1.0 View Bill Details
1.1 Access Bill Overview via Dashboard Shortcut
1.1.1 Click on “View My Bill” on myTNB dashboard.
1.1.2 Select electricity account.
1.1.3 View overview of month bill report.
1.2 Access Bill Overview via Bills Tab
1.2.1 Click on "Bills" tab
1.2.2 Select month of bill to view.
1.2.3 View overview of bill charges.
1.2.4 Click "View Bill" button.
1.2.5 View Detailed Bill.
1.2.6 Scroll to Bill Charges section.
1.2.7 View bill charges detail.
2.0 Make Bill Payment
2.1 Initiate Payment
2.1.1 Click on "Pay My Bill" button on myTNB dashboard.
2.1.2 Select electricity account to pay.
2.2 Finalize Transaction
2.2.1 Enter amount to pay.
2.2.2 Click Pay Bill.
2.2.3 Select payment method.
2.2.4 Make payment.
Plan 0:
If user want to make bill payment, do 1.0, 2.0
If user do not want to make bill payment, do 1.0
Plan 1: Choose do 1.1 or 1.2.
Plan 1.1: do 1.1.1, 1.1.2, 1.1.3
Plan 1.2: do 1.2.1, 1.2.2, 1.2.3 (optional) , 1.2.4, 1.2.5, 1.2.6, 1.2.7
Plan 2: do 2.1, 2.2
Plan 2.1: do 2.1.1, 2.1.2
Plan 2.2: do 2.2.1, 2.2.2, 2.2.3, 2.2.4
Graphical HTA:
2.2.4 Findings from HTA of Task 2
By analysing the 3 users on how they conduct the tasks of checking and viewing electricity consumption and make bill payments, it is found that while the information on bill charges are easy to view as they are shown in the overview, the users are required to scroll through the detailed bill to view the information on their electricity consumption. The views for electricity consumption are also not obvious as they are clumped together with many other information which may confuse the user. Meanwhile, for bill payments, it is a straightforward process for the users where users may enter the amount they wish to pay and choose the account to pay for, followed by the payment methods selection. Though, the amounts that users may need to pay are not shown clearly and had discrepancy, where the detailed bill showed a different amount from the amount shown in the Pay Bill page.
Generally, the task flow starts with the user viewing the bill, where the user clicks on the bill section to find their bills for the past months. The user then chooses the bill they wish to view, where the overview charges are shown. The user may click on the view bill button to view the detailed bill, where the user may scroll to the electricity consumption section to view their electricity consumption or the charges section to view charges for the past months.
For bill payment, users may either click the pay bill button on the dashboard or click the pay bill button on the bill page to pay the bill. The user will then enter the amount to pay and select the electricity account to pay. Users may then choose the payment method they prefer to pay their bills.
2.3 HTA for Task 3: Looking for information on energy saving and electricity usage pattern
2.3.1 User 1: Professional Home Owner
Link: https://youtu.be/NLFcGvIW2o4?si=zlDK_VqEHILCn5gU
In this task, the user begins by opening the “View My Bill” tab in the home page and selects her household account. She scrolls to the electricity consumption section afterwards, where she can view her previous monthly charge and usage. Hence, this way helps her to compare the consumption from month to month and helps her recognize whether her household electricity usage has increased or decreased over time.
Then, she directs to the electricity consumption graph to inspect her overall usage pattern. She gets an image representation of monthly kWh usage and charge by scrolling down to the graph section. Certainly, this way helps her identify trends such as months with outstandingly high consumption or consistent usage periods. She noticed that June has the highest electricity usage and she believed that her family used the air conditioner a lot that month because of the hot weather. This task focuses on how the user compares past consumption and understands usage patterns using the graph provided in the myTNB app.
Textual HTA:
0. Looking for information on energy saving and electricity usage pattern
1.0 Compare electricity consumption for each month
1.1 Click View My Bill
1.2 Select Electricity Account
1.3 Scroll to the electricity consumption section
1.4 View electricity consumption and charges for past month
2.0 View electricity usage pattern
2.1 Scroll to the electricity consumption graph section
2.2 View electricity usage pattern through graph
Plan 0: do 1.0, 2.0
Plan 1: do 1.1, 1.2, 1.3, 1.4
Plan 2: do 2.1, 2.2
Graphical HTA:
2.3.2 User 2: Small Business Owner
Link: https://www.youtube.com/watch?v=otzK0vh-IUI
In this task, the user opens the “Bills” tab to look through her past monthly electricity bills and compare the usage from June to November. She scrolls through the list and quickly identifies which months recorded the lowest and highest totals, then considers possible reasons such as festive seasons or changes in how often the refrigerators were used. She also checks the usage graph, which separates the monthly charges in RM from the total kWh consumed, and notices that the overall trend remains quite stable across the months. After that, she taps the notification icon to explore the different alerts available. Here, she reviews reminders for overdue bills, new bill releases, and even options for budget-related notifications. The app also includes categories such as promotions, news, and maintenance updates. While navigating these features, she encounters minor issues like slow loading, delayed responses, and occasional scrolling bugs, which slightly disrupt her experience but do not stop her from completing the task.
Textual HTA:
0. Looking for information on energy saving and electricity usage pattern
1.0 Compare electricity consumption and usage
1.1 Click Bill section
1.2 Select month of bill to view
1.3 Scroll to electricity consumption section
1.4 View electricity consumption and charge for past months
2.0 View electricity usage pattern
2.1 Scroll to electricity usage graph section
2.2 View electricity usage pattern through graph
3.0 View alerts and reminders
3.1 Click on What’s New section
3.2 View news on electricity distribution
3.3 Click on Notification icon
3.4 View notification received
3.5 Click on selected notification
3.6 View notification details
Plan 0: In any order, do 1.0, 2.0, 3.0
Plan 1: do 1.1, 1.2, 1.3, 1.4
Plan 2: do 2.1, 2.2
Plan 3: do 3.1, 3.2, 3.3, 3.4, 3.5, 3.6
Graphical HTA:
2.3.3 User 3: University Student Renting Room with Roommates
Link: https://www.youtube.com/shorts/m9KclNqXZvo
In this task, the user opens the “Bills” tab to review past monthly electricity bills and compare the usage from June to November. Philip scrolls through the list and quickly identifies which months recorded the highest and lowest consumption. Based on the usage graph, he sees that electricity usage peaked at 822 kWh in June and gradually decreased to 570 kWh in November. He considers possible reasons for these changes, such as exam periods when he and his housemates stayed home longer, increased use of the water heater, or quieter months when people were travelling home.
Philip then checks the Usage graph, which displays both the monthly charges in RM and the total kWh consumed. This helps him better understand the relationship between their consumption patterns and the total bill amount. He notices that while the charges fluctuate, the overall trend shows a gradual reduction in energy usage over the six-month period.
After reviewing the usage trends, Philip taps the notification icon to explore the alerts available. Here, he finds reminders for new bill releases, payment due dates, and other updates such as planned maintenance or TNB announcements. These notifications help him stay informed without relying exclusively on the printed bill slip that arrives at the rented house.
While navigating through these features, Philip encounters minor issues such as slow loading or brief delays when switching tabs, but these do not prevent him from completing the task. Overall, the task demonstrates how a student renter uses the app to understand electricity usage trends and stay updated through notifications.
Textual HTA:
0. Looking for information on energy saving and electricity usage pattern
1.0 Compare Electricity Consumption and Usage
1.1 Access Bills History
1.1.1 Click on the "Bills" tab.
1.1.2 Scroll through the list of past monthly bills.
1.1.3 Click "View Details” button on selected bill.
1.1.4 View Overview Details.
1.2 View Bills Details
1.2.1 Click "View Bill” button.
1.2.2 Scroll to Electricity Consumption and Charges section.
1.2.3 View Electricity Consumption and Bill Charges detail.
2.0. View Electricity Usage Pattern
2.1 Scroll to the Electricity Usage graph section of bill.
2.2 View electricity usage pattern through graph charts
2.3 Identify kWh consumption by month.
2.4 Identify highest/lowest consumption by month.
2.5 Analyze and Interpret Electricity Usage Trend
3.0 View Notifications and What’s New
3.1 Access Notification Center
3.1.1 Click the Notification icon.
3.1.2 View notification received
3.1.3 Click on selected notification
3.1.4 View notification details
3.2 Review What is New
3.2.1 Click on What’s New tab
3.2.2 View news on electricity distribution
3.2.3 Click the selected news
3.2.4 View news
Plan 0: Do 1.0, 2.0, 3.0 (optional)
Plan 1: Do 1.1, 1.2
Plan 1.1: Do 1.1.1, 1.1.2, 1.1.3, 1.1.4
Plan 1.2: Do 1.2.1, 1.2.2, 1.2.3
Plan 2: Do 2.1, then in any order, do 2.2, 2.3, 2.4, 2.5
Plan 3: in any order, do 3.1, 3.2
Plan 3.1: do 3.1.1, 3.1.2, if user want to read notification details, continue do 3.1.3, 3.1.4
Plan 3.2: do 3.2.1, 3.2.2, if user want to read news, continue do 3.2.3, 3.2.4
Graphical HTA:
2.3.4 Findings from HTA of Task 3
By analysing how the 3 users conduct the task of looking for information on energy saving and electricity usage patterns, it is found that the users are required to find the information that is hidden away in the bills rather than in an obvious manner. The users are required to compare the electricity consumption by themselves to gain information on how to save energy and although the graphs are shown for electricity consumption for past months, it may not be suitable for users that may not understand how to read graphs.
Generally, the task flow for this task begins with users comparing electricity consumption for the past month. The user will click on the view bill to view the latest bill and scroll to the electricity consumption section which shows the electricity consumption for past months. Users may use the electricity consumption data to compare and make insight on energy savings.
For electricity usage patterns, users may scroll to the electricity consumption graph section, which shows the line graph of their past month's electricity consumption. From the graph users may interpret and gain insight on their electricity usage pattern.
For alerts and notifications, users may click the What's New section to get news on electricity distribution. Users may also click on the notification icon to view notifications like new bills and bills required to pay. Users may select the notification to view their details.
3.0 Design Requirement
3.1 Account Setup & Login (From Task 1 Findings)
Simple and familiar registration flow
The system must be designed in such a way that it is able to ensure the login process is streamlined and easy for all user types to follow, as the standard and familiar sequence shows:
Email → Password → User Details → OTP (mobile) → Email verification
Quick access for returning users
For existing user accounts in the EMS, it must allow them to skip re-entering email and password.
The system must support auto-login or persistent sessions.
Account recovery features for non-tech-savvy users
The EMS must provide an easy password reset function and email recovery flows.
The system need to provide alternative login methods, like login via phone number (OTP-based), trusted devices and other identity provider (Google/Apple)
Clear guidance during setup
The EMS has to provide step-by-step guidance, tooltips or progress indicators to make it more understandable and reduce the setup friction.
Easy Electricity Account Linking
After the login session, the system must be able to let users add electricity accounts easily, select account type and input account number.
The system must clearly indicate whether an account has already been linked.
3.2 Bill Viewing and Payment (From Task 2 Findings)
Clear and consistent bill payment
The electricity bill payment must be displayed consistently across all pages.
The system must highlight the total amount due clearly without requiring scrolling to make the bill due date eye-catching to users.
Organized and well-separated information
No mixture of consumption data and billing data in cluttered layouts in the EMS.
The consumption details must be visually separated from other bill details.
Easy navigation between bill overview and detailed bill
The system must let the user switch views easily. For example, filter bills by month or year.
Clear electricity consumption information
Inside the system, consumption information must be easy to locate and not buried within long scrolling.
This can be achieved by using headers, section labels or shortcuts for quick access.
Straightforward payment flow
The bill payment process must be simple to not confuse the users with the following sequence:
Select pay bill
Enter amount
Select electricity account
Choose payment method
Confirm payment.
All required payment information must be shown upfront.
3.3 Energy Usage Insight and Recommendations (From Task 3 Findings)
Improve visibility of energy-saving information
Energy-saving tips and insights must be accessible from an obviously labeled section.
The EMS is able to provide quick access from the dashboards.
Provide automated insights instead of manual comparison
The EMS must automatically analyze usage patterns instead of requiring users to compare manually.
Make graphs easy for all users
The graphs provided for all users should be easy to interpret for users with low data literacy.
The graphs need to have simple visuals, legends and labels, and short explanations under the graph, like “Your highest usage was in July.”
Clear access to notifications and alerts
Alerts must be centralized and easy to find through having a notifications icon and a “What’s New” section.
The notifications should clearly indicate new bills available, payment reminders, usage spikes, promo or energy-saving announcements.
Comments
Post a Comment