Word count: 2016

Project title: Unfolding the COVID-19 Pandemic: A Timeline

Link: https://preview.shorthand.com/36YkZd8XrbEkA2HR

Project Description

The main goal of this project was to create an engaging and enlightening presentation about
Covid-19 through capitalizing on Shorthand for digital storytelling. In particular, this project
sought to shed light on how the event evolved and how it triggered different responses across
the globe. Dated back to 2019, the event has exacerbated inequalities between the Global
North and the Global South (Stevano et al., 2021), shaped and sustained mental health crises
during the pandemic period (Talevi et al., 2020; O’Connor et al., 2021). Of note, the Covid-
19 era witnessed booming development and impressive application of digital technologies in
tracing infectious contacts, identifying relevant cases, and designing viable interventions
based on data-informed insights (Budd et al., 2020). This points to the pressing and
promising need of using digital technologies to improve public health management. In this
aspect, I deem it a rewarding attempt to use digital storytelling afforded by Shorthand to
design and deliver engaging public health communication over Covid-19.

This story was selected for this project, because the Covid-19 event can be used for public
health communication and education. By creating an interactive website with scrolling texts
and interactive imagery, this project attempted to create immersive experiences for the
audiences, while at the same time allowing them to develop a contextualized understanding
of the event and its implications for individuals and the world.

Design Process

In this section, detailed analyses will be introduced to first outline the design process, then
move on to address specific design considerations, followed by a critical examination of 3
sources of inspirations. Overall, the design process consists in 6 main steps, including
planning, researching, media selection, drafting the project, revising, and finishing and
publishing (see Figure 1 below). Notably, this project followed iterative design principles,
which stressed that designs were not fixated but iterative in nature, requiring feedback-based
revisions (Dieli, 1989). By doing so, this project attempted to improve the digital storytelling
through making responsive revisions based on feedback collected from my friends and family
members, and relevant evaluations. In practice, this project started from planning, by
selecting the linear format and a focus on the chronical progress of the Covid-19 event. I
selected Shorthand to help design the project, because it allowed for the design and delivery
of long-scroll stories with interactive imagery and abundant textual information.
 decide relevant tasks and steps
Planni choose the format and theme
ng

find relevant data

Resear academic research
ching

Media
select relevant media sources, such as videos, images and news articles
selecti
on

use Shorthand to integrate collected sources into the story

Drafti
ng the write related texts
story

evaluate the project by collecting feedback from others

Revisi making relevant revisions
ng

Finish
make the final draft
ing
and publish it
publis
hing

Figure 1. The design process of the project.

After making the overall planning, I carried out secondary research over Covid-19, with a
particular focus on collecting relevant data and findings published by credible organizations
and scholars. Later, I searched for relevant videos, images and articles, in an attempt to make
the long-scroll story visually engaging and cognitively enlightening. In the following three
steps, I began to draft the long-scroll story through using Shorthand. This was largely because
I found it more convenient and productive to use Shorthand rather than Adobe Animate, for
combining long texts and engaging media into immersive experiences for audiences. After
making the first draft, I invited my friends and family members to provide user feedbacks,
which contributed critical insights to my refining of the project. Finally, I made responsive
revisions and finished the final draft that was ready to be published.

