Dengue Interactive Infographics

OVERVIEW

Dengue Infographics is an interactive Infographics with its main goal to raise awareness on the increasing trend of dengue cases. It will Inform users on the current dangers of dengue, what is dengue and how to protect against dengue fever.

ROLE

Interactive Designer and Developer

14 May 2020 to 2 July 2020 (8 Weeks)

Problem Statement

Recently, with the pandemic of COVID-19, everyone’s focus is on how and when will the COVID-19 end, but they are overlooking the fact that dengue cases have been rapidly increasing as compared to the previous years which is a dangerous factor.

So, the aim of the Infographic is to raise awareness on the increased trend of dengue cases and for the citizens of Singapore to take action to prevent the increase of dengue cases.

Credits: Wikimedia Commons/ Muhammad Mahdi Karim

Target Audience

My Target Audience are Singaporean who is concern about dengue and wants to know more information about it.

To know what information I need to put in the dengue Infographics, I created a persona whom I interviewed to gain more insights.

I interviewed a Interior Designer named Stephanie where she shared with me what she felt and know about dengue. With those information, I created an empathy map to know more about her pain points.

Researching the information

After gaining some insights from my interviewee, I categorize my information into 3 categories:

why do I need to care about Dengue?
- there is an increasing trend of dengue cases
- more death cases as compared to last year
- due to warmer month, there might be an increase in Aedes Mosquito in the second half of the year
What is Dengue?
- what kind of mosquito transmit dengue?
- how the dengue is transmitted?
- what are the symptoms of dengue fever?
- are there treatment for dengue fever?
How to protect yourself from dengue?
- what other methods are there, besides clearing stagnant water?

Finding Ideas to make the Information interactive

To make the information interactive and less wordy, I found some animation which brings meaning to the images.

For Example

using Chart.js, the user is able to interact with the graph by hovering around the values and gain knowledge on which year has the highest number of dengue cases

Using JavaScript and CSS animation, the user can interact with the Images flipping between two images. One shows the proper way to protect yourself while another shows the opposite.

Using Jquery Tooltip Animation, the user interact with the images by hovering/clicking on the body parts to show the symptoms of dengue fever.

Tracking my process

To make sure that my work is progressing and have clear task and goals, I have used a SCRUM Board to keep my work on track. Every Week, I would set a goal I need to achieve and if I didn't I would reflect back what went wrong

and fix that problem.

Go to this Link to view the board:

https://trello.com/invite/b/gbdMY91E/f1139065a1988fe353398dd83375d20d/dengue

The first 2 weeks of the project

The following next 2 weeks of the project

Wireframing the Design Layout

Using Adobe XD, I designed a low-fidelity wire frame with 2 main layout to cater for the website and the mobile version.

The mobile version as well as the website follow the 1 column layout.

Website Version

Home Page

About Dengue Page

How to Protect yourself Page

Mobile Version

Home Page

About Dengue Page

How to Protect yourself Page

Designing the art materials

Before starting on the web App, I sketch and design my art materials using Adobe photoshop and Adobe Illustrator

Sketches

Results

Coding the Web App

After my materials are all ready, I started to code using Visual Studio Code. The About Dengue page and How to protect myself page was coded rather smoothly as there were no bugs.

But I faced a challenge when coding for the home page

Some of the challenges that I met was :

The API retrieved values have duplicated values and does not show the entire results on one page.
Unable to store the API values in an array outside of AJAX function.

How I Solve them:

Divide by 2 for the duplicated values and get values until certain number of E-week instead of the whole year
Instead of using array to display graph, display the total accumulated number of cases.

Final Results

a video walkthrough of the interactive infographic

Results and Takeaway

The Infographics was successfully done within the time scope and fulfilled its requirements making it interactive for user to explore and play with. The SCUM board was also an useful tool to help me keep track of my weekly progress but it may work better work better on a team project rather than a individual project.

Some Takeaway:

1) The Animations can be improved to be more mobile friendly as not all the animations is touched based majority is hover based.

2) The layout of the design maybe can be improved to 2 column layout so the user does not have to scroll a lot.

More Projects

NUS Next Bus Ver 2.0