Table of Contents

I. Introduction .................................................................................................................... 4

II. Background Research ................................................................................................... 4

2.1 Current Considerations in User Interface Design ....................................................... 4

2.2 Usability Guidelines and Standards .......................................................................... 5

2.3 Relevance to the Prototype ...................................................................................... 6

III. User Groups ................................................................................................................ 6

3.1 Key Facts about User Groups................................................................................... 6

3.2 Personas ................................................................................................................. 6

3.3 Scenarios ................................................................................................................ 9

IV. Visual Design ............................................................................................................ 10

4.1 Layout ................................................................................................................... 10

4.2 Colour Scheme and Font Style ............................................................................... 12

4.3 Graphic Design Elements ....................................................................................... 13

V. Design and evaluation................................................................................................. 13

5.1 Low-Fidelity Prototypes and Evaluation................................................................... 13

5.2 Mid – Fidelity Design and Evaluation ...................................................................... 14

VI. Evaluation and Selection Process ............................................................................... 19

6.1 Evaluation Techniques ........................................................................................... 19

VII. Critical Reflection ...................................................................................................... 21

VIII. Conclusion............................................................................................................... 21

IX. References ................................................................................................................ 22

Table of Figures
Figure 1: Look Screen .................................................................................................................... 5
Figure 2: Profile of Anna ................................................................................................................ 7
Figure 3: Profile of David .............................................................................................................. 8
Figure 4: Wireframe for main screen........................................................................................... 10
Figure 5: Navigation bar .............................................................................................................. 10
Figure 6: Home screen website .................................................................................................... 11
Figure 7: Area management bar ................................................................................................... 11
Figure 8: Horizontal scroll bar ..................................................................................................... 11
Figure 9: Vertical scroll bar .......................................................................................................... 11
Figure 10: Main color ................................................................................................................... 12
Figure 11: Font .............................................................................................................................. 12
Figure 12: Prototype of the home version ................................................................................... 14
Figure 13: Login Page .................................................................................................................. 14
Figure 14: Home Page .................................................................................................................. 15
Figure 15: Kitchen Page……………………………………………………………………...15
Figure 16: Living Room Page ...................................................................................................... 16
Figure 17: BedRoom Page…………………………………………………………………...16
Figure 18: BathRoom Page .......................................................................................................... 16
Figure 19: Garage Page ................................................................................................................ 17
Figure 20: Setting Page ................................................................................................................ 17
Figure 21: Saving Page................................................................................................................. 18
Figure 22: Infomation Page.......................................................................................................... 19
I. Introduction
The rising global energy consumption and its environmental impact have driven research
into sustainable technologies. Residential energy use, a major contributor to carbon
emissions, is often inefficient, highlighting the need for tools that help individuals monitor
and optimize their energy consumption. Mobile apps offer a promising solution due to their
accessibility and ability to influence behavior change. Research shows that well-designed
apps can significantly improve user engagement and energy-saving practices (Kim et al.,
2020; Smith and Jones, 2022).

This report focuses on the design and evaluation of a mobile app prototype aimed at
reducing household energy use. The prototype follows established design principles,
including Google Material Design and Nielsen’s Usability Heuristics, to ensure usability and
accessibility across devices (Google, 2023; Nielsen, 1994). The structure of this report
includes a detailed overview of the app's design, evaluation process, and expected outcomes.

• Background Research to explore UI design principles and guidelines.

• User Groups analysis, including personas and scenarios.

• Visual Design choices supported by theoretical frameworks.

• Prototyping and Evaluation, with iterative testing and refinement.

• A Critical Reflection on the process and lessons learned.

II. Background Research

2.1 Current Considerations in User Interface Design
Developing a UI for mobile applications involves addressing key challenges such as:

• Input Methods: Most modern mobile devices rely on touch-based interactions,

including gestures like swipes, pinches, and long presses. Android and iOS systems
handle these gestures differently, impacting cross-platform consistency (Huang et al.,
2019).
• Screen Sizes: Mobile applications must adapt seamlessly to different screen sizes and
resolutions, emphasizing responsive design principles (Google, 2023).
• The iPhone 11 xs max's 420x880 screen size is ideal for showcasing UI components.
The 420 width size offers many benefits to readers in terms of ease and viewing
factors.
 Figure 1: Look Screen

App Types: Native apps are platform-specific applications developed using tools like
Swift for iOS or Kotlin for Android, allowing them to fully utilize device features for superior
performance and seamless user experiences. However, they require separate development for
each platform, which can be costly and time-consuming. In contrast, Progressive Web Apps
(PWAs) are web-based but behave like native apps, offering offline functionality, push
notifications, and installation options. Built with HTML, CSS, and JavaScript, PWAs are
platform-independent, making them a flexible and cost-effective alternative with near-native
functionality (Singh, 2022).

