ANTIDERM Dermatitis Consultation Application User Interface Design Model Using Design Sprint Method

− Dermatitis is one of the inflammatory skin diseases that cause a variety of symptoms that can happen to all ages, particularly to children. Because of the many varieties of the dermatitis illness, patients are usually advised to consult with doctors specializing in the disease. However, oftentimes there are difficulties in meeting the doctors for consultation. Therefore, a consultation application is essential to ease communications between doctors and patients, alongside containing several information regarding the symptoms of dermatitis so that the public could learn the symptoms of dermatitis and how to avoid this dangerous disease. The mobile-based application ANTIDERM is one such application built for bequeathing to the public an efficient and accessible service to consult, do an early diagnosis


I. PRELIMINARY
Dermatitis is a skin inflammation disease that is caused by direct contact with substances that can cause allergic inflammation reactions. Fundamentally, dermatitis is one of the many categories of inflammatory skin diseases that has its own subvariants such as atopic dermatitis and seborrheic dermatitis, although the differences between these subvariants are superficial at best. [1] Dermatitis is most commonly found in toddlers or children. This is because of the low immunity system that a child's body has, and a heightened sensitivity towards bacterial infections, viruses, the environment, and the air. The dermatitis disease that attacks children can cause a disruption of skin health that can later cause risks for children. However, at this time the lack of public knowledge in identifying and managing dermatitis can cause the growth of toddlers and children affected by the disease to be stunted. [2] Globally, dermatitis affects approximately 230 million people in 2010 or 3.5% of the entire world population. The prevalent dominance of the dermatitis disease can be seen in the women group, particularly those in the reproduction period of around 15-49 years old. Among the infected, approximately 20% consists of children while 10% consists of adults. [3] Locally, most of the dermatitis disease causes are directly linked to the number of workers in Indonesia, especially those working in the oil fields and machinery. Approximately 50% of dermatitis patients in Indonesia are workers or people who are caught in a related injury. [4] One such injuries are from workers working at a slate pencil office. According to the accumulated data, these causes are the 2 nd leading cause of work-related illness after headaches. In 2017 there are a recorded amount of 472 cases, 467 cases in 2018, and 574 cases in 2019. From here it can be inferred that the amount of dermatitis patients both globally and locally is incrementing with every passing year. [5] One of the common problems are a shortage of consultation treatments regarding dermatitis relative to the amount of its patients. The overwhelming number of patients and the limited treatment facilities available can disrupt the cycle of treatment and consultation, particularly towards the patients' comfort in wanting their respective consultations to be handled quickly and effectively. That is why a method that can be used to create an application's design model that can increase the speed and accuracy of dermatitis treatment is essential. [6] In the process of face-to-face development and user experience, there are many methods commonly used by the development team, such as the Waterfall Method, the Spiral Method, and many more. One such method is the method that will be used in developing this application model, known as Design Sprint. Design Sprint is a method first introduced by Jake Knapp in 2010 at Google Ventures. This method is then continuously developed by Jake and the Google team to procure a more effective and efficient face-to-face development and user experience. [7] According to an excerpt by Banfield, Lombardo & Wax (2015), Design Sprint is a process that consists of five phases (Understand, Diverge, Decide, Prototype, and Validate) with limited time to plan a thinking method that can minimize the risks of bringing the product to the market. Design Sprint can be started with a new product or an already developing product. The benefits that can be acquired by using Design Sprint in this application design model is that the method itself requires very little time and resources while maximizing customer satisfaction. [8] Design Sprint's greatest strength is its speed in contextualizing and designing an easy-to-use and efficient user interface and relevant design models at lightning speed, cutting out needless banter and minimalizing the effort needed that results in months of work being able to be finished in mere days or weeks. [9] However, the method is not without its own weakness. As the name implies, the Design Sprint method prioritizes building a coherent and aesthetically pleasing design model at the maximum speed, but this comes at the cost of neglecting other aspects of the application, such as its basic coding framework. [10] On that note, the reason why this paper is made is to counteract both problems described above; the lack of and difficulty of communications between patients of the dermatitis disease and the experts through the application made with the Design Sprint method, while also making the interface easy-to-use and understand so as to make it easier to spread information the mass media.

II. RELATED RESEARCH
This chapter includes the review of related researches and studies which the author has perused to shed light on the topic under study.

