A hallmark of HCD is design iteration that follows a cyclic as opposed to linear process (Figure 1). The core study team included a designer (QZ), a pediatric asthma clinician-scientist (JS), a UX researcher (EEC), and a senior HCD expert (JAK). This study followed the HCD process steps: research, ideate, design, evaluate, and implement to refine the IMPACT prototype and incorporate longitudinal engagement strategies [25,33]. The app refinement process required numerous cycles of design and evaluation, which is expected in HCD.

During this phase, our team conducted a scoping literature review of mHealth app engagement strategies. Next, our team conducted a market research review to understand existing apps designed for use by school-age children, including health- and non-health–related apps. We then assessed the extent to which existing asthma apps facilitated parent–child shared management.

The ideation phase of HCD entails generating ideas and solutions to address user needs and priorities [33]. To guide our work in designing for engagement, our team conducted a literature review of common approaches to promoting app engagement [18,24,30,34,35]. Based upon this review, our team decided to incorporate gamification to promote app engagement and subsequently adopted the Octalysis Framework for Gamification and Behavioral Design [36]. Guided by the concept of motivation from social psychology, the Octalysis Framework intentionally accounts for intrinsic, extrinsic, positive, and negative motivations. Intrinsic motivation refers to activities performed out of pure enjoyment with no tangible rewards, whereas extrinsic motivation refers to behaviors performed in pursuit of tangible external rewards [37,38]. Positive motivators stimulate positive emotions such as joy, satisfaction, and a sense of meaning, whereas negative motivators may elicit feelings such as surprise, fear, or concern for a loss of progress or reward. The Octalysis Framework is depicted as an octagon with each side representing 1 of 8 core drives (CDs) of motivation (Figure 2) [36]. CDs associated with extrinsic motivation (CD 2, 4, 6) are located to the left of the model, whereas those associated with intrinsic motivation are represented on the right (CD 3, 5, 7). Positive motivators are located at the top of the model (CD 1, 2, 3), whereas the bottom portion of the model represents negative motivators (CD 6, 7, 8; Figure 2).

Guided by the Octalysis Framework, the study team conducted brainstorming sessions for new features and enhancements of the IMPACT app, using rough sketches and short descriptions to communicate and align ideas across the team. Next, we employed affinity mapping, where ideas were grouped into themes, and team members ultimately voted on their top engagement ideas. Finally, we used effort versus impact matrices to prioritize design ideas and refinements. Although parent–child dyads were not engaged in the initial ideation phase, their feedback from subsequent stages, including new app features or concepts, were prioritized in future design iterations (see the “Results” section for details).

The original mHealth IMPACT app prototype was developed using Figma, a digital design and prototyping platform that supports the prototyping spectrum from wireframes through high-fidelity interactive prototypes (Figma, Inc). Given that the original prototype was housed within Figma, the designer (QZ) continued to use Figma for subsequent design ideas to facilitate a cohesive UX. During the design phase, the designer digitally drafted the prioritized design ideas, usually providing 2 or 3 variations. The study team reviewed the designs together and typically selected 2 versions to move forward to user testing in the evaluation phase. The inclusion of the asthma clinician-scientist study team member during such early design stages ensured that prospective designs represented asthma management best practices. As is depicted in Figure 1, numerous rounds of design and evaluation occurred as the app was progressively refined. Initial design rounds used low-fidelity wireframes to depict the basic app structure (information architecture) and functionality (eg, screens showing paths users take, or “user flows”). Later design rounds focused on visual design and microinteractions of the app features, which necessitated high-fidelity prototyping within Figma.

The study team used numerous techniques within the evaluation stage, including concept testing, usability testing, and semistructured interviews [33,39,40]. Concept testing entails seeking feedback and preferences from users about specific concepts and designs. For example, presenting different layouts of a dashboard to determine which was more effective for users, a technique known as parallel prototyping [41]. We also used card sorting, which entailed presenting numerous feature options generated from the ideation phase to users and asking them to categorize their preferences in order of importance.