2.2 Usability Guidelines and Standards

This project follows Google Material Design guidelines for consistency, usability, and
visual appeal across user interfaces. Material Design emphasizes intuitive navigation,
responsive layouts, and cohesive design elements, crucial for creating user-friendly apps.
Nielsen’s Usability Heuristics are used to evaluate the prototype, focusing on error
prevention, user feedback, and simplicity (Nielsen, 1994), ensuring a smooth user experience.
Additionally, Shneiderman’s principles, such as direct manipulation and visual clarity, are
incorporated to enhance usability and reduce cognitive load (Shneiderman et al., 2016).
Together, these frameworks provide a solid foundation for an effective, intuitive user
interface.
2.3 Relevance to the Prototype
The integration of these design considerations and usability guidelines has a direct and
significant impact on the structure and functionality of the prototype. Google Material Design
serves as a blueprint for ensuring visual consistency, providing standardized components and
behaviors that align with user expectations. This consistency aids in creating a seamless and
familiar user experience. Meanwhile, Nielsen’s heuristics play a critical role in the iterative
evaluation of the prototype, helping to identify potential usability issues and guiding
refinements to optimize user interactions. Shneiderman’s principles contribute to the design’s
focus on clarity, allowing users to interact with the prototype efficiently and effectively. By
adhering to these established guidelines, the prototype is designed to deliver a user
experience that is both aesthetically pleasing and functionally robust.

III. User Groups

3.1 Key Facts about User Groups
based on a survey on men's and women's actual electricity use conducted by Dr. John
Smith and Amanda Johnson. People between the ages of 25 and 45 will use electricity
anywhere from occasionally to every day. However, compared to people 50 and older,
women often use more electricity from household electrical appliances (Smith, 2024). The
user group is then formed below. Key characteristics of this group include:

• Preference for intuitive, easy-to-use interfaces (Smith and Jones, 2022).

• Desire for actionable insights to reduce energy costs and environmental impact.

• Proficiency in using mobile devices and apps for daily tasks (IEA, 2021).

3.2 Personas
• Persona 1: Anna, 36 years old, Teacher
o Goal: Regular use of electrical appliances in the home for cooking, cleaning
or many other activities.

o Behavior: Frequently uses gamified features to engage family members.

Below is Anna's profile information that I simulated based on the survey:

Figure 2: Profile of Anna
 • Persona 2: David, 29 years old, IT Professional

o Goal: Automate notifications for high energy usage and analyze trends.
o Behavior: Prefers minimalistic designs and relies on data-driven insights.

Below is Anna's profile information that I simulated based on the survey:

Figure 3: Profile of David

3.3 Scenarios
In UX/UI design, user scenarios are a technique that's frequently utilized to visualize
and comprehend the target user group. It provides a detailed description of a fictitious
character, highlighting traits like: Name, age, occupation, family history, income, and
other personal details.

Attitudes & behaviors: Their objectives, driving forces, anxieties, and obstacles in
life or at work. Work and interests: The things they do every day, the tools they utilize, or
the apps they use.

Goals & frustrations: Their desired outcomes and the things that leave them feeling
unfulfilled.

• Scenario for Anna: Anna, a high school teacher in Los Angeles, is committed to
reducing her electricity usage to support environmental sustainability. Due to her busy
schedule, tracking daily consumption is challenging, so she uses a smart app to monitor
her energy use in real time. The app’s daily consumption graph and peak hour
notifications help her make informed choices. By following energy-saving tips, such as
using appliances during off-peak hours and using natural light, Anna has successfully
reduced her electricity bill while contributing to environmental protection.

Actor Anna Madeleine Carter, 36 years old, a high school teacher living in
Los Angeles.
Motivator Concerned about environmental protection and saving costs.
Intention Reduce daily energy consumption, especially during peak hours.
Action Uses the app to track energy usage and adopts tips to save electricity.
Resolution Changes habits, lowers electricity bills, and contributes to
environmental protection.

• Scenario for David: David, a software engineer in Los Angeles, is focused on saving
energy and reducing his monthly bills to support his small family. With his busy work
schedule and responsibilities as a father, he lacks time to constantly monitor energy
usage at home. To manage this, he has set up notifications to alert him when unusual
energy consumption is detected, allowing him to quickly identify issues and find
solutions. On weekends, David reviews weekly energy reports from the management
app to optimize electricity use in his home. These efforts help him save money and
reduce his environmental impact, which he deeply value

