User feedback, app improvement and other shenanigans: frame of MIND

Logo of my application.
Logo of my application.
Logo of my application.

As an alumni of Juno College, I got to create some amazing websites and applications. Although the quantity is important, the quality is what truly makes any app or website unique, special, and fun to use. So join me on the journey of making my React.js application better and more enjoyable!

What is frame of MIND?

This project was inspired by the work of the amazing and incredible developer Olga Filiushkina and their beautiful project Analog.

A frame of mind implies the mood that you are currently in.

This application allows you to express it.

In a nutshell “frame of MIND” allows users to let everything out of their chest.

The landing page of frame of MIND.
The landing page of frame of MIND.
The landing page of frame of MIND.

The user is presented with a choice between five emotions (Anger, Joy, Sadness, Tranquil, and Emptiness). After the user picks one, they are prompted with a field for the name (not required), a text area where they type out what they are experiencing at this moment, and a music player with a melody based on the emotion to enhance their user experience. They can share their “letter” with others by posting them but again, they don’t have to.

To build the application, I’ve used React, Firebase, SCSS, HTML5, and VSCode for coding as well as Adobe Photoshop to create the wireframe.

What is the target audience?

Since I did not apply any tracking for swear words as well as I cannot guarantee that nothing disturbing will be posted there, the application is intended to be used by people older than sixteen years old who want to let it off their chest and carry on with their day (or night).

What were the challenges?

The overall challenge was to build a functioning app within a week. Being in school for 40 hours a week plus coding in the evenings after classes for over five hours a day can get pretty tiring. I could feel the monster named Burnout slowly, creepily, eerily crawling behind me. And this is when I was saved by my superhero called Step-Back-And-Relax-For-A-Bit.

To put all jokes aside, one of the biggest challenges I’ve faced was displaying the correct audio track based on the emotion. To make it work, one of the mentors taught me about switch statements and how to utilize them.

Then I created a different component, MusicPlayer, that is imported in the App.js file. To connect the two pieces I used the magic of props to pass the needed name of the chosen emotion. Once the MusicPlayer was imported into the main file, I customized it and added an attribute value that uses the state and emotion choice:

Screenshot of the user input field part in the App.Js with the MusicPlayer component imported.
Screenshot of the user input field part in the App.Js with the MusicPlayer component imported.
Screenshot of the user input field part in the App.Js with the MusicPlayer component imported.

Then through props.name and switch statements I was able to put the correct audio track on the page. In this case if the actual emotion name retrieved from the userChoice is equal to one of the cases listed in the statement, then it will display the proper audio track. Although the statement is a bit lengthy, it did its job and the audio is now displayed without a problem!

Screenshot of the GitHub repo with the MusicPlayer component.
Screenshot of the GitHub repo with the MusicPlayer component.
Screenshot of the GitHub repo with the MusicPlayer component.

What was the user feedback?

As a part of the product life cycle assignment, I created a Google form and asked my friends and family for feedback. I asked some questions regarding the app usage (whether it was clear or unclear), what bugs the user encountered if any, what features were least useful, what features I should add, etc.

In summary, I was glad to see that the app is easy to use and there were no bugs! As for features, I got some feedback on using too many animations and tweaking the navigation to add more seamlessness.

However, when it came to the question about what additional functionality I could put in the app, I got an enormous number of recommendations! Some of them I already thought about adding but others were new to me. Here is the list of them in the order from what I will be working on first to the last:

  1. The ability to delete the letter;
  2. Organize letters by emotion type;
  3. Add a favorite feature;
  4. Add a comment feature;
  5. Look into user authentication;
  6. Add functionality to allow the users to track their mood shifts over the week/month;

What insights did I gain?

Looking at my journey with this application, I’ve learned how to apply proper time management to juggle multiple tasks at the same time. Based on the feedback I’ve received, I was impressed with my ability to error handle small details and I was glad to see that some people are interested in me evolving this application further.

It might sound cliche, but I have learned so much over the past two months that it’s insane to even think about it. Working alongside talented developers from cohort 26 and amazing and kind mentors at Juno is an unforgettable experience.

Image for post
Image for post
Photo by Drew Beamer on Unsplash

I want to thank everyone who made this article possible. Thank you to everyone who has believed in me and supported me so far. Huge shoutout to Sui, Olga, Kay, Lizz, lovely Coronahort 26, Juno College mentors, my friends, and family. It wouldn’t be possible without you.

Спасибо. Thank you. ありがとうございます。

Written by

Front-End Developer | Juno College alumni | Anime fanatic and Video Games enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store