Based on a previous herd immunity or community immunity web application [19], our multidisciplinary team developed a storyboard and narration script to explain distancing in both English and French (Multimedia Appendix 1).

To build our web application, we started by modeling the new navigation flow (Figure 1) [20]. First, a landing page informs users that the web application is optimized for the majority of browsers, except for Internet Explorer and Microsoft Edge, which are not supported. Users are directed to the home page, where they can select their preferred language (English or French) and access a descriptive transcript for people using screen readers (eg, people who are blind or vision-impaired) or with low bandwidth (eg, people who live in locations with limited internet service.) Next, users are directed to the avatar creation page. Once their avatar is created, users can launch a narrated animation featuring their personalized avatar. At the end of the animation, users receive additional information with links to Canadian government and international websites about COVID-19 prevention and are invited to complete a brief survey.

To develop our web application, we used Scrum, which is an agile framework [21-23], and JavaScript (Vue.js framework) as our programming language [24]. Agile practices may be more pragmatic than waterfall software development methods, as they promote adaptive planning, evolutionary development, rapid delivery, and continuous improvement [25-27]. In keeping with our agile approach, we performed short iterations that allowed us to quickly adapt the prototype, adding new features and fixing bugs. By building on existing code and using a rapid development approach, in 3 weeks, we created a web application that respected accessibility standards, including providing descriptive text for people who are blind or vision-impaired and captions for people who are deaf or hearing-impaired.

In our web application, people create avatars (Figure 2) that represent themselves and people around them by choosing among a set of avatars, then adjusting skin color, hair color, glasses, facial hair, and head covering accessories such as a hijab, turban, and caps, as desired.

These avatars are used in a 3-minute animation illustrating an infectious disease epidemiological model of COVID-19 [28], showing the differences in transmission with and without distancing (Figure 3). During the animation, the narration explains the science of how distancing reduces the transmission of COVID-19 in plain language. The web application offers complete captions for those who may be unable to hear the narration or who prefer to read it and a full written descriptive version for people who may be unable to see the visualization, for example, people using screen readers. At the end of the animation, we offered viewers a summary page on distancing with links to the websites of the Public Health Agency of Canada (COVID-19 Prevention, Quarantine, and Isolation) [29] and the World Health Organization for more information [8].

This study was a cross-sectional, observational, pre-post study in which we asked people to self-report their behavior in the week before viewing the animation and their behavioral intentions for the week to come and collected usage metrics.

The aim of this study was to understand the impact of a dynamic visualization on distancing during the early months of the COVID-19 pandemic. Our results led us to 3 principal observations, which we detail in the following paragraphs.

First, given that the large majority of survey participants were already practicing distancing, we suggest that such communication materials might have dual roles. The first role is the more obvious one of helping to prompt behavior change. In our study, among the small subsample of survey respondents who reported not already practicing distancing, 29% indicated an intention to increase their practice of distancing in the coming week. Due to low numbers, this was not statistically significant. The second role may be to help reinforce existing desired behaviors. A substantial number of people went through the application in its entirety and responded to the survey at the end, indicating that they were already practicing distancing. Our survey did not include questions about why they might have spent this time, so we are unable to draw conclusions, but we hypothesize that, especially in the context of the early stages of a pandemic, people may seek reassurance that they are doing the right things. Public health communications may therefore offer information that is helpful in more subtle ways than prompting immediate behavior change. In other words, there may be a place for communications that are explicitly designed to reinforce existing behaviors and to be shared or shown to others, so that individuals can use them in their discussions with family, friends, and colleagues. Future studies should consider further exploring such sharing intentions.

Second, we observe that characteristics such as gender and country of residence may influence the impact of digital public health communications. Our web application received 3588 unique hits from 82 countries after 26 days, having been shared on social media across Canada. The majority of survey respondents reported higher education levels. This may suggest that the application itself reached more people with higher levels of education, or it may reflect higher willingness to complete an optional survey among people with higher levels of education. We also noted that gender and place of residence interacted statistically significantly with distancing intentions. Specifically, among those living outside of Canada, participants who identified as women appeared to be impacted toward prosocial behavior (ie, distancing to protect oneself and others) following exposure to our intervention, while those who identified as men appeared to be impacted in an opposite direction.

