1.0 Introduction
In this report, we will be documenting the high-fidelity prototyping and usability evaluation phase for our application, the Brightly. Based on the design concepts we established in the previous phase’s report, we have developed a functional prototype to simulate the final application’s look and feel. The prototype incorporates the high-fidelity visual elements and interaction flows. The prototype is also built upon the three tasks that the user will need to perform, which are setting up the system and viewing the electricity account, checking and viewing electricity usage and making bill payments, and looking for information about energy savings and electricity usage patterns. To build the prototype, we have used Figma as Figma provided interaction prototyping that allows us to not only design the looks of the prototype, but also design the interaction of the prototype.
After the prototype is done, we have conducted a usability test with the 3 user types we identified in phase 2 of this project, focusing on the successful completion of the three major tasks. This test is done to validate our design decisions and identify further usability issues through the observation and interview. The usability testing session is recorded and presented in the form of a video to showcase the usability testing process that was conducted. The tasks tested in the usability test are setting up the system and viewing the electricity account, checking and viewing electricity usage and making bill payments, and looking for information about energy savings and electricity usage patterns. For the usability testing, three members of the group is responsible to conduct usability testing with each user type:
Table 1.1: Members that conduct Usability Testing and their assigned user type
2.0 Screenshot of Prototype
With the wireframe of the Brightly application done, we can now create a high fidelity prototype to showcase the user interface of the Brightly application. For the Brightly application prototype, we have used Figma for designing and prototyping the interactions between pages so that the users may interact with the prototype to gauge the user experience and identify any usability issues that may arise in the application.
Figures below shows the user interface of the Figma prototype of the Brightly application prototype:
Figure 2.1: User Interface for Sign Up (Create New Account)
Figure 2.2: User Interface for Adding Electricity Account and View Electricity Account
Figure 2.3: Home Page with guidance for First Time User
Figure 2.4: User Interface for Usage Page
Figure 2.5: User Interface for Bill Page and Bill Payment Process
Figure 2.6: User Interface for Trend Page
Figure 2.7: User Interface for GOGreen Page and the features
Figure 2.8: User Interface for Notification Page
3.0 Briefing provided to users
3.1 Briefing provided to User 1: University Student Renting Room (Prepared by Goa)
Good morning, user name. Thank you for participating in the usability testing for my team’s prototype.
So I will be explaining on what my team’s prototype is about. In this modern day, we are very dependant on energy or in our case is electricity. We use electricity in almost every aspect of our life, either for our phones, TV, refrigerator, lights and many more. But it is found that many people struggle in managing their electricity usage. So that’s why our team proposed to make an energy management application called Brightly that is user friendly and easy to learn so that the application can be adopted by many. Furthermore, our applications also inspired by myTNB application which is another electricity management application made by local electricity company.
Our Brightly application is build upon focusing 3 task which will be done by users. The first task is setting up the system and view electricity account, second task will be checking and view electricity usage and make bill payment and lastly the third task will be looking for information about energy savings and electricity usage pattern. User will need to perform all the 3 tasks in this usability testing for us to evaluate your experience when using the application.
3.2 Briefing provided to User 2: Professional Home Owner (Prepared by Athirah)
Good day, user name. Thank you for participating in the usability testing for my team’s prototype.
Today, I will be explaining what my team’s prototype is about. As a homeowner, managing household electricity is an important part of daily life. Electricity is used for many essential appliances such as air conditioners, refrigerators, lighting, cooking appliances, and home security systems. However, many homeowners face challenges in monitoring their electricity usage and controlling monthly bills effectively. Because of this, our team proposed an energy management application called Brightly, which is designed to be user-friendly and easy to understand, especially for homeowners who manage electricity for their entire household. Our application is also inspired by the myTNB application, which is an electricity management platform developed by the local electricity provider.
The Brightly application focuses on three main tasks for homeowners. The first task is setting up the system and viewing the household electricity account details. The second task is checking and monitoring electricity usage as well as making bill payments. The third task is exploring information related to energy-saving tips and understanding electricity usage patterns in the home. During this usability testing session, you will be required to perform all three tasks so that we can evaluate your experience and interaction with the Brightly application.
3.3 Briefing provided to User 3: Small and Medium Business Owner (Prepared by Isyraf)
Pleased to have you with us, Mr. Syaz,
Thank you for participating in the usability testing for our team's prototype. I appreciate you taking the time to help us out today. Our team has developed an energy management application called Brightly, designed to help small and medium business owners, like yourself, efficiently track and manage electricity usage. As we know, electricity is a vital part of running a business, but managing its consumption can sometimes be a challenge. Brightly is built to provide an easy-to-use interface that allows you to monitor your business’s electricity consumption, identify high-energy areas, and even make bill payments, all in one place. The app is inspired by the myTNB application but aims to be simpler and more intuitive for business owners who may not be very tech-savvy.
For this usability test, I will guide you through three main tasks that you’ll complete using the app. First, you’ll set up your account and link your electricity account. Then, you’ll explore how to check your electricity usage and make a payment. Lastly, you will look for energy-saving recommendations and track your energy usage patterns over time. Your feedback on these tasks will help us evaluate the app’s effectiveness, identify any usability issues, and understand your experience using it as a small business owner. We’re eager to hear your thoughts and suggestions.
4.0 Testing with users
4.1 Task 1: Setting up system and view electricity account
User 1: University Student Renting Room (Conducted by Goa)
Video link: https://youtu.be/sgNIkbKeC-Q
*Task 1 for User 1 usability testing begins at 03:10
User 2: Professional Home User (Conducted by Athirah)
Video link: https://youtu.be/kFr5a_XPOYE
*Task 1 for User 2 usability testing begins at 01:58
User 3: Small and Medium Business Owner (Conducted by Isyraf)
Video link: https://youtu.be/b9VC2KB3qiU
*Task 1 for User 3 usability testing begins at 01:02
4.2 Task 2: Checking and view electricity usage and Make bill payments
User 1: University Student Renting Room (Conducted by Goa)
Video link: https://youtu.be/sgNIkbKeC-Q
*Task 2 for User 1 usability testing begins at 04:34
User 2: Professional Home User (Conducted by )
Video link: https://youtu.be/kFr5a_XPOYE
*Task 2 for User 2 usability testing begins at 06:41
User 3: Small and Medium Business Owner (Conducted by Isyraf)
Video link: https://youtu.be/b9VC2KB3qiU
*Task 2 for User 3 usability testing begins at 03:25
4.3 Task 3: Looking for information about energy savings and electricity usage pattern
User 1: University Student Renting Room (Conducted by Goa)
Video link: https://youtu.be/sgNIkbKeC-Q
*Task 3 for User 1 usability testing begins at 06:50
User 2: Professional Home User (Conducted by Athirah)
Video link: https://youtu.be/kFr5a_XPOYE
*Task 3 for User 2 usability testing begins at 09:56
User 3: Small and Medium Business Owner (Conducted by Isyraf)
Video link: https://youtu.be/b9VC2KB3qiU
*Task 3 for User 3 usability testing begins at 08:27
5.0 Observations
5.1 Observations on Usability Testing for User 1 (Prepared by Goa)
During my observation of the usability testing for task 1 for user 1 which is university student renting room, I found that the user is are familiar with the user interface for the login and sign up page and recognise the button for sign up to create new account. Across the create new account process, the user understood what information they need to enter for the account creation. For phone number verification process, the user understand that they need to enter the 6-PIN verification code for phone number verification. For email verification, the user is a little confuse about the shown interface as they thought the guided interface is the actual interface for them to verify their email address. After account created successfully, user understood that they can add electricity account or skip the process. During electricity account adding process, the users understand what information is needed to be entered and are happy when the successful adding prompt is shown after adding the electricity account.
For task 2, the user understand that they can press the shortcut button on home page to direct to the electricity usage page. In the electricity usage page, user is happy and glad for the guiding interface that is shown for the interface for the electricity usage page. The user is able to look at the electricity usage that they was looking for. Following, the user return to home page and continue with bill payment process by clicking check bill shortcut button. The user understand that to pay bill, he can press the button pay bill. The user then understand that he need to choose payment method for bill payment. After pressing the user’s choice of payment method, the user is happy with the interface of the application shwing the payment process and payment successful.
For task 3, the user click on the AI suggestion shortcut button on the home page to look for information about energy savings. They then were greeted with selection of buttons which the understand that each button have different function. After tapping on the suggested action button, the user understand that the suggested action is given and reflect upon their past electricity usage. Next the user try out the chatbox with BightlyAI, where he is very comfortable using it to ask AI chatbox about information on how to save energy. The user than look through the community suggestion for energy saving advice from community. He also try to set goals for his electricity usage and chosen to receive alert for the goals. Following, the user navigates to trend page to check their energy usage pattern for the past months and he is happy to be able to see and understand the graph of energy usage and gasp their usage pattern. The user also presses on the summary button to get summary of the usage pattern.
During the short interview, the user mentioned that they like the user interface and found not much problem in navigating the application. When asked whether the user will use the application in their daily life, they said that they would as it would help them to track their electricity usage while being easy to use. For improvement of the application, the user suggest to include more tracking functions such as water usage tracking and fuel consumption tracking so that the application could cater to more people and adopt by more people.
5.2 Observations on Usability Testing for User 2 (Prepared by Athirah)
For Task 1, the user completed the registration process smoothly and without major difficulties. They clearly understood the required information, including providing an email address, phone number, and personal details. The phone number verification step was completed successfully by entering the 6-digit verification code. However, during the email verification stage, the user briefly misinterpreted the guided interface, assuming it represented the actual verification process, which caused a short delay. Once the account was successfully created, the user moved on to adding their electricity account. They understood the required details such as the account category and electricity account number. The user was satisfied with the ability to switch easily between multiple electricity accounts and found the popup hints helpful, as they provided clear guidance and made the process user-friendly for first-time users.
For Task 2, the user accessed the electricity usage page quickly through the shortcut available on the homepage. The guiding interface helped them understand how to analyze their electricity consumption data. On the usage page, the user was able to read and understand both the pie chart and the graph, which displayed daily and weekly energy usage measured in kilowatt-hours (kWh). The pie chart clearly highlighted which areas of the house consumed the most energy, with appliances such as air conditioners contributing the highest usage. The remaining energy consumption was attributed to lighting and other appliances, including water heaters and washing machine. After reviewing this information, the user returned to the homepage and selected the bill-check shortcut to view a detailed breakdown of the current electricity bill, including energy usage by house section. The user then proceeded with the payment process by selecting the online banking method, her preferred payment method and confirming the transaction.
For Task 3, the user visited the Trend Page to review their electricity usage over previous months and were satisfied with the clear and well-organized graphs, which helped them better understand their overall energy consumption trends. Then, they selected the GoGreen tab at the bottom of the app and explored the available features. They found the Suggested Actions section beneficial, as the recommendations were personalized based on their previous electricity usage patterns. The user then interacted with the BrightlyAI chatbox to request energy-saving advice and felt confident using the feature to obtain practical suggestions. Additionally, they browsed the Community Suggestion section, where they discovered energy-saving tips shared by other users and considered them useful. The user experimented with the Goal Setting feature by establishing daily and monthly energy usage limits and enabling notifications when those targets were exceeded.
5.3 Observations on Usability Testing for User 3 (Prepared by Isyraf)
For Task 1, the user navigated through the sign-up process with ease. They understood the information required, such as entering their email, phone number, and other personal details. The phone number verification was straightforward, with the user entering the 6-digit PIN code without issues. However, during the email verification step, they initially misunderstood the guided interface, thinking it was the actual verification process, which caused a brief delay. After the account creation, the user proceeded to add their electricity account, understanding the required fields, like account type and electricity account number. They were also pleased to discover they could interchangeably switch between multiple electricity accounts, and appreciated the popup indicators that provided helpful guidance throughout the process, making it clear for a first-time user.
For Task 2, the user easily navigated to the electricity usage page via the shortcut button on the homepage. They appreciated the guiding interface that helped them understand how to view their energy usage data. On the usage page, the user was able to interpret the pie chart and graph, which displayed a detailed breakdown of their daily and weekly energy consumption in kWh. The pie chart helped the user see which sections of the shop were using the most energy, with specific equipment like refrigerators, freezers, and air conditioners contributing to the highest usage. Additionally, the remaining consumption came from lighting and other appliances like the microwave and fans. After reviewing the usage, the user returned to the homepage, clicked on the check bill shortcut, and successfully viewed the current bill breakdown, which also showed the energy consumption by each of these equipment categories. They then proceeded to pay the bill, choosing their preferred payment method and confirming the payment. The user even tested the system by trying to make a payment when there was RM0 due, and the app correctly displayed that no payment was needed, which the user found reassuring and a positive feature.
For Task 3, the user clicked on the AI suggestion shortcut button and explored the various options presented to them. They found the Suggested Actions useful, as these tips were tailored to their past electricity usage. The user then interacted with the BrightlyAI chatbox to ask for energy-saving tips, and felt comfortable using it to gather practical advice. They also explored the Community Suggestion section, where they found energy-saving ideas shared by other users, which they thought would be helpful. The user tested the Goal Setting feature, setting daily and monthly energy consumption targets, and opted to receive alerts if they exceeded those goals. Finally, they visited the Trend Page to analyze their energy usage over the past months, and were pleased with the clear presentation of their usage patterns in the graph, which helped them understand their energy consumption better.
6.0 Findings
6.1 Findings for User 1: University Student Renting Room
From the observation obtained from the usability testing with user 1, it is found that the users are mostly satisfied with the Brightly application user interface. Although, it is found that a few parts of the user interface such as the guide for verification for email addresses may confuse users as the button in the guide looks almost similar to an actual button. Other than that it is found that although the user likes the guide given during the first time entering the home page, the user did not actually read the guide but just pressed next to continue, which causes the users to be confused on how to navigate through the application afterwards.
To overcome the problem for the guide for email verification, instead of a static picture for the guide, I would suggest that an infographic video is used instead so that user not only knew that they are not supposed to verify directly with the guide, but at the same time give better guidance to users on how to verify their email address through the infographic video. For the problem of the user did not read the guide provided during first time on the home page, this can be solve by asking the user again if they understood how to navigate through the application before closing the guide so that the guide can be repeated for the user.
6.2 Findings for User 2: Professional Home Owner
Based on the observations gathered during the usability testing with User 2, it was found that users are generally satisfied with the user interface of the Brightly application. The user particularly appreciated the ability to view detailed energy consumption by household appliances, such as refrigerators, air conditioners, and lighting, which helped them better understand their electricity usage. The “RM0.00” message when there was no payment due was also seen as a reassuring and positive system feedback. However, similar to previous users, it was noted that the email verification guide caused some confusion. The user initially assumed the static instructional image represented the actual verification interface, which briefly delayed the account registration process.
To improve the email verification process, it is recommended to implement a checklist confirmation. After displaying the guide, the app would prompt the user with a short checklist, asking questions such as “Have you opened your email?” and “Did you click the verification link?” Only after confirming these steps would the user be allowed to proceed. This approach ensures that users actively engage with the instructions and complete the verification correctly, reducing confusion and improving the overall onboarding experience for homeowners.
6.3 Findings for User 3: Small and Medium Shop Owner
From the observation obtained from the usability testing with user 3, it is found that the user was able to navigate the specific business-oriented features with ease. The user particularly appreciated the multi-account switching feature and the clear breakdown of energy consumption by equipment (e.g., refrigerators, air conditioners), which is critical for business monitoring. The "Zero Balance" reassurance (RM0.00 due) was also noted as a positive system feedback feature.
However, similar to User 1, it is found that the email verification guide caused confusion. The user initially mistook the static instructional image for the actual verification interface, leading to a brief delay in the sign-up process.
To overcome the confusion regarding the email verification guide, it is recommended to replace the static image with an interactive overlay or clearly label the guide as a "Tutorial Preview" that requires a distinct "Next" or "Close" action before the actual task begins. Additionally, keeping the popup indicators for the account switching feature is highly recommended, as the user found them helpful for navigating between multiple electricity accounts.
Comments
Post a Comment