Actor David Nguyen, 29 years old, a software engineer living in Los Angeles.
Motivator Wants to save costs and manage energy usage efficiently for his small family.
Intention Monitor and control abnormal energy consumption.
Action Sets up alerts for unusual consumption and analyzes weekly energy reports.
Resolution Detects anomalies early, optimizes consumption, and reduces electricity costs.
IV. Visual Design
4.1 Layout
The method and justification of information architecture:
The application employs a card-based layout for intuitive information grouping. Each
card represents a key feature, such as energy usage trends or savings tips, ensuring clarity and
ease of navigation. Information architecture (IA) is concerned with the organization and
organizes information so that consumers can locate and utilize it efficiently. Using consistent
and descriptive labeling systems, implementing global, local, and contextual navigation,
offering effective search and faceted search functionality, modeling content with relevant
metadata, and creating content structures like hierarchical, sequential, or matrix models are
all part of it (Morville, 2006; Garrett, 2010; Krug, 2014).

Figure 4: Wireframe for main screen

The user initially sees the toolbar with icons at the bottom, which includes the gear for the
settings to control the different rooms in the house, the house symbol for the main screen, the
third icon represents the page that displays the monthly electricity consumption performance
and records comments on electricity usage behavior or sets up reasonable electricity usage for
the next month, and lastly the user's personal information page is represented by the user
symbol.

Figure 5: Navigation bar

Because the caption "Save Electricity" at the top of the image indicates the main screen,
it is clear to the user that they are on the app's main screen. This also happens to be the name
of the program that saves power.
 Figure 6: Home screen website

The 5 icons below represent 5 areas where you can manage your electricity consumption, the
first icon is the kitchen, then the living room, bedroom, bathroom and finally the garage.

Figure 7: Area management bar

In the image below, the horizontal scroll bar displays suggested tips to help you save electricity.

Figure 8: Horizontal scroll bar

For the vertical scroll bar it will show the devices you have recently used including the
photo, device name and hours used

Figure 9: Vertical scroll bar

4.2 Colour Scheme and Font Style
• Primary Colors: A collection of colors known as color theory combine to produce hues
that improve user experience and increase the impact of visual designs.

Figure 10: Main color

The color scheme selected as the primary color for the application is seen in the image
above. when a primary color and a secondary color are both included in the analogous color
palette. The interface's two complimentary colors combine to form a smooth block that makes
it easier for the user's eyes to see and navigate.

The color palette consists of a bright pastel yellow and a somewhat deeper pastel green.
The second hue was chosen to symbolize the program since it evokes a sense of mystery and
nostalgia in users. Additionally, while considering the balance for the items incorporated
within, these two colors produce a straightforward and cozy atmosphere.
• Font Style: The majority of typographic designs will employ the Arial font, but there will
be a variety of font combinations to provide an interface that is visually appealing to the
user.

Figure 11: Font

 Arial is a popular sans-serif font that is renowned for its clean, easy-to-read style. It is
often preferred for both digital and print materials because it offers a modern and neutral look
that ensures readability across different sizes and resolutions. Some key characteristics of
Arial include:

• Simplicity and Clarity: Its straightforward design without unnecessary flourishes makes
it easy to read, even at smaller sizes.
• Versatility: Arial is commonly used in various contexts, from websites to business
documents, due to its neutral appearance. It works well in both headings and body text.
• Compatibility: Since it is pre-installed on most operating systems and widely supported
across different platforms, it ensures consistency and compatibility across devices.

4.3 Graphic Design Elements

Icons representing devices and animated charts enhance user engagement by making the
interface visually appealing and interactive. These elements help users easily understand their
energy consumption and track patterns through dynamic, real-time data. Additionally,
multimedia features like progress bars visually highlight energy-saving milestones, creating a
sense of accomplishment and motivating users to continue improving their energy efficiency.
These visual tools make the experience more enjoyable while reinforcing the user's
commitment to energy conservation.

V. Design and evaluation

5.1 Low-Fidelity Prototypes and Evaluation
Screen mockups will be displayed in this area. After deliberating over each
prototype, a version will be selected to forward the application design process.
 Figure 12: Prototype of the home version

5.2 Mid Fidelity Design & Evaluation.

Figure 13: Login Page

 The above image showing user login page, here I will set the condition that you can
enter any character to be able to login because if I set up an account then you might have
difficulty in finding the account to be able to login.

Figure 14: Home Page

Following a successful login, the application's home screen will be shown. The user
interface's primary screen may be seen in the image above. With all the components now
properly filled in, ordered, and using particular typefaces, it will adhere to the Dishonest
Design Version in section 5.1.
Figure 15: Kitchen Page Figure 16: Living Room Page

