Xiran Yang


an interactive tree that listens, responds and stores your worries

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 listens and stores people’s current worries and sends those back to them in the future, thus allowing its users to retrieve their previous worries and revisit the past selves.

The project contains two parts, a tree that the user can talk to and a web application where the user can refer to as a guide.

 project overview



Collaborated with Hau Yuan

My role - Voice Recognition | Database Server | Physical Computing | Fabrication | Front-end Development | Experience Design


ITP Winter Show, New York 2017. 12. 17 - 2017. 12. 18

Maker Faire, New York 2018. 09. 22 - 2018. 09. 23


Design hand sketch | sketch | After effects | illustrator

Coding Voice Recognition (p5.speech.js) | Database Server (M-Lab) | Interface (After Effects/p5.js/Sketch) | Serial Communication(Arduino)

Physical Computing Arduino MEGA | USB microphone | Jumbo RGB LEDs | Neo-pixel RGB Lights

Fabrication Soldering | Laser Cutting

Screen Shot 2019-06-11 at 7.33.49 PM.png




Screen Shot 2019-06-11 at 7.33.49 PM.png

 Physical tree design


 website interfaces




  1. Brainstorming

  2. Make design plans


  1. Test with users to decide user behavior

  2. Develop the interactions


  1. Create different possible designs

  2. User testing with the prototypes and develop tree design


  1. Physical computing

  2. Programming

  3. Fabrication

Screen Shot 2019-06-11 at 7.33.49 PM.png


The original idea of Worry Capsule Tree comes from one of the creators Yuan’s desire to release daily stress by keeping his anxiety into a safe place. After Yuan talked to me, this idea of telling and storing worries reminded me of the time capsule, whose function is to help people store memories that are accessible a long time later. 

Both of us liked the concept of storing current anxiety and retrieve it in the future. On one hand, it helps release the stress we have now, and on the other hand, it provides us with a chance to re-visit our 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 to absorb substances from the environment and convert them 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. This has brought us to the very first stage of our design.



In order to know which way makes people feel more comfortable to interact with the tree and release their anxiety, we did user testing with 10 people.

Based on our research, more than half of the testers prefer speaking, in particular murmuring to the tree because they believe that creates an intimate relationship between them and the tree.

We finally decided to create an interactive capsule tree which can listen to its users and store their worries.



Once we decided the main interaction behavior, we built two fast tree prototypes. We ask different users’ opinions on our designs. We decided to follow my (Xiran’s) proposal, a more sculptural design because we believed it looked more interesting and can create more intimacy between our tree and the users. We adapted the design later and finished with the final outcome as shown in the video.




Voice recognition

In order to have the tree “understands” what the user is talking about and make it respond to the user, we used voice recognition to translate the speech of user into text.

The voice recognition is done by p5.speech.library which can translate audio input into text.

Store information in a database

To store the worries in the tree, I used M-Lab’s database server. Basically, you need to register an account at M-lab, create a database, then a collection. Each account will have an API key, you will be able to use that API key to access your database, upload data and view all the documents you have sent to that database.

Easy Tutorial on how to use M-lab to create database and upload data

M-lab’s tutorial (Also easy to follow)

These two websites provide some very good tutorials on how to set up a database at M-Lab and store data into it.

While M-lab’s own sample code is written in Jquery, I used p5.js to do the same thing. I majorly used HttpPost() function to push information (voice text array) into my database.

User Interface Programming

All animations are done by After Effects and are embedded and organized into the interface using p5 DOM library.

Serial Communication

To add all the light effects to the tree, we used p5.serialport.js library to do serial communication. Basically everytime when we want the computer side to trigger the tree to change its behavior, we send one-byte binary (a number) from the computer to Arduino by doing p5-to-Arduino serial communication.


We used Jumbo RGB LEDsNeopixel RGB LED strips as well as some white Jumbo LEDs.

We first tested all the behaviors of the lights by just doing Arduino, using some switches and a sound sensor.

After we made sure that everything worked well on Arduino, we used serial communication to allow the computer to control the behaviors of all lights.


We created the physical tree using laser cutting and soldering techniques.