Breach-Experience-Design_GIF.gif
 
 

Breach Interactive Website

An exploration re-thinking typical web experience and interaction design, using contextual research to help guide in the design process.

An interactive digital experience

 

Design Objective

Design an interactive experience that works to inform and question the user's online existence.

Design Overview

This digital experience is working to expand upon the idea of public and private mind in terms of the Internet and social media by exploring the concept of a breach and the release of private information to the public masses. It challenges the feeling of safety Internet users may feel when existing online, a similar safety to what one might feel in the comfort of their own homes. Users are able to access this experience through eye-catching digital advertisements that ask if they have been breached. The end of the visual narrative leads users to haveibeenpwned.com prompting them to check if their personal information has been breached. 

Designing For

shutterstock_199956071-998x666_bw.jpg

Jessica and Jillian, 19

Best friends who live and grew up on the Internet. They feel at home sharing multiple aspects of their life on the web as they make the transition to adult life.

Generation-Gap_bw.jpg

Peter (dad to Ashley 13), 45

Let's his daughter use the Internet without any supervision, may not understand just how safe his daughter feels when sharing her information online and the risks that are associated with this feeling of safety.

 
 
 

Designed Experience

Play video with sound on for the full experience.  

 
 

Challenging the traditional navigation of the web, the site navigation is invisible at first glance, it is only revealed with the movement of the mouse. The navigation of this site can not always be trusted, and may return the user to the same page multiple times. This unfamiliar navigation helps to emphasize the uncertainty of the Internet, taking away the understanding of what one knows the Internet to be.

 

Most of the audio consists of snippets from 911 calls made by young children. You can hear the pure emotion in their young voices, bringing to light the multitude of hazards that may make a home unsafe. Just as there are countless hazards one may experience while on the Internet. With this additional sensorial element, the web experience is altered as the user is unable to pause or stop the audio within the web page. 

 
 

The use of sophisticated visuals work to guide the user through key locations in a home, while simultaneously navigating through the website. These images solidify the metaphor of home and the Internet along with the dialog that exists within the page tabs. In order to deepen the experience and further the conceptual content, various pages throughout the site have an added audio element dependent upon their location within the household.

 
 
 

Digital Ads

The users of Breach are able to access its contents through a variety of digital ads that present themselves on popular webpages. 

 
 

New York Times banner ad

 
 

Buzzfeed  side bar ad

Wired banner ad

 
 

Bustle mid-article horizontal ad

 
line.png
 
 

Approach

Once I decided to explore the idea of public and private mind in terms of the Internet, I began to research the many aspects of the human experience in relation to the Internet.  I used a multitude of  research techniques throughout the process including: secondary research, primary research, survey, interviews and popular media scans. This allowed me to understand the topic on a deeper level, helping to build a stronger empathetic design strategy.

Research

In order to better understand my audience, I circulated a digital survey asking about feelings of safety and online activity. I also did an abundance of secondary research to better understand the topic of digital breach's and user interactions with online data. Below are posters that share some of the intriguing responses and information discovered during my research. 

 
 
 
 

Process

Below are photos from various points within my process.

 

Tab Narrative

Site Map

Screen Shot 2017-10-30 at 9.14.19 PM.png

Version 01 of digital Exploration

breach.jpg
 

A LITTLE PEAK INTO MY BRAIN

 

To view the initial exploration of this topic, check out The Art of Indirectness.