Globally, diet-related noncommunicable diseases (NCDs) are the leading cause of death and disease burden [1,2]. Numerous studies emphasize the association between a suboptimal diet and deaths due to NCDs such as stroke, heart disease, or type 2 diabetes [3-6]. Among dietary risk factors for NCDs are the low consumption of fruits and vegetables [7-9] and the high consumption of sugar-sweetened beverages [10-14].

German survey data highlights the high prevalence of overweight and obesity. Almost 60% of the population is overweight or obese (women 51% and men 66%) [15]. Among the younger population, about 16% of girls and 18.5% of boys in the age between 14 and 17 years are overweight or obese [16], likely due to a more sedentary lifestyle characterized by decreased physical activity and unbalanced dietary behavior [15]. Only 7% of the girls and boys in Germany in the age between 14 and 17 years follow the dietary recommendations for the consumption of 2 portions of fruits and 3 portions of vegetables each day. On average, 0.9 portion each of vegetables and fruits per day are consumed [17]. Nearly, 23% of boys and 17% of girls drink sugar-sweetened beverages daily [18], whereas recommended beverages are water and unsweetened teas [19]. Data from the United States also reveal similar results. American guidelines recommend 2.5 cups of vegetables and 2 cups of fruits per day (for a calorie level of 2000 kcal) as well as drinking water and reducing consumption of sugar-sweetened beverages [20]. However, less than 50% of children and adolescents meet dietary recommendations for any food group [21]. The level of education positively influences food consumption and, thus, the quality of the diet [22,23]. Higher school education and higher income result in a lower body mass index [15,16].

To summarize, nutrition surveys highlight that adolescents and young adults have unbalanced diets [17,24,25], especially adolescents and young adults in disadvantaged circumstances [17]. As adolescence is characterized by cutting ties with the parents’ household and the development of one’s own lifestyle, this could be a reasonable stage of life for behavior change interventions [26], in particular for focusing on adolescents and young adults with lower education levels.

State-of-the-art mobile phones provide new possibilities for dietary interventions. Mobile health (mHealth) is an emerging field and describes various health services offered on portable devices. These include health apps in various areas, such as nutrition, fitness, wellness, diagnostics, and therapy [27], but systematic studies in the area of mHealth are scarce [28-30]. Studies also highlight missing user acceptance of nutrition apps, for which the relatively high usage effort might be a reason [31,32]. Rohde et al concluded that app usage in the long term is influenced by user- and app-related acceptance factors [32]. The former highlights the importance of knowing the target group for designing accepted mHealth interventions; the latter emphasizes the importance of considering different app characteristics, for example, implementing instructions or motivators for engagement and adherence in app-based interventions [32].

In the context of long-term adherence and acceptance of mHealth interventions, gamification is an emerging field. Gamification means that playful elements such as points or leaderboards are used in a context that is normally not played (for example using a quiz, where one can earn points, instead of just giving information) [33,34]. Gamification can be a motivational component of digital behavior change interventions by playfully making uninteresting topics interesting and, thereby, engage users in the long term [34].

The behavior change wheel (BCW) is a framework for developing health interventions [35]. It proposes a systematic design process of behavior change interventions that helps to translate theory into practice [30].

The health action process approach (HAPA) is a health behavior model and, as a stage model, an interesting template for the theory-based development of dietary health messages that can be adapted to persons at different stages of the behavior change process [36]. It was successfully applied in several nutrition behavior change interventions [37-39].

The aim of this study was to describe the iterative concept development and the final concept of a theory-based and target group–adapted mobile app for motivating adolescents and young adults (aged 14-25 years), especially from disadvantaged backgrounds, to improve their dietary habits with respect to the consumption of fruits and vegetables, as well as drinking behavior.

The app design process was guided by the BCW [40]. After defining the problem and the 3 target behaviors, the app design process followed 3 stages (Figure 1): Phase 1, specifying the target behavior and identifying what needs to change to achieve it; Phase 2, translating results into app functionalities and features; and Phase 3, expert evaluation of the concept. In total, 3 empirical studies were conducted to derive relevant app features and content as well as to optimize the concept.

