AutoRap was doing just fine sitting in maintenance mode. The music app was generating users and revenue for its creators at Smule. But AutoRap, which turns spoken words into a faux rap session, still had one huge pain point the team needed to address. Today, Smule released version 2.0 of the app. Here's how they overhauled it.
In January, AutoRap introduced rap battles. It quickly had nearly a million users start a battle, but only a fraction--around 10%--managed to finish. The number was so low it indicated that there was something terribly wrong with the flow of the new feature--or worse.
Smule’s chief product and design officer Jeannie Yang and her team got to work on addressing the mechanics and aesthetics of the app. “The 2.0 update simplifies the flow surrounding the drop off points,” says Yang. “Funnel rate is a good indicator of user engagement, and 10% was just abysmal.”
Among the other top priorities for the team was to fully integrate social into the app and bring it up to par with the other properties from Smule. There was also the task of making sure the slightly gimmicky app didn’t lose it sense of playfulness and fun.
The social integration included the implementation of Smule Nation, the company’s social layer that ties all its apps together and gives users a cohesive login experience for the online features--including battles. This took a lot of work under the hood, which began a few months before everything else. Without Smule Nation included, the app had a higher chance of eventually being canned.
“In order to justify that AutoRap belonged in the product roadmap, it was critical to me that the app had Smule’s vision of connecting people through music,” Yang says. “This meant it must be social in the ‘Smulean’ way, where you can connect with someone to make and share music.”
Keeping the app’s identity also meant not losing a sense of play. The addition of record scratching is part of this. Once something gets recorded it can be manipulated by spinning the vinyl record on screen. Adding the feature was actually a way to reward some of the longer wait times associated with the recording functions, but also create more interactivity.
Even the app's icon got a redesign, which wasn’t exactly a straightforward process.
“I was surprised to find out that some users thought the 1.0 app icon resembled marijuana leaves, and liked it,” Yang explains cheerfully. “That was not the intent at all, the old icon was inspired by the fleur-de-lis design, but we had a little debate about how much that might have given us unexpected street cred.”
The team had a small debate over six different icons. In the end, an icon depicting a hand holding a microphone won out.
Looking back on a relatively quick turn around from start to completion, Yang has a few takeaways from the AutoRap 2.0 project.
The core of AutoRap 2.0 is the flow of recording. It’s the crux of the app and what the user interacts with the most. “We wanted to make it as frictionless as possible and give users a visceral, immediate connection to their recording,” says Yang.
There were times that the team was designing screens ahead or in parallel of the recording mechanics and it never turned out well. It might seem like the process of recording audio and then looping it would be rather simple, but that was never the case. The addition of audio always kept the process a little more difficult than it would seem.
“For the user research, we talked with local rappers, most of whom were from Oakland, and we attended a real-life ‘cypher’ in Redwood City to observe aspiring teenage rappers,” Yang recalls. “It was fascinating and helped us push for a more cypher feel in AutoRap.”
As Yang describes the cypher is similar to a battle, but less structured and with friendlier tones. “A group of people freestyle rap together, taking turns, usually in a collaborative and playful atmosphere where people just rap what’s on their minds.”
Reading user reviews from the App Store was also critical for feedback. It was a key indicator that people weren’t just getting bored with the first version of the app, but were actually having problems navigating through some parts.
This is a common theme and problem for a lot of designers and developers, continuing to over-develop and never wind up shipping anything. Yang tries to clarify why it’s important to let the product breathe with the public.
“Every product I’ve released has had a giant prioritized product backlog that becomes instantly obsolete once the product is out,” she says. “Inevitably, the reality of what we thought the users would care about and what would matter was different once they got a chance to use it.”
Yang also says that with a redesign project, the dangers of this can be higher. It’s easy to fall victim to thinking that everything has to be perfect and not screw the app up worse than the previous version.
“Personally, one of the hardest things during this redesign process was making sure there was transparency on the design update to ensure feedback, but also empowering the design leads with space and room to run and be creative,” says Yang.
Since she couldn’t be involved in every meeting or discussion, she needed to be confident everyone was on the same page.
“It was super important to me to make sure that high-level design goals were clear and to set the conditions right for the design leads to make the calls when needed.”
Judging by tone and the constant praise for the team, Yang appears to have been satisfied with the results.
[Image: Flickr user Antonio Rull]