It has been estimated that approximately 10%-20% of children and young people worldwide experience mental health problems, making it one of the leading causes of disability in this population [1,2]. Addressing the rising number of mental health problems in young people is a major public health concern. International studies indicate that >60% of young people do not have access to adequate (or any) treatment [3], highlighting the urgent need for innovative approaches to tackling this problem. Mental health apps present a promising means of addressing this challenge by making mental health support more widely accessible to young people. Our research team developed a new mental health app that aims to support children (aged 10-12 years) by enhancing their emotion regulation skills. Difficulties with emotion regulation are seen in a wide range of mental health problems, and recent evidence suggests that enhancing emotion regulation in children and adolescents is related to improvements in mental health regardless of the type of disorder or intervention [4]. To date, guidelines and studies on the development of mental health apps for children are lacking. This study aims to fill this gap.

Although it has been suggested that digital mental health interventions can be efficacious in both preventing and treating mental health problems in young people (aged ≥12 years) [5-7], recent systematic reviews found that in comparison to the adult literature, research investigating the effectiveness of digital interventions for children and young people is lagging [7,8]. Only a few mental health apps have been designed and tested specifically for young people (aged ≥12 years); however, even fewer are available for children aged <12 years. The latest systematic reviews identified only 2 mental health apps for children, thereby highlighting the significant evidence gap and limited availability of suitable digital interventions for this age group [7,9]. Despite these considerable limitations, digital interventions are expected to be highly accepted by young people because of the high degree of anonymity they provide. Furthermore, they are cost‐effective and, if designed appropriately, are highly applicable across different contexts [10].

Most available mental health apps have low uptake and engagement levels [11,12], which are considered essential to securing their effectiveness [13,14]. Various methods have been suggested to increase engagement levels with digital interventions, including the involvement of users in the development and design process as part of user-centered design methods. A recent review of 30 studies and another meta-review of 21 studies demonstrated that most digital mental health interventions, which targeted children and young people, neglected the use of such methods, which is reflected in the highly uniform design across these interventions, where psychoeducation often represents the main intervention component [15,16]. In terms of specific mental health apps for children (aged <12 years), we were unable to identify any app that involved target users during the development and design stages, thereby further emphasizing the importance of this paper.

A closer look at the digital mental health landscape indicates that most interventions draw on evidence-based treatments that target specific symptoms or diagnoses [17,18]. Initially, the recycling approach of taking existing interventions and transferring them to digital platforms helped the field to move forward quickly; however, this approach has increasingly been criticized as it provides little room for innovation and improvement [17]. Chandrashekar [19] summarized the key features of highly effective and engaging mental health apps and specifically highlighted components targeting transdiagnostic mechanisms. Transdiagnostic mechanisms are not specific to one disorder but are present across different mental health problems. The focus on transdiagnostic mechanisms has also enhanced traditional psychotherapeutic approaches in the past [20,21]. One such mechanism that has been repeatedly emphasized as a highly promising treatment and prevention target is emotion dysregulation.

Deficits in emotion regulation—or the ability to monitor, evaluate, and modify one’s emotional reactions to accomplish one’s goals [22]—have been identified as a risk and maintenance factor for mental ill health. Developmental research has demonstrated that higher emotion dysregulation in children is associated with greater mental health difficulties concurrently and later in life. Recent meta-analyses have indicated that interventions that effectively reduce emotion dysregulation in children also reduce psychopathological symptoms, irrespective of the intervention type or clinical diagnosis [4,23]. With respect to our target group, that is, children aged 10 to 12 years, the latter is of particular importance, as high comorbidity rates are common in this group and symptom presentations are often not clear-cut.

The transdiagnostic approach has also been deemed suitable for mental health prevention programs. Forbes et al [24] recently highlighted that targeting transdiagnostic factors in mental health prevention has the potential to activate a range of related, beneficial developmental cascades, such as social or academic development. Furthermore, they argued that transdiagnostic approaches reduce the burden on schools, for whom it is difficult to provide a multitude of short-lived programs, each trying to tackle a different problem [24].

