ISSN 2087-3336 (Prin.
| 2721-4729 (Onlin.
TEKNOSAINS: Jurnal Sains.
Teknologi dan Informatika Vol.
No.
1, 2025, page.
http://jurnal.
id/index.
php/tekno DOI: 10.
UI UX design in smart home automation applications using the design thinking method Fitriyani Rizki*.
Joko Dwi Mulyanto.
Supriatiningsih.
Ina Maryani *Information Systems Study Program.
Faculty of Engineering and Information.
Bina Sarana Informatics University.
Indonesia, postal code 10450.
Jln.
HR.
Bunyamin No.
Sumampir Wetan.
Pabuaran.
Kec.
North Purwokerto.
Banyumas Regency.
Central Java, postal code 53124 Submitted: 31/05/2024 rizkifitriyani02@gmail.
Revised: 30/06/2024 Accepted: 22/07/2024 ABSTRACT As technology advances, one issue that needs to be taken into account is the consumption of power resources as one of the supports.
Technology use needs to be balanced with resource management for electricity use.
Furthermore, there is electrical energy waste due to the community's growing requirement for electricity usage.
Changes must be taken, such as utilizing energy-saving technologies or moving to ecologically friendly items, to help reduce the usage of electricity resources.
Creating applications that are eco-friendly and encourage energy savings is one way that many application developers are now addressing the issues at hand.
One such way is by utilizing smart home technology (Smart Hom.
The design thinking methodology is applied while creating interface design, specifically in the areas of UI and UX design.
Every step of the design thinking processAi empathize, define, ideate, prototype, and testAiwill encounter loops indefinitely until a specific circumstance is Figma is the tool used in this application to build UI/UX design.
By keeping an eye on devices that are no longer in use and tracking potential cost savings, the application design outcomes should be able to lower the use of electrical resources.
Keywords: Smart home.
ui ux.
design thinking INTRODUCTION The rapid advancement of technology has a significant influence on the development of different That can make a man's daily tasks easier to do.
To make working with a house ladder easier, a convenient arrangement gadget is required.
In addition, employing technologies that can organize all devices in One hand can store discharged energy.
Consistent with technological advancements, it is imperative to acknowledge the consumption of energy as a source of power.
Technology use must be matched with electricity consumption from sources that are power-controlled.
Keep in mind the use of electricity for housing the closest staircase and the connection to everyday technologies.
Several initiatives have been launched to promote the more convenient use of technology for those in need of housing ladders .
In addition, society's need to use power is growing.
The Ministry of Energy and Mineral Resources of the Republic of Indonesia (Ministry Energy and Mineral Resources of the Republic of Indonesi.
states that it is its responsibility to coordinate matters about energy and mineral power sources as communicated through mass media broadcasts with reference number 28.
Pers/04/SJI/2024.
By 2023, the community's available electricity for enhancement usage will be 1,285 kWh/capita .
comparison, in 2022, the usage is expected to be 1,173kWh/Capita.
Numerous variables to contribute to the increase in energy consumption, such as rising income levels that impact the amount of electricity needed for society.
From 2013 until 2017, the electricity price rate fluctuated, reaching its highest point in 2014.
Electricity prices increased by as much as The government's policy increase in the power tariff is an attempt to reduce the burden of if the price of electricity rises, savings in the budget will also occur .
TEKNOSAINS: Jurnal Sains.
Teknologi dan Informatika is licensed under a Creative Commons Attribution-NonCommercial 4.
0 International License.
ISSN 2087-3336
(Prin.
| 2721-4729 (Onlin.
16 Fitriyani Rizki.
Joko Dwi Mulyanto.
Supriatiningsih.
Ina Maryani UI UX design in smart home automation applications using the design thinking method Industrial development is rapidly increasing.
This encourages competition among developers or businesses to provide high-quality goods that are easier to use, boost markup, and generate revenue from production .
In addition to friendly, high-quality products, the surroundings are calm.
A great deal of When developers create a greater number of applications, they address pressing issues.
One such issue is the construction of an application-friendly environment that facilitates energy savings through the use of smart home technologies.
A "smart home" combines technology and services to provide consumers with a secure, comfortable, and time- and energy-efficient environment.
A smart home is made up of monitors and other devices that are linked to a controller via hard devices like PCs or smartphones.
This allows the gadgets to automate tasks based on the user's preferences .
The popularity of smart homes is growing and changing quickly over time.
infrastructure and technology are better suited.
Smart homes have the potential to be a bright future for the housing ladder, not just a fad .
METHOD
UI/UX design using design thinking methodology is used in the application design process for Smart Home automation.
The user interface, or UI for short, is a visualization design interface that includes all visual elements that the user would interact with within an application, such as buttons, layout, text, and images .
The section on UX (User Experienc.
focuses on how the user will eventually gain experience from the program .
Pattern thinking or process approach repeated is temporary design To develop original concepts and solutions that appeal to users .
As demonstrated in Figure 1, each step of the design thinking processAiempathize, define, ideate, prototype, and testAicontinues to be repeated without end.
Until the condition is known one day.
When every need has been met, the cycle will end .
Figure 1.
Stages of design thinking.
Interviews are one of the methods used for data collection in research projects.
Online interviews with several potential users with different backgrounds were conducted.
An interview is a conversation between two or more people.
The interview procedure might be conducted online or in person.
A query or interview will be sent by one side, while the other will act as the source or interviewee .
Stages Design Thinking.
In method design thinking there are 4 stages, namely:
Empathize, that is, investigate and comprehend problem users.
These researchers will gradually observe, speak with, and analyze data from problematic users to determine what needs the individual has .
Define, focus: This step will concentrate on the issue at hand and fix it using the findings of the research stage empathize .
Collaboratively, researchers and designers will compile data on moderate user difficulties and categorize them.
Generate an idea, then use it as the foundation for a design application .
This stage-by-stage planning user flow will allude to the user's subsequent interactions.
Additionally, wireframing still uses rough or planned interface depictions.
Prototype: this is where the concept that has always been is developed into a visual design that can be tried out and tested.
Test: Following the completion of all steps, a test run is conducted to evaluate the usability of the prospective user's approach.
Stage testing a feature or product to gauge user comfort is known as usability testing.
ISSN 2087-3336 (Prin.
| 2721-4729 (Onlin.
DOI 10.
37373/tekno.
Software Editing Figma: At the moment, product managers, engineers, and UI/UX designers utilize Figma the most .
One design tool that can be used to create designs for mobile, desktop, websites, and other applications is Figma.
Figma may run on a variety of system types that are linked to the internet, including Windows.
Mac, and Linux.
Fig Jam: One of Figma's features is Fig Jam.
Fig Jam is an online whiteboard that facilitates group ideation and compilation.
Fig Jam can be utilized to jointly determine something in a Fig Jam is also useful for creating presentations, prototypes, and other visuals .
RESULTS AND DISCUSSION
The stages of creating a design application using the design thinking technique are as follows: do empathy, define, ideate, build a prototype and test.
Each step can be sustained to generate a priority application that the user requires.
Empathize At this point, the research process begins to gather information on the needs and mild issues that candidates may be facing.
based on Figure 2.
Which displays the findings from five potential customers' Concerns have been raised by users over the convenience that will be lost while using smart home apps.
One of the obstacles is also how simple it is to locate devices that might be linked to the The need to ensure that technological advancements and environmental sustainability coexist is another factor driving people to use smart home technologies (Smart Hom.
The elderly population will also have trouble adjusting to ever-more-advanced technology since some older tech users do not truly comprehend how to operate smart home-based products .
mart home.
and have their own set of issues.
However, an increasing number of people are worried about the drawbacks of excessive energy use, including the depletion of non-renewable energy resources, environmental harm from consumptive energy use that affects the surrounding environment, and the growing amount of electronic waste that builds up without adequate disposal.
Living in harmony with the natural world and avoiding more environmental harm is what people wish to alter for the better.
The respondents desired an app that would track how much electricity they consumed daily.
addition, the app should be able to link to several smart home devices .
mart home.
so that device settings can be managed from a single app.
Additionally, the general public expects the program to be user-friendly and simple to use.
Define Grouping study results and findings on affinity diagrams comes next.
An affinity diagram is a type of diagram that can be used to organize and explore conflicting ideas.
then organized according to theme .
Following the identification of the issue, an affinity diagram is created, as seen in Figure 2.
The motivation to save energy and prevent further harm to the environment, to switch from using nonrenewable to alternative energy sources, to turn off devices when not in use, to ensure environmental sustainability, to increase economic benefits, and contribute to improving the welfare of people, were the first criteria used to group problems.
Additionally, power bills can be decreased by conserving energy, and freeing up funds for other expenses.
The environment is the basis for the following category.
The environment is vital to life.
disregarding it will lead to an imbalance in the natural world, a lack of awareness of how to use and manage the environment around us, an increase in the extinction of plants and animals due to environmental degradation, and pollution problems that may endanger human life.
Additional obstacles include the difficulty of altering energy-wasting and excessive energyconsuming behaviors, the tendency for environmentally friendly technology to take precedence over convenience, the difficulty of gaining access to the internet, and the difficulty of using applications that are not yet flawless.
Furthermore, one of the reasons is that energy-saving products are hard to come by because not all places can afford them and their cost is high.
18 Fitriyani Rizki.
Joko Dwi Mulyanto.
Supriatiningsih.
Ina Maryani UI UX design in smart home automation applications using the design thinking method Figure 2.
Affinity diagram.
Analysis of the data User Personas is then visualized, as shown in Figure 3.
A user persona is a fictionalized portrayal of a target candidate using a product or reflecting application-specific traits from the candidate user.
Information regarding user names, illustrations or pictures, demographics, goals and behavior, pain spots, and quotes or user-illustrated quotes are all included in user personas.
Figure 3.
User persona.
Ideate After identifying target users and user-defined problems, the next stage is to create a user flow for map channels or user actions within the program.
Figure 4, illustrates the user flow, which begins with the user registering an account and continues with the user logging in to applications and the arranging ISSN 2087-3336 (Prin.
| 2721-4729 (Onlin.
DOI 10.
37373/tekno.
Figure 4.
User flow.
The next phase, as shown in Figure 5 is to create a low-fidelity wireframe sketch for the home page, login page, account registration page, room arrangement page, and yard add device.
Currently.
UI designers will be in charge of creating the design.
The design is still in black and white, and final instructions or text are included.
However, low-fidelity elements like navigation bars, buttons, cards, and others can already be seen clearly at a certain stage based on their location.
Figure 5.
Wireframe view.
Prototype 20 Fitriyani Rizki.
Joko Dwi Mulyanto.
Supriatiningsih.
Ina Maryani UI UX design in smart home automation applications using the design thinking method The next step after wireframing is to create an eye-catching, interactive application.
The term "high fidelity" (Hi-F.
refers to application designs that are already colored, with clear instructions, buttons, graphics, and/or motion design elements.
superior fidelity Being a UI Designer still involves tasks in Account List View The appearance account registration page is shown in Figure 6 for the user to access the application, they must first create an account on the page.
The user enters their name, email address, and password upon registration.
Alternatively, if they already have an account with Google or Facebook, they can use those credentials.
Once the user has created an account, they click on the list tab.
Additionally, the user will access the application's home menu.
Figure 6.
Display of the account list page.
Login View The appearance page while logged in is shown in Figure 7, if the user has their account, log in by using your email address and password that you previously set up.
The user will see the home menu after clicking the login button.
Figure 7.
Login page display.
Home View ISSN 2087-3336 (Prin.
| 2721-4729 (Onlin.
DOI 10.
37373/tekno.
The appearance of the home page is shown in Figure 8.
Users will be provided with information on the quantity of electricity used and cost savings on the home menu.
Devices that are only moderately engaged can be observed by users.
Users can quickly disable any devices that are not in use and conveniently manage devices that are only available to them.
Users can also set up an existing device-filled connected room on the main menu.
Figure 8.
Home page view.
Settings view room The appearance page configuration chamber is shown in Figure 9.
There are several linked rooms with gadgets linked to the application on this menu.
Additionally, connected devices can be configured to be either enabled or disabled based on the requirements of the user.
When a user wants to arrange guests in a room, for instance, they must press the space menu for guests to see the items that are available to visitors in that room.
After that, the user can decide whether to enable or disable the device.
Figure 9.
Display of the settings page room.
Appearance added device 22 Fitriyani Rizki.
Joko Dwi Mulyanto.
Supriatiningsih.
Ina Maryani UI UX design in smart home automation applications using the design thinking method The appearance page add device is shown in Figure 10.
The user has two options for scanning the additional device: via Bluetooth or QR code scanning.
As the device is being scanned, the closest gadget will show up, and users can add it in line with the room's needs or category.
Customers then click the "save" button to retain the merchandise.
Figure 10.
Adding page view device.
Test One testing technique is usability testing.
A product or application can be evaluated through usability testing in a way that is directly relevant to the potential user .
Testing methods that employ the usability testing approach are more advantageous since they can be applied to a wide range of applications, whether they are small-scale or large-scale .
Figure 11 s bar chart displays the findings of respondents' satisfaction levels with the usability tests conducted on the tested applications.
Figure 11.
Level of satisfaction user.
ISSN 2087-3336 (Prin.
| 2721-4729 (Onlin.
DOI 10.
37373/tekno.
The usability testing that was conducted on five respondents yielded findings.
There was a wide range of responses provided.
The application seemed to have pleased the respondents.
The application is simple to use because each menu is well separated from the others so that they are not confused.
The application's registration feature and user interface are both simple to use and engaging, even for nontechies.
Simple application displays employ eye-catching color choices that work well for novel ideas.
The application already has a full feature set that is simple to use.
Respondents can follow directions to the letter, and the Figma prototype operates smoothly and easily throughout device testing.
CONCLUSION
UI/UX design can provide customers with an experience similar to that of utilizing pre-existing As a result, the candidate user gains experience that is somewhat real.
How the application will behave afterward.
Problem users can be identified as early as possible before a product or application is manufactured by using the design thinking method.
Considering that research is a problem that is started and problems are grouped according to the category.
That is the essence of it: consumers may encounter little issues.
One issue consumers have is fear that by moving to a smart house with technology, comfort would be compromised.
We provide solutions that make people more at ease and For usage-based smart home gadgets.
Beginning with the ease of placing gadgets in each area and employing technology to scan devices via Bluetooth or QR code on device scanning, energy consumption, and cost savings are tracked.
Usability testing against five respondents revealed that respondents are happy with the design of the application automation smart home.
because programs are simple to use and comprehend.
Excellent interface design and implementation, with functionality and color combinations that are easy for non-techies to understand.
It is also possible to undertake application design to specify how future applications will function.
ACKNOWLEDGEMENTS
Accept love to Directorate General of Higher Education (DG Higher Educatio.
Ministry of Education.
Culture.
Research and Technology (Kemendikbud Research and Technolog.
who have organized the Independent Learning program Independent Campus (MBKM) especially, in the Internship and Independent Study programs Certified (MSIB) Batch 5.
REFERENCE