On the basis of the evaluation, the concept was adapted by defining the final features and functionalities of the app.

The following sections describe the app features of Prototype II in detail. Further information regarding interventions functions, BCTs, and COM-B components are given in Multimedia Appendix 4.

Onboarding, that is, the way a user is introduced into the app content, is important to motivate the user for adherence [33]. As such, the app starts with an introductory question (Textbox 1).

The introductory question is used to make users curious and motivate them to use the app through connecting his or her personal aim with app usage and selecting a question that can only be answered correctly, so that the user cannot lose and does not become demotivated [33]. Depending on the answer, a progress bar representing the guru status is implemented, and either titled Health Guru, Wellbeing Guru, or Performance Guru. A user reaches the Guru level after succeeding in all 3 worlds.

Consequently, a tutorial gives a brief overview of the app and how to use the app [32,33]. Afterwards, profile settings allow enhancement and customization of the app [33] and are associated with the selection of the avatar in terms of age and sex.

Each world starts with a self-test, which comprises 2 parts. The first part is a 24-hour dietary recall (eg, vegetables in the vegetable world). Results of this recall are used to divide users into HAPA stages—either intender, if dietary guidelines are not met, or actor, if guidelines are met [19]. The second part is a quiz, which serves as an introduction into the world concept and challenge rules and basics of nutrition education. The answer of each question is formulated depending on the HAPA stage of the user [36] and personal app aim (Textbox 2 for an example), which are stated by the user. After completing both parts of the self-tests, the user gets access to the challenges.

Dissolution: Drinking (at least) 1.5 L per day of sugar-free drinks is good for you and helps you to get closer to your goal: to live healthier.

The challenges are implemented for the user to reach self-imposed consumption goals, which can be chosen out of a list, for example, 3 servings of vegetables per day in the vegetable world or 3 portions of unsweetened beverages in the drinking world (level Adept in Table 5).

In the drinking world, a sugar mountain builds up additionally, while tracking sugar-sweetened beverages, which users must reduce through answering quiz questions before attacking the next challenge. In addition, in the fruit and vegetable world, it is not only quantity, but also quality, that counts. Users are motivated to eat as many colors as possible, as recommended in other studies [39,60]. In every world, the aim is to get better in behavioral terms from challenge to challenge up to the highest level, called Big Master, which meets the target behavior. To pass the challenges, users get support through feedback and tips. Before finishing a world successfully, every user must play the Big Master challenge, even if he or she is already carrying out the behavior and finishing the quiz.

Different feedback is implemented in the C2go app: visual, informative, motivational, evaluative, and competitive. An avatar, which is intended as social support [36], gives some visual and all informative, motivational, and evaluative feedback. The avatar rewards user’s desirable behavior with a facial expression (smiling face). Other visual feedback is given through progress bars for different features (self-test, challenges, quiz, and overall progress in app that represents the Guru Status) and a graph for an actual versus target feedback for the target behavior. Informative feedback contains messages relevant for intenders (based on HAPA [44]) by encouraging action coping (overcoming barriers, including reflexive questions) and action planning (when, how, where implementing behavior, including instructions on how to perform a behavior) to close the gap between intention and actual behavior [36,39]. Motivational feedback is given through encouraging messages that should sustain intention and self-efficacy [34,48]. Similarly, self-efficacy will be boosted by evaluative feedback [34,39]. When creating feedback, care was taken that this was formulated in a positive way [32,48] and using colloquial language [39]. For examples, refer to Table 6. Furthermore, competitive feedback is given through a leaderboard in the community [34]. In addition, challenges can be played alone or against other app user in the community to promote motivation for behavior change through social comparison and competition [54,61]. The community consists of all app users.

