This study used the design science research (DSR) paradigm methodology from Peffers et al [25] and 8 golden rule guidelines from Shneiderman and Plaisant [26] to design mHealth (Modi) apps that suit users’ needs, especially in Indonesia. Based on the work by Peffers et al [25], the DSR methodology has the main objective of creating and evaluating artifacts—or more specifically solutions—to solve and address problems facing organizations. This methodology is in accordance with rigorous scientific research methods and includes various techniques, principles, and procedures for designing and developing solutions to effectively solve the problems at hand [25]. Furthermore, the DSR is relevant to research on developing mHealth and supports creating innovative artifacts to solve real-world problems [27]. Shneiderman and Plaisant [26] created rules or principles to design an app interface. Shneiderman and Plaisant [26] formulated the principle of 8 golden rules, namely (1) strive for consistency, (2) enable frequent users to use shortcuts, (3) offer informative feedback, (4) design dialogue to yield closure, (5) offer simple error handling, (6) permit easy reversal of actions, (7) enable an internal support locus of control, and (8) reduce short-term memory load.

Based on DSR, the methodology was applied in 3 iterations. The first iteration was a low-fidelity prototype or wireframe design to test the suitability of the solution for addressing the problem and user needs. The first iteration results from the interview evaluation method were used as input for the second iteration, which used the System Usability Scale (SUS) model from Nielsen [28] to measure the design’s usability. In addition, we used the SUS across iterations to measure design improvements. The SUS is one of the most widely used frameworks and has been translated into several languages, including Indonesian [29,30]. The third iteration used the Post-Study System Usability Questionnaire (PSSUQ) model to measure the level of system usefulness, information quality, and interface quality. The PSSUQ framework is widely known and recommended for measuring usability in mobile-based apps [31,32].

We used both quantitative and qualitative methods for this study. We used a qualitative approach to enrich and improve the validation of the design results from each iteration so that the designs could be in accordance with the needs of promotive, preventive, and monitoring efforts for depression in adolescents. User-centered design can increase user engagement when using the app [33]. We first formulated the problem and conducted a literature review, then we conducted the DSR methodology stages, each of which had 3 iterations. The DSR methodology’s 5 stages are as follows: (1) identify the problem; (2) define the solution; (3) define the solution objective; (4) develop, demonstrate, and evaluate the solution; and (5) communicate the solution [25]. All respondents involved in this study have used the mHealth app and are technology savvy.

We identified the problem through a literature review; by conducting interviews with potential users, which, in this study, comprised 9 people who had experienced depression; and by examining several mental health apps that focused on teleconsulting services, meditation, and physical activity monitoring (purposive sampling). When designing an app, user experience (UX) factors, such as social interaction and accessibility, are also included. Social interaction and accessibility are some aspects of UX that are considered by users in mental health mobile technologies [20]. The opportunity to interact socially to share problems and give each other advice is a point that needs to be considered in designing a mental health app. Using mental health apps should be easily accessible and easy to use. We also link between the results of participant interviews and health app observations.

The next stage involved demonstration. First, we developed a questionnaire to test the usability framework. Next, we conducted a design demonstration accompanied by readability tests conducted with 5 patient respondents from different backgrounds, to ensure that the questionnaire distributed at the next stage would be understood by all patient groups. Patient respondents were adolescents aged 12 years to 25 years who had experienced stress or depression. The demonstrations and readability testing also involved medical experts, including doctors, psychiatrists, psychologists, nurses, and lecturers. The first iteration involved interviews with 2 medical experts and 2 patients or users with a history of depression. In the second iteration, we conducted interviews with 1 expert and 3 patients. In the third iteration, we conducted the demonstration with 1 expert and 3 patients. The results of the readability test produced correct writing rules and use of language that is easy to understand without changing the meaning of the question.

In the evaluation and communication stages, we conducted second interviews with respondents from the previous demonstration stage and administered questionnaires that had been revised based on respondent feedback from the readability test. The interviews were used to dig deeper into participants’ responses to the app design. Quantitative data were obtained from the questionnaires, which began with an explanation and exploration of the app design according to the task or scenario that was the focus (onboarding, mood tracking, activity targets, meditation, or early detection). Next, the questionnaire items asked about the framework used, which was the SUS framework for the second iteration and the PSSUQ framework for the third iteration. The communication stage was conducted in parallel with the evaluation stage and conveyed the results obtained in 1 iteration to the relevant patient and professional stakeholders.

