Making Record Clerk: Music Trivia

Initial Idea

Back in 2012 I was working as a Product Manager at NPR thinking about what I could do for the annual NPR Hackathon. I was learning basic JavaScript and wanted to spend the day coding something. I decided to try and build a simple "Name That Tune" game that could be powered by a radio station's playlist. For the hack day demo, I used a Bootstrap template for design, hard coded the playlist and hosted it all on my local machine. The next day I went back to being a product manager, but kept the idea in the back of my mind.

Learning Swift

My original intention was to build Record Clerk as a responsive web app, but after rebuilding my old NPR prototype in Angular/Node running on Heroku and testing it on a few devices I realized it might work better as a native mobile app.

When I was first learning JavaScript several years ago I took a look at iOS development in Objective-C and felt totally overwhelmed. For some reason, Objective-C didn't click for my brain the way JavaScript did. Lucky for me Apple announced Swift at WWDC in 2014, and by early 2016 there were enough learning materials and open source tools to give it a shot.

Prototyping

My first prototype was yet another version of the NPR hack I put together years ago. I used iOS default designs and hard coded a single playlist. Even at this primitive state it felt right, so I continued to iterate by adding support for multiple playlists and tinkering with the design to find a style that worked. I wanted to have a stable prototype ready in time to bring with me on a trip to Washington D.C. where I'd have a chance to get some quick feedback from family and friends.

Feedback was generally positive, but there were a few issues that kept coming up:

• The process for selecting a playlist was confusing. I had wanted to use a fancy parallax effect where the user would swipe left and right to pick a playlist, but people didn't instinctively try that. I ended up replacing the swiping gesture with a button to select a playlist from a list. It didn't look as impressive, but it was easy to use.

• People wanted to work towards something. Just attempting to get 5 songs correct in a row wasn't engaging enough.

• I needed a lot more content. Some people didn't like the genres that I had in the prototype. Others were able to complete all the challenges in a matter of minutes.

To solve the last two issues I needed to decide on a business model. After thinking about how I might use in-app purchases or subscriptions to unlock more challenges I realized it might be better to use unlocking challenges as a way to provide more meaning to the game while giving users with specific tastes more options. Rather than force users to pay to unlock content, I could give it all away and monetize through ads.

MVP

With an advertising business model in mind I set out to build an MVP (minimum viable product) that I could ship as Record Clerk version 1.0. There were several things I needed to add to the prototype to get it in shape for the real world:

• Integrate ads into the game

• Build hundreds of challenges

• Build ancillary screens 

• Polish the UI

• Pass Apple’s review process

I had already integrated Twitter’s Fabric toolkit for analytics and crash reporting which made it super easy to install MoPub (Twitter’s mobile ad network) to get some banner ads on the bottom of the gameplay screens. MoPub also offered a fullscreen ad unit that could be triggered, but it took me a few tries to figure out where to include it so it wouldn’t interrupt the game’s flow. I found that letting the user opt into viewing an ad after they made a mistake was the most natural time to insert a full screen ad.

There was a lot more I could do to optimize ads, but I put that on hold to move forward on my list and start building challenges. This is when I had the idea to base challenges on years. I looked to the Billboard Top 40 Singles by year for inspiration and decided to make a challenge for each year from 1960-2015 that contained 10-20 songs. After the songs were decided and the playlist was built I tried to find an image to fit with the year/genre. Finding images was the most difficult part of the entire process because I was limited to stock photos and public domain images I could use commercially for free.

When I needed to take a break from creating challenges I’d work on some of the ancillary screens that needed to be built. There are things like the About page, Stats, and a page to credit all of the photographers whose images I used.

As I added more challenges I found that the UI and UX needed some tweaks. I split the Challenge Selection process into 3 steps (Genre -> Decade -> Year), adjusted fonts to make everything easier to read.

When I was about half way done with creating challenges, I invited a handful of friends to be beta testers. I used Apple’s Test Flight to manage the process so it was easy to update the beta when I fixed a bug or added more challenges.

Once I got to a stable build that I liked, I submitted the app to Apple for review. To my relief Record Clerk v1.0 was reviewed and approved very quickly and has since been downloaded by over 20,000 music trivia fans!