UX/UI Design for Whale Grace App: an emotion-based music platform

I designed an iOS app concept that has the power of healing to give the body and mind a sustained, long-lasting sense of well-being.

This is my story of designing “Whale Grace Music” – an app that was designed for people who want to reduce depression/stress and build relationships. Whale Grace Music associates with positive social support. It contains recommended songs, radio channels, feeling functions, and community function. People can share beautiful songs with the same preferences or same mood and also can publish their songs.

My Role

This project took place from April 2019 to June 2019. I worked on this project as a User Experience Designer lead. I was part of a small team alongside Zhujia Dong, now studying at Graduate Media Design Practices, ArtCenter College of Design, California. I was responsible for:

  • User Experience Research
  • User Experience Design Concept Development
  • Art Director for Visual and interaction design

The Challenge

Visualize Healing Music

“Healing” has become a popular concept. We need nourishment for soothing of our soul in the online relationship from emotional pressures. With a 10-month timeline, we conducted in-depth research. Combining music therapy theories, we try to engage users and deliver the user experience of Healing music in a more effective and meaningful way.

Design Toolkit

The Approach

Cognitive walk-through

Throughout the project, we conducted academic research on Human-Centered Computing field and user experience design methods. This approach was necessary to understand the music healing process and users’ music preference under social media towards:

  • why people engage with sensitive disclosures on social media
  • why people don’t engage with sensitive disclosures on social media

LITERATURE REVIEW

Through the project, I conducted deeply theoretical research and academic literature review. To be more specific, based on “Sensitive Self-disclosures, Responses, and Social Support on Instagram: The Case of #Depression,” we found:

  1. People can benefit from disclosing negative emotions;
  2. Social network sites could positively offer unprecedented way for emotion sharing (Andalibi, Ozturk, and Forte, 2017).

We then used When, Where, Who, and Why based on 5W2H to design the online questionnaire to target the user group. These people are heavily using the music app to listen to or share kinds of music, and the reason they are doing that.

The Discovery

User-tailored music for healing

Insights from our discovery indicated that an app could help to improve the day-to-day lives of depression through self-healing music.

We discovered that image-based sharing was an essential way for depression users; it was only a two-dimension object. Images are tangible, while music is “more empower to kickstart our imagination, painting inner pictures and inspiring us.”

We wish to use a different approach to ease the lives of depression users. We need to provide an application of self-healing music app that be able to:

  • Recommendation Music Access to resources with a user-tailored recommendation system
  • Share Music List Affordance-related inspiriting through music platform
  • Support chat & Comments networking

Music is more empower to kickstart our imagination, painting inner pictures and inspiring us.

Before starting any visual design, we spend tones of time making the function definition. We designed an online questionnaire to target user groups for understanding music theory and how it affects the user’s thoughts and feelings for recommended songs, radio channels, and playlists.

We did the task analysis and card sorting to created user personas and stories based on user goals and needs.

Using Persona, we call out the users’ pain point even more!

The Framework

Concept Structure First

 

We then created the information architecture (IA) through task analysis and user flow to matching many different people. With the literature (Andalibi, Ozturk, and Forte, 2017) and our user study, we finally came out with the features over the others:

  • find each other
  • seek and provide support
  • create meaning through sharing music
  • solidify identities
  • develop a sense of shared identity

USER JOURNEY & HI-FIDELITY MOCKUPS

After visual thinking on paper and sketching, we then came out with our user journey – the flow chats include the interactive steps of this app and the user interface mockups.

THE VISION

Nowadays, there are so many things that can be associated with ‘Healing.’ For example, the whales, as a highly intelligent animal, can communicate with people with apathy, and everyone also loves their amiable appearance and ethical behavior. In branding our app concept, we chose the whale as a symbol of musical communication and emotional intelligence. Their gentle and sensitive movements can stimulate people to the outside world. Healing of people, the whale is the most useful one than those of psychotherapists.

 

It is similar to music which can relax, soothe and heal the listeners’ hearts and so on. After the user test for our low-fidelity prototype, we adopted this idea, use a cute whale as our icon for this Music APP.

Detailed Design

Visualize the Healing Music

We finally developed and troubleshot prototype during usability testing to check for UI design flaws and establish critique:

  • updated the music catalog to accomplish user pursuit
  • recommendation system as the core experience since it provides information about the arrival and importance of a newly released music to our registered user

The Impact

Result & Takeaways

We helped users through our app include:

  • Updated the music catalog to meet user pursuit. The music instrument catalog allows the users to start listening with a simple icon lists.
  • recommendation system as the core experience since it 1) provides information about the newly released music to our user; 2) helps find each other to seek and provide support
  • created meaning to engage users through sharing music with solidifying identities

Positive social support could be emotional support, esteem, network, instrumental. It means a lot when I read the comment from followers like “I’ve been there before. You will get through as I did before! We can talk if you want~”

– Anonymous Website Visitor