For the medical professional and user interview data, we used content analysis to describe the requirements related to the mental health app. This analysis is usually appropriate when existing theory or research literature on a phenomenon is limited, and researchers immerse themselves in the data to allow new insights to emerge [34]. Thus, we grouped the needs of each idea and determined priorities for those most needed. The PSSUQ analyses used the average of the Likert scores, and the SUS analyses used the calculated SUS score, which ranged from 0 to 100. The SUS results were obtained using measurements made by Bangor et al [35] and used measurement ranges so that the results could be easily understood. The obtained results were used to determine the level of satisfaction with the design.

The questionnaire used for iterations 2 and 3 was divided into 2 parts: The first included demographic characteristics and health app use information. Demographic items included email or cell phone number, age, domicile, and occupation. Items on mental health app use covered experience with using mental health apps and included the app name, advantages, and disadvantages. The second part included items that covered the framework used to test usability and items on stress management. The SUS framework used a 5-point Likert scale (strongly disagree=1, strongly agree=5), and the PSSUQ used a 7-point Likert scale (strongly disagree=1, totally agree=7). The instruments are described in Multimedia Appendix 1 and Multimedia Appendix 2.

All respondents provided written informed consent to participate, and the data submitted were anonymous. The respondent data can only be used for the purposes of this research. This research received ethical approval from the Faculty of Computer Science at Universitas Indonesia on September 21, 2020.

Respondent demographic characteristics are shown in Table 1. The additional data collected through interviews included depression management services for adolescents in treatment in Indonesia, problems participants experienced with treating depression, and how participants dealt with depression. One participant received treatment through a psychologist or psychiatrist, and the rest had not consulted a medical expert.

Interviews revealed that participants who had never had a consultation usually used the early detection feature on several websites, such as psycom.net and depression.org.nz. Two respondents mentioned several shortcomings of early detection on websites. First, the websites were only available in English and sometimes used vocabulary that was difficult to understand. Second, the available information from the results was limited; to access full results, users were required to provide an email address or commit to a subscription:

Interview participants had all used the app to help treat their depression; 9 mentioned that mental health apps such as Kalm, Wysa, and Daylio helped them monitor their mood changes and to simply make friends:

Although various apps were used, all respondents stated that no mental health app met all their needs; therefore, respondents downloaded 2 or more apps. The unsuitable form of the app also made users feel that searching for depression-related information—articles or tips—was easier through general search portals rather than through apps.

The first iteration results were a low-fidelity prototype (wireframe), while the second and third iterations produced a high-fidelity prototype. The initial stage of the first iteration made observations about 12 mental health mHealth apps and concluded that several features are used by more than one app. We adopted the 6 most used features from those apps. The 4 features with the highest use frequency became the main features in this study’s app design (mood tracker, activity target, meditation, and community), and the remaining 2 featured (articles and early detection) were included as supporting features. The mood tracker is used to monitor the user's mood for a certain period. This feature is completed by the user himself or herself to assess the mood experienced by the user. The use of mood trackers helps with health management of people with mental disorders such as depression or bipolar disorder [36]. Mood trackers increase users' awareness and proactive self-regulation of their health care management through information about their health and the relationship between data and their condition [37-39]. The activity target feature is used to monitor activity targets created by users. Based on 5 applications that use the track activity feature, this feature helps users monitor the scheduling of their activity targets. The app provides a target template, such as sports, that can be selected. Doing activities such as exercise can help reduce symptoms of depression and has long-term beneficial effects [40,41]. The meditation feature serves to make it easier for users to perform meditation activities independently. In the benchmark app, the meditation feature provides several meditation templates based on topics that can be customized directly by the user. The meditation feature on the mobile app is effective at providing meditation that has an effect on reducing stress and increasing self-awareness and self-compassion [42]. The community feature is used for interactions between users. In the benchmark app, the community feature is formed to provide a place for users to communicate and support each other. The existence of social interaction is very important for maintaining physical and psychological health [43]. The article feature is to provide education to users regarding healing methods, tips, or information related to depression. In the benchmark app, the article feature displays information about depression in various forms such as tips or articles. Tips are given at the beginning of the app to increase awareness and enthusiasm when using the app. Motivational quotes are widely used in various media and therapy programs to promote positive thinking [44]. Early detection features can help users see the conditions they are experiencing. This feature can be an alternative early diagnosis for users who are still reluctant to go to health services or have difficulty getting access to health services, so that users can still get an overview of their mental health condition and immediately take preventive action so that the condition does not get worse. The implementation of the early detection feature used a patient health questionnaire in accordance with the guidelines for classification and diagnosis of mental disorders used in Indonesia [45,46]. Next, an information architecture was created to explain the features and flow of each app element (Figure 1).