Figure 17: BedRoom Page Figure 18: BathRoom Page

 Figure 19: Garage Page

This is the screen when the user clicks on the icons of the kitchen, living room, bedroom,
bathroom and garage areas. This allows you to adjust and turn on/off the functions of the
electrical devices in each area separately and monitor the amount of electricity you have
consumed in each area.

Figure 20: Setting Page

 This is the screen when you click on the gear icons, it will go to the management page of
all areas in the house, you can turn on or off all electrical devices, adjust to power saving
mode or night mode of each area.

Figure 21: Saving Page

When you click on the save flag icon right next to the gear icon, you will be taken to a
page that displays the electricity performance that your family has used, a chart of electricity
consumption over the weeks and write comments about your recent electricity usage
behavior. In addition, there are also tips to help you save more electricity.
 Figure 22: Infomation Page

When clicking on the user icon, it will take you to the user's information page including
information such as: avatar, name, gender, date of birth, phone number, email, etc.

VI. Evaluation and Selection Process

6.1 Evaluation Techniques
Heuristic Evaluation:
 Evaluation Screen Explaination
criteria
Visibility of Users can see the full name of electrical
System appliances in each area and see the
details of performance and the amount
of electricity consumed recently, in
addition to notifying the user at what
level of electricity they are using

System and Simple symbols on the home screen

realistics make it clear to consumers that they
alignment.
may search via categories or icons that
are comparable to "waiting for reality."

User If the user inadvertently selects the

Independence
section on managing kitchen appliances,
and Control
he may click the back symbol to go back
to the main screen if he does not want to
handle it.
Norms and Using two screens as an example, the
Consistency
description includes buttons, such as the
icons at the bottom of the screen, that
allow the user to return to the panels
they want.
VII. Critical Reflection
Following the completion of the idea, design, and assessment. Although I find the process
of developing an application's user interface to be extremely challenging and complex, I still
find it to be fascinating. Although there are still some issues and errors in my interface design
and assessment, I have gained a lot of knowledge about color theory, typography, visual
evaluation, and other topics that are crucial to creating a quality program. When I first start
using Axure to construct designs between components, I still have some issues. about my
areas for improvement.

After I finish my studies, I want to work as a web designer and developer, therefore this
course will be a fantastic way to gain more information. When creating and executing a
completely working application or website that can fully engage people, it can assist me in
understanding the duties I need to do.

VIII. Conclusion
This report detailed the design of a mobile application prototype aimed at reducing
household energy consumption. By leveraging Material Design principles and Nielsen’s
heuristics, the prototype ensures usability and accessibility for a diverse audience.

The project aligns with sustainability goals, as highlighted by the IEA (2021),
demonstrating the role of digital tools in driving behavior change (Kim et al., 2020). Future
iterations could incorporate smart home integrations and AI-driven recommendations (Singh,
2022). The research underscores the transformative potential of well-designed mobile
applications in addressing environmental challenges (Shneiderman et al., 2016).
IX. References
1. International Energy Agency (IEA), 2021. Energy Efficiency 2021. Available at:
[Google Scholar].

2. Kim, H., Kim, Y. and Kim, J., 2020. Energy-saving behaviors in households: A study
of the effects of mobile apps on energy awareness. Journal of Cleaner Production, 258,
p.120860. Available at: [Google Scholar].
3. Smith, A. and Jones, L., 2022. Mobile Applications and Behavior Change: A Guide to
Sustainability. Springer. Available at: [Google Scholar].
4. Google, 2023. Material Design Guidelines. Available at: [Google Scholar].

5. Huang, G., Zhou, Z. and Song, W., 2019. A study on mobile UI design principles.
International Journal of Human-Computer Studies, 127, pp.89-100. Available at:
[Google Scholar].
6. Shneiderman, B., Plaisant, C., Cohen, M. and Jacobs, S., 2016. Designing the User
Interface: Strategies for Effective Human-Computer Interaction. Pearson. Available
at: [Google Scholar].

7. Nielsen, J., 1994. Usability Engineering. Academic Press. Available at: [Google
Scholar].

8. Singh, R., 2022. Native Apps vs Progressive Web Apps. Available at: [Google Scholar].
9. Garrett, J. J. (2010). The Elements of User Experience: User-Centered Design for
the Web andBeyond. New Riders. Available at: [Google Scholar].

10. Krug, S. (2014). Don't Make Me Think: A Common Sense Approach to Web
Usability. NewRiders. Available at: [Google Scholar].