Offstage

Offstage is a webapp I designed + developed for promoting underrecognized musicians through a bracket-style competition. Users can enter songs from musicians (including themselves) that they feel deserve more exposure, vote on their favorites, and see who wins it all in the end.

This side project is different from my past ones because I decided to actually build and ship it after I finished the designs. The site is built with Ruby on Rails with a PostgreSQL database and the Spotify Web API through the 'rspotify' gem.

Focus

Full Stack Development

Tech

Ruby on Rails, Spotify API

Date

Mar 2020 - Present

Identifying an Unaddressed Need

Coming up with project ideas these days can be hard because it feels like there are products and apps for every need in every niche you can think of.

The idea for Offstage came to me after seeing YouTube and SoundCloud comments by small musicians asking for people to check out their music. It occured to me that there isn't really any good, structured way for small musicians to get exposure.

Common comments on popular SoundCloud songs

Offstage aims to address this issue by empowering small musicians. They can enter one of their songs into a bracket-style competition where listeners can vote on them head-to-head. This way, artists get exposure, and listeners get to discover new music they wouldn't have found otherwise. The competitive aspect of it serves as a way for listeners to filter through the noise and find some truly talented but underrecognized musicians.

Sketches

As usual, I started with pencil and paper as it's the easiest way for me to get my initial ideas out.

Home + Onboarding

Onboarding + Voting

Artist Profile + Song Submission

Wireframes

I then moved on to wireframes. I've gone back and forth on how necessary I feel that wireframes like these are to my design process, but I've found that it often uncovers potential design issues that get abstracted away with sketches and really helps me bridge the gap to the higher fidelity stuff.

Note that I my original name for this was "NEX" as in, a musician being "the nex[t]-big-thing" (lol).

Landing Page

Authentication

Onboarding

Bracket

Voting

Vote Confirmation

Winner

Submit a Song

Submission Stats

High Fidelity Mockups

I ended up changing the name from 'NEX' to 'SoundStage'. I wanted to include the word "stage" in there because to smaller artists this would be a platform to 'perform' in a way. Eventually, I changed it to 'Recordstage' because the domain name was taken.

I chose a dark theme in these final designs, originally because I wanted this to feel like a hip, cool platform (SoundCloud rappers were the very first target users I had in mind). Even as I added more genres and moved to Spotify's API, I still felt the dark theme fit because it matches Spotify's color scheme.

Landing Page

Authenticating through Spotify

Bracket Page (Home)

Voting on a Song

Submitting a Song

Bracket Winner

I recently updated the site's design, making it more simplified and changing the color scheme to fit Spotify's green aesthetic. I also renamed the site to "Offstage". In this update, I also added a search feature for entering songs and massively optimized a function for filling out incomplete brackets.

Landing Page

Home Page

Selecting a Genre

Entering a Song into a Bracket

Development

You can check out the GitHub repo for Offstage here.

Due to some API limitations and personal programming shortcomings, I ended up having to cut some corners and features. However, I still tried my best to maintain the user's core experience through it all.

Developing the project forced me to think about how exactly all of my proposed features would work. Unlike almost all of my past side projects, I couldn't just gloss over potential edge cases, or only design the happy path. Two particularly noteworthy roadblocks I had to overcome were:

Forming Brackets: Should brackets be seeded or random? How can we serve users random brackets (to avoid bias) but also make sure they get the same bracket order round by round?
Adding Filler Songs: How can I search through tons of random tracks to find small artists on Spotify without getting rate limited by the API? How do I optimize this?

ERD

Brackets 1

Brackets 2

Round Progression

Additional Work

Features that were left out of the initial release include a statistics page for how songs perform in the bracket, so that artists can see how many impressions they got, a history of songs users' have voted on, and more. I'd also like to find a more accurate metric for measuring artist popularity (such as monthly active listeners). Right now, I use follower count which I don't feel is super accurate, but was the best I could find through the API.

I am currently still maintaining and making improvements to Offstage at my own pace, so stay tuned for updates!

Retrospect Home