Buddy Study Online

Need someone to study with but want to stay anonymous? Buddy Study Online provides a space for all students to study while chatting through a cute avatar without the pressure of revealing your face.

Comment

Inspiration

  • The pandemic makes socializing with family, friends, and strangers, more difficult. For students, turning on your camera can be daunting.

  • Buddy Study Online aims to create one thing: a safe space for students to meet each other and study.

What it does

  • The product allows users to enter study rooms and communicate with each other through an avatar. Each study room can have titles indicating which subjects or topics are discussed.
  • The avatar detects their facial expressions and maps them on the model. The anonymity lets students show their expression without fear of judgement by others.

How we built it

  • Frontend - React, React Bootstrap
  • Backend - SocketIO, Cassandra, NodeJS/Express
  • Other - wakaru ver. beta, Clourblinding Chrome Extension
  • With love <3

Challenges we ran into

  • wakaru ver. beta, the facial recognition and motion detection software, is difficult to get right. The facial mapping wasn't accurate and motion detection was based off colour selection. We tried solving the colour selection issue by wearing contrasting clothes on limbs we wanted to detect.

  • In the end, the usage of gloves was a good choice for detecting hands since it was easy to pick ones that were colourful enough to contrast the background.

  • Cassandra had a steep learning curve, but by pulling from existing examples, we were able implement a working chat component that persisted the chat state in the order of the messages sent.

  • Figuring out a visual identity took quite a long time. While we had laid out components and elements we wanted on the page, it took us many iterations to settle on a visual identity that we felt was sleek and clean. We also researched information on multiple forms of colourblindness to aid in accessibility on our site which drove design decisions.

Accomplishments that we're proud of

  1. Facial recognition & movement tracking - Although rough around the edges at times, seeing all of these parts come together was a eureka moment. We spent too much time interacting with each other and with our new animated selves.

  2. Live feed - It took us a bit to figure out how to get a live feed of the animated users & their voices. It was an accomplishment to see the other virtual person in front of you.

  3. Live chat with other users - Upon a browser refresh, the chat history remains in the correct order the messages were sent in.

What we learned

  • We learned how to use Cassandra when integrating it with our chat system.
  • Learning how to use Adobe xd to create mockups and to make our designs come to life.

What's next for Buddy Study Online

  • Voice changing (As students might not feel comfortable with showing their face, they also might not be comfortable with using their own voice)
  • Pitch Buddy Study Online to university students with more features such as larger avatar selection, and implementing user logins to save preferences and settings.
  • Using this technology in Zoom calls. With fewer students using their webcams in class, this animated alternative allows for privacy but also socialization. Even if you're working from home, this can offer a new way of connecting with others during these times.
Share this project:

Updates