Design and build of a shareable infographic generator for a charity social media campaign
JDRF are the Type 1 Diabetes charity, and the world's largest charitable funder of type 1 diabetes research. We have worked with JDRF for a while now on multiple projects, as well as supporting their main website, and we were excited when they approached us with an idea for a social campaign to raise awareness of Type 1 Diabetes around World Diabetes Day.
The idea was for a user to be able to generate an infographic that would show their personal diabetes statistics that would then be shareable on social media in order to raise awareness of Type 1 Diabetes and JDRF. We integrated the DiaDigits infographic generator into the main JDRF website, allowing a seamless user experience and an easy way for users to create and share their infographic.
Scroll for more
infographics generated in the first 24 hours
We began by building a one page questionnaire that asks users about their history of diabetes.
Embedded on the JDRF website, the questions allows us to capture all the information we need to then dynamically crunch the numbers before creating the infographic.
Meanwhile, our design team created an engaging infographic inline with JDRF brand guidelines that would showcase the data perfectly.
The infographic was designed in a variety of layouts and dimensions in order for it to be shared at the optimum image size for social media platforms such as Facebook and Twitter.
Doing the maths
Next we had to take the data provided in the questionnaire and do the maths to output the numbers required for the infographics, based on formula in a spreadsheet that we turned into code.
Using JDRFs research and data averages, and knowing when the user was first diagnosed with Type 1 diabetes, our code is able to calculate numbers such as how many blood tests they have done or how many hours of sleep they have lost.
Creating the infographic
Once we have the user's data and have done the maths behind the scenes, we are ready to output the data into the infographic we have designed.
We coded up the necessary parts of the infographic so that the numbers could be dynamically replaced based on the data provided by the user, and then saved the final infographic as an image ready to be shared.
Have you got an exciting project coming up?Let's talk