Serene!, an iOS application, was inspired by how much of a difference music can make. According to studies, music therapy seems to reduce depressive symptoms and anxiety, and helps to improve functioning (e.g., maintaining involvement in jobs, activities, and relationships). Serene! is here to do exactly that: lift its user's mood and maybe save a life one day through music therapy.

Serene! is targeted at anyone who is going through a tough time. An adult, an elderly, a middle or high schooler, or even a college student like me.

What it does

Different styles of music can have a significant effect on a person's mood therefore Serene! provides different selections of music depending on how the person is feeling. She asks what its user is feeling and after selection, the user is taken to a music room where they are given a motivational heads up from Serene and a play button so whenever the user is ready they can press the button to begin their music therapy.

In each music room, there is an option provided to view some of the major hotlines that exist if the user needs to reach out or if there is a case of emergency.

How we built it

I mainly used Figma to make the UI/UX design and by incorporating peaceful yet bright colors for our users. I also used a design from the Blush plugin who is Serene herself and her peers who you will eventually encounter as you go through the app. I also tried to incorporate the music in the Figma prototype by using the Anima plugin and some basic HTML, CSS, and JavaScript.

Challenges we ran into

While I tried my best to incorporate the actual music into the Figma wireframe by using mp3 audio files, there were some complications with the embedding tool and layering objects in the Anima plugin so the music wasn't able to make it into the working prototype.

Accomplishments that we're proud of

Serene and her always-smiling face for her users. Also, the UI/UX design as well since it yields the user a safe, bright, and comfortable place to have music therapy. And the option to always have the hotline numbers at hand.

What we learned

While I already knew about plugins I got to try more of them since I had never used the Blush and Anima plug-in before. I also learned how to use HTML, CSS, and JavaScript to play audio/mp3 files.

What's next for Serene!

Serene! will be built as an iOS app that will have many more features like choosing what your virtual assistant looks like, more mood selections, having more music selections, and a direct way to reach the hotlines provided.

Built With

Share this project: