Sustainability at Home: The Development of an Efficient Framework for Home Energy-Saving Applications

Abstract

Energy consumption is increasing due to the rise in the world population, industrialization, and urbanization, particularly in the residential sector, attributed to a lack of user-friendly tools. This study seeks to create a research framework and wireframe for home energy-saving applications. A systematic literature review (SLR) was conducted using the VOSviewer software version 1.6.18 tool to pinpoint the research problems. Three key research problems were identified: Inadequate information presentation for both experts and non-experts, insufficient consideration for middle-aged and elderly users, and difficulties in interpreting graphics or images on the application’s display screens. This qualitative research involved three rounds of co-creation activities with nine experts and nine non-experts to identify major problems and preliminary solutions. As a result, two key issues were addressed from the qualitative data: The problem of area calculation, resolved by simplifying data entry processes, and the issue of material selection within homes, improved by incorporating illustrative images with concise, easily understandable descriptions. The outcome of this research is a framework and wireframe that lays the groundwork for developing user-friendly applications that promote sustainable behaviors in residential energy usage. This research contributes valuable guidelines for developers and stakeholders to create more efficient and user-friendly applications, thus promoting environmental action and sustainable practices in residential settings.

1. Introduction

Worldwide, energy consumption is increasing due to the growth of the world population, industries, and urbanization. From 2017 to 2050, global energy consumption is anticipated to rise by 29.7% [1,2]. According to the United Nations Environment Program (UNEP), residential and commercial buildings consume 60% of worldwide electrical energy, with a growing trend over time [2].

Strategies to reduce energy consumption have been proposed and implemented in the industrial sector by enhancing industrial production, an urgent necessity. However, in the residential sector, the usage and energy demand of residential energy consumption has increased in the last 10 years. Home users lack support and user-friendly tools for measuring their daily activities [3,4].

A number of studies have focused on reducing domestic energy loads, which impact overall energy consumption as the main sustainable issue [5,6,7]. This circumstance necessitates the development of new energy management systems [8]. For example, studies suggest the Internet of Things (IoT) paradigm, which allows heterogeneous objects to communicate and cooperate dynamically [2], the Industrial Internet of Things (IIoT), which connects interconnected devices with computers’ industrial applications, and energy management [9] and AI-Assisted in IoT-based Smart Microgrid [10].

In Thailand, the Department of Alternative Energy Development and Efficiency and the Ministry of Energy collaborated and set up the goal to reduce energy consumption in the residential sector by 15%, which was in line with the 20-year energy conservation plan. As a result, researchers created a computer program called COMET_61 (2018), which tests the benchmark of the energy efficiency of homes in Thailand to help obtain information to verify that home energy consumption was appropriate for the nature of the established benchmark [11]. In the evaluation stage, all three training sessions found a high level of efficiency. However, technicians and general users pointed out the difficulty of using the programs due to the confusing interfaces, point displays, data, and graphics. This was because the computer program was not designed to consider user-centered design principles, resulting in errors and problems. These comments and issues are similar to the following results from the worldwide energy-saving application studies:

• The presentation of information remains inadequate in terms of providing comprehensive understanding for both experts and non-experts [12,13,14,15].
• Mobile applications do not adequately consider middle-aged and elderly users [12,13,14,16].
• Communication through graphics or images on the application’s display screen is difficult for users to understand [12,13,14].

Nevertheless, the issues identified regarding information presentation, user considerations, and communication challenges are not limited to residential settings alone. Some studies share similar problems and report in other contexts, such as workplaces [17] or educational institutions [18], impacting and requiring overall energy efficiency and sustainability efforts. For example, Wang et al. (2021) present the climate change problem with serious information through a VR game called PEAR, increasing user knowledge. Moreover, Tekler et al. (2022) present smart energy management systems for workplaces with seven factors to gain user understanding and motivation through the application SEMS.

Therefore, the aim of this research is to develop a research framework and an application wireframe that meets the needs of users and provides understanding, applying user experience design (UX), user interface design (UI), and user-centered design (UCD) processes to energy consumption applications for residential homes by using the case study that researchers developed of the program COMET_61. To achieve this, this research set targeted users into four groups, covering experts/non-experts and young adults/middle-aged adults, as depicted in Figure 1.

The outcome of this research could be applied to expand the knowledge of user-centered design principles, user experience design (UX), and user interface (UI) in energy-saving applications within other sectors, such as residential homes, workplaces, and educational institutions, which creates effective presentations and user-friendly applications, achieving the final goals of understanding the sustainable issue and reducing energy consumption across various sections.

Moreover, the findings could offer practical solutions, such as simplifying data entry, incorporating illustrative images with concise descriptions, and minimizing cognitive user load by incorporating feedback and engagement through co-creation activities. The research findings, framework, and contributions can be instrumental in achieving energy efficiency, reducing environmental impact, and advancing sustainable practices in residential settings and other areas.

1.1. Research Gaps

This research identifies gaps by exploring the interrelationships among three variables: Applications, UCD, and energy data. This information was derived from the literature review presented in Section 2, covering the period from 2013 to 2022. The search was conducted by pairing two keywords at a time. The results of the data search are presented in Figure 2.

In search results from the pair of variables “application” and “UCD,” researchers discovered several themes. Most of these themes, however, were predominantly related to the following:

• Health, disease, and treatment [19,20,21,22,23].
• UX and UI design [24,25,26,27].

Further, when examining the results from the “UCD” and “energy data” pairs, it was found that these variables shared themes such as:

• Integration of information technology with the public health system (e-Health) [28].
• Smart homes, building monitoring, and building information modeling [29,30,31,32].

From the “energy data” and “application” pairs, the prevalent themes revolved around:

• Mobile health and palliative care [33,34].
• Smart home [35,36,37,38,39].

From this research gap, it can be concluded that the majority of the research from these three variables centers on health and smart homes. However, no research has focused on energy data-related applications applying UCD principles. Therefore, researchers suggest resolving these gaps by applying UX, UI, and UCD principles to design a user-friendly energy-saving home application.

1.2. Background: Computer Program to Test Benchmark of Homes’ Energy Efficiency in Thailand: COMET_61

This program assists in data entry to assess the energy usage of residential buildings according to the appropriate criteria set by the established standards. The energy efficiency standards for newly constructed residential buildings after 2018 can be checked through the architectural design process, specifically by examining the electricity consumption of the air conditioning and lighting systems. The energy efficiency standard for detached houses is 25 kWh/sq. m./yr, while the standard for townhouses and semi-detached houses is 44 kWh/sq. m./yr. Therefore, residential buildings that meet these criteria are categorized as detached houses, townhouses, or semi-detached houses newly constructed after 2018. These standards align with the energy efficiency plan for the years 2015–2036, which aims to achieve a 15% reduction in the total power consumption, including commercial and renewable energy, by 2036 (baseline 2015) (Study for Establishing Energy Efficiency Standards for Residential Buildings, Provincial Electricity Authority, 2018).

The program developed to test the energy efficiency standards of residential buildings in Thailand for 2018 focuses on assessing electricity consumption in two main residential-building categories: Detached houses and townhouses or semi-detached houses. These two types of residential buildings represent approximately 70% of the total residential buildings in the country. The program operates in two modes: An optional mode and a mandatory mode.

In the optional mode, the program provides a simple assessment by allowing the inspector to input information regarding the building envelope and key system data related to air conditioning in the area to be analyzed. The program then compares the input data with reference values and immediately evaluates whether the residential building meets the energy efficiency standards.

To use the calculation system, users must enter room details and materials. The main menus are as follows: (1) The room’s name, (2) the type of area whether it is air-conditioned or non-air-conditioned, (3) the size of the air-conditioned area, (4) number of users, (5) number of lighting equipment, and (6) number of air conditioning equipment. After that, the program will display a summary report of energy consumption in the home to show the calculation results in ‘pass or fail’.

This research article is organized as follows: Section 2: Literature Review, which covers topics such as systematic literature review, user experience (UX) design and user interface (UI) design in applications, UI with energy-saving technology, application development based on user-centered design (UCD) principles, ergonomic design principles, and the creation of a research framework. Section 3: Methods, detailing the qualitative research method used, with specific emphasis on co-creation activities. Section 4: Results, presenting the findings of the co-creation activity—this includes Phase 1, which focuses on UX behavior, and provides a summary of Phase 2 of the co-creation activity. Section 5: Discussion, providing analysis and discussion of the results obtained from the collaborative activity. Section 6: Conclusions, wrapping up the research by emphasizing the importance of energy conservation and sustainable practices in residential homes, highlighting the study’s limitations, and discussing the implications of this research for other sectors.

2. Literature Review

2.1. Systematic Literature Review

The primary objective of this part was to identify issues related to applications in the field of homes and energy through a systematic literature review (SLR) of relevant case studies and research works. To conduct the search, keywords such as “application”, “user experience”, “interface”, and “home/energy” were utilized. ScienceDirect served as the primary database for this study, and the inclusion and exclusion criteria for the search were established based on the information in

Table 1. Criteria for inclusion and exclusion.

	Inclusion	Exclusion
Database	Indexed in ScienceDirect	—
Language	Publications in English	Publication in a language other than English
Types of publication	Article or review	Books, book chapters, conference reports, proceedings papers
Year	Publication within the period of 2013–2022	—
Keywords	Keywords “application”, “user experience”, “user interface”, “home/smart home/home energy”	—

.

In the initial search, a total of 515 studies were identified in ScienceDirect with the aforementioned keywords. The researchers then narrowed down the search to include only studies published between 2013 and 2022, resulting in 201 studies. The inclusion criteria were further refined to only include review articles, reducing the total number of studies to 97, as illustrated in

Table 2. The 10 most frequently mentioned literary.

No	Authors	Title	Year	Journal	Total Citations
1	Terence K. L. Hui, R. Simon Sherratt, Daniel Díaz Sánchez [12]	Major requirements for building smart homes in smart cities based on the Internet of Things technologies	2017	Future Generation Computer Systems	327
2	Debajyoti Pal, Vajirasak Vanijja [40]	Perceived usability evaluation of Microsoft Teams as an online learning platform during COVID-19 using system usability scale and technology acceptance model in India	2020	Children and Youth Services Review	212
3	Chien-wen Shen, Min Chen, Chiao-chen Wang [41]	Analyzing the trend of O2O commerce by bilingual text mining on social media	2019	Computers in Human Behavior	157
4	Samer Zein, Norsaremah Salleh, John Grundy [42]	A systematic mapping study of mobile application testing techniques	2016	Journal of Systems and Software	154
5	Shohin Aheleroff, Xun Xua, Ray Y. Zhong, Yuqian Lu [43]	Digital Twin-as-a-Service (DTaaS) in Industry 4.0: An architecture reference model	2021	Advanced Engineering Informatics	152
6	Aristea Kontogianni, Efthimios Alepis [44]	Smart tourism: State of the art and literature review for the last six years	2020	Array	111
7	Md Rajibul Hasan, Ashish Kumar Jha, Yi Liu [45]	Excessive use of online video streaming services: Impact of recommender system use, psychological factors, and motives	2018	Computers in Human Behavior	97
8	Mona Masood, Menaga Thigambaram [46]	The usability of mobile applications for preschoolers	2015	Procedia—Social and Behavioral Sciences	80
9	Md. Moniruzzaman, Seyednima Khezr, Abdulsalam Yassine, Rachid Benlamrib [15]	Blockchain for smart homes: Review of current trends and research challenges	2020	Computers and Electrical Engineering	58
10	Christoph Rieger, Tim A. Majchrzak [47]	Towards the definitive evaluation framework for cross-platform app development approaches	2019	Journal of Systems and Software	55

. The identified studies were further categorized by year, as outlined in Table 2 and Figure 3. The most frequently cited studies from the SLR are presented in Table 2.

Word Co-Occurrence Cluster Analysis

In this process, an analysis was conducted of co-occurrence patterns among various elements, such as keywords, publication titles, and main topics, to identify the most prominent topics. As seen in Figure 4 and Figure 5, the results of the analysis indicated that the most prominent keywords were “usability” (15), “user experience” (14), and “user interface” (13). This type of analysis is often used to identify connections and trends between different disciplines and to define the scope of research. The software tool VOSviewer was used to conduct this analysis, which provided an overview of the relationships between the terms based on the number of co-occurring articles.

In the final step, the researchers read all 97 articles, looking at the title, abstract, and keywords in detail and browsing through the full articles. The studies that did not meet the criteria of inclusion in this stage with relevance to the keywords “application”, “user experience”, “user interface”, “energy-saving home”, and “home/smart home/home energy” were removed.

2.2. UX and UI Design in Application

Applications must have what is known as a user interface (UI) to present screen designs (e.g., icons, colors, layout, pictures) and should optimize the UX, which is what users experience while using the application [48]. The UX encompasses the overall feeling and perception users have while interacting with a product, application, system, or service. This encompasses a wide range of factors, such as ease of use, navigation, and relevance of the content displayed [49]. Designers should follow the principles of “why, what, and how” when creating products, as illustrated in Figure 6 [50,51]. However, it is essential to ensure that the product’s central concept remains intact while providing a seamless and smooth experience for users.

The UI is responsible for using design elements such as typography, icons, and images to transform a basic interface into an attractive and easy-to-use one. It is the process of creating a visually appealing layout and graphical user screen that enhances the product’s usability and creates an emotional connection for the end-user [52,53].

2.3. UI with Energy-Saving Technology

Nevertheless, the UI topic, specifically the technical area of energy-saving information representation, is quite limited. It requires not only design and esthetics but also a correct and effective presentation of technical information without confusion. Koskela and Väänänen-Vainio-Mattila (2004) [54] recommend that designers focus on familiar UI for smart home functions to achieve optimal user experience. Users do not want to learn interaction techniques and interfaces from technical manuals. Their research focuses on how different UI solutions for smart homes deal with different types of user activity patterns and presents two main themes: (1) “pattern control”, allowing users to control and set up the planned automation, and (2) “instant control”, which is currently the principle that enables users to control the interaction devices.

Moreover, Tekler et al. (2020) [55] recommend an interface named “energy dashboard”, which presents real-time energy usage feedback in homes and offices. This dashboard’s UI should include an “eco-feedback” menu [56] about reducing energy tips, comparing energy consumption with their neighborhood, and creating sustainable behaviors.

Tekler et al. (2022) [57] also developed a UI for an interactive energy dashboard in smart buildings, allowing users to learn more about their energy consumption through interactive visualizations. The UI of their work starts with “control interface” as the main display with three different menus: (1) “remote control”, enabling users to switch on/off remotely, (2) “presence-based control”, which allows setting specific time intervals for each plug load, and (3) “schedule-based control”, helping to set each plug load on different days.

In addition, regarding how to apply UI with the technology of energy-saving applications, recent studies suggest relating to several technology areas, such as (1) human–machine interaction (HMI), a UI connecting users to a device or system [58], (2) supervisory control and data acquisition, which helps to control and observe applications and systems remotely [59], (3) Internet of Things energy systems—both hardware and software—to remotely monitor energy management [60], and (4) smart grids control, presenting visual data about energy saving with improved reliability and more efficiency [61].

Understanding these specific energy-saving UI aspects is vital for developing effective energy interfaces and technologies with comprehensible and precise information, causing changes in sustainable energy behaviors.

In short, presented in

Table 3. Comparison of the differences between the UX and UI.

	UX Designer	UI Designer
Design areas	Interaction design	Visual design
Characteristics	Charts the user pathway	Chooses color and typography
Planning	Plans information architecture	Plans visual aesthetic
Expertise	Expert in wireframes, prototypes, and research	Expert in mockups, graphics, and layouts

, UX design is the process of designing and delivering a high level of user satisfaction, ease of use, and a clear sequence of steps to create a positive user experience. The UI connects design concepts, such as placement, images, buttons, and font size. Based on the issues discussed above, such as confusing interfaces and unfriendly experiences, researchers suggest applying these design principles to improve energy-saving home applications.

2.4. Application Development Based on UCD Principles

Pioneered by Norman and Draper, UCD focuses on the importance of understanding users’ needs in every design process, from service to product. The purpose of the system is to serve users and place them at the heart and center of the design [62]. Furthermore, the design team engages with users through research techniques and methods to create a highly user-friendly and accessible product or service [63,64,65,66].

