SingAlong is a singing app for amateur singers to sing with people from all over the world. SingAlong has a vast catalog of songs across genres and languages, with the world's biggest record labels as partners. SingAlong also has an audio effect feature that allows the singers to adjust the pitch and audio effect and crop the highlighted clips.
Being the first designer in the team, I believe I was also responsible for bringing a UX mindset to the team. As a result, I scheduled a few interviews with people in different positions in the team to seek their expectations for the product. These interviews help me to build a better bridge between the stakeholders and the product.
Sing the app covers quite a few functions and screens, I decided to host a workshop with the product team to know which part of the user journey the team would like to work on and improve first. The way I did is start by visualizing the complete user journey that the user will experience and ask the team to draw out their expectations of customer experience.
After the team mapped out the expected user journey, I asked the team to draw out the experience that they think the current version of SingAlong is providing.
Immediately, the scope of the design becomes clear, as we found that there's a huge gap between the expected journey and the current journey on the picking song experience and the singing experience.
I downloaded all related-apps in the market and categorized the functions they have into two categories. Namely, singing experience and sharing experience.
To better understand how the users are current using the app, I conducted a few rounds of in-person usability testing to observe and interview how the users use the app. As most of our users were teenagers, and they were not very proficient in speaking English, I had to spent more time observing their usage and less time on interviewing them, to get the best results.
After conducting the in-person user researches, I also spent some time to analyse the data that we collected to validate the results we found from the interviews and estimate how many users are facing the same problems.
82% of the users spend 5 mins to find a song to sing
From the research, I found that the users spent an average of 5 minutes and 42 seconds to find a song to sing. Most of the users have to navigate back and forth in the app to find a song that then could finally sing.
Shorter onboarding time leads to higher weekly retention rate
From the data, I also found that, for users that spent a shorter time to onboard the app (Top 25% of the users) tends to have a higher weekly retention rate (Higher than 90% of the users).
92% of the users didn't customize their profile page
Lastly, from the data I also find that the profile page is the page with the lowest engagement rate and 92% of the users doesn't customize their profile page.
From the research, a several goods and bads were identified and helped me to understand the user better.
It takes some time to find the right song
From both the qualitative and the quantitative research, I found that the users often navigate back and forth to find a song to sing. Since many of the company's business goals are related to "the number of sung songs," the company would like to improve this.
A longer and more complicated singing journey
From the observations, we also find that the users are often being trapped in the singing screens. The current user flow forced the user to play the music first, then tap on the record button, and finally adjust the original artist's voice. In contrast, most competitors play music and automatically record the clip when the user starts singing.
Doesn't want to customize their profile page
Lastly, we found that the profile page had the lowest engagement rate. From the interviews, we also heard people saying, "The page is not cool", "Oh, I didn't know I can add my personal info there", etc.
SUS Survey
Lastly, from the SUS survey study, we find the average score of the SUS is just 57.9, scoring a grade of 'D'.
Following the results from the research, I also started to define the characteristics of the users by defining the personas of our users.
Type 1: Amateur Singers - Want to be noticed by the labels
From the research, I found that amateurs singers want to be known. They want the record companies to see them on the platform. Thus, they would like the app to have features that make them sound/look better and boost their appearance.
Type 2: Professional Singers - Want to interact with the fans
On the other hand, professional singers would like to use the app to maintain their fan base and interact with their fans. Thus, they would like to have more collaboration features to meet other singers and sing together.
After the personas were defined, I started to ideate and sketch some ideas based on the personas' needs. At the same time, the company also agreed to redesign the style of the app, which allows me to have the authority to redesign the entire app.
Key Solutions 1 - Visual Hierarchy / Less on brand, more on users
In the new design, I tried to improve the visual hierarchy by logically categorizing the sections, allowing users to find songs, search for songs, and discover random songs easily. In addition, the original design also emphasizes too much on the brand, the gradient colors, and the logo of Sing Along. In the new design, I removed most of the branding elements so that the app's experience could truly focus on the 'Users'.
Key Solutions 2 - Better scan-ability and discoverability
We found that the users are finding it hard to find the right songs to sing from the original design. I improved the scan-ability and discoverability of the songs in the new design by adding a searching function, a recommended songs section, and an artist section. The new design allows users to pick songs by searching, looking for an artist, or choosing our recommended songs.
Key Solutions 3 - Shorter User Journey
In the original design, the user would have to go through at least six different steps until the user could finally start singing. Since the app's main focus is to allow users to sing, I have decided to minimize the steps for this, so the minimum steps are reduced to 2 steps in the new design.
Key Solutions 4 - A more professional profile page
I also redesigned the profile page to make it more professional in the new design. The new profile page looked exactly the same as the artist's profile page and made the action items more apparent.
Key Solutions 5 - New Features
Lastly, the new design also proposed a concept of ranking in the app to compete against each other and have more interactions with other users through the app.
Typography
There are two types of fonts that are used for the brand:Manrope and Inter. Both fonts are modern variable fonts -perfect for digital products, website and apps.
Both fonts are carefully chosen to create a high-end product,app and developer friendly feeling and inspired by SF ProDisplay (the main font of Apple).
Colors
Yellow stimulates nerves and brain, making us more alertand energized. Yellow boosts memory and encourages communication. It’s a color that promotes activity and interaction - just as VDO TOK does.
I invited 9 users in total to test the app. The design was converted into a clickable prototype on Framer so that the participants could use it as if using a real app. All interactions were recorded via notes and camera.
Although the results were only based on nine users, but the SUS score of the new design scores an average of 82.5, getting a grade of 'A'. Indicating that the new design has hugely improved the usability of the app.
• Homepage: Too many CTA buttons, searching function should be emphasized as most people use it, event promotion not needed?
• Picking songs: Not sure if people wanted to see other people singing? Irrelevant things are taking up too much space.
A clearer Call-to-action, allowing users to search songs easily
Some design improvements include making the search function bigger, as we found that most users will start using the app by searching for a song that they are familiar with. A profile image also appears on the top of the screen to make the user more aware of the profile page.
Finding the balance between business goals & users
In the first version of the new design, the song performed by other users was hidden using an Instagram-story-like form. Due to some copyright reasons with the partners, I was forced to redesign the app to match the partner's expectations.
Using Workshops to Align Thoughts
We all have been to an ineffective & inefficient meeting that is not only boring but also unproductive. This was also the case for the first few meetings in this project, as the CEO and the CPO had different ideas on how redesigning the app could help them. So I decided to do a small internal workshop that could gather everyone's ideas and find a problem to focus on. This was much more transparent and efficient than a traditional meeting, as the CEO, CPO and all other people involved could fully express their opinions and draw a conclusion together.
Be ready to use different research methods to get your data
In the testing sessions, I wasn't aware that the participants were not comfortable with speaking in English, as a result, I need to change my research plan and focus on observing them instead. The lesson learned was that, every participant might have a different way to express themselves, some are comfortable with the traditional talk-aloud method, some are more happy with simply just playing around with the app, and some of them would need prompts to help them share the details. Having a good research plan that is capable of handling different cases is essential to success.
Homepage