To the best of our knowledge, there is currently no app intervention that targets emotion regulation as a transdiagnostic factor in late childhood (aged 10-12 years), although this period has been highlighted as a critical stage in achieving maximum impact in terms of youth mental health prevention [25]. Moreover, in the United Kingdom, late childhood (ages 10-12 years) is characterized by the transition from primary to secondary school, which is frequently experienced as stressful by children, thereby strengthening the case for an intervention that supports children before and during this transition period [26].

With respect to the existing limitations in the field, we present the development process of a new, transdiagnostic mental health app for children, which puts the young user group in the center of the design process. To achieve this, we have created a new development framework that draws on methodologies from the fields of psychology, human–computer interaction (HCI), and user design. In the following sections, we (1) describe the interdisciplinary design, development, and refinement process; (2) take the reader through the different stages and research activities; (3) describe the various app features and explain how they were informed by the research activities; and finally, (4) share important lessons that were learned and considerations for future activities.

On the basis of the stage 1 findings, we outlined the different intervention components, change mechanisms, moderators, and outcomes in a logic model (Figure 3). The logic model was developed to clarify the conceptual and logical underpinnings of complex interventions used in child mental health services [34]. On the basis of our logic model and the outcomes of the PPI groups and school observations, initial wireframes were created by an app designer and developer. Furthermore, we decided on key criteria for the technology underlying the app (see the technology specifications in the following sections).

The first co-design workshop introduced children to the project and their role as cocreators. After an icebreaker exercise, we explored what children knew about mental health and emotions, including what strategies they used in different emotion-eliciting situations. The first workshop did not involve specific wireframes, as the focus for this stage was to explore freely with children what activities and potential app features could help them regulate their feelings.

Children wrote down what feelings they knew (on sticky notes) and identified which feelings they found most difficult to regulate. Children reported that intense negative and positive emotions had a negative impact on their behavior in school (eg, “When I am super excited, I cannot concentrate” or “when I am angry, I don’t want to do stuff.”). In relation to this, children shared personal stories of situations that tended to elicit strong feelings in them either at school or at home.

On the basis of the children’s suggestions, we created a list of day-to-day strategies, which included strategies such as the following: playing web-based games, listening to music, drawing and painting, watching something funny on YouTube, playing with my pet, and physical activities such as cycling or football with friends. As a next step, we discussed the activities that could be supported through the app. The final list was then used to create overarching categories, which formed the core components of the app: (1) games to play, (2) something to relax, and (3) something to watch.

Going forward, we focused on these components as key modules while linking them to the stage 1 findings. For the games module, we created a list of possible games with the children. They frequently mentioned existing popular video games (eg, Fortnite) but also referred to other apps such as music making, coloring in, drawing in sand, and fast reaction games. In discussion with the app developer, each item was marked as possible, alternative game, or not possible. Complex games with multiple levels, requiring frequent updates, large amounts of data, or needing high resolution were discarded, as they conflicted with other design goals, such as (1) slowing down the app, (2) requiring too much data, or (3) not being suitable for a small mobile device. Owing to this, we had to exclude game ideas suggested by children, such as coloring in, music making, taking care and raising a pet, and a reaction game where the user smashes eggs by hitting them.

Simultaneously, the research team screened the literature to identify existing evidence for any of the games suggested or other games that have been developed in other contexts for this age group.

We asked the children what activities they found to be relaxing. Many suggested mindfulness and breathing exercises, which they had learned about at school. Others suggested watching something on the web or listening to music. This led to the idea of including music, or sound features, and encouraged us to make animated videos that could guide children with mindfulness and breathing exercises.