In designing the story, two main considerations were made. One consideration was that of
interactive designs, which played an important role in the shaping and sustaining of
immersive experiences that could support learning (De Freitas et al., 2010). One good
example is the scrolling story created by Ibrahim and Barabanov (2021, which demonstrated
a productive use of interactive maps to create immersive experiences for the audiences.
Figure 2 below shows how the story utilized interactive maps to help contextualize the loss of
the tablet. Another related example is the scroll story written by Strongman (n.d.), who
skillfully used interactive maps to help visualize the geographical expansion of Covid-19
across New Zealand (see Figure 3). This practice inspired me to design my own interactive
maps, such as those that helped to visualize Covid-19 vaccine acceptance rates across the
world (see Figure 4). By engaging the audiences with these interactive maps, I expected to
attract and retain their attention while enabling them to freely explore the maps.
Figure 2. Interactive map (Ibrahim and Barabanov (2021)).
Figure 3. Interactive map (Strongman (n.d.)).

Figure 4. The interactive maps in my project.

Another consideration was the balance between textual and visual information. Aamir et al.’s
(2022) digital story provided a good example of how images were combined properly with
texts to achieve complementary effects (see Figure 5 below). By reducing the load of textual
information and using relevant images, Aamir et al. (2022) succeeded in attracting and
maintaining the attention and interest from the audiences. Otherwise, the audiences might
easily lose their interest in heavy-loaded texts. This practice contributed the inspiration to my
strategic uses of visual media to serve as the walls between texts, as well as complementary
information.
Figure 5. source: Aamir et al. (2022)

Content and Structure

When it comes to the structure of the long-scroll story, Figure 6 below shows the linear
format of the story. The audiences could start from the Welcome page, then move to 8 main
navigation pages, including About, Global Alarm, Vaccine Hope, A Turning Point, Challenges
and Resilience, Looking Ahead, Conclusion, About Page. The Welcome page introduces the
title and author of the story. Overall, these navigation pages can be categorized into three
main sections. The first section mainly addressed the emergence and global expansion of
Covid-19 in two main navigation pages, including About and Global Alarm. The second
section focused on introducing global responses in a non-linear format, with a particular
focus on illustrating the role of vaccine, the effective implementation of social prevention and
control measures, and the solidarity and collaboration among individuals, organizations and
states, in four sub-navigation pages, including Vaccine Hope, A Turning Point, Challenges
and Resilience, and Looking Ahead. The third section summarized the story while at the same
time providing relevant information about the sources and tools used in the story. The
audiences could click two sub-navigation pages, including Conclusion and About Page, to
access the information.
Figure 6. Structure chart of the design.

With regards to the navigational structure of the long-scroll story, this project mainly
structured the content in a linear manner with each navigation page arranged in a top-down
order. Figure 7 helps to illustrate the navigational structure. By giving the audiences an
overview of the navigations at the home page, I structured the navigation pages in a sequence
starting from beginning to global responses to the looking ahead part. This would help
facilitate the audiences’ quick understanding of the main content and structure of the story.
Designers need to align their navigation designs more closely with intuitive judgements in an
attempt to ensure and improve user experiences (Kalbach, 2007). In this regard, I used
sequential structure to arrange these navigation pages, which could help the audiences to
develop a logical and contextual understanding of the Covid-19 event, relevant responses,
and implications for the present era. However, it should be noted that my design was flawed
in that it did not structure navigation pages into larger groups. As a result, the audiences
might be impatient with the large number of navigation pages on the main page.

In terms of the selection of media, I strove to create multimedia settings to build immersive
and interactive experiences for the audiences through choosing and integrating a wide range
of media, including but not limited to, news articles, videos, and images, into the design of
the news story. For example, the audiences can click the About page to see the emergence of
the Covid-19, with an interactive image introducing the timeline regarding the beginning and
evolution of the pandemic.

welcome home page

About YouTube video, self-made
 timeline
global alarm photo and three videos
vaccine hope two maps
a turning point three images
challenges and resilience texts with background image
looking ahead texts with background image
conclusion texts with background image
about page texts
Figure 7. Flow chart.

Layout and Design

Regarding the color schemes, I focused on using black background to direct the audiences’
focus on the texts and images, while at the same time reducing distraction and stress. Figure 8
below illustrates how black background was applied to the Welcome page, which served to
establish a sense of seriousness. The black background was largely applied throughout the
long-scroll story. Of note, some visual backgrounds were developed with images obtained
from open and free sources, to help attract and retain the audiences’ attention. In an attempt to
ensure consistent color schemes, I selected or adapted these images in a way that aligned
more closely with black background. Figure 9 shows how relevant images were used to
convey relevant information, while at the same time attracting and engaging with the
audiences to high contrast against the texts. When it comes to the color of the texts, I
consistently used white color for main texts, red color for date information, and blue color for
references. By doing so, I managed to create salient contrast between the texts and the
background, while at the same time differentiating different types of texts to ensure engaging
reading experiences.

Figure 8. Welcome Page.

Figure 9. Examples of visual backgrounds.

With regards to the layout of the project, I used storyboard to sketch the rough structure and
layout of each page. Storyboarding offers a valuable means for designers to situate their
stories and narratives into specific and consistent contexts (Greenberg et al., 2012). Figure 10
illustrates detailed layouts of different pages, which demonstrate both differences and
similarities in terms of color schemes and structures. In particular, black ground was evident
in most pages, with white texts forming a stark contrast effect for the audiences. Even for
pages adopting visual backgrounds, the black color also played an important part in
constructing the layout. Meanwhile, videos and images were used frequently to help segment
texts, thus creating an engaging effect for the audiences.
Figure 10. Storyboard sketch.

Delivery Requirement

Users are required to have relevant internet connection devices, such as computers and
smartphones, and stable internet, to run the project. Given that this project was developed for
public health communication, it could be published online in health-themed websites, such as
the website of American Public Health Association. Overall, it was estimated that users
would spend an average of 6 minutes on reading the story. However, it merits particular
attention that users are likely to be affected by a number of factors, including but not limited
to, language competency, Covid-19-related experiences, and digital literacy, when it comes to
their efforts in completing the reading of the long-scroll story.

Evaluation

Digital storytelling provides a promising means for storytellers to effectively manage the
design and delivery of narratives and stories (Lambert & Hessler, 2018). To evaluate the
usability of this project, I focused on three main criteria, including interactivity, efficiency
and learnability. I designed a small survey by inviting two friends to provide feedback for my
project. The results can be seen from the table in the appendix. Based on the results, it can be
seen that this project was successful in meeting two criteria, including interactivity and
learnability. However, the two informants highlighted that the project had some weaknesses
in terms of navigation and efficiency to use. After communicating with them, I noticed that I
should improve my navigation through introducing higher-order navigation buttons, and
structuring navigation pages in a mor logical and clear way.

Apart from the problem of navigation, my project also suffered from the lack of personal
stories. It should be noted that digital storytelling has the great promise to enable and
empower ethnic minority groups, especially those from socioeconomically disadvantaged
backgrounds, to share personal stories for health promotion (Briant et al., 2016). In this
aspect, I will focus on integrating personal stories into the creation of more engaging
narratives that can give voices to different groups of people.

Summary

This report analyzes the design and delivery of the long-scroll story about Covid-19. It
identifies relevant strengths and areas of improvement for future practices.

References

Aamir et al. (2022). “Road to nowhere: China’s Belt and Road Initiative at tipping point,”
Shorthandstories.com. https://nikkei.shorthandstories.com/road-to-nowhere-china-s-belt-and-
road-initiative/

Briant, K. J. et al. (2016) “The power of digital storytelling as a culturally relevant health
promotion tool,” Health promotion practice, 17(6), pp. 793–801. doi:
10.1177/1524839916658023.

Budd, J. et al. (2020) “Digital technologies in the public-health response to COVID-

19,” Nature medicine, 26(8), pp. 1183–1192. doi: 10.1038/s41591-020-1011-4.

De Freitas, S. et al. (2010) “Learning as immersive experiences: Using the four-dimensional

framework for designing and evaluating immersive learning experiences in a virtual world:
Learning as immersive experiences,” British journal of educational technology: journal of
the Council for Educational Technology, 41(1), pp. 69–85. doi: 10.1111/j.1467-
8535.2009.01024.x.

Dieli, M. (1989) “The usability process: working with iterative design principles,” IEEE
transactions on professional communication, 32(4), pp. 272–278. doi: 10.1109/47.44539.
Greenberg, S., Carpendale, S., Marquardt, N., & Buxton, B. (2012). The narrative storyboard:
telling a story about use and context over time. interactions, 19(1), 64-69.

Ibrahim, N., and Barabanov, L. (2021). The lost tablet and the secret documents. BBC.
Retrieved May 15, 2024, from https://bbc.co.uk/news/extra/8iaz6xit26/the-lost-tablet-and-
the-secret-documents

Kalbach, J. (2007) Designing Web navigation: Optimizing the user experience. Reilly Media,
Inc.

Lambert, J. and Hessler, B. (2018) Digital Storytelling: capturing Lives. Creating community.
Milton. Eboo: Taylor & Francis Group.

O’Connor, R. C. et al. (2021) “Mental health and well-being during the COVID-19
pandemic: longitudinal analyses of adults in the UK COVID-19 Mental Health & Wellbeing
study,” The British journal of psychiatry: the journal of mental science, 218(6), pp. 326–333.
doi: 10.1192/bjp.2020.212.

Stevano, S. et al. (2021) “COVID-19 and crises of capitalism: intensifying inequalities and
global responses,” Revue canadienne d’etudes du developpement [Canadian journal of
development studies], 42(1–2), pp. 1–17. doi: 10.1080/02255189.2021.1892606.

Strongman, S. (no date) Covid-19 pandemic timeline, Radionz.co.nz. Available at:

https://shorthand.radionz.co.nz/coronavirus-timeline/index.html (Accessed: May 15, 2024).

Talevi, D. et al. (2020) “Mental health outcomes of the CoViD-19 pandemic,” Rivista di
psichiatria, 55(3), pp. 137–144. doi: 10.1708/3382.33569.

Appendix