Projects         Playground         About


I Don’t Want to be a Hero


Nov. – Dec. 2020, 3 weeks



COVID-19, caused by a coronavirus called SARS-CoV-2, has been taking over millions of lives since March 2020. And since day one of the pandemic, healthcare professionals have been risking their health to save others. Months have passed since March, but the only change has changed is that more people are being hospitalized. The healthcare professionals are exhausted. They need a break. But they can’t stop.






Skills ✨
Interaction design
Humanist editorial design
Tools 🖇
Figma, Adobe Creative Cloud
Collaborators 💖
N/A









Design Concept

While looking for articles about the healthcare professionals’ experience during the pandemic, I noticed that not many platforms had articles about their emotional struggles. There is enough media coverage describing doctors and nurses as “heroes,” but not about what they were truly going through behind the masks. I had the desire to let others know that some medical workers are guity when people call them heroes. That some are depressed. And that some are anxious that they might accidentally bring the virus home. 

I wanted the interaction of the article to be driven by the sharp visual contrast between what people think of healthcare professionals and what they are emotionally going through. The picture-perfect hero state against the tired and emotional state strengthens the argument of medical workers in dire need of a break. This contrast also supports the call to action at the end of the article, which states that we all must pitch in to prevent further spreading of the virus.






Text Sources
I borrowed the voices of the New York Times journalists and the texts of medical websites with public thank-you letters for the content of the editoral. I briefly considered writing my own content but I ended up referring to journalism instead, as I wanted to use direct quotes from healthcare professionals.




The list of articles I used are the following:


The New York Times articles are very powerful and thought-provoking: I would highly recommend reading it if you are interested in the topic. Although some of the articles were written earlier in the year, all of the content is, unfortunately, more relevant to what is currently happening in the world.








Final Prototype

The editorial incorporates six hidden articles in one landing page. The flowery and colorful first page creates a sharp contrast against other pages, which describe healthcare workers as overwhelmed, exhausted, guilty, and depressed.

(For those who are unfamiliar with Figma, click the prototype and press Z to adjust the screen proportion of the prototype — press the key repetitively until you achieve the desired proportion — and R to restart the interaction.)








The Design System
I focused on creating a well-designed type system, as I knew I wanted to incorporate multiple colors to evoke the emotions of the viewer. I also wanted keep the text location consistent, so I used a 12 column grid with 20px gutter and 70px margin throughout the project. The consistent type system provided a sense of unity among the seven screens.





Screen Designs
The seven screens were designed to evoke empathy through the use of color and typography. Although the viewer may not truly know what it is like to be a medical worker during COVID-19, I wanted convey what it is like to go to the hospital everyday to save lives of people.






The Interactions  






The key interactions of the pages are in three parts: The clickable landing page to visually guide the user where to click, the combination of quotes and information that lead to the next interaction, and the time delay for the user to actually process the information. 






1. Clickable landing page
For earlier iterations of the design, the main interaction of the landing page was a hover feature. But I soon figured out that this distracts the user from reading the article, as the visuals switches every time the mouse moves. Therefore, I redesigned the interaction so that one may notice that the words are clickable. The underline as well as the regular to italics type shift allow the viewer to immediately know that the page is supposed to lead to another interaction.








2. Combination of quotes and texts
I intentionally combined quotes and texts of the frontline workers to make the piece more personal. Some of the quotes are clickable, ellaborating the words of the professionals through data-driven facts. This helps the viewers understand a part of what the healthcare workers are currently going through.




 


3. Intentional time delay
The timing of the delay trigger were intentional to help the viewer process the information on the screen. This emphasizes certain numbers or words, allowing the viewer to digest the words on the screen.








4. Now what? Call to Action
So what should the user do after reading the article? The last word of the landing page, community, leads to a page with the call to action. The CTA goes: They are exhausted. They are traumatized. They are people, not heroes. Stay home. Wear a mask. Support them by preventing COVID-19 together, as a community. It encourages the viewer to stay home and if not, wear a mask when with other people. The CTA emphasizes that there are multiple stakeholders in the situation and that the only way to overcome the pandemic is by acting for one another.








↓Curious about my process? ↓









Final Thoughts

It was an empowering experience to design an informative article to influence how people think or feel. I used to not believe in universal design; Now I feel like I slightly do due to the fact that this topic is so relevant to all of our lives as of 2020. I am really happy that I got to work on this project and specifically this topic to shine light on the people who are often not seen. For those who are reading this right now, I hope you stay home and stay safe during this season.

Thank you so much to all healthcare professionals. The world would really be different without you. Additional thanks to an amazing classmate Langston Wells for designing “Studio Culture” logo and the label on the top. :)



Thank you for visiting ︎ Have a great day