For the watch modules, we decided to develop a series of animated films. The storylines were inspired by children’s reports on their emotion-eliciting situations and the associated feelings, thoughts, and behaviors (eg, having a fight with a friend and not being able to concentrate in class). The stories were complemented with theories grounded in CBT (eg, the behavior–thoughts–feelings triangle) so that they could serve as a psychoeducational component. The scripts and screens were developed by a clinical psychologist and an animator who specializes in communicating mental health concepts to the public. Drafts of the films were reviewed by clinicians (N=7) who worked with children and in schools and a group of researchers specializing in child emotion regulation (N=5). Both provided feedback on the scripts and the visual presentation of the content and helped to ensure that they were in line with current evidence and guidelines. Any changes to the script or content were presented to children in subsequent workshops to ensure that they were age appropriate and that children could identify with it.

For the second and third workshops, wireframes and potential screen designs were printed on A3 paper based on the 3 core modules. Children were provided with pens, stickers, and sticky notes to add ideas for new features and review existing features. In contrast to the Druin [32] reports, but in line with recent observations by Jones et al [42], some children seemed to struggle with the creation of visual representations for potential app functions. It seemed as if they could not visualize how something that was drawn on paper could later be transferred to an app. As a result, some children were hesitant to draw their ideas and preferred to describe them. Therefore, we decided to build a basic but high-tech prototype for subsequent workshops, which seemed to make it easier for children to provide suggestions for existing and new app features.

We asked the children to provide feedback on the high-tech prototype that we developed based on the outcomes of the co-design workshops. In comparison to the low-tech paper prototypes, the high-tech prototype made it significantly easier for children to find their role in the process and provide suggestions for and against potential app features.

During the participatory workshops (N=18), children raised the need for a feature that provided in-the-moment support. They reported that it was difficult to remember helpful strategies when they experienced strong feelings. Following this, a help button was added, which children could press when they were experiencing strong emotions and could not remember the tools or strategies available to them.

Moreover, children suggested that it would help them if they could tell the app how they felt, and it told them in return what they could do about their feelings (“Can I tell it how I feel and it tells me what to do?”). This possibility was first explored through a chatbot function, whereby children could tap on an animated agent on the home screen to open a chat window. When we tested this feature in subsequent workshops, it became evident that some children thought that they were speaking to an actual person (ie, “Who is on the other side?”). Therefore, we decided against the chatbot function for this age group, as it involved potential risks, for instance, if a child needed urgent help and tried to access it through the chatbot. Although the chatbot function presents an exciting opportunity for engaging children with the app, developing it further was beyond the scope of this research. Hence, we decided to replace the chatbot with a check-in function. With this feature, children could select a feeling from a list to indicate their emotional state, and in return, the app would provide suggestions on what to do. This feature was considered a safer alternative by clinicians and researchers and required less complex functionality and development time (see The Check-in Function below).

For the check-in function, an initial list of 12 feelings was created based on the most common feelings that children reported in the first round of the co-design workshops. We designed a set of images, each representing 1 of the 12 feelings. We tested the validity by showing children the images without a description and letting them rate what emotions were represented. On the basis of the children’s feedback, the images were further adjusted. Children also highlighted important emotions that were missing; therefore, the list was extended. The final list aimed to reflect a full range of feelings, ranging from emotions with positive or neutral valence to negative valence, as well as different levels of arousal. For instance, feeling excited represents an emotion of positive valence and high arousal, whereas feeling grateful is a state of positive emotional valence but low arousal.

Consequently, the functionality of the animated agent was reduced to two main functions: (1) tell me something, which activated a random selection of jokes or funny facts that were expected to increase the level of engagement and perceived level of interaction with the app, and (2) the check-in function, as presented above.

A summary of all items raised in the workshops and the resulting changes to the app are presented in Table 4.

The prototype was tested in another primary school with 15 children across 3 workshops. During these workshops, broad design features, such as the flow of screens, as well as more detailed design questions regarding language and use of colors, were discussed. The schools provided tablets, which allowed us to test the functionality of the app across different devices and the school’s technology infrastructure (eg, access to Wi-Fi and digital safety policies of the school). The teacher was present at each workshop.

