A website that welcomes people to talk about their feelings.

Title Details
Role Web Developer & Designer
Tools front-end,Javascript, HTML5, CSS, Github, Heroku, p5.js, p5.speech
Length 2 days
Project A website that welcomes people to talk about their feelings.
Features Speech-to-text, audio-visualization

Play it on your desktop Chrome.

Problem Statement

How might we create a welcoming space for people to talk about their feelings during COVID-19?

Goal

To build a personal sanctuary for people to talk about their feelings during hard times. COVID-19 pandemic is just one of the hard times we are and will be going through.

Research

This is a passion project since I want to make people feel happier during this depressing pandemic. People are feeling more sensitive and even refer to their living space as ”house arrest”, “prison”, “solitude”. (from my encounter on social media) I wanted to create a private and safe space for them to talk about their feelings without recording any of the data.

Background

We are undergoing a difficult time right now in 2020 since the outburst of the COVID-19. The global pandemic is causing so many distress in us. I have been keeping myself busy with movies, books, and cooking while conducting social distancing to prevent the spread of the virus for over two weeks then.

I felt the urge to create something so that people can talk about their feelings.

I hope through this, you can start a conversation with yourself and look within.

  • What is something that we can adjust ourselves to?
  • What are some of your thoughts in their pure form?

Maybe, this could be your personal sanctuary while exercising social distancing.

Ideation

The idea of this project came when I was about to write in my journal for the first time in a long time since January 2019. I wanted to write down my self-reflections as I get to spend more time with myself.

When I was about to get my journal, I thought writing takes a long time compared to talking. Why don’t I create an audio diary that I can keep to myself as my journal instead?

So I spent two days writing this program since I knew it would benefit others to get through this hard time. Also, I appreciate talking more because of COVID-19. When I am spending time with myself, I barely talk. When I have zoom meetings, hearing myself talk feels strange. I want to salvage the lost social connections with myself through this audio diary as well. It makes me so happy knowing that this will benefit people alike. The whole globe is a community now and we are all in this together. It is during this moment that I realized how important social interactions are in our lives.

Development

I used p5.js and p5 speech library to create an audio diary with some visual twist.

For the color palette, I selected the pastel color to create a sense of calm and positivity.

assets/audio-diary/color_palette.png

Interaction Flow

For the user interaction, I created the experience flow as below:

assets/audio-diary/interaction.png

Testing

  • I did several iterations of the pastel color palette as well as the shapes of the generated items.
  • Before I introduced the different shapes and fonts, it seemed quite bland to me. I then tweaked around to achieve the final design.

Solution

Please open it on your desktop Chrome.

Check out my detailed documentation here.