Usability testing, by contrast, was used to test specific tasks within the app to determine whether users were able to use the app as intended [33,39,40]. These tasks are referred to as “flows,” representing the series of screens users encounter as they perform a task. Usability sessions were moderated by the UX researcher (EC) and observed by the designer, which facilitated understanding user feedback. Through the use of the “think-aloud” technique, a cognitive interviewing method, participants were asked to perform a task within the app while the researcher observed [42]. Users were asked to describe their use of the app as they performed the tasks, including what they liked or disliked, what was confusing, and whether they would change anything. All evaluation sessions also incorporated semistructured interviews to elicit any user feedback, suggestions, or other comments.

Following each evaluation session, the UX researcher and designer debriefed the session and discussed their takeaways from the session (eg, user preferences for specific designs, or challenges using a specific flow). As is typical in HCD, each usability testing cycle was followed by rapid thematic analyses to identify key insights [25]. Key insights were then translated into recommended refinements by the UX researcher. These refinements were prioritized using a common usability scoring system (1=highest priority, 4=lowest priority) [43]. Level 1 (high priority) items prevent users from completing a task, Level 2 items create a significant delay in task completion, Level 3 have minor effects on usability, and Level 4 (lowest priority) are subtle with minimal effects. For this project, high-priority items reflected essential functions, new features, or other substantive app changes. Substantive design changes always were tested in a future evaluation cycle. Conversely, lower-priority items—often minor functionality issues such as type of clock face or button—were revised without further testing. Depending on the evaluation findings, the study team decided to either iterate the design further (re-enter the design phase) or move the prototype to implementation. We originally planned 3 cycles of design and evaluation, but as a result of delayed study timelines due to the COVID-19 pandemic, we extended our threshold for concluding iterations to Spring 2021.

Implementation entails handoff of the final designs to the developer team for full-scale development of the app. Implementation usually follows numerous rounds of design and evaluations until a final design emerges.

We found that gamification, or the incorporation of gaming elements in nongaming uses, is increasingly employed in the mHealth market [35,46]. Originating from the videogaming industry, gamification integrates fun elements and human motivation to maintain user engagement. Gamification strategies appear highly variable and dependent upon the user, context, and activity or goal. Some examples include badges, leader boards, social engagement, and challenges or quests [35]. Despite this variability, gamification shares the ultimate goal of motivating users to continue using the app [47].

Among existing apps for children, we found several common strategies, including the use of avatars, badges, and streaks. Similarly, child-facing app designs were streamlined, colorful, and intuitive with emphasis on visuals. Notably, mHealth apps designed for childhood asthma were predominantly educational, affirming our unique perspective targeting parent–child shared management responsibility.

As depicted in Figure 1, this project entailed 6 cycles of design and evaluation such that insights from evaluation informed future design refinements. The design foci, evaluation methods, and key insights of each cycle are discussed below and in Table 3. Several concepts were never prototyped, including chat forums and leaderboards, due to patient privacy concerns. Expert asthma tips were not prototyped as these are redundant with existing asthma apps. We primarily used medium-fidelity Figma prototyping during design (and evaluation), which entails certain clickable elements within the design. For the last design and evaluation cycle, a high-fidelity Figma prototype was used, which had fully integrated clickable elements such that users could simulate real-world use and navigate as if it were a real app.

The highest priority items from the ideation phase related to core functions within the app, specifically evaluating goal setting, the interaction between parent and child, and a new priority, an avatar for child users to excite them about ongoing use of the app. These items cross numerous CDs. Based upon these priorities, the designer expanded the original prototype to include positive reinforcement when a dyad reported successful achievement of a goal. An avatar concept was also prototyped to customize user profiles, with various options including animals, robots, dinosaurs, and monsters. These priority items were tested with users in cycles 1 and 2, with refinements made after each cycle based upon user feedback (described in the “Evaluation” section).