Reminders are push notifications and can be set to support users on the way to meeting their goals. Furthermore, they function as a re-engagement tool [53]. Types of different reminders are presented in Table 7. Every reminder can be switched off or on.

In terms of content, the quiz aims to provide knowledge about the health-related value of each target behavior and the national intake recommendations. To this end, each world has its own quiz, for example, the fruit world quiz contains questions regarding fruit intake recommendations and associated health benefits and risks (Textbox 3 for an example). All questions must be answered correctly to complete the respective world. Wrongly answered questions will be repeated later.

The Infothek is an information section where users get access to interesting information regarding 6 nutrition-related topics, which were derived from study results described above: health, food information, beauty, sports and food, food waste, and recipes. Users get access at certain scores to get motivated to app usage and reward it. Regardless of the score, once a week access to the Infothek is given to re-engage the user. Information is predominantly in written form (short messages). Also, short videos and podcasts are intended.

The C2go app implements severely playful elements, such as points, levels, leaderboard, challenges, onboarding, feedback, progress bars and customization, to engage users.

Mobile phone-based interventions are increasingly used to promote a healthy lifestyle [30,62-65]. In this study, a mobile phone app was considered as a very acceptable tool for the delivery of a nutrition intervention for adolescents and young adults, as mobile phone usage is widespread across all education and income levels [66]. Furthermore, adolescents and young adults are at a stage of life where their own lifestyles, including eating styles, are developed and established. The empirical study results described above confirm the general openness for, and interest of adolescents and young adults in, a dietary mobile app. Next, other digital health interventions were rated as helpful and satisfactory by adolescents and young adults [57,67,68] and other age groups [69,70]. Studies by others have demonstrated that mobile phone apps are widely accepted by users for intervention delivery in the field of healthy eating [30,62,71]. Despite the growing interest in mHealth research, the development of a theory-driven app is not well described in the scientific literature [30]. Furthermore, to our knowledge, no dietary mobile app has been designed to meet the needs and interests of adolescents and young adults in Germany. Our study provides a step-by-step description of how evidence (eg, from empirical studies with the target group) and theory can be translated systematically into an app concept in the field of mHealth for contributing to the prevention of NCDs.

The concept for the C2go app was designed along the BCW and based on the input of the target group as well as the literature analysis. The BCW has been used by other researchers to guide the development of mHealth interventions [30,72].

Effective interventions need theory guidance [36,73]: Using a framework helps design interventions systematically, deriving factors that need to be changed and avoiding intervention development based on personal experiences, favorite theories, or superficial analyses [40,73,74]. Besides this, theory-based interventions help to understand which, and how, techniques are effective, and results can be used to optimize theoretical concepts. Furthermore, using theory in research is also helpful for the communication between researches and disciplines [73]. Often, the use of underlying theories and concepts in intervention trials is not well described. Theories are only mentioned as frameworks but descriptions of how they were integrated into the scientific design process are often lacking [74]. In this study, the use of the BCW as a framework permitted the systematic and comprehensive design process, which was underpinned by a model of behavior change and a behavioral diagnosis of the target behavior, before starting the design process. However, it is necessary to expand the BCW regarding the derivation of empirical study results and its translation into BCTs and, finally, into mHealth app features [30]. This could minimize the influence of individual expertise, creativity, and reasonable decision of scientists on which features should actually be implemented in the app [30].

A major strength of this study was the examination of the behavior, interests, needs, and values of the target group, because digital interventions are most engaging when they are matched to the target group’s characteristics, needs, expectations, and skills [75]. Following this, other studies revealed that involving the target group throughout all phases of intervention development is important to make it more relevant to their life [30,63,68]. Our study therefore aimed at focusing on adults from disadvantaged backgrounds. Therefore, attempts were made to recruit study participants in (public) places with lower educational background in particular, for example, vocational school.

