Community content tool

In 2014 we were tasked to solve the bottleneck for growing the Smule song catalog by allowing our web users to upload backing tracks & lyrics for others to sing in the native apps.

For “Group” recordings, we support up to 3-6 singers.

For “Group” recordings, we support up to 3-6 singers.

lyric editor

In the Smule app, users can choose between “Duet” and “Group” recordings where they can assign lyrics to defined ‘singing parts’.  To support this experience, we followed a spreadsheet-like selection paradigm for speed & intuitiveness. 

 
By default both ‘singing parts’ sing each line, so we balanced representing that default state while also encouraging users to assign unique lines per part.

By default both ‘singing parts’ sing each line, so we balanced representing that default state while also encouraging users to assign unique lines per part.

To represent the ‘line length’ and the screen limitations of the native apps, we used a monospace font so we could clearly call out potential issues and guide users to completion.

LYRIC timing tool

‘Help’ modal highlighting keyboard shortcuts

‘Help’ modal highlighting keyboard shortcuts

A requirement for a karaoke experience is for the lyrics to scroll in sync with the music.

We were fortunate to be able to leverage keyboard keys to aid the experience and make it feel appropriate for the platform.

The timing paradigm is to set ‘timing’ flags at the beginning of each line in real-time.

The timing paradigm is to set ‘timing’ flags at the beginning of each line in real-time.

 

We looked at the few available competitors for common paradigms & features— and from there we iterated based on user interviews & surveys.

community powered

A social feedback loop was important to surface quality content and encourage other users to add to the song catalog. 

From user interviews we learned a lot of interesting motives for uploading songs to our catalog — from uploading their own productions to translating lyrics to other languages.

As of 2020 there are more than 3.1 million songs in the Smule catalog.

project ARTIFACTS

  • 'Group Parts' Flow - working within the constraints of how our content was authored, we created a second experience to designate ‘group singing parts’.

  • 'Error Handling' Flows - a document that details how to handle error cases when verses were not assigned a ‘singing part’

  • 'Master Flow' (app-specific changes) - this document details the in-app changes (wireframes to mid-fidelity) to support the 'community content tool' (i.e. crowdsourcing & exposing user ratings, changes to the songbook rows, etc.)

Engineering: Jonathan Moody, Ran Xie

Visual Design: Oscar Corral

UX Design: Chuck Espeleta

Product: Dean Schaffer