User interface design begins with designing the wireframe. Designing a low-fidelity prototype (wireframe) involves incorporating several features into the benchmark app. One example is the determination of the layout of the tips feature that is placed at the beginning of the app so that users can immediately see it when they open the app. The form of the low-fidelity prototype (wireframe) was then converted into a high-fidelity prototype (wireframe) in the second and third iterations. Figure 2 shows an example of a low-fidelity prototype (wireframe) from the first iteration and a high-fidelity prototype from the second (Figure 3) and third iterations of the mood tracker feature (Figure 4). Multimedia Appendix 3 presents the final main page design results with all features. Each design result could be seen and used by respondents, who evaluated the design through a questionnaire.

The first iteration used an online video Zoom interview that was completed by 4 respondents. Respondent demographic characteristics are shown in Table 2. The 4 respondents provided feedback regarding the app’s main features (mood tracker, activity targets, community, and meditation) and showed agreement that these features can help treat depression in adolescents; however, there were suggestions for improvement of each feature.

In the second iteration, we also used online interviews with 4 respondents via a video conference application to collect qualitative data. The interviews elicited suggestions that focused on the design. Implementation of main features such as a mood tracker, activity target, and community were deemed appropriate to users’ needs. However, 1 expert (Respondent 4) also emphasized that the meditation topic should possibly be reviewed:

Respondents also reacted favorably to the supporting features, articles, and early detection. The early detection feature provides them with an initial assessment of their mental health. Positive screening could indicate they have issues with their mental health even though they do not feel such issues. The screening could potentially provide them with options for self-healing or to seek further help from an expert. Interviewees believed that these 2 features helped educate patients and provided initial screening for their depressive conditions:

The 2 features were considered adequate in terms of flow but needed some improvement regarding the information presented. Respondents suggested that the provided information be processed again so that the language could be more easily understood by the user. They also suggested shortening the language, especially in the early detection feature, to maintain users’ focus and not increase their burden.

Moreover, online questionnaires provided quantitative data and were administered over 6 days, from October 10, 2020, to October 16, 2020. Demographic characteristics for the 108 respondents are shown in Table 3. The questionnaire data processing focused on the results of the usability testing framework, SUS, and feedback on the design. The SUS data assessment results indicated that the second iteration design was in the ”OK“ range (mean 67.27), suggesting that the design was good, although it still needed improvements in the element flow and layout to make the app easier to use.

In the third iteration, we also used online interviews with 4 respondents. Online questionnaires distributed over 8 days, from October 27, 2020, to November 3, 2020, provided quantitative data from 252 respondents. Respondent demographics are shown in Table 4.

The interviews provided design suggestions. The flow change from the previous design was considered more understandable. In addition, changes in appearance, especially layout, received positive reactions. The interviewees indicated that space given to each feature was decreased but still informative. The use of color was also considered improved over the previous design. More concise information was also easier to understand than in the previous design:

Respondents recommended that it was necessary to pay attention to the size and suitability of the content when designing buttons, icons, and images and indicated that users could easily understand the given elements. These suggestions related to button and icon labels that did not represent the intended content. In addition, the respondents indicated that use of different colors should be considered because the used colors tended to make features less visible:

The questionnaire data analysis for this iteration focused on the results of the usability testing framework (PSSUQ) and design feedback. The PSSUQ results are shown in Table 5.

The PSSUQ has 4 assessment components: system usefulness, information quality, interface quality, and overall. Lewis [47] asserted that design assessments are the best measurement, with smaller values indicating better quality. Overall, the third iteration results were ”good.“ Broadly speaking, the 4 components had values below 4, the middle value, indicating that the third iteration design was better than the second iteration design regarding ease of use, information presented, and interface appearance. Although the third iteration design had better values than the previous iteration, there were still some improvements needed. Suggestions included paying more attention to the use of color, especially in the activity target feature, so as not to obscure the existing flow, and incorporating effortless design by reducing the number of clicks users must make. Respondents recommended the app’s activity target feature that employs submenu options for each existing target list.

This study designed and developed an app prototype for people with symptoms of depression and tailored it to users’ needs. To create an app, data are collected to identify user needs and user problems. From the responses from the interviewees, there was no difference in feature requirements among the respondents involved; thus, this app’s design could provide support for mental health patients and health workers. Wang et al [48] stated that mental health apps have the potential to improve the monitoring and management of mental health symptoms or disorders. The potential direct benefits of using the mental health app are prevention of higher-acuity illness, higher rate of psychiatrist use, increased competition of services driving lower treatment costs, lower operating costs for psychiatrists, fewer missed appointments, and revenue for app developers [49]. Moreover, Powell et al [49] stated potential indirect benefits of using mental health apps, namely improved physical health, enhanced current and future productivity, and reduced demands on caregivers. In this study, medical personnel also underlined that the use of the mental health app made it easier for them to conduct consultation sessions. This is because the use of the app can generate reports based on the activities recorded by the user in the app.

