Sneak-peek of SoundIt app

SoundIt

Project Overview

Statistically, 60% of individuals struggle to sing accurately due to issues like vocal muscle control, pitch-matching difficulties, or sound discrimination limitations. Creating SoundIt was a personal thesis project born from this specific challenge. Conceived to offer a helping hand to those who aspire to improve their singing abilities, SoundIt acts as your personal vocal coach.

Thoughts on the problem and challenge statement:

How might I create an affordable solution, so users can continue to motivate their desire to sing?

Goal/Solution

A mobile assistant app that works like Siri and Alexa, replying to singing instead of diction. The user is paired up with an AI vocal coach that explains and teaches each level (E.g. singing DO RE MI), and continues to give feedback to help users improve their skill.

My Role:

Product Designer

User Surveys
& Data Analysis

UX Design & Research

Wireframing & Visual Design

User Feedback

HTML, CSS, Javascript Demo

2D Motion Graphics

I created SoundIt from scratch, from designing all elements to analyzing user testing and prototyping. It all started with an idea.

Growing up, I had an immense passion for singing and dreamt of following in the footsteps of legends like Celine Dion. During high school, I eagerly participated in singing competitions, determined to chase my dream. After a few competitions, I faced rejection in the second-to-last rounds. The judges provided valuable feedback, emphasizing the need to refine my pitch and performance skills.

I practiced at home, but couldn't get the accuracy of what a professional could teach me. Because of the expenses and time needed for a coach, I got discouraged from competing. As I got older, I continued this passion through small events like open mic performances, and started realizing that others had similar issues. I wanted to create something that would let them improve their singing skills without breaking the bank and fitting it into their busy lives. This was my motivation to create SoundIt.

SoundIt is not just an app; it's a testament to the power of turning personal challenges into innovative solutions that benefit others, making the journey of self-improvement more accessible and enjoyable.

Personas

Music is incredibly diverse, so I started by creating personas to figure out who would benefit from this app for vocal improvement. I aimed to reach people of different ages and backgrounds.

The main issue people face with singing is understanding where they're going wrong and how to get better. This could be due to tone deafness or hearing impairments, a lack of knowledge about pitch and rhythm, difficulty with reading and writing music notes, or even mental health challenges that hinder their practice.

To build these personas, I conducted 15 user interviews at various places, from public open mic events to Starbucks coffee shops. The insights from these interviews shaped the personas:
Persona 1
1 of 3 personas

Survey

Why people decide to take or not take lessons (60 survey results)
Survey Results
Improving vocal skills requires dedicated training. Based on the survey results, it's evident that a significant 40% of aspiring singers opt not to take lessons due to the expenses involved, the time commitment, or the effort required. These barriers often deter people from pursuing their passion for singing.
“Even if people don’t learn the technique behind how to sing, you use your voice for the purpose of speech so everyone’s reasonably adept at controlling it. The key thing which separates good singers from bad isn’t so much natural talent, but getting the training to use it in the right way.”

(Hutchins)

Functionality & Acceptance Criteria

Through surveys and user interviews, it's clear that people seek a fast and cost-effective way to improve their singing skills.

I conducted Secondary UX Research, which emphasized the importance of visual success metrics in teaching and training apps. These visualizations are most effective when presented through interactive experiences and games.

Here's a list of functions within SoundIt that showcase these visual interactions and success metrics:

- Interactive Pitch Training Games
- Progress Tracking and Graphs
- Visual Feedback on Pitch Accuracy
- Gamified Challenges and Achievements
‍
  1. Each lesson consists of watching videos or playing a game, save lessons, playlists, and individual videos to view later
  2. A feature to check a personal profile with accomplishments and lessons currently being worked on
  3. Search through a collection of videos by searching keywords, such as pitch, posture, etc

Mood & Accessibility in UI Design

Singing is seen as playful and fun, while teaching can be strict and professional. I kept that in mind when picking the visual design elements and here is the process.

The choice of colours resulted from a mood board created using Pexel images, to represent the words users think of while using SoundIt. These colours did change in the next iterations as the UI was user tested.

Examples:
‍
- "Playful"
- "Fun"
- "Passionate"
- "Motivate"
- "Growth"
‍
Using the app "Contrast" we can see how font and icon colours appear on the background to consider accessibility in design.
Colour Scheme
Colour Use Amount
Blue on Blue ContrastBlue on Yellow ContrastGrey on Blue Contrast

App Development

Using the functionality and acceptance criteria, I user-tested low-fidelity paper wireframes for the position of design elements and button interactions needed to continue to the next step.

Digitalizing these as low-fidelity wireframes using Adobe XD, the prototypes were tested. The final design using Figma applied user feedback into the UI design referred to below.
1st Iteration Login
1st Iteration Login
2nd Iteration Login

User Feedback & Assumption Analysis

Users found the first iteration of high-fidelity wireframes dull and strict, which didn't display an intimate passion for singing.

They wanted to check this app at any time for fun and practice. Stating the need for motivation and an appeal to open the app more often.

JS Code Demo

Above is a demonstration using JavaScript to test out the interactive app function. It was displayed as a physical demo on a computer screen with a microphone attached for users to approach and sing using the mic.
‍
Users heard themselves through visual feedback displaying accuracy of the notes sung. This encouraged users to sing louder or lower with more attention to their sound, showing that they can practice improvement in pitch, rhythm and more. With the display, I could conclude that the visuals assist users' awareness of their sound and help them remember through practice, the retention of the note they were singing.

As this was a demo, it was not a functional app from start to end but showed one part of the app performing. I later took this information to see assumptions made for the needed development of this app.

Results/Conclusion

Creating an idea from scratch was an adventure. I went through ventures of brainstorming, editing, combining, and designing this idea of a vocal coach app to find out the UX assumptions made for accessibility and navigation.

A few of my conclusions were:

WORK

Featured Case Studies

SoundIt
ux research, PRODUCT DESIGN, UX/UI Design
Navigating new brand identity in marketing for a small business
LEARN MORE >
NUMI
Web ReDesign & Evaluation, Visual Design
Exploring a fresh design for an e-commerce website at a startup.
LEARN MORE >
VISO
WEB REDESIGN, Social Media, UX DESIGN
Navigating new brand identity in marketing for a small business
LEARN MORE >
Based in Canada. Available World-wide.
© 2022 ALL RIGHTS RESERVED.