This design process begins with understanding the context of use. Specifying users’ needs leads to solutions for design and evaluation problems, which can be looped back and forth at each step of the process to create the best UX, as shown in Figure 7.

2.5. Ergonomic Design Principles

In addition to addressing the challenges related to information presentation and user understanding in energy-saving applications, it is imperative to consider the ergonomic design of UIs. Ergonomic design principles, including cognitive ergonomics, are vital in optimizing UX, UI, UCD, and cognitive performance [67,68,69].

Guidelines like the International Society of Automation’s (2015) HMI standard (ISA101) emphasize the importance of cognitive ergonomics, which focuses on understanding and enhancing the perceptive processes involved in human–machine interactions [67].

By incorporating cognitive ergonomics principles into the design process, UIs can be tailored to meet the target users’ cognitive abilities, expectations, and limitations. Factors like information organization, visual hierarchy, clarity of communication, and ease of interaction can significantly impact user engagement, efficiency, and satisfaction [69].

While this study focuses primarily on addressing the information representation and user understanding challenges in energy-saving applications, it is essential to acknowledge the significance of ergonomic design principles in enhancing usability and user experience [70]. As a result, energy-saving applications can provide intuitive and user-friendly interfaces that promote efficient energy management and support sustainable practices in residential homes.

2.6. Creating a Research Framework

Considering the three main problems mentioned in the introduction, the researchers propose the framework in Figure 8. First, designers should apply UCD principles since iterative processes range from understanding the usage context to identifying user needs, finding solutions to design problems, and evaluating and repeating stages again. Next, they should adopt UX designs to set up the questions of why, what, and how in the use of energy-saving home applications to create meaningful and smooth experiences for users. Last, applications should adopt UI designs to create attractive UIs and enhance the usability and desirability of products, which involves (1) putting the user in control, (2) reducing the burden of user recognition, and (3) creating a consistent interface.

3. Method

This research employed a qualitative research method through co-creation activities, as illustrated in Figure 9. Co-creation refers to involving users and stakeholders in creating a new service system (Thailand Creative and Design Center 2022) [71] by bringing in experts in architecture, engineering, and related fields, in addition to stakeholders who will offer diverse perspectives, thereby providing a sense of ownership in the resulting design work. The researchers divided the co-creation activities into two phases, as follows:

Phase 1: Issues related to UX design behavior

Phase 2: Issues related to the UX design process

Figure 9. Plan of action for collecting data in collaborative ideation activities.

Figure 9. Plan of action for collecting data in collaborative ideation activities.

This research used purposive sampling of a targeted group of experts in architecture, engineering, UX/UI design, or related fields who had more than 10 years of experience and/or were university professors as well as non-expert groups, each of which consisted of nine individuals who did not meet the above criteria.

From the initial operational plan, the researchers chose the co-creation method to collect data on the factors that cause problems and obstacles in energy-saving home applications because they have experience conducting this program. The activity was divided into two phases to create tools, as discussed below.

3.1. Co-Creation Activity Phase 1: Study the Issue of UX Design Behavior

This phase began by collecting preliminary program usage data from participating groups through analysis using the fishbone diagram tool, which shows the relationship between all problems and causes. It is a chart that resembles a fish, comprising a fish head, bone structure, central axis, and fishbones. The problem is indicated with the head of the fish, the main cause of the problem is marked with an arrow entering the central axis, and the possible sub-causes that may cause the problem are marked with arrows pointing to the main cause. Data on selecting problem-solving strategies based on the principle of interface design with users (i.e., the UI) were collected in the form of a morphological chart structure for use in creating problem-solving ideas. The researchers allowed participants to freely express their opinions.

3.2. Co-Creation Activity Phase 2: Study the Issue of the UX Design Process

The researchers developed a design framework in the form of a diagram to present the problem-solving strategies resulting from the sub-project’s conclusions from Phase 1 using PowerPoint 2019 software. They also created a wireframe design concept in the first step in the design process, which included basic images or black-and-white sketches and diagrams of web application designs using Figma 2023 software, a design tool for UX/UI designers. Participants began reviewing the design framework and wireframe designs for the energy-saving home application monitoring the UX. The researchers allowed participants to freely express their opinions.

4. Results

The researchers divided the activity into two phases, with data collection divided into two groups: Expert and non-expert.

4.1. Results of the Co-Creation Activity: Phase 1 Focused on UX Behavior

The researchers divided the data collected from the activity into two parts: (1) Analysis of problems that arose after using the program and (2) a presentation of ideas for solving problems related to UX behavior, which were studied after the participants tried the program. The results of the data collection are summarized below.

4.1.1. Results of Problem Data Collection Using the Fishbone Diagram from the Two Activity Groups

The fishbone diagram tool was used to analyze and demonstrate the relationship between problems and their causes. The problems and the sub-causes that contributed to those problems were identified. The researchers summarized the problems found on each page of both groups (red = expert group, green = non-expert group) in Figure 10.

The results of the problem data collection from Application Page 1 are as shown in Figure 11, and the top three problems were found to be (1) unclear font colors that made rounded letters hard to read, (2) unclear text with difficult-to-read fonts, and (3) screen layouts with various components positioned in a way that strained the eyes.

The top three concerns are summarized by the problem data gathering on application pages (presented in Appendix A):

Application Page 2: (1) The one color used for writing, which makes it boring and difficult to read, (2) the problem of giving too much information, and (3) the discrepancy between the information and the presentation because of the overuse of technical words.

Application Page 3: (1) Difficulties viewing small-sized interface elements, (2) confusion between clickable and input fields, and (3) the need to input a large amount of detailed information, which can be challenging to users.