At the beginning of the workshops, children were informed about the purpose of the app but were not given any instructions on how to use the app. This allowed us to observe whether the current design was intuitive enough for children to use it without much explanation. Children were encouraged to speak out loud their thoughts while navigating through the app. A researcher observed the children and took written notes about the ways in which they explored the app to identify pitfalls, popular items, technical difficulties, and features that they did not discover on their own. Following this, children received an in-depth introduction and were asked to be technology detectives who helped us find any glitches and errors. All children were encouraged to provide honest feedback and suggestions concerning the usability of the app and how it could be improved.

BM took part in each workshop, asked follow-up questions, and took notes. After each workshop, BM made reflective notes and asked teachers about their observations. The data were organized in a Microsoft Excel spreadsheet according to specific app functions. The spreadsheet was used to discuss each item with the app developer and designer, who subsequently adjusted the app. A summary of the items raised and adjustments made is provided in Table 5.

The intervention was developed as a responsive web-based app to increase the accessibility of the app, as it allows users to access it from different mobile devices, desktop computers, and smartboards. Although it works across multiple platforms, it was optimized for tablets, as children are more likely to have access to tablets at school and at home [43].

The app is delivered through a browser, meaning over-the-wire updates could be pushed out instantly, and the app uses advanced HTML5, cascading style sheets level 3, and JavaScript (ECMAScript 6) techniques to render a smooth and performant UX. The underlying development platform used was Meteor.js, a full-stack Node.js application development framework, hosted on a resilient Amazon Web Services Elastic Compute Cloud-2 instance with a MongoDB database hosted via MongoDB Atlas. The app only requires an internet connection when users access it for the first time, after which it can be saved to the home screen. This feature was chosen to mitigate risks that the intervention could not be accessed in the case of reduced or limited Wi-Fi.

The app offers two different types of log-ins: a guest log-in and a registered account log-in. The guest-log-in serves the following purposes: (1) new users can explore the app without having to register, (2) children without an email address can use the app, and (3) it allows for easy and fast access. The second log-in allows users to set up a personal account registered through an email address and password. The app only remembers personalized features (eg, design features) when users access it through their personal account. The app does not store any individual user data and adheres to existing general data protection regulations.

The latest version of the intervention includes four modules: play, relax, watch, and tools. The different modules provide users with opportunities to learn, practice, and develop their emotion regulation skills. The content is presented through audio tracks, images, animated films, and games. On the basis of the activities and findings outlined above, we adjusted the logic model further (Figure 4).

Mobile apps for children represent a promising pathway for providing effective mental health support; however, there is a significant lack of mental health apps for this age group (ages 10-12 years) [7,9]. Only recently, the self-management intervention ReZone was developed for children (aged 10-15 years) with the aim of reducing internalizing and externalizing symptoms [67]. Early findings suggest that the app was perceived as helpful by pupils; however, findings from a proposed randomized controlled trial have not yet been published. In addition, Hides et al [68] developed a new music app to enhance emotion regulation in adolescents, and their initial findings with young people (N=169; aged 16-25 years) suggested that the app could potentially enhance emotion regulation; however, further testing is required to determine its effectiveness.

As highlighted above, for many mental health apps for children, information on the design and testing process is not available [7]; hence, we address this gap by describing and sharing our development and design process as we continue to develop the app further.

A significant strength of the present development process is the inclusion of children and young people at every stage. Owing to existing collaborations, we were able to involve young advisors (aged 12-19 years) in the early stages of our project, which had numerous benefits. However, the inclusion of slightly older participants in the PPI events may have also contributed to some of the issues we experienced in the workshops with younger children. We believe that the work with young advisors was very valuable but want to highlight that the involvement of the target users should be a priority when designing new digital interventions.