Moreover, this study found that mHealth features can be classified into main and supporting features. The main features that need to be present for the mHealth app to focus on treating depression are a mood tracker, community, activity targets, and meditation. In the mood tracker feature, information related to the content of thoughts, feelings, and journals needs to be included but is optional. This is because these 3 components can help experts treat patients more accurately. Furthermore, in the community feature, the topics provided should be diverse and cover various problems so that users are more free to find support. The activity target feature was emphasized to provide options in creating activity targets, namely manually and the app’s choice. This is designed so that experts and patients can adjust the target with the therapy or treatment that is being carried out. There are several notes for the feature. The notes given regarding the main feature were that the meditation feature must consider the meditation topic that should exist. This is because meditation sessions can make users spin in their minds, creating the potential for negative thoughts to arise. In addition to the main features, supporting features were suggested to complement the design, namely articles and early detection. The article feature helps provide education to users regarding depression, and the early detection feature provides assistance so that users can screen for their condition. In the article feature, it is better to display several categories of information delivery so that information can be received not only through text but also through images or videos. For early detection features, it is recommended to use the Personal Health Questionnaire (PHQ). This is because the PHQ is already available in Indonesian and widely used by practitioners to screen the initial condition of a person's mental health.

The first discovery involved features and components that need to be considered in designing apps for users who experience depression. We found that many existing mental health apps included mood tracker, activity target, community, and meditation features. However, the features’ requirements for users with depression differ from similar features in the observed health apps. The mood tracker is important to correctly evaluate the user's condition and helps mental health professionals provide more precise patient management. In addition, we found that some debate surrounds the meditation feature because it can leave users trapped in their thoughts, so existing topics must arouse the user's enthusiasm.

We also found that users require concise sentences in the design, which is consistent with the finding by Fanfarelli et al [50] that shorter sentences help to highlight an instruction. Moreover, based on the results of the interviews, the development of this prototype requires integration with health facilities so that it can form a digital ecosystem that can connect with required mental health workers. In addition, a future challenge is the need to develop mental health apps that are secure (specifically could manage patients’ data privacy), simple, and easy to use so that they continue to increase the use of these apps. This finding is also in line with those of Graham et al [12] and Torous et al [51].

In contrast with the study by Kenny et al [20] on designing mental health apps in terms of the UX, our study focused on priority features and the support required. The results showed that the main required features were the mood tracker, activity target, community, and meditation and that education articles and early detection were supporting features. In addition to providing information about required features, our study adds to previous research results on the user interface (UI), revealing that the use of color plays an important role in the design; in addition to affecting the intended design use, muted colors should be used in the design (eg, light blue, purple) to reduce or prevent users’ confusion.

In contrast to the study by van Dooren et al [21], which focused on experts’ monitoring of patient use results, our study evaluated the design using both professionals and intended users (adolescents with depression), allowing us to identify the needs and perspectives of both parties. Although it is rich in point of view, it is necessary to confirm this design’s effectiveness for evaluating counseling activities to validate the design results. Our approach also differed from the theoretical approach used by Fanfarelli et al [50], which did not show whether their results were consistent with app users’ expectations. Our approach evaluated both theory and practice to better identify whether users’ goals and expectations were met. Our interview methods also differed from those of Fanfarelli et al [50], which focused on UX using a pretest/posttest design, while our study focused on user needs, UX, and UI, with feedback obtained from 2 flows: the user and user action when using the app. Finally, this study also found that it is important to determine whether the app design can educate users and suit their needs. In accordance with Kenny et al [20], Fanfarelli et al [50], and van Dooren et al [21], it is important to determine user needs and priorities when designing apps to reduce unnecessary information.

Due to the different health management regulations in each country, this study only focused on the Indonesian context. This design can be used as a reference for different country contexts if they have similar mental health treatment for adolescents. Moreover, a limitation of this study is the involvement of only adolescent respondents in urban areas. This research only produced a high-fidelity prototype and must be developed further.

This study designed the main and supporting features for mHealth apps that focus on managing adolescent depression. Key features include a mood tracker, community, activity target, and meditation, and supporting features that complement the design include education articles and early detection features. The results of this study can be a reference to develop specific mHealth apps to treat and manage adolescent depression in the future. Further research should design and evaluate mHealth apps that can be integrated with other systems, which will allow apps to assist with a broader range of mHealth service needs in addition to depression.