Foreign Studies
Andrew Scheman and Solveig Hagen in their journal article "American Contact Dermatitis Society Contact Allergy Management Program App" discussed about the creation of a mobile application dedicated to showing the safe products that someone afflicted with the contact dermatitis disease can consume and featuring a user-friendly interface with the 'hamburger' icon. Furthermore, they discussed about the possibilities of such an app being applied to the entire dermatitis disease in general, and not just limited to contact dermatitis.
This study is closely related to the current study for it directly mentions the possibilities of an application specifically dedicated for countermeasures against dermatitis. The present study, much like the journal article, aims to create the design model for such an application. [11] Dahee Jin, Tae Hoon Yeo, Yoon Lee, and Ji-Tae Choung in their journal article "Qualitative Assessment of Atopic Dermatitis-Related Mobile Applications in Korea" analyzed the currently available mobile applications by searching the keyword 'atopic dermatitis' in the application markets. They analyzed its quality, its number of downloads, and its relations to the quality of information available regarding the dermatitis disease.
This study is closely related to the current study for it contains crucial information on how to spread information regarding the dermatitis disease to the mass media, and how certain factors and designs raise that percentage by quite a substantial amount. The present study aims to create the design model for an application that would be of a higher quality based on their analyzed data. [12] Local Studies Heny Ispur Pratiwi and Richard Kamardi in their journal article "Pengembangan Sistem Web Sebagai Diagnosa Dini Penyakit Alergi Kulit Dermatitis Atopik Dengan Metode Forward Chaining" discusses the creation and development of an early diagnosis system for the atopic dermatitis disease using the forward chaining method. The system is web-based, and features a consultation system and a database system for symptoms of atopic dermatitis.
This study is closely related to the current study for it details a very good foundation for the mobile-based application ANTIDERM as it has similar features such as a consultation system and a database system. The present study aims to develop this design model further to include not just atopic dermatitis, but also contact dermatitis and seborrheic dermatitis. [13] Betty Ayu Rahmaditiya, Tatang Rohana, and Santi Arum Puspita Lestari in their journal article "Implementasi Forward Chaining Untuk Mendiagnosis Penyakit Kulit Dermatitis Pada Bayi" discusses yet another mobile application that is aimed at counteracting the dermatitis disease, albeit concerning more about the coding framework process than the design aesthetic itself by utilizing the commonly-used Forward Chaining method.
This study is closely related to the current study for it details and supplements the application foundation and the Design Sprint's weakness of lacking in other non-design areas. The present study aims to incorporate these findings in order to create an application that will be efficient and effective both design-wise and framework-wise. [14] III.

RESEARCH METHODS
The research methodology that will be used in the development of this application's design model is the Design Sprint method that consists of 5 main phases that is illustrated in the image below.

Understand
In this phase, the needs of a potential customer and the correct technology that will be implemented is decided. Also, observation towards potential customers regarding their issues and understanding what the application needs to do to meet their demands is done in this phase. [15] One such example in this phase is to observe the location or through digital means to understand the customers' problem and what demands need to be met.

Diverge
In this phase, the solution of the previously observed problems is developed in further detail, while predicting and anticipating the problems that will appear from those solutions. These developments could come in the form of ideas from both the research team, the mentoring team, or even other participants so long as it is relevant to the discussed problem. [16] 3. Decide In this phase, the most correct solution of the multitudes of problems presented is decided. The decision is chosen through voting or through various available facilities. The chosen decision must meet the criteria that is decided upon beforehand, either through decision matrix or heatmap voting. [17]

Prototype
In this phase, the basic framework of the design model that is agreed upon is created, be it in physical form through notes or a storyboard, or in digital form such as template vectors. The basic framework must be high-fidelity (hi-fi) and contain all the relevant information regarding the function of the application. [18]

Validate
In this phase, simple tests by showing the prototype towards a few sample users to understand the efficiency of the design model is done. This is also done to gauge how user-friendly the model interface currently is, and what, if any, modifications that need to be done to develop it further. [19] IV.

A. UML Modeling Diagram Design
This research produces a number of Unified Modeling Language (UML) diagram designs that will later be used to assist in the development of an application interface system in order to increase the understanding and ease of use of the interface. The diagrams that are produced consists of a Use Case Diagram, four Activity Diagrams, four Class Diagrams, and four Sequence Diagrams.
[20] Use Case Diagrams are designs used for modeling system information behavior. [21] It also functions as an illustration of all the interactions and actions that can occur between the user and the system. In this case, the Use Case Diagram consists of 2 actors (user and admin) and a multitude of actions that they can perform.

