*Article* **MyDiabetes—The Gamified Application for Diabetes Self-Management and Care**

**Nooralisa Mohd Tuah 1, \* , Ainnecia Yoag <sup>1</sup> and Fatimah Ahmedy 2**

	- fatimahmedy@ums.edu.my

**Abstract:** Gamified applications are regarded as useful for patients in facilitating daily self-care management and the personalization of health monitoring. This paper reports the development of a gamified application by considering a design that had previously been investigated and reported. Numerous game elements were installed in the application, which covered several tasks aimed at managing diabetes mellitus. The development process utilized the Rapid Application Development (RAD) methodology in terms of system requirements, user design, construction, and cutover; this paper refers to the user design and cutover processes. The developed application was tested through system testing and usability testing. The usability testing adopted the Software Usability Scale (SUS) to assess the usability of the application. Twenty participants were involved in the testing. The result showed that the gamified application is easy and practical to use for an individual with or without diabetes. All the provided functions worked as designed and planned, and the participants accepted their usability. Overall, this study offers a promising result that could lead to real-life implementation.

**Keywords:** gamification; diabetes self-management; RAD methodology; game-design-based; Software Usability Scale

#### **1. Introduction**

Patients with long-term health conditions must adapt to a new routines and lifestyles, mainly involving their daily activities and dietary intake. Recent technology has revolutionized such activities by creating incredible tools and resources, and putting useful information at our fingertips. Despite the growing prevalence of smartphones, health-focused digital learning using the gamification approach has only been sparsely implemented in daily life. This omission may hinder an individual's efforts to self-care and manage, particularly those living with health conditions like diabetes mellitus.

Diabetes mellitus (DM) is one of the most common non-communicable diseases worldwide. It has become an important item on the agenda of healthcare providers. In recent years, researchers have focused on developing intervention tools that can foster self-care management. Unmanageable levels of blood glucose led to health complications and a decline in quality of life.

DM is an endocrine disease characterized by a person's blood glucose level [1,2]. A significant increase above the normal level will lead to a diagnosis of type 1 or type 2 diabetes mellitus. Healthcare services should promote the awareness of a healthy lifestyle and disseminate diabetic literacy and knowledge widely to prevent the condition from increasing. In Malaysia, DM has been increasing annually; a particular issue is the rise in Type 2 DM among Malaysian adults over 30 years old [2,3]. This increment is due to poor self-care management, minimal awareness of the disease, a lack of medication adherence, and dietary issues [2]. Individuals with DM require careful monitoring and care from the patients themselves, the primary care clinic, and the hospital. Currently, healthcare

**Citation:** Tuah, N.M.; Yoag, A.; Ahmedy, F. MyDiabetes—The Gamified Application for Diabetes Self-Management and Care. *Computers* **2021**, *10*, 50. https:// doi.org/10.3390/computers10040050

Academic Editors: Paolo Bellavista and Carlos Vaz de Carvalho

Received: 28 February 2021 Accepted: 9 April 2021 Published: 13 April 2021

**Publisher's Note:** MDPI stays neutral with regard to jurisdictional claims in published maps and institutional affiliations.

