Nov 2023 - May 2024
Project Duration: 6 months
Position: UX Designer
Other Team Member(s): Mazin Abubeker (Developer)
Tool(s): Figma, Miro, React
How might we create an efficient way for avid music listeners to find music that aids their mental health?​
​Develop a third-party app that connects you directly to Spotify's API, which a user can use to input their daily emotions and preferred genres to generate playlists.
About
What is TheraSonic?
Problem Statement
What problem is TheraSonic solving?
Solution
How did TheraSonic solve the problem?
Our music recommendation app will let users find music to boost their moods. Built around the user's taste, with ease and simplicity, our playlists will affect busy, casual and passionate music listeners alike.
By allowing users to connect to Spotify and select their emotional states and genres they can effortlessly build playlists that can be exported. We measure effectiveness by tracking monthly users and the amount of songs or playlists generated.
Many people struggle with stress in this day and age. Reportedly, 67% of people between the ages 18-24 experience high levels of stress. They also struggle to find tools that help manage their stress. If a user downloads TheraSonic, they then can find music recommendations that both suit their taste and help alleviate their stress.
Users that download TheraSonic will receive a premium music recommendation app experience that is streamlined, works with Spotify, and above all else, assists the user in managing their mental health.
Step 1
Empathize - User Research & Competitive Analysis
To get a feel of what direction I wanted to head in for TheraSonic, I spent some time researching direct and indirect competitors of TheraSonic, including Spotify, Gnoosic, last.fm, YouTube Music and Pandora.
This process illuminated some key decisions that informed my design process, including integrating mood based music recommendation. There is a gap in the market when it comes to automated, yet manually filterable playlists. which TheraSonic hopes to fill.
​
The data showed that our target audience should be 18-24 year old's from the US, specifically. There was also sufficient representation to consider ages beyond 24, up to 44.
The idea for "music therapy" came from a realization that many music apps don't prioritize mental health and user control. This and many other decisions led to the streamlined music therapy/music recommendation app you are currently learning about.​​
Step 2
Define - Personas & Journey Map
The next step in the UI/UX design process, after doing research, is identifying who this app will appeal to.
TheraSonic aims to target the same audience, but also expand to include people up to their mid-40s. This demographic is often overlooked in app design even though they represent a large part of working-age people that experience stress.
Using this user persona, I was able to determine that a "quick mood booster" was the main focus of TheraSonic.
After I figured out who was going to use our app, I was able to start mapping the journey a user would go through when experiencing TheraSonic.
The major steps I identified were DOWNLOAD, LINK, GENERATE, PUSH and LISTEN. I came to this conclusion after referencing my early lo-fi wireframes. My early designs and other apps focused too much on having too many clicks and features that made the app experience feel bloated.
Therefore, TheraSonic was designed to be quick and efficient so people can find new music and feel better as soon as possible, in as few clicks as possible.
Step 3
Ideate - User Flow & Storyboards
User flow
After defining what TheraSonic was going to be, I now had to figure out how to make a streamlined user flow. After a couple iterations, I noticed that the process I initially wanted required too many clicks.
After some pruning, I settled on a flow that required the least amount of clicks and pages. In reality, you only have to make two sets of decisions to complete the main music recommendation user flow in TheraSonic.
This is the first big picture storyboard I made to sketch out what I wanted TheraSonic (previously named REC) to achieve at a macro level; which was to provide personalized music playlists to someone in a hurry.
The next step was to make a close up storyboard that breaks down the precise tasks, the micro tasks, TheraSonic needs to achieve in order to provide users with accurate personalized music recommendation.
Step 4
Prototype - Wireframes & Visual Design
I now had to start drawing paper wireframes to bring my storyboards to life. This requires a "bare bones" approach; essentially putting down simple components on a page to brainstorm different layouts. These are the layouts I came up with. You will see later that I ended up using very little from these sketches to inspire my final design.
Login
Feelings
Genres
Playlist
Home
As you can see, the designs I ended up with did away with a lot of the fluff in my paper wireframes. This is the step in the design process that made TheraSonic feel achievable to me. I decided to keep the layout, buttons, and icons simple and minimalistic, giving the project a seamless look.
Next, I came up with the design system I wanted to apply to my work to make it look more professional and usable. I settled on variations of green and the Inter font family, a combination of design elements that represent nature and balance, which is a natural representation of the relationship between music and mental health.
.png)
.png)
.png)
.png)
Finally, we are at the high-fidelity (hi-fi) prototype, the product of combining my lo-fi prototype and my design system. As you can see, these designs are much more polished and display what a final version of what TheraSonic looks like. This is where my friend Mazin steps in. He's a full-stack web developer and software engineer.
Step 5
Test - Product Testing & Feedback
To your left is a Figma prototype that shows you the main user flow and the proposed functionality of the rest of the apps features a condensed and non-functioning version of our app. Clicking through this will give you a good feel for what TheraSonic is trying to achieve, which is to give you a quick and efficient way to find new music based on how you're feeling.