While taking a course on Data Privacy & Ethics (MS&E 234), I worked on a project exploring the impact of data privacy knowledge on internet browsing behaviors. Specifically, my team and I conducted a survey with ~30 participants and integrated an A/B test to measure their caution towards personal online privacy before and after viewing one of two similar infographics. Both graphics presented educational content on topics like cookies and ad trackers but varied in their relative informational density.
After working alongside my team to conduct preliminary research and prepare our survey, I took on the role of designing both of our infographics from scratch:
(Design + Content Phrasing)
All non-design aspects of the project (early research, survey development, data analysis, etc.) developed collaboratively alongside the rest of the team.
Informative vs. Impelling Design
The overarching goal of our project was to explore and understand effective approaches for educating the public about their online data privacy. When presented with something like an infographic, would individuals learn more from a piece that's jam-packed with details and thorough explanations, or one with a simple overview of ideas and straightforward calls to action? Which would spur more people to care about their online privacy and realize how the implications of how they're sharing their personal data and browsing activity?
We had a LOT of information to share but very little space to work with, so both versions of our infographic had to be built with painstaking attention and intention. Data visualizations were incorporated wherever possible to increase engagement, while certain design choices played a key role in organizing our content so it wouldn't appear as an overwhelming jumble of information. Specifically, some of my key design considerations included the...
#1: VISUAL THEME
In line with our topic of data privacy, I chose to use white/colored texts over a dark background to insinuate the stereotypical image of a hacker's code-cluttered computer screen (complete with "binary" details along the page's top and bottom borders). Thin lines are also employed as a reoccurring element to allude to computer circuitry while also providing a visual medium for segmenting and emphasizing information. Together, these visual details maintain a sense of cohesion between our infographic's written and visual content, helping readers better remember the presented information over time.
#2: COLOR & TYPOGRAPHY
In addition to the thin lines mentioned previously, color and typography were also utilized as key features for organizing and segmenting text. From first glance, you can see how our accent colors divide the infographic into three subcomponents, while also offering a means for highlighting key terms throughout the body text. Typography, on the other hand, is used to establish strong visual hierarchies — font weights/styles help distinguish between headings, subheadings, and body text, while capitalizations and underlining help draw attention amidst complexity.
#3: SUPPORTING ELEMENTS
Due to the limited scope of our project and preliminary research, we were only able to showcase three core sets of statistics within the entire infographic — this meant that our piece was overwhelmingly consumed by written information, resulting in a clear imbalance between graphics and text. To mitigate this contrast as much as possible, decorative elements were added throughout the infographic for extra visual flair.
The Final Product