1.0 Storyboard for Scenarios
From the task analysis phase, 3 goals or scenarios have been identified that will need to be accomplished when the users use the EMS application. To further visualise the task flow of the user accomplishing the goals, storyboards can be done to show the process of the user using the product to accomplish the goal.
Hence, the storyboard for 3 of the goals of our proposed system, Brightly, will be illustrated to show the process or task flow of users when using Brightly to accomplish the goals.
1.1 Storyboard for Goal: Setting up the system and view electricity account
For the goal of setting up the system and view electricity account, the user will begin the task after downloading the Brightly application or when opening the Brightly application for the first time. The user will be shown the login page, where users can enter login details or register a new account if they do not have one. Users will then enter their account details, followed by verification of user-entered details such as email and phone number. After successful account registration, the user will be notified with a page showing successful account registration.
After registration, the user will be brought to the main page, where users can add their electricity account. The user will be able to choose an electricity account type and enter an electricity account number to add the electricity account. The Brightly application will notify users of successful electricity account addition and bring users back to the main page, where the electricity account can be found.
1.2 Storyboard for Goal: Check and view electricity consumption and make bill payment
For the goal of check and view electricity consumption and make bill payment, users will be checking the bill for their house, room or shop every month, especially during the beginning of the month when the bill is issued. To check the bill, the users will open the Brightly application and tap on the bill section button in the bottom bar. The bill page will be shown where the users can see the overview of the most current bill with the archive of past bills.
On the bill page, only the overdue bill payment is shown. Hence, to check the electricity usage, the users will tap on the usage button in the bottom bar to bring up the electricity usage page. In the electricity usage page, the amount of electricity usage for each day is shown with the breakdown on the electricity usage based on the room or appliances.
To pay the bill, the users will just need to open the bill page by tapping on the bill button on the bottom bar and tap the pay bill button to pay for the current overdue bill payment. After tapping the pay button, users can choose the preferred payment method and enter the amount of payment. After that, the users will confirm their payment by tapping the pay button and verify the payment through their chosen payment method. The users will be notified by the Brightly application when bill payment is successful or failed.
1.3 Storyboard for Goal: Tracking Energy Usage Patterns and Saving Insights
For the purpose of tracking energy usage patterns and saving insights, the user opens the Brightly app and goes to the Energy Consumption section to check their electricity usage. At first, the user sees a lot of graphs and charts showing their energy use over time. This can feel a bit overwhelming, especially with so much data, like total usage, kWh, and historical trends. To make sense of it, the user clicks on the help icon, which gives easy-to-understand tips on how to read the data. After understanding the graphs, the user decides to look deeper into the breakdown of their energy usage. They tap on a pie chart to see how much energy each section of the house is using. This helps the user identify which part of the house consumes the most energy. They also check the breakdown of appliances by tapping on the bar representing the Kitchen or Living Room. Here, the user can see which appliances, such as the fridge or air conditioner, are using the most electricity. By examining this information, the user can get a clear idea of where they might want to cut back on energy use or make improvements to save on their bills.
After reviewing their energy usage, the user moves on to the budget overview section, where they can compare their actual energy consumption to the set budget. If the user has exceeded their budget, the app will display red indicators and provide negative feedback to alert them. On the other hand, if they remain within their budget, they will see positive feedback with green indicators, reassuring them that they are on track. The app also provides AI-driven energy-saving tips, such as turning off unused appliances or adjusting thermostat settings, helping the user stay within their budget and reduce their electricity costs moving forward.
2.0 Alternative Design by conducting Crazy 8
With the storyboard done, the flow of the process for users to achieve their goals by using the Brightly application has been identified. Hence, the design for the user interface that will be needed for users to achieve the goal can now be developed based on the storyboard.
To produce the best design to be applied with the Brightly application, a brainstorming activity can be conducted to produce a few alternative designs that may best fit for the Brightly application. Hence, for this project, we decided to conduct Crazy 8, that is producing at least 8 designs for the user interface of the Brightly application that may help users in achieving goals under 8 minutes. Each member in the team FourSight will brainstorm and produce 8 user interface designs, which will provide up to 5 alternative designs to be chosen for the final wireframe design.
After conducting the Crazy 8 brainstorming session, the members of team FourSight conduct a voting session to vote on the best design among the 5 alternative designs. The voting session is conducted together on Figma, where each member is allowed to vote by placing stickers on the design they favoured the most. The highest voted design will then be referenced and improved to create a simple wireframe for the user interface of Brightly application for each process of users achieving goals.
3.0 Layout & Interface Design
After conducting the Crazy 8 brainstorming session to brainstorm for the best user interface design for the Brightly application, the layout and interface design of the Brightly application is decided by the members of FourSight and has been agreed upon through the voting session. Hence, the Crazy 8 sketches will now need to be translated into a wireframe to visualise the layout and interface design that will become the baseline for the prototype later on.
The wireframes will be designed for the user interface to achieve the 3 different goals, that is setting up the system and view electricity account, check and view electricity consumption and make bill payment and tracking energy usage patterns and saving insights. For the wireframes, the layout and interface design will incorporate either Gestalt Principle in HCI design or Schneiderman’s Golden Rule of HCI design. The wireframes will also incorporate the design requirements that are identified in the task analysis phase.
Schneiderman’s Golden Rule:
Strive for Consistency: The button for the following action for example Next button, Continue button, Register button, Verify button and Add button are consistently placed at the center bottom so that users can proceed in the task consistently. Other than that, the position for the Back button is also maintained across the user interface so that users can find it easily.
Enable frequent users to any shortcuts: For frequent users or users that already have an account, users can easily log in through Google account or Apple ID that already store their account details, allowing users fast access to the application.
Offer informative feedback: After the users finish verifying their phone number and email address, the application will show a page showing successful account registration to inform users that they have completed the registration process.
Design dialogue to yield closure: The icons used in the wireframe are recognisable to most users for example the phone icon, Google icon and Apple ID icon. Other than that, for a list, there is a triangle icon to indicate to users that there is a list that allows users for selection. The empty white box also tells users that they may need to enter information to continue the process.
Offer simple error handling: If the users enter the wrong username, phone number, email address, the user is allowed to go back to change the respective details. For the password, a confirm password helps users to confirm that the entered password is correct.
Permit easy reversal of actions: For each page in the registration process, there is a back button that users may tap on to go back to the previous page if there are any changes that users may want to make. The same goes for the adding electricity account page, where there is also the back button that users may tap on if they decide not to add an electricity account.
Support internal locus of control: The users are in control of the login, registration and adding electricity account process as the users have the option to cancel or go back to the previous page for the stages of the process. The users will also be in control where the account will only be logged in, registered or added only after users tap the respective button.
Reduce short-term memory load: For the drop down list, a triangle icon is explicitly shown to indicate to users that there is a drop down list that users can browse and search for the option. Other than that, for the email verification process, the methods to verify email are shown to users through animation so that users know what to click when they open the email received to verify email.
Design Requirements:
Simple and familiar registration flow: Registration starts with entering user details (username and phone number), followed by entering email address and password and confirming password. Then, followed by phone number verification and email verification.
Quick access for returning users: Users can easily login through Google account or Apple ID account that is registered with a user account.
Account recovery features for non-tech-savvy users: If users have a Google account or Apple ID account, users can register easily through the respective account. If a user forgets their account password, users may tap on the forget password button to reset their password.
Clear guidance during setup: Users are shown the page according to the registration process, login process and adding electricity process. For email verification, users are also guided with short animation on how to verify their email address.
- Easy electricity account linking: Users are prompted with an electricity account addition notification after account registration so that users know that they will need to link their electricity account before the application can track the electricity usage and bills.
3.2 Wireframe for task: Check and view electricity consumption and make bill payment
Figure 3.2: Wireframe for task: Check and view electricity consumption and make bill payment
Schneidermen’s Golden Rule:
Strive for Consistency: The position for menu and notification button are consistently in the same position when changing from home page to usage page or bill page.
Enable frequent users to any shortcuts: The home page provides several shortcut buttons for frequent users to direct users straight to the pages they want to.
Offer informative feedback: Each button will respond to the respective pages. Other than that, the usage graph will automatically shift based on the current day of the week. The usage will also be updated accordingly in real time.
Design dialogue to yield closure: Each icon used for the navigation bar at the bottom has labels when they are not in that particular page so that users will know what the icon means and what page they will be directed to.
Offer simple error handling: Back button is provided if users decide to cancel the bill payment. Other than that, the bottom navigation bar is always shown so that users can navigate back to the desired page at any time.
Permit easy reversal of actions: The bottom navigation bar is provided for users to navigate back to any desired page at any time. Other than that, a back button is provided at the pay bill page to allow users to cancel the pay bill process.
Support internal locus of control: The bottom navigation bar allows users to be in control of what page is shown on the screen.
Reduce short-term memory load: Labels on the icon allows users to not be required to memorize what the icons means.
Design Requirement:
Clear and consistent bill payment: Users are shown the bill amount during the pay bill process. The option for payment methods are shown for the user to select.
Organized and well-separated information: The information for bills and electricity usage are separated by white space and organised neatly for easy viewing in the home page. In the usage page, white space is also used to separate different information for less cluttered.
Easy navigation between bill overview and detailed bill: Users are shown the overview bill in the bill page, where the users may view the detailed bill by tapping on the view details button.
Clear electricity consumption information: The electricity usage is shown for the daily, weekly and monthly usage with the breakdown of appliance or room usage.
Straightforward payment flow: The users will only be required to press the pay bill button, followed by selecting the payment method and then the respective payment method for bill payment.
3.3 Wireframe for task: Tracking Energy Usage Patterns and Saving Insights
Figure 3.3: Wireframe for task: Tracking Energy Usage Patterns and Saving Insights
Schneidermen’s Golden Rule:
Strive for Consistency: Similar graphs are used across the application to allow users to recall back the same graph that is shown before. Other than that, the shape and size of buttons are similar to show that the buttons have similar functionality.
Enable frequent users to any shortcuts: The home page provides a button that directs users to AI chatbox directly.
Offer informative feedback: The AI chatbox will respond to the user after sending the prompt. Other than that the button in each page will direct users to their respective pages.
Design dialogue to yield closure: Icons are provided with labels to indicate the meaning for the icons.
Offer simple error handling: The bottom navigation bar allows users to navigate back to the desired page. The back button is also provided to allow the user to go back to the previous page.
Permit easy reversal of actions: The back button is provided to allow users to return to the previous page.
Support internal locus of control: Navigation bar allows users to be in control of the page they are shown. Other than that, the respective age will only be shown after actions from users.
Reduce short-term memory load: Labels are provided for icons to avoid needing users to memorise the icon meaning. Similar graphs are used for graphs that show similar information so that users could recognise them easily.
Design Requirement:
Improve visibility of energy-saving information: The electricity consumption is shown in an interactive graph and breakdown of energy usage is also shown to users. Other than that, automated insights and suggestions are also provided to users based on the electricity consumption data.
Provide automated insights instead of manual comparison: Automated analysis of electricity consumption is shown in the trend page for easier understanding for users. Other than that, suggestions for users are also given based on usage pattern. Users are also able to use AI chatbox to gain insight on their electricity usage patterns and suggestions.
Make graphs easy for all users: Graphs used across the application are similar with labels that allows users to understand what the graph is conveying.
- Clear access to notifications and alerts: Users can easily access notification and alert from home page, usage page, bill page, trend page and GOGreen page where the users can access through the bell icon button.
3.4 Interaction Metaphor
In the wireframe design, several interaction metaphors have been incorporated into the wireframe design. Interaction metaphor is where the interface design uses user familiar elements in the interface design to make the user interface much more intuitive and easily learnable in a short time. User interfaces that incorporate interaction metaphors will be more user friendly and user approachable. Hence, the Brightly application has also interaction metaphors, which are the followings:
Bell
The bell metaphor is used in the Brightly app to signify alerts and notifications, ensuring that users stay updated on important events. This could include reminders about bill due dates, notifications about exceeding budget limits, or helpful energy-saving tips. The bell icon provides a simple, yet effective way for users to receive timely updates. For example, when the user is nearing their budget limit, the bell will trigger an alert to let them know they need to take action. This metaphor offers a familiar and intuitive experience, allowing users to feel informed and in control of their energy consumption without missing crucial notifications.
Dollar Sign
The dollar sign symbolizes the financial aspect of the Brightly app, specifically for bill overviews and transaction history. This symbol is widely recognized as representing money and payments, making it an ideal choice for users who want to track their electricity bills. By tapping the dollar sign, users can view detailed summaries of their total charges, payment history, and outstanding balances. This metaphor helps users stay organized by providing a clear visual cue for managing financial transactions. It enhances the user experience by making it easy for them to access essential information related to their electricity costs and monitor their spending.
Wallet/Card
The wallet/card metaphor represents the payment methods section of the app, where users store their preferred payment options for bill payments. Just like how a physical wallet holds credit cards and cash, this metaphor provides a simple, secure place for users to manage their payment details. Users can easily tap on the wallet icon to add, update, or select their payment method for paying their electricity bills. This approach makes managing payments seamless and accessible, ensuring that users don’t have to worry about missing payments or dealing with complicated setups.
Lightbulb
The lightbulb represents the energy-saving tips and recommendations provided by Brightly’s AI. Just as a lightbulb symbolizes an idea or insight, it’s a fitting metaphor for tips that help users optimize their energy usage and reduce their electricity bills. When users tap on the lightbulb icon, they can access personalized suggestions, such as adjusting appliance settings, turning off unused devices, or setting more efficient timers. This metaphor not only makes the app feel more supportive but also encourages users to make smarter choices for reducing their energy consumption, helping them to feel more in control of their environmental impact.
Pie Chart
The pie chart is used to break down and visualize the user’s energy consumption by room or appliance. Each slice of the pie represents a different section of the home or appliance. This metaphor makes it easy for users to see where their electricity is being used and identify areas where they can make adjustments to lower costs. By tapping on the pie chart, users can drill down further into each section or appliance to see the exact percentage of energy consumed. This metaphor is helpful in providing users with a clear and understandable breakdown of their energy habits, making it easier for them to track and manage their usage.
Comments
Post a Comment