**Copyright:** © 2021 by the authors. Licensee MDPI, Basel, Switzerland. This article is an open access article distributed under the terms and conditions of the Creative Commons Attribution (CC BY) license (https:// creativecommons.org/licenses/by/ 4.0/).

providers utilize readiness questionnaires [2] to test individuals' knowledge and literacy of their condition, the related treatment, and the care required.

Meanwhile, game-related research scholars have recognized gamification as an approach that uses game mechanics in non-gaming contexts to facilitate healthcare management [4]. The gamification approach offers an attractive application that could encourage and help individuals understand and become informed about their condition. Gamification helps to balance learning and playful aspects while maintaining conditions of good health. In general, healthcare and gamification have been integrated and implemented in various diabetes applications. Gamification is seen as an approach with much potential in the healthcare field. Scholars have investigated gamification as a practical intervention tool for motivating individual engagement with treatment and care [4–6]. Moreover, for individual patients to learn about their condition through a playful environment is considered more convenient for them, and the prevalence of such environments will increase via mobile devices.

Research in gamification and healthcare has frequently been explored to provide viable options to patients and healthcare providers in facilitating diabetes self-care management. Previous research [7] showed no significant improvement in patients' medication adherence when using games for DM. Another study [8] has reported that using games for DM has no considerable effect on HbA1c reading. However, there was a significant result in terms of diabetes knowledge and awareness. Since then, researchers have studied and improved many aspects of this intervention, especially in the gamification and understanding of self-care. Previous research [1] has recommended the need for an effective platform, standardization, and simplification to ensure better knowledge acquisition.

Although the research on self-care management through fun learning games and gamification has been conducted, these studies only focus on a single diabetes issue, for example, problems of blood glucose [8], medication intake [7], and diet management [5]. Furthermore, the available applications (mention by, for example [9,10]) have existed in different platforms and environments, but some are quite expensive due to the need for external devices. In addition, more configurations are needed for these devices, leading to the disruption of the process of learning about self-care management. Additionally, diabetes self-management using mobile applications is seen as not sufficient, whereby the features of self-management in a mobile app are very limited and do not comprehensively cover the diabetes requirement [11,12]. Developing one platform that integrates several issues related to DM would enable a practical and convenient tool for knowledge acquisition and self-care management.

This paper presents the groundwork for developing a playful, integrated environment and gamification application for DM. This development stage is a continuation of the requirement stage that was reported previously in [6]. The development process is described, and the results from the system testing are presented. The developed gamified application in this paper is intended to contribute to enhancing a self-management and self-care platform with gamification and a fun learning environment. Most importantly, the report discusses users' access, pace, time commitment, and capability in terms of managing their own health condition.

This paper is organized as follows: first, this paper reviews works related to DM; then, it describes the materials and methods used in the study. The description of materials and methods includes the development methodologies, the gamified applications, and the testing procedures. The next section covers the presentation of the results and discussion based on the conducted system testing. Finally, the concluding remarks as well as recommendations for future work are presented in the last section.

#### **2. Related Work**

Following the framework of diabetes self-management by Al-Marshedi et al. [13], the component of self-management requires a logbook, data visualization, and trend alerts. A logbook can incorporate medication tracking, appointment tracking, and a log of every

task related to a patient's condition. The application summarizes these logs into a simple visualization chart/graph. The chart provides the resultant trends, with any unusual trends alerting the patient, carers, and doctors if the system is connected to them. Moreover, the self-management of diabetes is enhanced through educational games, apps monitoring, and in-game motivational feedback [9,10]. Included in the self-management functions of most mobile apps on the market, as reviewed by Priesterroth et al. [10], are the functions of a diary for insulin doses, and logs of food intake, activity, weight, and blood pressure. The reviewed articles researched these functions utilizing fun learning games and gamification over the years. However, those articles only focus on a single diabetes issue, for example, problems of blood glucose [8,9], medication intake [7], and diet management [5,14].

Research by Klaassen et al. [9] and Lewis et al. [15] use the PERGAMON framework, which utilizes wearable sensors, games, and gamification for their diabetes selfmanagement application. The framework is designed as a gamification platform. It has many functions, such as a diary, mini-games, user profiles, and personalization. It uses a virtual coach, goals, and tasks as the main game elements, apart from points, badges, and levels. The game mainly involves empowering patients with the knowledge of controlling blood sugar levels through their dietary intake and carbohydrate counting tasks. Patients can also log any activities related to diabetes through the application, for example, exercise activities and daily water intake. Furthermore, the application allows the patients to create and customize their profiles. Nevertheless, these applications require external devices to be paired with the application.

In terms of the application of gamification for diabetes, Klaassen et al. [9] discussed the difficulty and complexity of diabetes games that are suitable for self-learning. They must be designed to be straightforward and simple. Moreover, the design of the games and applications must be aligned with the targeted users. Vassilakis et al. [16] further emphasized that in diabetes self-management, learning through digital applications or games is an alternative method used by healthcare personnel to support and motivate a patient to enhance their level of learning. In this view, giving feedback and guidance are essential, and ease of use should be considered in the design of applications. Other than using a gamified platform application, the literature reports that applications that are solely games have been utilized as tools to educate diabetes patients (such as [5,8,16]). Even though such applications have a specifically targeted diabetes solution, they are designed and built with multiple activities that facilitate the acquisition of the knowledge and skills related to diabetes. However, various aspects of diabetes knowledge and the scope of the related skills have yet to be discovered, and further research should be expanded to include diabetes-specific features. Vassilakis et al. [16] suggested that more games should be designed to educate patients in various aspects of diabetes, including the promotion of a healthy lifestyle, the need to avoid smoking, and encouragement to take up physical activities. Moreover, as reviewed by Priesterroth et al. [10], the gamified applications have frequently been implemented to promote self-management. However, gamification features are not systematically implemented in such applications.

Meanwhile, Brzan et al. [12], in their review of the 65 mobile apps for diabetes selfmanagement, argued that the mobile apps development should employ user-centered design, which will specifically include individual patient's requirement in the application. The review also showed that only a small amount of content related to learning and selfmanagement was embedded in mobile applications. The self-management indications used in [12] include monitoring blood glucose, nutrition intake, physical exercises, and body weight. However, it should not be limited to those functions only. Other self-management features suggested in [12], such as reminders, notes, tracking functions, and personal messaging, should be designed and applied in the mobile application. One particular issue in mobile apps implementation that should be considered is the feature of diabetes self-management in mobile apps is limited [11,12]. Huang et al. [11] advocate that many diabetes mobile apps lacked medication management features and had less emphasis on

basic reminder features. Thus, designing the self-management components is crucial and needs to carefully consider the requirement for diabetes and the requirement from patients.

Therefore, even though the available intervention tools utilizing gamification elements have been researched and invented, they represent different targets in improving a person's health condition. As self-management and care are the keys to health improvement, features related to these aspects must be designed accordingly. Thorough approaches to the design and implementation of gamification tailored to diabetes self-management requirements are needed to produce a more practical intervention tool.

#### **3. Materials and Methods**

This section focuses on the methodology and materials used in building the gamified application. A stepwise explanation of the processes involved in each phase is presented. Likewise, the materials employed are also described; those involved in this study are (1) the tools utilized in the development phase and (2) the gamified application itself. Moreover, this section outlines the gamification features and the implementation of the gamified application features.

#### *3.1. RAD Methodology*

The development of integrated playful games for diabetes mellitus follows the Rapid Application Development (RAD) methodology. RAD consists of 4 phases: requirement planning, user design, construction, and cutover. RAD is a method that focuses on system development through a prototype and reusable codes. Using the prototype, developers can obtain rapid responses from users during the development cycles. Meanwhile, the reusable codes from available open-source repositories enable the development period to be shortened. Moreover, this method accelerates the development period without impairing the quality of the application. Thus, RAD was chosen on the basis that developers and users work synchronously to create a functional product that follows the user's requirements. The RAD phases are presented in Figure 1.

**Figure 1.** Rapid Application Development (RAD) methodology.

Based on the RAD methodology in Figure 1, each phase is described as follows:


phase. Then, the approved design was transformed into a complete system in the construction phase.


Following the RAD methodology, phases 1 and 2 were successfully conducted and published, and this paper reports the work related to phases 3 and 4. The system's construction is presented in Section 3.3, and the system testing in the cutover phase is presented in Section 3.5.

#### *3.2. The Development Tool*

The diabetes gamified application in this study was developed using the PHP framework. The developers used the PHP code in coding the applications, the CSS for the interfaces, the JSON and JavaScript for the gamification element, and phpMyAdmin for the database. Hostinger.my was subscribed to as the server and hosting platform.

#### *3.3. The Gamification Design and Development Approach*

In developing the mini games, the game development approach by Hendrick [17] must be followed, which is a process that includes the prototype, pre-production, production, beta, and live. The prototype involves a process of translating the concepts into low-fidelity and high-fidelity designs. Pre-production involves the documentation of the game design. Production is the game development process, whereby the game assets, design, and code are constructed into a fully functional game. In beta, the game is tested to obtain feedback from the users. Once tested, the game is ready to go live. In this study, the process of prototyping was conducted in the user phase (stage 2) of the RAD methodology. The mini games planned for this study lay in the game production, beta, and live processes, which were the processes conducted in the construction phase (stage 3) of the RAD methodology. In the selection of the game elements and mechanics of the diabetes gamified application in this paper, two considerations were made.

First, the design is based on self-management elements in the gamification for the chronic illness framework in [13] and application of fun elements in motivating a person to sustain their engagement with a health-based gamified application [4,10,13]. With this in mind, the implemented game elements were a logbook (record-based), data visualization (graphs), and alerts. A logbook is any recorded data that relates to given features, such as data concerning medication, appointments, or tasks. For each type of data, the rate of completion is visualized in the form of percentages, using a circle graph on the user's dashboard. Alert messages pop up to remind the user when any of the data is reached or if the given due date has passed. Meanwhile, the selected fun elements are missions, the progression bar, avatar, and badges, as well as the challenges in the mini games. The element of missions in the gamified application allows users to set targets to improve their health condition. The achievement of the missions is visualized through the progression bar. Users will be intrigued to see their progress over time. When any mission is achieved through completing several tasks, a badge is awarded. This badge shows the specific achievement of the users, after which a different user status (novice, intermediate, advanced) is displayed on the user's account. This situation is anticipated to influence the users' engagement with and behavior toward better health self-management. The simulation model is illustrated in Figure 2. The simulation is using machination diagram. As shown in the simulation, the sources are the data log from the users, in which the data are pooled according to its purpose and indicated by the progress mode. In the simulation, ten data pools were set to be achieved. Once completed, the data are pushed automatically (\*) to another pool to indicate the data have been visualized on the application.

**Figure 2.** Model of the diabetes gamified application.

Second, the gamified application should follow a particular design pattern. In the literature, there are few available guidelines or frameworks that researchers or developers can use to assess the creation of the gamification design. For example, there is the Mechanic, Dynamics and Aesthetics (MDA) framework [18], Octalysis gamification framework [19], game design guideline [20], and the software engineering of gamification [21]. Each of the frameworks provides a different focus of how a researcher should develop a certain gamified application. However, each of them has a set of rules for good practices in gamification development and implementation. Among them, this study follows the game design guideline by Gallego-Durán [20]. The guideline was chosen because it helps the researcher design the gamified application design by analyzing the strength and weaknesses of the application according to the given characteristic. The guideline has ten characteristics of game-design-based gamification. The rubric of each characteristic is rated between point 0 (low), 1 (medium), and 2 (high). With that in mind, the gamified application yields the following scores:


For that, the gamified application gets a score of 14 points in total. The points show that the gamification design can plausibly be considered as accepted, as each of the characteristics is available in the application. However, the gamified application can still be added with more features in the future.

#### *3.4. The Diabetes Gamified Application*

The gamified application was designed by the developers (the authors) following the requirements collected in phases 1 and 2. The application interfaces were designed to be user-friendly. The application emphasized certain gamification features that were specifically designed for the users to take advantage of.

In the gamified diabetes application, several functions enable a person to manage their condition. The application requires a person to be registered. Once registered, they need to input and set the necessary information, such as their medication, appointments, tasks related to health targets, and other related treatment. Personal information and healthrelated data were also needed, for example, emergency contact details, physician details, allergies, and other co-morbid medical conditions. The application also implemented the concept of a personal dashboard, which was designed with the element of progression. This element shows the percentages completed monthly for each component. Visually displaying individual progress at a particular stage makes patients aware of their health status, particularly how well they are coping with their blood sugar control and current existing condition.

In the personal information feature, an element of badges and missions is included. A person receives a badge when he/she has completed or reached 100% on a particular component of the application. Meanwhile, the mission is another game element through which a person can track their health goals. This element of missions is also associated with the element of badges. For example, one individual health mission is to maintain their HbA1c reading at an average level in three consecutive months. From the recorded results, the application rewards the individual with a badge if he/she manages to achieve their mission. Another game element to be implemented in future designs is the element of points, which are received and collected from playing mini games. By playing a series of such games, a person can learn about their condition and obtain points, which can later be used to redeem rewards and items to customize their avatar. Figure 3 illustrates all the functions of the gamified application.

Based on the illustrated functions in Figure 3, the gamified application has three main sections: the user profile, self-management functions, and mini games. Users can manage their basic information via their user profile and add an emergency contact number and medical information (health condition) (refer to Figure 4). Self-management functions are presented through the dashboard (refer to Figure 5a). Users must manage their medication, appointments, and tasks related to their condition (refer to Figure 5b–d). Following the user design phase, three mini games will be installed, consisting of a memory game, an action game, and a role-playing game. The memory game involves memorizing matching pictures about food intake, the essential tools for diabetes, and healthy activity (refer to Figure 6a). Meanwhile, in the action game, users play an adventure activity in a given

environment in which they have to collect essential items for a person with diabetes (refer to Figure 6b). For the role-playing game, a rogue-like game will be installed.

**Figure 3.** The functions flow in the gamified application.

**Figure 4.** Gamified application—user profile, badge, and mission.


**Figure 5.** (**a**) Gamified application—Dashboard and progression; (**b**) Gamified application—Manage task; (**c**) Gamified application—Manage appointment; (**d**) Gamified application—Manage medication record.

**Figure 6.** (**a**) Mini Games—Memory games; (**b**) Mini Games—adventure activity.

#### *3.5. Software Testing Method*

In this study, white box testing was conducted for each function in the gamified application. The testing begins with unit testing, which was followed by integration testing. Following that, once each module has been completely developed, the developer generates automated PHP testing. By generating the test, developers can ensure all units are programmed accordingly, and, more importantly, no errors have occurred in the application. The program codes can be identified as practical during the testing, thus minimizing the usage of computer memory resources during the operation (run time).

#### *3.6. Empirical Research Method*

Apart from the software automated test, preliminary user testing was also conducted to ensure the programs ran as designed and planned, and all transactions were successfully made without error. This testing was deemed necessary before the researcher could conduct acceptance testing with the potential users (diabetics). In this testing context, the errors were identified from users' misconceptions in determining the system flows. Feedback was also collected regarding the application interface and the way the system worked. For this purpose, the researcher utilized the established Software Usability Scale [22] to determine user perspectives from their use of the application. All the testing processes are illustrated in Figure 7.

**Figure 7.** The process of the conducted testing.

Participants and Research Design

The study recruited 20 individuals for the preliminary user testing. These were randomly selected based on their level of familiarity with technology. They had to be familiar with online applications and have a higher internet usage in their day-to-day activities. This number of participants was considered plausible to enable the identification of a reasonable proportion of problems in heuristics usability [23]. Participation was voluntary, and no compensation was given for involvement. The participants were of mixed backgrounds and included persons with and without diabetes.

The testing was designed to be conducted by the users themselves. A call for participation was made via social media and the project website. Interested participants were randomly selected and formally emailed to gain their consent and provide them with participation details. Following the first email, a second email was sent to the participants giving detailed instructions about the testing. The instructions included the step-by-step process for conducting the test and the documentation needed for the testing. The testing was undertaken individually using online resources, and the testers had to refer to the given test cases and complete the testing within the allotted time.

#### **4. Result and Discussion**

Twenty individuals participated in the testing. The demographics of the participants are summarized in Table 1. Among the 20 participants, 16 were female and four were male. Their age distribution was between 30 and 40. Five of them had diabetes and 15 did not. However, their diabetes condition was controllable and not severe. These participants were also categorized as being familiar with technology and spent more than three hours per day doing online activities.


**Table 1.** Participant demographics.

The results of the testing are presented according to the testing activities conducted. There are two parts, the automated system testing and the preliminary user testing. These results suggest the automated unit testing shows no significant errors. The application performance based on the server-side evaluation can be credibly interpreted as successful and suitable for the application environment. With ten simultaneous usages, only 1% of the server memory was utilized (out of 512 MB server memory) with an average response time of 0.335 per second. Based on the results, the application performance was manageable. Users could use the application widely with minimum delay, subject to their network and server performance. Table 2 shows the results of the application server-side performance.

**Table 2.** Application's server-side performance.


The system testing was conducted with 20 participants, and according to the test cases, all functions worked accordingly. The participants were able to follow the system's flow correctly. Thus, no system errors were found during the testing. Apart from conducting the test, these 20 participants also provided additional responses that reflected their opinions of the application. The responses were based on the given questionnaire adopted from the Software Usability Scale (SUS). The questionnaire used a Likert scale of 1 (Strongly Disagree) to 5 (Strongly Agree). There were ten questions, and the results of the mean and standard deviation (SD) of each question are shown in Table 3.



The perceived usability of the gamified application was found to be highly reliable (10 items, α = 0.98). Based on the results of the responses, as shown in Table 3, the positive questions (Q1, Q3, Q5, Q7, Q9) received a mean value of 4.0 and above. Furthermore, the negative questions (Q2, Q4, Q6, Q8, Q10) received a mean value of 2.5 and below. Additionally, based on the SUS scores interpretation, the total scores for each participant were multiplied by 2.5 to convert the scores into a 0–100 range. Scores above 68 were considered above average, indicating acceptable usability. Users rated the gamified application as very positive, with an average score of 76.87; the obtained score was above the average SUS score. The obtained SUS score recorded a median score of 76.25; the minimum score was 70; and the maximum score was 85. Figure 8 shows the boxplot of the SUS scores for all users.

**Figure 8.** Software Usability Scale (SUS) overall participants scores.

The results in Table 3 and Figure 8 show that all participants agreed with the functions provided in the application, that the application was not complicated, and that learning to use the application was easy without the need of a technical support person. Thus, the users gained a reasonable level of confidence in using the gamified application. The users understood the process and were willing to use it further. Therefore, we assumed that the application was ready for actual user acceptance testing (tested by a diabetes patient). Although a direct comparison with the previous study in [10] may not be applicable, due to the different focus of the diabetes self-management implementation, the findings show that the gamified application implemented in this study is systematic, with consistent but not complex features. A comparison with the outcome of previous studies in [9,24] reveals a similar pattern in the need for a simple application whose functions are not overly difficult and whose design is relevant in its gamification elements and techniques. Hence, this finding has established the underpinning concepts of applying gamification for health self-management.

Nevertheless, certain limitations of this study were noted. First, the conducted testing was a self-regulated activity, which was conducted online due to the pandemic situation and movement restriction order. This resulted in a limited level of observation of user

behavior during the activity. Moreover, the testing activity was conducted over a short period. Thus, future work should consider longer experimental periods and evaluate a person's improvement in their health condition when the application is used. Second, one mini-game (the role-play) still needs further improvement, as it received several comments during the testing. Most comments concerned the patient's avatar (role-play character). It was suggested that the avatar should reflect the level of a patient's condition in the gameplay and gradually change as the condition of the patient improves. This suggestion is in line with the avatar implementation in a previous study [5] in which the avatar changes further explain the positive effect on the user's engagement in the gameplay. Meanwhile, other comments were directed toward the interface designs, which have been altered by the developers. Nevertheless, any comments and suggestions on the current functionalities could inform further improvement.

#### **5. Conclusions and Future Work**

The application of gamification for diabetes mellitus is gradually receiving attention as a tool and part of an individual's daily life activities. Providing an application that could help individuals learn more about their health condition indirectly teaches and encourages them to self-care and self-manage. Providing such an application also allows individuals with diabetes to adapt to their daily routine by themselves. However, individuals with little or no familiarity with using the Internet and technology find such applications challenging to use. This scenario could occur with older adults who are more accustomed to manual book records, nurse call reminders, and the physical diabetes awareness program. Nevertheless, personalized healthcare monitoring, such as the developed gamified application presented in this study, has been created for anyone who requires assistive tools in self-managing their diabetes condition.

This research reports the development and testing work related to the completion of a gamified application. The work was grounded in the RAD methodology, with the requirement and design phases having been completed. The developed application underwent preliminary user testing to assess the application's usability with the Software Usability Scale (SUS), and the results were encouraging. The results from the usability study show that the gamified application is generally easy and practical to use whether the individual is living with or without diabetes. The users also indicated that they would like to use the application frequently. However, currently, there is no proof that the system could improve a person's health condition. This should be taken into consideration in future studies.

Therefore, in future work, the researchers will conduct acceptance testing and assess the application's effectiveness for prospective users. A longitudinal study inspecting how a person could benefit from the gamified application, as well as how the application could affect the condition of a person's diabetes, will be further researched. The longitudinal study is considered necessary to measure any medical impact on a person when using a particular system application. The system effectiveness requires time and a monitoring method, such as a diary, to acquire comprehensive results. In the interim, suggestions for application improvements will be put into action. Meanwhile, other application improvements, such as developing a mobile apps version and adding more mini games, will be considered for future work.

Generally, the developed gamified application in this study can be considered a possible future solution for modern healthcare services. The application is an open platform, which currently involves diabetes as the subject of interest. Applying other health conditions as subjects of a gamified application can also be further explored.

**Supplementary Materials:** The following are available online at https://www.mdpi.com/article/10 .3390/computers10040050/s1.

**Author Contributions:** Conceptualization, N.M.T. and A.Y.; methodology, A.Y.; formal analysis, F.A.; writing—original draft preparation, N.M.T.; writing—review and editing, A.Y. and F.A. All authors have read and agreed to the published version of the manuscript.

**Funding:** This research is funded by the Universiti Malaysia Sabah, grant number SLB0201-2019 and the APC is funded by the Universiti Malaysia Sabah.

**Institutional Review Board Statement:** The study was conducted according to the guidelines of the Declaration of Helsinki, and approved by the Medical Research & Ethics Committee of Ministry of Health Malaysia (NMRR-19-1732-49011 and 7 October 2019).

**Informed Consent Statement:** Informed consent was obtained from all subjects involved in the study.

**Data Availability Statement:** Data are contained within the article and can be found in the Supplementary Materials.

**Acknowledgments:** The authors would like to thank Universiti Malaysia Sabah for this research opportunity and the financial support during the completion of this research. In addition, the authors would like to thank the research assistant who administered and coordinated the testing accordingly.

**Conflicts of Interest:** The funders had no role in the design of the study; in the collection, analyses, or interpretation of data; in the writing of the manuscript, or in the decision to publish the results.

#### **References**


## *Article* **Developing Emotional Intelligence with a Game: The League of Emotions Learners Approach**

**Jaione Santos 1 , Triinu Jesmin 2 , Antonio Martis 3 , Michelle Maunder 4 , Sandra Cruz 5 , Carolina Novo 5 , Hannah Schiff 5 , Pedro Bessa 5 , Ricardo Costa <sup>5</sup> and Carlos Vaz de Carvalho 6, \***


**Abstract:** Being able to understand, express, and communicate emotions is widely recognized as a fundamental competence. For the younger generation entering the professional market, this is particularly relevant as, in this context, emotions are managed and communicated in ways (and channels) that are different from what they are used to and that can easily lead to misunderstandings. Therefore, it is important to analyze how young people deal with, understand, and interpret emotions, particularly in the context of a professional career where the ability to dialogue with different people and how to get around problems in a healthy and resilient way is essential. This analysis will allow one to design and create tools that allow the younger generation to improve their emotional intelligence and competence. This article introduces the League of Emotions Learners (LoEL) project, an innovative initiative that, through a game app, develops the emotional competence and intelligence of young people. The article then presents the results obtained in the initial validation that led to the positive understanding of its impact.

**Keywords:** emotions; emotional intelligence; serious games; apps

#### **1. Introduction**

Emotions are universal, ubiquitous, and have a large impact in all the aspects of our lives. Emotions shape our relationships and define how we interact with family members, friends, coworkers, and other people that we meet during our lives. Experiencing an emotion allows us to evaluate and perceive a concrete situation following a pre-existing set of cognitions, attitudes, and beliefs about the world.

Emotional competence is a basic ability that characterizes emotionally intelligent individuals. Having emotional competence implies being able to establish healthier relationships and to deal with adversities. Individuals without emotional intelligence do not have the ability to master their emotions, and this means that they might be unable to communicate properly and, therefore, be led to act inappropriately due to a misunderstanding of situations. Hence, emotional intelligence is a significant competence for professional success as it depends on how emotions are dealt with in terms of the ability to influence, communicate, collaborate, solve conflicts, and work in a team.

To some extent, it is possible to improve one's emotional competence or, at least, some of the inherent aspects such as emotional self-consciousness, emotional self-control, self-motivation, empathy, and social skills. The League of Emotions Learners (LoEL) project promotes this development and provides a bridge to overcome the emotional

**Citation:** Santos, J.; Jesmin, T.; Martis, A.; Maunder, M.; Cruz, S.; Novo, C.; Schiff, H.; Bessa, P.; Costa, R.; Carvalho, C.V.d. Developing Emotional Intelligence with a Game: The League of Emotions Learners Approach. *Computers* **2021**, *10*, 97. https://doi.org/10.3390/ computers10080097

Academic Editor: Paolo Bellavista

Received: 19 July 2021 Accepted: 2 August 2021 Published: 10 August 2021

**Publisher's Note:** MDPI stays neutral with regard to jurisdictional claims in published maps and institutional affiliations.

**Copyright:** © 2021 by the authors. Licensee MDPI, Basel, Switzerland. This article is an open access article distributed under the terms and conditions of the Creative Commons Attribution (CC BY) license (https:// creativecommons.org/licenses/by/ 4.0/).

intelligence gap between the younger professional generation and the organizational context in companies. It mainly seeks to empower the youth so that they can express and communicate emotions, are aware of the cultural factors behind the expression of emotions, and can acknowledge the importance of the media channels on the shaping of an emotional message. By using the project outcomes, young people are expected to be able to identify, understand, manage, and communicate their own emotions and other people's emotions.

#### *1.1. Emotional Intelligence*

Emotions are biologically based states translated into thoughts, feelings, and behavioral responses that are brought on by neurophysiological changes [1,2]. Emotions work for us in the sense that they guide our behavior and our thinking process, particularly when a rapid response is needed to sudden (sometimes, critical) situations. They also help to relate to other people, manage expectations, and understand and respond to life challenges. As mentioned before, emotions are normally triggered from an occurrence and their perception, which can be conscious or unconscious. The occurrence can be external or internal, current, past, or future, real or imaginary. There is an innate mechanism that values the stimuli that reach our senses and generates the corresponding emotions. If the happening is assessed as positive, it is perceived as progress toward wellbeing and generates positive emotions. On the contrary, if the happening is assessed as negative, it generates negative emotions.

Individuals react differently to similar situations as emotions change according to how everyone feels and sees the world and how they interpret the actions of others. We evaluate what is happening in a way that is consistent with the emotions we are feeling, thus justifying and maintaining the emotions. Moreover, emotions produce changes in the part of our brain that mobilizes us to deal with what has set off the emotion. Emotions also cause changes in our automatic nervous system (which regulates our heart rate, breathing, sweating, etc.), preparing us for different actions. Facial expressions, as part of this mechanism, do not just communicate emotions, they also increase those that a person is feeling and send signals to the body to issue a consistent response.

The identification of emotions and, particularly, the basic (or most important) ones has been the subject of a wide and extensive debate in the psychological community. In his revised proposal, Ekman proposed what is nowadays the most used model (even if Eckman himself has somehow moved on from this approach) that includes six basic emotions: sadness, disgust, happiness, fear, surprise, and anger [3]. The other emotions (more than 50 already identified) such as shame, revenge, and hope are linked to these six basic emotions. Ekman's view included the notion that emotions are discrete, measurable, and physiologically distinct as the subjective and physiological emotional experiences matched the distinct facial expressions.

Emotional intelligence is the ability to distinguish and manage emotions and to use this knowledge to manage one's thoughts and actions. It is "the ability of a person to monitor one's own and other people's emotions, to discriminate between different emotions, to label them appropriately, and to use emotional information to guide thinking and behavior" [4]. It is also the ability to recognize other people's feelings and one's own and to be able to motivate and handle properly the relations that we have with other people and with ourselves. Goleman proposed that an emotionally intelligent person should be able to differentiate between distinct emotions and to devise an accurate and effective plan of action to respond to different situations and scenarios [5]. He further detailed that an emotionally intelligent person should be an effective handler of others' emotions by manipulating body language and conversations to manage and regulate others' emotions in a favorable direction to the goals of the parties.

Emotional competence therefore is defined as a set of knowledge, abilities, and attitudes that allows one to be aware, understand, express, and manage appropriately an emotional phenomenon. Schutte, Malouff, and Thorsteinsson argued that a person is competent in the perception of emotions if they can recognize emotions from the voice and facial

cues of others, as well as be aware of one's emotional state and reactions [6]. This competence increases the personal and social wellbeing through emotional conscience, emotional regulation, emotional autonomy, social competences, and wellbeing and social abilities.

Emotional conscience is the ability to be aware of one's own emotions, to be able to identify and classify emotions, to use emotional vocabulary and expressions, to understand other people's emotions, and to be aware of the interaction between emotion, cognition, and behavior.

Emotional regulation allows one to understand that the internal emotional status might be different from the external expression, to regulate one's emotional expression, to face challenges and conflict situations and, finally, to be aware and capable of generating positive emotions.

Emotional autonomy provides a positive image about oneself (self-esteem), allows one to be involved in diverse activities of daily life, to be capable of making and maintaining social relationships, to take responsibility of one's actions, to have a positive attitude, and to face adverse situations.

Social competence allows one to manage basic social skills, to respect others, to practice receptive communication, and to take responsibility for one's actions.

Wellbeing and social abilities involve the ability to set-up goals, to search for help and resources, to identify the need for help, to develop an attitude of awareness of the rights and duties as a citizen, and to create optimal life experiences.

Emotional competence is especially important for teenagers and youth, in general. During this stage of life, young people will move away from their families and will be closer to their peers and to the labor market. This can be a difficult time especially if the young person cannot understand their own or other's emotions. Young people who develop their emotional intelligence early become more empowered, are more aware and assertive, and are able to solve problems more easily, and they cope better with tough/stressful situations at work.

#### *1.2. Emotional Intelligence in the Professional Context*

Emotions are naturally present in the professional world. Knowing how to recognize one's emotions and to understand how they affect oneself and others can contribute to better manage the adversities of life and to deal with unforeseen events that happen in daily professional life. Being emotionally intelligent allows an employee to perceive, understand, utilize, and manage emotions effectively in a professional context [7–10].

Organizations consider emotional intelligence as an important skill, due to its significant impact on the various aspects of the business community, especially employee development, performance, and productivity [11]. The Emotional Quotient (EQ) has been included as a factor for hiring employees, together with the Intelligence Quotient (IQ), academic credentials, and work experience [12]. Emotional intelligence has a direct association with employee performance and professional success [10,13–15]. Having emotional control is essential to maintain a positive and adequate professional posture, and knowing how to deal with emotions and different personality types in the professional environment is vital to a successful career. It can also improve the emotional wellbeing of all colleagues in the professional environment. Additionally, it improves the quality of the services that the organization itself provides as it improves the relationship with clients, favors employee's loyalty, prevents conflicts, and gives positive solutions to conflicts.

#### **2. League of Emotions Learners**

The League of Emotions Learners (LoEL) project aims to empower young people to develop their emotional competence, to be able to identify and express self-emotions, and to establish successful online and offline communication. The project was particularly concerned with professional environments and, as such, had five main objectives:

• To develop empowering training resources that allow young people to identify the origin and nature of the emotions.


The project targeted young people and youth trainers that could benefit from the use of the results in their personal and professional lives, by becoming more aware of their emotional intelligence, being able to recognize the benefits of managing one's emotions, and knowing how to express emotions and how to communicate through videos, pictures, and audio. Moreover, they can benefit by knowing how to discover how new technologies and their own channels and signs can shape communication and can be used to express emotions.

The LoEL approach brought together key aspects that, normally, are not interrelated in a training process: the importance of language in the identification and expression of emotions and the recreation of professional scenarios though learning by doing and gamifying strategies adapted to the business world.

#### *2.1. The Guide for Youth Worker*

The first result of the project was a set of ideas, resources, and examples addressed to the youth trainers to support them in their work with the young collective. These materials were created with the objective of providing these professionals with game-based and nonformal learning methodologies focused on emotions' identification and management. The methods and contents are not only transferrable from the online to the offline scope, but also from the informal and nonformal to formal education, so youth trainers and educators can produce innovative programs. This result was called the Guide for Youth Workers and the offered practical tools allow youth trainers to facilitate learning environments where emotional competence development is the core topic. The guide also explains the LoEL pedagogical concept and approach and explains how to use and replicate it.

#### *2.2. The LoEL App*

Communication has evolved and changed, and nowadays, digital audiovisual communication has gained extreme relevance. Young people are normally digital natives, that is, they grew up in close contact with computers, the internet, video game consoles, mobile phones, social media, etc. According to different studies, children now receive their first phone at the age of 10 and start interacting in social networks at the age of 14. Additionally, they frequently play with digital devices such as consoles and smartphones. This means they interact with digital audiovisual material from childhood, and this is their preferred way to connect to the world and to express emotions. Therefore, it is important to be aware that, for some people, it is much easier to express emotions using other channels rather than talking. Accordingly, the League of Emotions Learners tool (Figure 1) was conceived as an interactive mobile app (currently available from the Google Play Store—https://play.google.com/store/apps/details?id=com.virtualcampus.loel and Apple AppStore—https://apps.apple.com/app/id1501537657, accessed on 29 July 2021) designed to empower young people to be able to identify, manage, communicate, and understand their own and other people's emotions.

**Figure 1.** LoEL App introduction.

The LoEL app implements innovative gamified educational practices that include specific activities based on the digital habits of young people. This combination of digital content in the form of a Serious Game available through a mobile platform is highly effective for the addressed target group, measured by their ability to translate the acquired competence in real tasks [16]. Serious Games, defined as games designed with a serious purpose [17], are immersive and motivating due to their embedded enjoyment and emotional gratification [18], and they build training environments that allow the acquisition of knowledge, experience, and professional skills through the simulation of different situations and contexts [19,20], which can be well adjusted to the LoEL target group [21]. Therefore, the app design followed a set of requirements:


in different ways:

	- Identifying emotions based on a definition.
	- Identifying emotions in images (Figure 3).
	- Identifying images that represent an emotion.
	- Asking the user to show a specific emotion.
	- Completing a comic story, where users must create the correct dialogue lines for a proposed narrative focused on a specific emotion (Figure 3).
	- Asking the user to identify emoticons based on the name of a movie/song and vice versa (Figure 3).
	- Filling-in the blanks exercises with sentences that use common jargon terms.

**Figure 2.** LoEL app visual design.

**Figure 3.** Different games in the LoEL app.

EMOTIONAL ORGANISATIONS is an activity that puts the player roleplaying and practicing how to manage emotions in professional backgrounds through simulated scenarios (Figure 3). These activities are classified in four areas that are essential for the management of a company's emotional intelligence: ability to control emotions, ability to motivate oneself, recognition of other people's emotions, and control of relations.

The app includes a difficulty progression system that moves the players through different levels of complexity. Currently, there are 4 different levels and, following feedback from the users, the progression, based on experience points, follows a logarithmic approach. That means that users can move quickly from the first level to the second level, need more points to move to the third level and even more points to get to the final level. The difference between levels is related to the addressed emotions (just the basic ones in the first level and then moving to the secondary ones in the other levels) and to the available types of games (more immediate games such as identifying emotions in photos in the first level and more complex games, such as the organizational scenarios, in the last level). Some game aspects such as the number of experience points and tickets received in a game and the available customizable items also depend on the level.

To allow a better identification between the user and the game, the players can create their own avatar and customize it with a set of accessories or elements (skins, objects, pets . . . ). While playing the game, the players collect tickets that allow them to further customize their avatar and home (Figure 4).

**Figure 4.** Customization of the avatar (**a**,**c**) and home (**b**) through the ticket system.

The app is available in 5 different languages, which of course implies a large degree of localization due to the cultural aspects related to language, signs, and emotions.

#### **3. Results**

The testing of the app followed a standard approach with alpha, beta, and piloting (gamma) stages. Alpha testing was carried out by internal staff of the involved organizations; beta testing was conducted with youth and youth workers in the involved partner countries: Spain, Portugal, Italy, UK, and Estonia; finally, piloting was conducted with a large number of users from all over Europe.

Alpha testing provided mostly a qualitative set of comments that allowed one to improve the ticketing and difficulty/level system, the graphical design of the app, and the design of the games. An important aspect was the feedback that should be provided to the user to render the development of the emotional competences more effective.

Beta testing was conducted with 110 participants, external to the LoEL consortium, mainly youth trainers (59.6%) and students (10.1%), spread evenly between the involved countries. The testing stage provided quantitative and qualitative feedback concerning the usability, game experience, and effectiveness in emotional competence development.

Here, 90% of the testers found the features of the app with ease and only three participants were not able to interact with the app. The interaction features of the app were therefore rated very high (x = 4.2) on a 5-point scale. The content was also rated highly (x = 4.1) and the transferability of the knowledge to real life was scored 3.7. More than 75% of testers thought that the app promoted knowledge and understanding of emotions; 67% of the testers thought that the app provided relevant information for people who work with youth; 64% of them also thought that the app provided competences for emotion handling; 65% of the users would use the app again.

The comments about the app were quite diverse. They complimented the idea of putting emotional education into a game and the originality of the content and the connectedness to real life. They mentioned the high number of games, the nice interface, and the interactivity of the app. Some liked to earn the coins and refurbish their room. They said that it was easy to use and attractive to young people. The game elements were well implemented, the graphics, sound, and music were catchy and effective, and they loved the use of primary colors and the wide range of options when creating an avatar.

A few participants thought that some games were too hard and that it was difficult to progress in the game, especially in the beginning. One trainer said that: "I like it very much because it actually gives you the opportunity to create a session on it. You can start a discussion on emotions and on how they affect people's reactions. You can organize different activities providing the app to the participants. There are different levels that allow you to improve and try new games" and another teacher said that: "I liked the challenges it gives you to unlock other games and the content such as Jargon Words, for a teacher as me are useful working with my students to learn even more their words". Suggestions for improvements were mostly about user friendliness and the elements of the user interface. In addition, some comics were hard to read because of the font/animation. Some changes to the progress system were also suggested.

The pilot testing was open to the general audience and was meant as having the end users assessing the usability, game experience, and emotional competence development of the app. Although, at the time, the app had more than 2250 users, it was only possible to collect feedback from 263 that answered an online anonymized questionnaire. Users were spread throughout Europe, with the UK (33.5%), Estonia (20.8%), Romania (17.7%), and Portugal (16.5%) as the leading countries. The average age of the inquired was 23.4 years old, where 65.8% (173) of them were female and 33.5% (88) were male, and 2 people did not specify their gender. In addition, 63% of the people had higher education and 21.8% had completed high school; others had more specific educations such as vocational training.

As can be seen in Figure 5, the app was highly rated on usability and interaction (a 5-level Likert scale was used with 5 as the most positive), as can be seen in the next two graphs. In addition, 89.3% of the users also mentioned that it had been easy to find all the features of the app.

**Figure 5.** Evaluation of the easyness of use (**a**) and interaction (**b**) features of the app.

The contents of the app were also rated very highly, as can be seen in Figure 6. Most people (77.9%) thought that the app promoted knowledge and understanding of emotions and that the information provided by the app was relevant to most people's needs (60.3% of the users). Most people (77.6%) agreed that the app contributed to developing emotional intelligence, although 17% were not so sure about this aspect.

**Figure 6.** Ratings for the app content.

Most of the respondents mentioned that they would use the LoEL application again, as can be seen in Figure 7.

Testers were also asked to provide qualitative feedback about the app, which is summarized as follows:


One thorough and helpful comment mentioned that " . . . instead of right or wrong answers, let them earn points by using the app more doing more exercises there or something. Encourage them to think that everything they feel is right, instead of no that was wrong. I also think that this app could be more interactive. The idea behind of it is great, though".

#### **4. Conclusions**

Emotions provide information about oneself and the others and constitute a feedback system that delivers information that drives behavior and decisions. Emotional intelligence has been acknowledged as a key success factor both in personal and professional life and there is a need to develop the emotional competence of young people so that they are successful in both domains.

The League of Emotions Learners project sought to empower this collective for them to be able to understand, manage, express, and communicate emotions. The LoEL app was created as a tool that young people could relate with that precise objective. Looking at the testing and evaluation results, it is possible to state that the overall outcome of the project was accomplished in a very positive way, and it is also important to note that the positive results were independent (with only minimal differences that may be due to slightly different testing conditions) in relation to gender (4.5 vs. 4.3 average in content rate for male and female participants and 4.5 vs. 4.4 in interaction rate), education level, age (4.36 vs. 4.32 in content rate for younger vs. older students and 4.39 vs. 4.38 in interaction rate), and country (4.1 in Spain vs. 4.6 in Portugal and England in the interaction rate and 4.1 in Spain vs. 4.6 in Italy in the content rate). These results were surely a consequence of the constant and consistent feedback from the end users—young people and youth workers—throughout the project.

**Author Contributions:** Conceptualization, J.S.; methodology, J.S., T.J., A.M., M.M. and C.V.d.C.; software, P.B., R.C. and C.V.d.C.; validation, T.J. and C.V.d.C.; investigation, J.S., T.J., A.M., M.M., C.N., H.S. and C.V.d.C.; writing—original draft preparation, S.C.; writing—review and editing, C.V.d.C.; project administration, J.S.; funding acquisition, J.S. All authors have read and agreed to the published version of the manuscript.

**Funding:** This research was partly funded by the European Union, through the Erasmus+ programme, KA2 action, under the grant number 2018-1-ES02-KA205-011836.

**Institutional Review Board Statement:** Not applicable.

**Informed Consent Statement:** Not applicable.

**Data Availability Statement:** All data has been present in main text.

**Conflicts of Interest:** The authors declare no conflict of interest.

#### **References**


*Article*
