This interactive website outlines the negative consequences of social media overload and provides guidelines on how to lead a healthy digital lifestyle. Researched, designed, and built in the Spring of 2014 for my BFA Interactive Thesis Seminar, this site was designed to inspire change in the way adults ages 18-24 consume information on social media sites.

interactive website design, HTML, CSS, JavaScript, content research & curation

 


Research

The term information overload is used to describe a recent change in our relationship with data and information that leads to feeling overwhelmed by the amount of information available at any given time. After researching the history of information and how it is consumed, I realized that information overload isn't our problem. We've developed this sense of urgency around consuming information, leading to information overconsumption.


Design Challenge

Designing for an audience of social media users ages 18-24 proposed an interesting design challenge. I needed to engage with users that are used to communicating in 140 characters, inform them about information overconsumption, and inspire a change in online behavior.


My Solution

Interactive Elements

There are moments throughout the site where I recreate the overwhelming feeling associated with information overload and force users to work for access to the site's content. For example, input is required from a site visitor when reaching the end of the Negative Effects page. Users are invited to play around with the Emojis IRL game to see how different people interpret various emojis in real life (IRL). 


Scroll-based Animation

Scroll-based animations and page transitions compel users to slow down and dig deeper into the content.


Familiar Visual Design with a Twist

This site features two separate color schemes. Facebook and Twitter blue is used to deliver introductory and closing content. These familiar colors transition into a cautionary black and yellow section outlining negative side effects. Imagery also references familiar visuals but places them in an unfamiliar context: a collage of various social media feeds, iMessaging bubbles on a website, emojis shown at large scale, and more. Type treatment is kept consistent throughout the site to unify the two sections.


Development

This site was developed in 5 weeks using HTML, CSS, jQuery, and some JavaScript. Animations were made using Skrollr


Process