In total, 3 target behaviors were initially chosen, because concentrating on many or unspecified target behaviors (eg, whole nutritional intake) is assumed to be less effective than considering only a few and specified target behaviors (but then intensely) [76]. The selection of the target behaviors was indirectly confirmed by the target group, as beverages, fruit, and vegetables were voted as easy-to-track food. A further advantage of choosing the 3 target behaviors is that they focus on promotin g individual behaviors, for example, more fruits, instead of forbidding food (eg, eat only 1 piece of candy per day).

Altogether, study results along with literature searches were used to support the behavioral diagnosis, the identification of intervention functions, and BCTs. The behavioral diagnosis revealed that certain capabilities (eg, psychological capability: awareness of consumption), opportunities, and motivational aspects are needed to establish healthy eating habits. Furthermore, study results together with evidence from the scientific literature were used to identify 5 intervention functions and 14 BCTs. The latter were translated into features of the C2go app.

The C2go app concept targets improved drinking habits as well as increased fruit and vegetable consumption among adolescents and young adults. To this end, users choose from 3 worlds: the drinking, the vegetable, or the fruit world. A core feature of the C2go app concept is the use of challenges. These consist of goal-setting and self-monitoring for target behavior. Both techniques were requested by participants and are supported by evidence from the literature [36,45,58,77,78]. Focusing on BCTs for effective behavior change interventions is important. Nevertheless, considering determinants of engagement is also crucial [75]. Therefore, the C2go app concept implements various game elements and process motivators, which reward the process of behavior change. Examples are points, levels for status gain, rankings, or engagement loops through challenges aiming at edutainment and loyalty [33,34]. Gamification approaches can provide motivation in settings where information only is not sufficient to bring about change [34]. Various other mHealth interventions used gamification for promoting user engagement successfully [30,43,63]. Concentrating on process motivators instead of long-term, logical outcome motivators (eg, prevention of NCDs) is proposed to influence self-efficacy for behavior change positively and more effectively [79].

The individual choice of worlds and, inter alia, the setting of individual goals support customization [33] to satisfy different needs and motivation for app use (engagement). Reminders were also implemented to increase user engagement [53]. Furthermore, the implementation of an avatar will improve user engagement and acceptance [80].

Different feedback was implemented to motivate app usage [54] and behavior change. Implemented informative feedback targets intenders. This serves to boost self-efficacy, thereby helping to overcome barriers and to achieve target behavior [36,51]. Visual feedback through progress bars was used to replace possible missing intrinsic motivation for behavior change [34]. Evaluative feedback, such as Congratulations if challenges are passed or encouraging feedback if challenges are not passed, were implemented to increase self-efficacy [43]. Motivating messages serve to increase self-efficacy in encouraging the idea that skills for succeeding are available [34]. Evaluative, informative, and motivating feedback is given through an avatar that was implemented for identification and positive learning effects [34]. When formulating this feedback, it was important to select positive language to increase the self-efficacy and satisfaction of the user [48]. Competitive feedback comes from the community and the leaderboard [34,43].

Several limitations must be considered when interpreting the findings of the present approach. First, the design, development, and implementation of mHealth concepts take time. Consequently, by the time of implementation, technology and target group interests may have evolved [30]. Second, regarding the target behaviors, the app focused on drinking and fruit and vegetable consumption only. Other food groups and nutrition behaviors (eg, snacking) could be targeted in the app at a later stage of development, along with physical activity. This provides opportunities for future research and extension of the app. Third, the participants who assisted in the app development were only from 1 region in Germany, and they may have had a bigger interest in nutrition or apps as nonparticipants. Future investigation should include a more diverse group of participants.

The next step is the validation of the C2go app concept to demonstrate its impact on drinking and fruit and vegetable consumption, as well as its usability in a controlled intervention trial. Moreover, financial opportunities for sustainable maintenance possibilities of scientific applications must be investigated.

C2go is a theory-based and target group–adapted mobile intervention that was systematically developed using the BCW. C2go aims to improve drinking habits and the consumption of vegetables and fruit among adolescents and young adults, especially from disadvantaged backgrounds, using a gamification approach.