Ding Dong!

interaction design
P5JS, HTML/CSS, Javascript
Live Prototype

Project Brief:

This class is intentionally designed to put students in the field, and to foreground a design and concepting methodology that is completely responsive and iterative. Assignments are not shared until they are assigned - this is by design, because our focus is on learning how to develop and re-develop ideas through on-the-ground observation and prototyping. We will practice generating ideas from OBSERVATION, not from preconceived notions or assumptions about people/situations/technology/etc.

Based on observations from the world and your interactions in it, use technology to design an intervention for one moment of interest.


This process began with observation: over the course of 48 hours, I set a timer every 15 minutes to notate and observe all of my interactions - human/human, human/tech and tech/tech. Then, I selected three moments of interest from my observations and interrogated them further, breaking them down into their small parts and contexts.

The moment that interested me the most was looking at the camera to see if it’s recording. While my fiance was out of town on a long work trip, we both had access to our doorbell camera feed. I started to wave to the camera as a way to say hi to him from afar, since I knew he could see me. This moment of looking at the camera to see if it was recording, then using it as a communication device became the basis of my project.

Once I identified this moment of interest, I designed some interventions to learn more about the moment. These interventions were designed and staged as a way to interrupt the moment when someone looks into the camera to see if it’s recording.

Intervention 1: Acknowledge Recording
My first intervention prototype was a frame for the doorbell camera that explicitly states that the camera is recording. The camera doesn't actually record at all times, but this intervention was intended to capture the moment that people look at the camera to see if it's recording, and instead find this sign.

  • People saw and acknowledged the camera light + sign.
  • I don’t really want to know this much about my neighbors’ activity.
  • When there’s a moment of acknowledgement of recording, how can we create two-way communication instead of surveillance?

Intervention 2: Communication through Surveillance
In this intervention, I ask people to pose for a selfie when they see that the camera is recording. Once they pose, they can push the doorbell button, and I will use the intercom function to tell them that I received it and text their selfie to them.

  • "That's so funny!"
  • A lot of excitement about the moment
  • The process felt clunky, how can I refine it?
  • The intercom provided two-way communication
  • The light seemed like enough confirmation of recording for recognition
  • People's demeanor was more easy-going than nervous
  • The button push was a new interaction, similar to clicking a camera

Intervention 3: Refined Communication through Surveillance
In this intervention, I refined the prototype to be more fun and I ask people to pose for a selfie when they see that the camera is recording. Once they pose, they can push the doorbell button, and I will use the intercom function to tell them that I received it and text their selfie to them.

  • The timing was difficult. I missed the window and had to go back to the recorded video for this
  • This somehow felt creepier than watching because it felt like a closer inspection
  • Automation might make it feel less creepy
  • My neighbor was excited about it

Based on my observations during the intervention process, I pivoted the design towards creating a selfie doorbell camera of my own. These design mockups were based on some key observations:
  • There was a lot of excitement about the selfie moment
  • People's demeanor was more easy-going with the selfie, and nervous with surveillance
  • Watching people take a selfie felt creepy
  • Removing the surveillant party might make it feel less creepy

Once I had a high fidelity mockup, I began prototyping the technological components of the video doorbell.

Prototype 1: P5JS
I coded this prototype using a p5js sketch. Loading the sketch activates a camera with a 5 second countdown, which captures and downloads a selfie with a frame.

  • The selfie captured frame is fun
  • This was easy for people to interact with since they could use their own devices
  • I'm unsure of how to connect this with texting in a feasible way
  • It's interesting that this was a way of networking that still remained private
Prototype 2: iOS Automation
This prototype was made to figure out the automation process of sending a text in iOS.

  • This is its own language and is device-specific so testing was done on my own
  • Very complicated
  • Restricted by iOS allowances
  • It displays the iOS screen, which I don't love
  • Doesn't feel as personal as a ‘human’ text

Prototype 3: Digital Doorbell
This prototype is an integration of the P5JS sketch and an HTML/CSS/Javascript webpage for the doorbell system. This prototype does not have text message functionality.

  • Feels like I’m choosing when to volunteer my information"
  • "Makes me think of visiting your digital space and leaving a trace"
  • They wonder what it would look like linked to an IRL place
  • Sounds might help make it feel more like a doorbell
  • Setup the background with something personal to you - a picture of your house, etc.
  • The language of home, apartment, etc changes. What about space/place?
  • How will different people interact with this in different communication scenarios (fighting, pranking, ringing)?
  • Will it be digital only? Physical? Both?

After designing prototype 3, I addressed my questions by creating potential scenarios and interactions that people could have with the doorbell:

Prototype 4: Digital Doorbell IRL
This prototype links the digital and the physical into one space, so that visitors can use the doorbell remotely or onsite. It also uses the tem ‘place’ instead of ‘house’ to accomodate these different location uses. This prototype has text messaging functionality.

  • “Feels like a gen z pop up version of a doorbell"
  • Feels fun and friendly
  • Camera needs some improvement
  • The download part isn’t difficult but it isn’t intuitive
  • She took a screenshot

Prototype 5: Ding Dong!
This prototype combines design and functionality into a high fidelity prototype. Visitors scan a QR code posted on a door, and then have the choice to ring the doorbell, take a selfie, or both. When visitors ring the doorbell, a text is automatically sent to the resident of the location. Visitors keep their selfies on their devices, and are free to share them however they’d like.

  • Is there a way to make this doorbell shareable and embedable, so that people can make their own doorbells?

InsightsAfter prototyping and observing interactions, I found that making the doorbell both digital and tied to a physical space created opportunities for more non-surveillant communication between people/camera and people/people. During the prototyping process, visitors used the doorbell functionally, for pranking from a distance, and for taking personal selfies.


The design process for this project was very open-ended, which was both challenging and insightful. By using observations from each intervention to guide the next intervention, I was able to gather information and opinions that I may not have gotten otherwise. When I decided that I wanted to make a selfie doorbell camera, I did not think that it would be technologically feasible based on my perceived lack of programming knowledge. When I really put my mind to it, however, I surprised myself with my programming capabilities. This project was truly a culmination of the knowledge that I’ve gained in my first year of grad school - design processes and thinking, prototyping, and creating with technology.

︎︎︎ Interaction Design