The next batch of priority concepts related to developing a virtual pet or mascot and reward system for app usage, with the intent to promote and maintain child user engagement. Numerous prototypes were developed with animal or creature mascots, including a monkey, underwater theme, animated lungs, monster, and a dog (Figure 4). Several rewards systems were similarly developed such that users earned rewards for various goal achievements. A variety of progress bars, displays options, and rewards were prototyped around the mascot concept.

The final design cycles focused on several of the items from Table 2, including 2 versions of a to-do list, onboarding guidance, and several longitudinal app engagement concepts. Onboarding guidance prototypes included carousels of app features, spotlights on app functionality, and options for video tutorials. Longitudinal engagement strategies included expanding the animal mascot concept to provide options for unlocking additional mascots, using accumulated rewards to purchase new app backgrounds or accessories for the animal, and the concept of streaks. We also designed for integration of a home-based spirometer within the app, which emerged from parent participant feedback during prior remote evaluation sessions amidst the COVID-19 pandemic. The study team developed a spirometry tracking graph within the IMPACT app dashboard as well as visual incentives for optimal spirometry performance. Finally, we designed an export feature, which would provide users the option to export app data (C-ACT, spirometry results, etc.) to their health care provider.

Most evaluation cycles used concept testing, to determine specific concepts to integrate within the app, as well as usability testing, to determine whether users were able to use the implemented concepts as intended. Overall, evaluation cycles initially prioritized core app functionality, then child engagement, and finally integration of all concepts and refinement (Figure 5). Key insights by cycle are presented in Table 3.

To test the core app functionality, cycles 1 and 2 prioritized evaluating the original prototype dashboard and goal-setting flows. The dashboard, or home screen, depicts graphical representations of the child’s asthma symptoms and a weekly C-ACT. Concept testing was used to determine parent and child preferences for dashboard layout and color schemes.

We also concept tested avatar options with child participants, with animal avatars emerging as preferred.

Usability testing was used to test the goal setting, progress report, and ACT flows. The goal-setting flow was very clear, with one parent commenting,

During the semistructured interview, another parent asked what would happen after dyads completed the intervention. This parent suggested that the team consider an additional app phase that did not focus on changing shared management behaviors, but rather on maintaining them along with ongoing asthma symptom and control tracking (later addressed in design cycle 6). The remaining flows tested well with minor refinements recommended.

Cycles 3 and 4 focused on evaluating the animal mascot and reward system child engagement strategies. A series of parallel prototyping concept tests revealed that dyads strongly preferred a dog mascot and that the reward system be cohesive with the mascot. Ultimately, a dog bone reward scheme was selected. During the interview, one child suggested we build on the dog mascot concept:

This suggestion was integrated into cycle 4, with the dog mascot initially displayed as a puppy that progressively grows through reward achievements. Usability testing revealed the growing puppy mascot was unanimously favored.

Amidst the COVID-19 pandemic, many parents with children with asthma expressed concern about decreased access to their health care provider. A specific concern was restrictions placed on spirometry, which is an aerosolizing procedure. In light of these parent-identified concerns, we introduced an additional concept for testing, home spirometry. One parent commented,

Another shared,

Finally, interviews revealed that dyads would also like to see the app incorporate medication tracking and reminders.

Cycle 5 was entirely focused on concept testing various options for onboarding, app tasks, streaks, medication tracking, and spirometry integration. Dyads were very decisive on preferred formats. Child participants clearly did not care for the streak concept,

Children also preferred that we expand the mascots to allow for additional dog “unlocks” within the reward system as opposed to earning accessories or app background changes. The introduction of medication reminders and tracking as well as spirometry were both unanimously favored.

Cycle 6 concept testing evaluated the maintenance phase concept to follow intervention completion, which originated from a parent participant, whereby the goal setting was muted, and dyads may continue to use the other app features long term. Dyads loved this addition as it would enable ongoing app use even after the intervention was complete. High-fidelity usability testing revealed only minor refinements, indicating readiness to move to implementation.