Application Page 4: (1) Unclear and hard-to-read text, (2) difficult-to-find clickable buttons, and (3) unattractive background colors and other components that did not make the system appealing to use.

Application Pages 5, 7, and 9: (1) Unclear and difficult-to-read text, (2) excessive amounts of presented data that made it appear cramped, and (3) unnecessary use of images that did not enhance understanding when not properly explained.

Application Pages 6, 8, and 10: (1) Difficulties understanding the layout and arrangement of different components on the screen, (2) unclear and difficult-to-read text, and (3) unappealing background colors and other components that did not entice users to use the application.

Application Pages 11 and 12: (1) Difficulties navigating and placing elements on the screen, (2) unclear and hard-to-read text, and (3) the position of input fields that made clickable and non-clickable areas indistinguishable.

Application Page 13: (1) Presenting data that lacked a summarized result, (2) difficulties understanding the system’s criteria for passing or failing the evaluation process, and (3) image presentation that did not change according to the calculation, making it difficult to distinguish between the final step and the end of the evaluation.

After testing the sample program, the problems were ranked and converted in percentage presented in Figure 12 as follows: Unclear and difficult-to-read text (5), Difficulties placing different screen parts (4), Presenting too much data per screen (3), Usability issues (3), Unclear font colors (2), Difficulties distinguishing input and non-input fields (2), Unattractive backgrounds and components (2), Image presentation problems (2), and Inconsistent and poorly presented data (1), respectively.

4.1.2. Results of Data Collection on Solution Selection According to the Established Goals Using Morphological Charts

The two groups of participants (experts and non-experts) used the morphological charts tool, and the activity of generating joint problem-solving ideas was carried out. The problem and the problem-solving methods were discussed one by one, and the participants selected the desired solution paths. The researchers summarized the results of the problem-solving approaches that both groups desired as follows.

The result of data collection on the selection of problem-solving approaches on Application Page 1 (Figure 13).

The results of the selected solutions for problem-solving that were identified by both groups were summarized by the researchers. The table below shows the most frequently chosen solutions on Application Page 1 (

Table 4. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 1 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).

	Solution Approach	Type 1	Type 2	Type 3
Target Usage
1	Usability (ease of use)	Reposition buttons in the center of the screen	Specify the objectives and information to prepare before use	Redesign
2	Text (clear)	Update the font to a more contemporary style	Refine the logo and sharpen the name at the bottom	Modify the background color
3	The color of the text (appropriate contrast)	Make adjustments to the color scheme for clarity	—	—
4	Background color and other components	Modify the background color	Design a new visual element	Modify the visual element
5	Amount of information presented on each screen	Place the logo at the bottom of the page	Specify the objectives	Make the letters easier to read
6	Positioning of components on the screen	Move [Login] to a more visible location.	Increase the size of letters	Incorporate an additional symbol
7	Position of the input fields (clear and appropriate)	—	—	—
8	Illustration (easy to understand and appropriate)	Change the image to be relevant to the content	Adjust the perspective of the image used for illustration	—
9	Consistency of information with presentation	Add the name of the program	Add a concise and clear objective	—

).

The most commonly identified solutions to the problem presented in Section 1 are: Placing the buttons in the center of the screen, the enhancement of the logo and the text below for clearer visibility, the modification the font color to improve legibility, the development of a new layout for visual components, the addition of the program name and provide a concise objective statement, and adjust the image perspective used in the presentation, respectively.

The result of data collection on the selection of problem-solving approaches on Application Page 2 (Figure 14).

The researchers summarized the results of data collection and the selection of problem-solving strategies from both groups together. The most selected items found on Application Page 2 are shown in

Table 5. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 2 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).

	Solution Approach	Type 1	Type 2	Type 3
Target Usage
1	Usability (simple)	Use infographic/image instead of text	Change font	New word space
2	Text (clear)	Use infographic/image instead of text	Use symbols—divide list instead of narratives	—
3	Letter color (appropriate)	—	—	—
4	Background color and other components (appropriate)	—	—	—
5	The amount of information presented on each screen (appropriate)	Use infographic/image instead of text	—	—
6	Position of the different parts of the screen (appropriate)	—	—	—
7	The location of the field (clear and appropriate)	—	—	—
8	Illustration (easy to understand and appropriate)	—	—	—
9	Consistency of information with presentation (appropriate)	Use communicative words that are easy to understand	Infographic/image instead of text	—

.

The most frequently selected solutions for problem-solving together on Application Page 2 are the use of infographics or images instead of text and the use of easy-to-understand communication.

The result of data collection on the selection of problem-solving approaches on Application Page 3 (Figure 15).

In

Table 6. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 3 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).

	Solution Approach	Type 1	Type 2	Type 3
Target Usage
1	Usability (simple)	Separate one topic per page	Drop-down list	Pop-up for explanation
2	Text (clear)	Drop-down list	Change font	Enlarged
3	Letter color (appropriate)	Changed	Darken the background	Redesigned
4	Background color and other components (appropriate)	Darken the color or reduce the use of greens	Design different buttons	Redesigned
5	The amount of information presented on each screen (appropriate).	—	—	—
6	Position of the different parts of the screen (appropriate)	Centered	Include pictures	Use responsive design
7	The location of the field (clear and appropriate)	Clear distinction between the fields	Centered	Redesigned
8	Images (easy to understand and appropriate)	Removed	Aligned	Changed
9	Consistency of information with presentation (appropriate)	Separate page to inform the user what to include	Options to fill in the field	—