By combining methodologies from different fields, we adopted a highly interdisciplinary approach, the lack of which has been highlighted as a significant limitation in existing digital mental health interventions. We hope that in doing so, we increased the potential for sufficient user engagement while also providing a sound evidence base for the content of the intervention [12,15]. Despite our best efforts, it was not possible to have all the different experts in one room for the workshops. This can be particularly difficult in research that includes vulnerable populations, where additional safeguarding regulations are in place. Such access constraints affecting the work of HCI researchers and designers with vulnerable groups have been highlighted before [69]. In our project, the lead researcher was already trained to work with children and had easier access to the target group. To facilitate our interdisciplinary approach, BM undertook additional training to familiarize herself with the methods from the different disciplines and consulted experts from other fields before and after each activity. Throughout the development process, the lead author served as a linking point for all stakeholders and tried to gain and share everyone’s views and opinions. Although in an ideal scenario, experts from different fields would be conducting the workshops together, we believe that we took the best possible approach by training the lead researchers in interdisciplinary methods and having regular consultations with experts from the respective fields.

Although the inclusion of various experts and stakeholders in the process is a significant strength of our development framework, we believe that this aspect could be further improved by developing a decision-making tool with all stakeholders beforehand. Such a tool could be consulted whenever contradicting design goals from different stakeholders need to be addressed. Our team did not develop such a tool, and final decisions were made by the research team, which may have resulted in unwanted biases.

The collaborative approach with schools had various benefits, as it ensured regular access to the user group and helped us identify context-specific design goals at an early stage. Furthermore, the research team was able to conduct all the design workshops within the school context, as recommended in the cooperative inquiry framework [32]. However, during the workshop activities, the research team noticed that children who were reported to show the most emotional and behavioral difficulties at school were also less engaged in the workshop. The research team had the impression that some of these vulnerable children may have engaged more in a different context. Going forward, we would suggest speaking to these children outside of the school context or choosing different workshop activities so that all voices can be taken into account. Furthermore, in most cases, the teachers decided which children would join the workshop activities. This could have caused an unwanted bias, as previous research suggests that adults were less likely to choose children with certain characteristics (ie, less sociable, externalizing symptoms, and lower academic competencies) [70]. In relation to that, it should be noted that the research team did not collect specific demographic or other sensitive category data, which could be useful in interpreting current but also future use data. Collecting data on participant characteristics can provide insights into other mental health risk factors (eg, existing mental health problems, living status, and ethnicity), which can help in comparisons among different user groups that may be of the same age but have different mental health profiles. Therefore, we suggest that future research should collect relevant participant data during the early design stages.

Teachers contributed tremendously with their views and expertise. However, they had very limited time available, and their role as intervention deliverers has not yet been fully addressed at this stage. We suggest conducting more classroom observations with a specific focus on teachers’ roles and needs to adjust the app accordingly. This could also be explored as part of an exploratory feasibility trial, which we suggest as a next step to develop and evaluate the present app further. We suggest a series of exploratory feasibility trials to uncover and iron out the remaining technology and design issues. Moreover, with respect to one of the greatest limitations of today’s digital mental health interventions [12], we suggest that the next stages need to focus primarily on usability, engagement, and implementation of the present app before any effectiveness testing.

Throughout the development process, we noticed a tension between finding the right balance between guaranteeing an adequate evidence base for each feature of the intervention and leaving enough room for creativity and innovation of new features. We strongly agree that evidence-based and evidence-informed concepts are of significant importance; however, there seems to be a common misconception that one can only achieve evidence-based innovation by transforming evidence-based nondigital interventions into digital ones [17]. We would like to encourage the field to free itself from this notion as it can significantly hinder us from reaching the actual potential of digital mental health interventions [71]. In relation to this, we would like to refer the readers to the findings of our exploratory trial [29], where we discuss promising future directions for the present app.

Digital interventions that target transdiagnostic mechanisms such as emotion regulation have the potential to support young people’s mental health on a wider scale, regardless of the level or type of symptoms that they experience. Currently, little guidance exists on how to develop such transdiagnostic digital interventions for children. We highlight the existing limitations in the field and present a new approach to address them in this project. By developing a new interdisciplinary development framework, we were able to incorporate methods from different fields. Although more research is needed to evaluate and further improve this app, we hope that sharing our insights and lessons learned in this paper will be a helpful guide to others.