Compare Social Media Stats

Who doesn’t love numbers, am I right?

Click on the image or this link to launch

                                                                  The Subject

The weekly challenge was to show meaningful comparisons using interactivity.

There are so many stats related to social media (yikes) that I needed to narrow down which stats to use.  For this sample course(let), I went with the most common stat which is, the number of active users that visit each social media site on a monthly basis.  Once I developed the plan, I played around in Adobe Illustrator and created these iconic icons.

Once I learn how to add a download option on my website, I will add these to the downloadable items.

Design Notes

Where do we find all of our social media updates and fun cat videos?  On our personal mobile phones and tablets.  This conclusion made the layout decision easy.  two hands holding a tablet.  I selected female hands as the default option, so that I could create beautiful purple gradient nails.  If you haven’t guessed, purple is my favorite color.  I also added a gender button, so you can switch from female to male hands as you wish.

Make it Interactive

I wanted to pack as much interactivity into this module as possible, so I developed three interactiions within this small coure(let).

Interaction 1:

First, the learner can take a guess by dragging the icon to the correct number of active users.


Interaction 2:

After a learner clicks on submit, they can then use the slider to compare their guesses to the actual data.  So, in a way, this interactivity is built as a comparison as well.

Interaction 3:

Before you start, you can select males hands, or change back to the default set of hands, which are the female hands.  Look at those gorgeous nails.


The Tools

  • Storyline 360
  • Adobe Photoshop (2018)
  • Abobe Illustrator (2018)
  • DaFont website
  • SnagIt

Thanks for reading

-Dana /

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>