, the common solutions found for the problems on Application Page 3 are presented.

The selected problem-solving approaches that were found most frequently on Application Page 3 are: The pop-up explanations to clarify meanings, the adjustment of font size and color, the adjustment of the position of various parts of the screen to respond to expansion, relocation of the position of the input fields located in the center. The adjustment of the house image to match the selected house type, and the description of a separate page indicating what data need to be prepared before use.

The result of data collection on the selection of problem-solving approaches on Application Page 4 (Figure 16).

The researchers were able to summarize the results of data collection and selection of problem-solving approaches from both groups and found the most selected solutions on Application Page 4, as shown in the following

Table 7. Summary of the results of collecting data for selecting solutions to identified problems on Application Page 4 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).

	Solution Approach	Type 1	Type 2	Type 3
Target Usage
1	Usability (simple)	Changed size	Aligned button to center/right	Selected user info
2	Text (clear)	Changed font style	Enlarged font	Changed content
3	Letter color (appropriate)	Changed complimentary color	Differentiated	—
4	Background color and other components (appropriate)	Changed colors	Changed content	—
5	The amount of information presented on each screen (appropriate)	—	—	—
6	Position of the different parts of the screen (appropriate)	Recomposed	No explanation text
7	The location of the field (clear and appropriate)	—	—	—
8	Images (easy to understand and appropriate)	Removed	Kept the theme of the image the same as the previous page	Redesigned
9	Consistency of information with presentation (appropriate)	Removed	Redesigned	—

.

The most common solutions identified to address the issues based on the collaborative selection of methods on Application Page 4 are: The change in the font size and color to be complementary, modification of the background color to be more appealing, the adjustment of the positioning of various elements on the screen, and the alignment of the visual elements consistently with the previous pages.

The result of data collection on the selection of problem-solving approaches on Application Pages 5, 7, and 9 (Figure 17).

The researchers summarized the results of the data collection and selection of problem-solving methods from both groups together and found that the most selected options on Application Pages 5, 7, and 9 are as shown in

Table 8. Summary of the results of collecting data for selecting solutions to identified problems on Application Pages 5, 7, and 9 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).

	Solution Approach	Type 1	Type 2	Type 3
Target Usage
1	Usability (simple)	Used 3D button image	Users needed to pass through each topic at a time	Pop-up with further explanation
2	Text (clear)	Changed fonts	Used 3D button image	Included more explanatory text
3	Letter color (appropriate)	Changed to complementary color	Used black only	—
4	Background color and other components (appropriate)	Removed standard components	Kept the same tones	Changed border color
5	The amount of information presented on each screen (appropriate)	Used 3D button image	Included market information	—
6	Position of the different parts of the screen (appropriate)	Used responsive design	Used separator for each topic	Included more instruction
7	The location of the field (clear and appropriate)	Used separator for each topic	Used 3D button image	Enlarged important section of the text
8	Images (easy to understand and appropriate)	Highlighted important part of the images	Highlighted clickable areas	Displayed dimension when resizing
9	Consistency of information with presentation (appropriate)	Used pop-up with more explanation	—	—

.

The most frequently selected solutions for problem-solving from both groups that were found on Application Pages 5, 7, and 9 are: The use of a step-by-step approach for the user to check each item rather than displaying all at once, the use of 3D images and allow clicking on the image instead of using buttons, with added highlighting to indicate where the user clicked, adjusting the font color to a complementary pair of colors, adjusting the background color to be in the same tone, make the layout of various screen components responsive to user zooming, providing pop-up explanations for terms or items, respectively.

The result of data collection on the selection of problem-solving approaches on Application Pages 6, 8, and 10 (Figure 18).

The researchers summarized the results of the collected data and selected solutions from both groups, finding the most commonly selected options on Application Pages 6, 8, and 10, which are shown in

Table 9. Summary of the results of data collection for selected solutions to identified problems on Application Pages 6, 8, and 10 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).

	Solution Approach	Type 1	Type 2	Type 3
Target Usage
1	Usability (simple)	Used company template	Included search button	Used infographic instead of text
2	Text (clear)	Removed unnecessary text	Changed font	—
3	Letter color (appropriate)	Used complementary colors	Changed clickable areas	—
4	Background color and other components (appropriate)	—	—	—
5	The amount of information presented on each screen (appropriate)	—	—	—
6	Position of the different parts of the screen (appropriate)	—	—	—
7	The location of the field (clear and appropriate)	Highlighted clickable areas	Reordered the fields	—
8	Images (easy to understand and appropriate)	—	—	—
9	Consistency of information with presentation (appropriate)	Included pop-up with more information	Used company template	Used infographics instead of text

.

The most commonly selected solutions for problem-solving found on Application Pages 6, 8, and 10 are: Collaboration of the private sector and using the company’s material templates (with pictures), removal of unnecessary text, the design of clickable areas to be distinctive and clear, and having pop-ups to show more information, respectively.

The result of data collection on the selection of problem-solving approaches on Application Pages 11 and 12 (Figure 19).

The most common solutions on Application Pages 11 and 12 are shown in

Table 10. Summary of the results of data collection for selected solutions to identified problems on Application Pages 11 and 12 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).

	Solution Approach	Type 1	Type 2	Type 3