Fig. 2 Use Case Diagram
Activity Diagrams are used to ensure that the software system workflow is easier to understand [22] so that the system's workings as a whole is more accessible. In this case, the Activity Diagrams consist of 4 processes (the login process, the consultation process, the diagnosis process, and the news process). The Login Process Activity Diagram details the steps through which the user can access the application through the login screen provided they input the correct credentials.

Fig. 3 Login Process Activity Diagram
Stephen, ANTIDERM Dermatitis Consultation Application …| 5 The Consultation Process Activity Diagram details the steps in which the application would request the availability of doctors and experts and immediately connect them to the patient in question, simplifying the communication cycle.

Fig. 4 Consultation Process Activity Diagram
The Diagnosis Process Activity Diagram is the wide array of options and responses available to the application and the steps it would take to manage the symptoms data provided by the user and calculate the probability and severity of the dermatitis disease they are potentially afflicted with.

Fig. 5 Diagnosis Process Activity Diagram
The News Screen Activity Diagram details the steps in which the application displays the news through connecting the application to an available internet network service and then procuring the relevant data from all the news and media sites around the globe.

Fig. 6 News Process Activity Diagram
Class Diagrams function as an illustration of all the classes that are involved in the analysis of the planned system. [23] In this case, the Class Diagram consists of 4 classes (the login process, the consultation process, the diagnosis process, and the news process).

Fig. 7 Class Diagram
Sequence Diagrams function as an illustration of the interactions between the objects that are used to show the communications or messages that is contained within those objects. [24] In this case, the Sequence Diagram consists of 4 processes (the login process, the consultation process, the diagnosis process, and the news process). The Login Process Sequence Diagram is the gateway to the application and showcases the application's methods and sequences in validating the login information.   The News Process Sequence Diagram details the steps and workings of the application and its interactions with other facets of the greater information system as it displays the news screen. The login screen of the ANTIDERM application is a basic one that allows the user to verify their identity through various methods, such as through e-mail address or through one of their available social media accounts. There is also an option to reset a forgotten password. This screen serves as the main gateway to the application itself.
The home screen is the main hub of the application. On the left side, multiple options are neatly arranged to greatly ease the user interaction process. The three main relevant functions of the application are also prominently displayed with a contrasting white palette to immediately direct attention to it. On the right side, multiple details such as the date, time, local weather, and the user account is displayed. The consultation screen is the main method of easing communication between patients and experts. It is displayed through a simple in-app messaging interface that is easy to understand and streamlines the process so that the patients' concerns can be relayed efficiently and effectively. The accessibility of this consultation method greatly simplifies the communication cycle between the patients and experts of the disease.
The diagnosis screen allows users to list what symptoms they are currently afflicted with, and using the Multi-Layer Perceptron method of calculation, the ANTIDERM application will predict whether the user has a low or high chance of being afflicted with a specific type of dermatitis and advise them accordingly. The application will also record the results and upload it to an external database so that future diagnoses will become increasingly accurate. [25]  The news screen contains the latest news regarding the Dermatitis disease taken from the web, along with various details that details its uploader, the date in which it was uploaded, and an external link for the full article that can be accessed with a single tap. The interface is made for an easy-to-use swiping mechanism to access other news.

V.
CONCLUSION Based on the test results and the research that have been conducted, it can be summarized that: a. The user interface (UI) model design of the ANTIDERM dermatitis consultation application produces a consultation, diagnosis, and news system information regarding the dermatitis disease. b. The user interface (UI) model design of the ANTIDERM dermatitis consultation application also produces an easy-to-understand, user-friendly, and very intuitive interface design. c. With the existence of this mobile-based system information, the communication cycle between patients of the dermatitis disease and the experts or doctors is streamlined to be easier and more accessible. d. With the existence of this this mobile-based system information, the spread of information and early diagnosis of dermatitis symptoms is more accessible and facilitates the ease of informing the mass about the dermatitis disease through the application.
As the UI model design of the ANTIDERM application is still in its prototype stages, further development is possible to update its interface and perfect its early diagnosis system. The basic coding framework of the application can be also refined further since it is the Design Sprint method's greatest weakness.
ACKNOWLEDGEMENT I would like to express my special thanks of gratitude to my teacher Mr. Debi Setiawan, who gave me the golden opportunity to do this journal article project, and who have taught me so many new things about the relevant terms. I am extremely grateful to him.
I would also like to thank my friends, who have supported me in finalizing and finishing this project within the limited time available. BIBLIOGRAPHY