App Design

Redesigning a singing app to improve the user experience for singers.

My Role: Product Designer
Timeline: 5 Months
Team:
I worked closely with the CEO, Product Manager, and 2 Marketing Managers.

sing along / app design

a better karaoke app for singers

Brief
Sing Along aims to connect people through their love of music. Just as Spotify did for the music industry by offering a legal alternative to illegal download sites, Sing Along aims to revolutionize singing in the same way.

Supported by labels such as Warner Music and Sony Music, Sing Along uses licensed recordings so that all involved parties - artists, songwriters, music publishers and record labels receive the compensation to which they are entitled.
Role
UI/UX Designer
Project Context
2019 - 2020
Sing Along AB, Stockholm
Tools/methods Used
User Interviews
Prototyping w/ Sketch
User Testing

Vdotok / web & rwd design

No selfies, no memes. Just things you’ve made yourself.

VdoTok develops real-time video and audio API for developers. Within a few lines of code, developers can embed video call technology in apps, websites, or anywhere that need a beautiful, custom video chat.

VdoTok aims to create a user-friendly platform, that enable anyone to build a fully customisable video call software in an affordable price.
Role
User Experience
Visual Design
Prototyping
User Testing
Business & Marketing
Project Context
2020 - 2021
Tools Used
Figma
Anima App

Intro to SingAlong

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.

Design Process

Being the first designer in the team, I started the design process by talking to different team members to understand their expectations and concerns on the app to keep it in mind while redesigning. While talking to the team, I also led a small workshop with the product team to discover the project's scope. Then, I conducted a few rounds of user research to understand the user and redesigned the app based on the research data.

Problems & Challenges

Being the first & only Designer in the team 🥶
Being the first and only designer in the team means that there are no documents or design files for me to read, and I have to build the foundation of design for the team. A few things that I did were to play around with the competitor's app to understand the market, schedule meetings with team members to understand their expectations, and host workshops to align thoughts.
I can't speak Swedish and the users can't speak English 🇸🇪
Another challenge that I faced was that since our users are mostly teenagers and are not fluent in English, it makes it harder for me to do user research. What I did, in the end, was to do more observations, rather than interviews, so that I could chat with the users about a specific action that the user performs and make it easier for the users to express their thoughts.
Design with Constraints 😫
As the company partnered with a few big record companies and they are quite strict with many copyright details, it sometimes makes it difficult for me to design the experience better as the constraints limit me - What I did was simply embrace the constraints, and try to work closely with the CEO to make sure that the design aligns with the constraints.

Table of contents

01 Knowing Expectations

02 Understand

03 Define

04 Ideation

05 Prototype

06 Test & Improve

Knowing Expectations

Chat with team members to understand their expectations and concerns about the app

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.

A visualized notes of different team's expectation

Run a workshop with the Product Team to define the scope of the design

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.

The "expected" user journey that the team would like the users to 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.

The expected journey vs the current journey

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.

The gap between the expectation and the current status

Understand

Competitor Analysis: Playing (Singing) around with different apps to understand the market

I downloaded all related-apps in the market and categorized the functions they have into two categories. Namely, singing experience and sharing experience.

The list of downloaded apps and the main findings from the analysis

Conducted 16 usability testing sessions and received 50+ survey results in just one month

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.

Observing the user using the app and singing

A SUS survey that collects the user's experience with the app

Data Analysis from beta-users

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.

Main Learnings from the research

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 visual journey of the navigation

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.

SingAlong's current singing journey

Competitor's singing journey (everything starts immediately)

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.

Problems with the Profile Page

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'.

SUS scale

Define

Two user personas are identified

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.

Persona of amateur singers

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.

Persona of professional singers

Ideation

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.

Initial Brainstorming on the design

A few sketches of the screen

Prototype

First Design Iteration

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'.

Better Visual Hierarchy

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.

Allowing users to find songs easier

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.

Reducing the three steps singing journey to one step

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.

It makes the profile page more like a professional profile and straightforward for users to add descriptions and adjust settings.

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.

Allowing users to add "Intro Video" to speak to the fans in the clip.
Also separated the "Share with Public" and "Save Privately" buttons to emphasize sharing publicily.

Allowing more interactions and competitions in 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.

Test & Improve

Another round of testing with 9 users

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.

SUS Survey Results

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.

User Feedback

• 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.

Improvements

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.

Made the search function larger so that the users can search for songs easier

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.

Improve the picking song experience to match partner's expectation

Final design Overview

What did I learn?

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. 

Learn more about how I designed and developed an AR app for a graveyard that got funded by the government

Read Next Case Study

Homepage