Target Usage
1	Usability (simple)	Used company templates	Used 3D button images	Included pop-up to show more information
2	Text (clear)	Changed font	Used 3D button images	Included more instruction
3	Letter color (appropriate)	Changed to other complementary colors	Used black only	—
4	Background color and other components (appropriate)	Removed standard components	Used the same tone	Changed border color
5	The amount of information presented on each screen (appropriate)	Used 3D button images	Includes the option to show information	—
6	Position the different parts of the screen (appropriate)	Used responsive design	Used separator for each topic	Included more instruction
7	The location of the field (clear and appropriate)	Used a separator for each topic	Used 3D button image	Enlarged important part of the field
8	Images (easy to understand and appropriate)	Highlighted important portion	Highlighted clickable areas	—
9	Consistency of information with presentation (appropriate)	Included more options	Used pop-up to show more information	Used company templates

.

The most commonly selected solutions to the problems identified from both groups found on Application Pages 11 and 12 are: The use of the 3D images and clickable areas instead of button selection, with highlighted indicators for the clicked areas, the adjustment of the font color to complementary pairs, the removal of unnecessary words, such as “standard value” and “existing value”, addition of user manuals, and addition of options for selecting the type/quantity and perform the selection by clicking, respectively.

The result of data collection on the selection of problem-solving approaches on Application Page 13 (Figure 20).

The most common solutions for Application Page 13 are presented in

Table 11. Summary of the results of data collection for selected solutions to identified problems on Application Page 13 (the highest participant’s mentions presented with color in the table) (presented in Appendix A).

	Solution Approach	Type 1	Type 2	Type 3
Target Usage
1	Usability (simple)	Included additional pages to inform the result	Used 3D image	—
2	Text (clear)	Changed font	—	—
3	Letter color (appropriate)	Used other complementary colors	Used black only	—
4	Background color and other components (appropriate)	Removed standard/known components	—	—
5	The amount of information presented on each screen (appropriate)	—	—	—
6	Position of the different parts of the screen (appropriate)	—	—	—
7	The location of the field (clear and appropriate)	—	—	—
8	Images (easy to understand and appropriate)	Changed the image of the house according to the text	Included result indicator for each section	Highlighted clickable areas
9	Consistency of information with presentation (appropriate)	Included an additional page on how to pass	—	—

.

The most commonly selected solutions for problem-solving found on Application Pages 13 are: The addition of a summary page of calculation results showing whether it passed or not, the change of the color of the font, removal of unnecessary words, such as “standard value” and “current value”, the addition of indicator bars to show which parts passed or not, the addition of additional page of solutions on how to pass all, respectively.

From the collaborative activity to study issues related to UX design behavior of the program, the researchers summarized the data collection and design approaches to solve user problems that were in line with user requirements. It was found that both the expert and non-expert groups had a similar direction in problem-solving: To make the system user-friendly and attractive, ensuring continuity of use. The non-expert group was able to calculate the energy value despite not knowing the formulae or having the expertise of the other group. This led to the second co-creation activity in the issue of the UX design process for the next application.

4.2. Summary of Co-Creation Activity: Phase 2

The researchers divided the data collected from the co-creation activity into two parts: The results of developing the framework design and the wireframe design. The main objective was to create designs that could be used by certain user personas, with a focus on non-expert groups.

4.2.1. Analysis Results and Framework Development

The activity of presenting the framework, which was derived from the data collected in the first phase of the activity, showed the scope of the system in each topic, specifying subtopics in each part. The researchers summarized the considerations of both groups in the framework below (Figure 21).

The framework proposed by the researchers added three new parts that were not present in the original program in addition to the old framework, making a total of five parts. The added parts included:

A configuration section, which included theme, language, and font size. The group of experts and non-experts did not have any additional issues in this section.

An about section, which explained the background of the standard energy performance criteria for residential homes and specifications, including calculation methods. The group of experts provided additional comments in the contact section, suggesting future contact with standard setters, application developers, or related agencies directly in case of any discrepancies or questions, as well as a clear division of the contact department. Meanwhile, the non-expert group only required a single contact channel to reduce confusion or usage difficulty.

A summary section, where the evaluation results were summarized, and the calculators recorded the summary results. Neither the expert nor non-expert groups had any additional issues in this section.

Except for future recommendations that they would like to see, there were no additional comments or suggestions for improvements to the researchers’ proposed five parts.

4.2.2. Analysis Results and User Experience Development in Wireframe Design

The results of the co-creation activity in the first wireframe design UX development were included for improvement according to the problem-solving guidelines selected by both the expert and non-expert groups. The researchers designed with Figma, a tool for designing websites, applications, logos, and more. The researchers provided wireframes to the participants prior to the event for them to try on computers or smartphones via a web link to identify any additional issues for improvement during the activity.

The researchers presented the development of the UX in wireframe design to both expert and non-expert groups topic by topic according to the framework development guidelines. The results of the evaluation showed that the non-expert group had difficulty understanding or using two sections related to homes or calculations.

Part 1: Entering home area data

In this section, users had to enter data, which posed a problem for non-expert users, who were unable to calculate or use it. Part of this was the calculation of the total area of the house and the specific area that was air-conditioned. If the space where the area was measured was not a square or rectangle, users were unable to calculate it. For example, the area of a room that was shaped like an L had to be divided into two rectangles.

Part 2: Calculating electricity usage in residential buildings

In this section, users had to select the five components of the house that affected the calculation of electricity usage in residential buildings: The roof, openings, and windows (only for air conditioning), solid walls, lighting systems, and air conditioning systems. This posed a problem for non-expert users, who did not have the specific knowledge of the different materials that the expert group had, making it difficult to decide which material to choose. For example, the material used in the current house may not have matched any of the options in the application, which could have resulted in inaccurate calculations or failure to meet energy efficiency standards for residential buildings.

