Project Overview
Worries surround us every day. However, as time passed, we always realize how trivial those problems are in comparison. Worry Capsule Tree is an interactive installation that stores people’s current worries and sends them back in the future, thus allowing its users to retrieve their previous worries and revisit the past selves.
My Role
Interfaces Design / Front-end Development / Animation Design / Physical Computing / Fabrication
What is Worry Capsule Tree?
Video footage by: 
Daniel Benyi (https://www.danielbenyi.com/)
Xiran Yang, Hau Yuan

Music credits:
Ambiance guitar X1 - Ambiance music track by Frankum & Frankumjay.
(https://freesound.org/s/405453/)
The Idea - Why we made it?
The original idea of Worry Capsule Tree comes from my desire to release daily stress by keeping my anxiety into something out of my head. After I talked to my collaborator, this idea of telling and storing worries reminded her of time capsules, which help people store memories that are not accessible until a long time later.
Both of us liked the concept of storing current anxiety and retrieve it in the future. It, on one hand, helps release the stress we have now, and on the other hand, also provides us with a chance to re-visit the past selves and see how much we have overcome and grown.
Since we decided to build something that deals with emotions and memories, the questions of “how would the users best communicate with this capsule” and “how do they emotionally engage with the device” becomes very important.
These questions triggered us to first think about the appearance of our device.Our first thought is the image of a tree. Trees have the ability absorb substances from the environment and convert it to nutritious fruits. We think it’s a metaphor for transforming people’s anxiety to their assets in the future. Therefore, we decided to build a worry capsule tree which can respond to the users and store their worries.
How do users interact with the installations?

Interactions Illustration

Experience Flow

Experience Flow 

Steps Elaboration
In the following section, I would like to elaborate the details and logic behind every step. In the illustrations below, the left side is the user interfaces on the computer, and the right side is the lighting status of the tree installation. 
 Step 1 – Start
 Step 2-1 – Say “Hello” to trigger next step
In this step, users have to say “Hello” to go to the next step. The purpose of this stage is to let users know the microphone in front of them is part of the interaction. By doing so, users would know where and how to use the voice input in the recording process later.
 Step 2-2 – The triggered status
After users say “Hello,” the screen will reply “I am listening” to them. Besides, the tree installation will change its color to yellow as a response.
 Step 3 – Input user’s name
To ask the information form users without letting them feel like their privacy are invading like conducting an online survey, I anthropomorphized this tree and created conversations between the installation and users.
Apart from this purpose, user’s name would appear in the following conversations to increase the intimacy and engagement of the experience. The following is what the installation says to users:
“Pardon me for not asking your name! How may I address you?”
 Step 4 – Read the introduction to the tree
The first, second, and third steps are an opening which aims to allow users dissolve into this experience. The fourth is the stage gives the whole context and idea of this tree. The following is the introduction:
Would you like to travel back in time?
In times of introspection, do you ever realize how trivial those problems are in comparison?
Are you under a lot of stress? What’s worrying you now?
Please tell me in one sentence and allow me to carry your anxieties in safekeeping.
Perhaps in the future, you may want access to them.
Once you are ready, please click start to record.
Step 5 – Start to record
At the end of the introduction, the “start to record” button would pop-up. When users feel ready to talk, they can click the button to start.
 Step 6 & 7- Recording and Stop Recording
After users click "Start to record", the screen would display the recording animation and the color of the tree will turn into red. When users finish recording, they can click "stop" button to stop
 Step 8 – See the worries they said in text format
Users will see what that said and the current date and time.
 Step 9-1 – Upload to the tree
When users click “upload to the tree,” the worries would “conceptually upload to the tree. The screen would show the animation first, and then the LED strips would light up gradually from the bottom of the tree to the top, which aim to convey an uploading image.
 Step 9-2 - Uploaded
Eventually, one of the "capsules" one the tree would light up to symbolize that the worries from the user have been stored in this tree.
 Step 10 – Input user’s email
After users enter their email and click finish, their information and the worries they said will be packaged and store in the database. In the future, this tree will send the worries back to the user in email.
The structure and materials of the installation
The base of the structure consists of a wood panel and three legs. The space between the wood panel and the ground allows us to manage and manipulate the circuits and microcontroller beneath it efficiently. We chose copper pipe as the spine of the tree structure. Apart from giving rigidity to the tree, the shallow space in the middle of the tube can hide and concentrate all the wires from top to the bottom of the tree.
The light source arrangement
There are three RGB LEDs, six White LEDs, and three Neo-Pixels(each has 30 pixels) on this tree. The positions are shown as follows:
 Technologies and Tools
How do we transfer the spoken language into text?
We used p5.speech library as our voice recognition tool.
How do we store users’ information in a database?
We used M-Lab’s database server. My collaborator, Xiran Yang, used HttpPost() function in p5.js to push information (voice text array) form front-end into the database. 
How do we develop the user interfaces?
We used p5.DOM library to develop the user interfaces and assign each DOM element a callback function to execute a task. Considering the manageability, we decided to use animation software to make all the animations instead of hard coding all the animation. Otherwise, if we want to change the animations or any details such as wording and timing, It’s relatively more comfortable to replace them in animation software. As a result, we used Adobe After Effect to make the animations.
How do we control the lighting?
We used Arduino mega 2560 as the micro-controller to control all the lighting behavior. 
How do we connect the computer to the Arduino?
We used p5.serialport.js library to do serial communication between the computer and the Arduino, which allowed the laptop to trigger the tree to change its behavior. When the state of the tree needs to be converted, the computer will send one-byte binary (a number) to Arduino, and then Arduino would execute the code of different stages.
Design & Development Process
Ideation & Strategic Phase
Key finding from the play testing
After we had the notion of "Worry Capsule Tree", we used a simple cardboard prototype to conduct a play testing. The purpose of the play testing was to collect feedbacks for the idea and figure out the suitable interactive ways between the users and the installation. When it comes to conveying the worries, there are two ways: writing or speaking. In order to know which way makes people feel more comfortable to interact with the tree, we did a testing.
Interestingly, the play testing showed that 50% testers chose writing as their way to convey their worries and the other 50% testers chose speaking. The main reason for people choosing writing is privacy. Saying they don’t want to let others hear their thought in public. On the other hand, the other group said that is easier and more intuitive to just speak the worries out. Besides, one of the testers said that when he is writing something, he has to care about the grammar and think about the structure of the writing. In other words, recording the voice is more realistic than writing down the words.
Eventually, we decided to use voice as our input because we think it is more engaging in terms of interactivity. We want to create an illusion that the users are actually talking to the tree.

Cardboard Prototype

Strategizing the development process
After finalizing the idea and the interaction ways, we started to think about how to realize and strategize the development process. Conventionally, most of the development process start from design and then transfer it into code. However, in this project, some of the programming process and design process were conducting simultaneously because of the tight schedule, which are all demonstrated on the Design & Development Process above. After we finished every single part of it, we combined all of them together and conduct user testings to refine this installations. 
Design Sketches 
Interfaces Mockups
Lighting Behavior Simulation
Back to Top