Third, usage analytics revealed that most people who abandoned the application gave up at the point at which they were asked to create 9 custom avatars prior to viewing the animation integrating those avatars. The rationale of custom avatars was to highlight the impact of distancing on people known to the user. However, creating 9 avatars may have been too much to ask. This suggests that, for future such applications, it will be important to find the right balance between personalization and the amount of information and time asked of the user.

As recommended by Gough and colleagues [36], we had some success disseminating our message using Twitter. Although Twitter has since undergone changes and may no longer function in quite the same way as it did in 2020, social media remains an important vehicle for reaching a wide range of people. Indeed, during the COVID-19 pandemic, public health experts increasingly used social media to disseminate messages directly [2]. To optimize the impact of evidence-based messages, academic and other institutional dissemination efforts may benefit from consultation, advice, or collaboration with social media experts.

Our findings around potential differences in how people with varying identity characteristics received our intervention align with other studies showing that such characteristics matter and must be considered when designing public health messages [2,13,14,37-42]. As outlined by the World Health Organization in its strategy to combat COVID-19, triggering the right action requires delivering the right message to the right audience at the right time [43].

This research built on previous work by Hakim and colleagues [19,44] developing and evaluating an interactive visualization about how herd immunity or community immunity works. By incorporating avatars and considering the role of emotions, Hakim and colleagues [19] aimed to personalize communication about infectious disease transmission. Our web application offers an adaptation of the original application, suggesting that such a visualization’s core functionality may be usable across related contexts [45]. For example, although distancing is no longer the recommended avenue for reducing COVID-19 transmission, the visualization may be adapted to demonstrate the impact of mask wearing or vaccination on transmission. By linking our web application with Google Analytics, we obtained indirect feedback about user experience, technology usage, and most importantly, user pain points, enabling us and other teams building similar applications to better balance user burden and intervention effectiveness. Put plainly, a digital public health intervention is unlikely to be effective if people abandon it halfway through. According to our site usage metrics, we had 2 main throttle points: avatar creation and animation viewing. The avatar creation process (selecting an avatar, then customizing skin color, hair color, glasses, facial hair, and head coverings like hijabs, turbans, and caps) can take a long time, especially for new users. To address this issue, in future iterations building on this application, we will offer an option to automatically create additional avatars. Although no interaction was required in the animation viewing process, people might have abandoned it because it was too long, they didn’t wish to spend the time, they lacked the bandwidth to stream the video, or other reasons. Currently, we are refactoring this process to make it easier for future users. As a solution to this issue, we added the ability to move the visualization forward or backward and aim to use shorter animations.

Our study had 4 main limitations. First, the nonrandomized study design limited our ability to draw firm conclusions about the actual effect of our web application on distancing. Second, the sample of survey respondents was smaller than the population of application users, with a total of 182 responses to the optional survey out of 3588 unique hits. In addition, given our recruitment methods and high baseline distancing practices, we likely observed selection bias in survey respondents. Third, we were able to measure distancing intentions but unable to measure self-reported behavior in a follow-up survey. Fourth and finally, the Google Analytics data limited our analyses. Such data are structured primarily for the needs of those analyzing marketing metrics such as acquisition, behavior, and conversion, not for scientific analyses. In future studies, we aim to explicitly link survey data with usage metrics for each individual study participant.

This study has 3 main strengths. First, using agile development, we demonstrated the ability to adapt an existing application about herd immunity or community immunity, already optimized for users’ cognitive and emotional responses, to a new infectious disease context. This reinforces potential avenues for further research using already available software and approaches. Second, using social media showed that we could disseminate this type of material rapidly and reach a larger sample of the population than the convenience sample we had originally defined. Third and finally, this research provided insight on user experience to inform future applications designed to help members of the public understand the science of infectious disease transmission and how epidemiological evidence applies to them as individuals and to those around them.

We developed a web application to help people understand the relationship between individual-level behavior and population-level effects in the context of infectious disease spread. This paper suggests that personalized risk communication, such as personalized avatar-based visualizations, could be effective. This study also demonstrates how agile development can be used to quickly create personalized risk messages for public health issues like a pandemic. The nonrandomized design of this rapid study does not allow conclusions about the web application’s effectiveness on distancing or knowledge retention. Future work may improve the visualization and involve more user testing.