Considering the activity of collaborative thinking in Phase 2, where the issues related to the Figma program design process were studied, the main objective was to design the user personas for those who would be able to use it. The focus was on non-expert users, and it was found that this group wanted to reduce the complexity and confusion of material selection. They saw the application as a preliminary screening process before experts calculated the details.

5. Discussion

From the research results of the collaborative activity, it was found that only the group of experts was able to understand the purpose of the electricity consumption calculation application. Problems that arose included difficulties calculating the area of the house, lack of knowledge of the type of material used in construction, and the inability to read the energy values of lighting or air conditioning systems. These issues affect the calculation of energy efficiency standards for the home. If users cannot input data correctly, it may result in inaccurate calculations. This is consistent with the research findings of the two main issues, particularly the presentation of information, which was unable to provide understanding for both experts and non-experts [12,14,15,63,64,66].

In addition to usability issues, problems were found with the UI that stemmed from flaws in the UX research on the design of the first-generation calculation program. This involved graphic communication, icons, colors, illustrations, and typography, all of which were elements of the application’s screen display that were difficult for users to understand. This is also consistent with the research findings [12,13,14].

In brief, the results are similar to those of previous studies on these issues: User-friendly interfaces, considering factors such as color, typography, layout, and responsiveness [12,13,14], usability issues and user understanding and interaction [63,64], design flaws to enhance user comprehension and engagement [12,14], clear and understandable content, especially for non-expert users [15,63,64], identifying users’ needs and preferences through research gaps [12,13,15].

By studying the problem until a solution was found, a joint approach was developed for designing home- and energy-related applications as follows.

• Problem—unclear and difficult-to-read text and unclear colors (font, background, and components)

Solution—the screen must be able to adjust responsively according to the zoom level, including utilizing colors based on the principles of complementary color design as well as what is suitable for the vision needs of the users’ age range, such as warm tones for middle-aged or elderly people.

2.

Problem—difficulties placing different screen parts and distinguishing input and non-input fields.

Solution—the arrangement of the reading order should follow the eye’s path, such as from left to right and from top to bottom. In order to reduce confusion in the sequence, it should not return to the previous path, and it should create a visual contrast, using thick border lines around the cells and making clickable buttons solid and without borders.

3.

Problem—usability issues.

Solution—the content should be easy to understand at a basic level, such as providing simple demonstrations for the area calculation and selecting building materials based on pictures.

4.

Problem—user experience issues:

Solution—as presented in

Table 12. Problem and user experience solution related to area calculation.

User Experience
Pre-Intervention	Post-Intervention
Users are required to calculate the area and input the result into the designated input field.	We attempted to reduce the complexity of the process by allowing users to enter only the width and length measurements in the data entry fields. However, we have encountered additional issues where the calculated area may not apply to non-rectangular shapes or irregular patterns.

and

Table 13. Problem related to selecting the materials used inside the house.

User Experience
Pre-Intervention	Post-Intervention
Users must select specific materials to use from the details or the specific names of those materials.	The materials will be presented with images and pop-ups containing detailed information about each material. However, there are additional issues. Materials can have multiple layers overlapping each other, and it becomes difficult to select each layer individually. Even with the use of images, users who are not experts may not be able to distinguish between or understand them.

.

6. Conclusions

This research addressed the need for energy conservation and sustainable practices in residential homes, with the scope and focus on sustainable issues and reducing energy consumption. The article proposed a collaborative design framework including expert and non-expert groups to solve problems. First, the study tackled key problems, including the inadequate presentation of information, lack of consideration for diverse user groups, and difficulties in understanding graphical communication. Next, it applied an SLR and word co-occurrence cluster analysis using the VOSviewer software to analyze shared problems and identify prominent topics, such as usability, UX, and UI. The study found that the mobile application did not consider users’ needs, especially for middle-aged and elderly users, resulting in communication difficulties with its display screen.

To respond to the aim of this research (to develop a research framework and an application wireframe that meet the needs and understanding of users), the researchers proposed a research framework (Figure 8), a diagram (Figure 21), and a wireframe (Figure 22) for future prototype development.

The implications of this research extend beyond residential homes and can be applied to various areas. Some potential areas where this research can have implications include the following: (1) Workplaces: Designing UIs that address employees’ needs and preferences can facilitate effective energy management in office buildings, factories, and other work environments. (2) Educational Institutions: It could provide students, teachers, and staff with user-friendly interfaces that promote energy-conscious behaviors. (3) Public Spaces, such as parks, transportation hubs, and community centers: UIs in these contexts can provide real-time information and interactive features that promote sustainable energy use and raise awareness among the general public.

Regarding the study’s limitation, further studies should consider expanding the number of participants to validate the findings and enhance the generalizability of the research. Diversifying the non-expert design group is also crucial to obtain a broader perspective and ensure that the designed UIs cater to a wide range of user backgrounds and preferences (e.g., occupations, ages, and lifestyles).

Moreover, future study issues are suggested as follows: (1) Collaboration and interdisciplinary research from different disciplines, such as art, design, architecture, science, ICT, and engineering. This can lead to innovative home energy applications, (2) stakeholder engagement involving end-users, industry professionals, and policymakers in the research process. This enables researchers to gain insights into real-world needs and ensures the relevance and applicability of their findings, (3) long-term monitoring and evaluation, which allows researchers to assess the long-term effectiveness and sustainability of their interventions and identify areas for further improvement.

By considering the application of this research in such areas and beyond, the findings can have significant implications for promoting sustainable practices, enhancing energy efficiency, and mitigating environmental impact in various settings.