In the tech industry, many of us came of age during hip-hop’s rise as a dominant art form. Its spirit of individualism, bravado, and constant reinvention makes it impossible for us not to admire. Our thought leaders craft mixtapes1 and pour millions of dollars into apps that decode rap lyrics2.
The founders of my former company rapped to celebrate every corporate milestone. We’re compelled to quantify3 what we love about it, and to somehow technologize it the same way Instagram did photography. Many have tried, myself included, but capturing hip-hop’s alluring qualities in an app is no simple task.
Further Reading on SmashingMag: Link
- Authentic Design4
- Finding Better Mobile Analytics5
- Design Better And Faster With Rapid Prototyping6
- 100 Obscure and Remarkable CD Covers7
I am here to talk about the unique challenges of designing a hip-hop app as I led design for one of the few successful apps in this space. This article shares insights from our research and design process, and the lessons we learned about the DAU of hip hop.
DAU (noun) Daily active users (DAU) is one of the ways to measure success in an internet product. DAU measures the “stickiness” of an online product — how many unique users interact with a product daily.
Hip-hop (noun) If you got to ask, you ain’t got it.
I should warn you: this is not strictly an article about technical innovations. My focus is how an awareness of complex cultural issues can be critical for good app design.
The Underwhelming World Of Rap Apps Link
A few years ago I joined Smule8 and became lead product designer for AutoRap9. AutoRap works like this: you speak into your iPhone, and the app fits your words into a beat to create an instant rap song. It had enjoyed modest success as a novelty app, but had yet to live up to Smule’s goal of a collaborative musical platform. It was my job to reframe it as a tool people would use to make music together.
I looked around and found an unexpected profusion of rap apps with similar aspirations and seemingly no traction. I stopped counting at 20, but there are dozens more. Most of them fall into two groups: rap-insider apps, and tech-insider apps.
Rap-insider apps, like Rap Wars and Verses MC, overflow with enthusiasm for the genre but rarely prioritize technical execution. They tend to be buggy and lack functional clarity – one representative app has 20 different options at its top level of navigation. These options include tools to write lyrics, battle other people live, browse rankings, watch YouTube videos, and hang out in a “Cypher Video Lounge.”
Across these apps we also see frequent use of photorealistic microphone interfaces, seeking to capture real-world experiences in all of their richness and complexity, rather than adapting and simplifying them for mobile phones. There is much to appreciate, but it’s not difficult to see why these apps haven’t connected with larger audiences.
Tech-insider apps often look professionally designed and developed, display innovative technology, and completely miss the point.
Rhymeo stands out for its polished execution. It’s what it sounds like – an app that records you rhyming as a montage of pictures drifts by, and gives you a rhyming dictionary to make it easy. It wins on high-concept features and usability, but limits rapping to a rote exercise in rhyming at eerie stock photos. For an app dedicated to improvising music, it can feel a bit soulless. It includes an attractive Instagram-ish feed, but one can only listen to so many spoon-fed “rich” rhymes in one session.
Choke lets you send out pre-written rap lyrics for friends to read aloud to see who “chokes” while delivering their lines. It looks nice, but for all of its slick minimalism and animations, there’s no real-life analog for this in hip-hop culture. It treats rapping as a cheap bar trick, and this comes across as out of touch.
RapChat delivers rap recordings in SMS-like format, and takes its inspiration directly from traditional messaging apps. This is a wasted opportunity, because it could have been imagined in a way that echoes real-life rap battles or cyphers, where participants take turns contributing verses. There is little in the app’s original design to suggest that the developer was particularly invested in hip-hop. Its primary colors and utilitarian design would be appropriate for a voice memo app or text editor, but don’t inspire a great rapping performance. To their credit, they did improve their design substantially since the screenshot above was taken.
At this time, AutoRap lived somewhere in the tech-insider category. Its lush production value expressed genuine admiration for rap, but obviously came from a tech-savvy outsider’s perspective.
The design mimicked what the original designers saw as hip-hop culture, but it didn’t accentuate the right details to appear authentic. I showed the app to someone active in the Bay Area rap scene and he recoiled, saying, “That’s not hip-hop, that’s just gangsta.” In other words, it played off of cheesy gang stereotypes at the expense of the music.
The Problem With Inauthenticity Link
AutoRap’s novelty attracted a wide range of people, but our demographic analysis generally pointed towards young men as the core. We never collected any data on race or ethnicity, but based on my personal interactions with the community, it’s safe to say that the representative power user was a black teenager, someone for whom most rap apps would seem like a presidential candidate abusing emoji to appear relatable.
It’s not surprising that the tech community might not have its finger on the pulse of black youth culture. Besides the well-publicized lack of black voices within companies18, there is an undeniable disconnect between the tech economy and people living outside of it. SoMa, the neighborhood that is home to most of San Francisco’s startups, feels strangely insulated from Oakland just across the bay, much less the gritty Tenderloin neighborhood across Market Street. Spending long hours at luxurious offices with catered meals, and living with other techies a short commute away from work, there are few opportunities to interact meaningfully with the artistic community, older people, poor people, or nearly anyone anywhere else in the world.
Isolation, intentional or not, fosters social blinders that can limit our ability to design for a broad audience. Tech understands cash, fame, and speed, but struggles to grasp the value of gifts, friendship or creative expression. I don’t want to moralize about my city’s culture war, so much as to say that isolationism is the wrong mindset from which to design great products for other people, especially those with different value systems.
Inauthenticity isn’t just a matter of sounding lame in front of teenagers. It can also raise serious ethical questions when it comes to appropriating the art form of a marginalized community. It’s only human for a developer to make an app inspired by music they love, but without an eye for authenticity it can come across like Tom Cruise starring in a Miles Davis biopic. Worse, rap sometimes emerges as a punchline to the app’s central conceit. “It’s like SMS, but with raps. How droll.” Even well-intended portrayals might inadvertently evoke racial stereotypes that many people outside of Silicon Valley would not appreciate. At a time when artists like Iggy Azalea routinely come under fire for using caricatured black mannerisms in a stage persona, it behooves us to tread lightly and treat our source material with respect.
Gonzo User Research Link
All of this led to a dilemma. I wanted to make a hip-hop app that would feel authentic, but I was (and still am) just another techie in San Francisco without personal connection to that world. My first step was to thoroughly review the history of rap music. I watched hours of YouTube videos of cyphers and battles, listened to several new albums a day for weeks, and read as much as I could. I also started rapping myself, albeit very poorly. A co-worker and I visited a cypher in Redwood City, where local teenagers would get together after school, go around in a circle, and take turns freestyling. We took detailed notes on how they improvised with each other, where they drew inspiration from, and what the music really meant to them.
I posted an ad on Craigslist: “Rappers Wanted.” Several rappers in the Bay Area volunteered to visit our office and give in-depth interviews with the team. We got one veteran rapper from Oakland who knew some big names from the 90s, and some younger aspirational rappers at the start of their careers. We would sit down with them and just talk casually about their music for an hour or two. We went in without scripts or questionnaires, or any of the usual paperwork or tools for design research. We just talked.
Significant insights emerged from these interviews, revealing important themes that rap apps typically miss. The rappers we spoke to most valued the strength of their individual creative voice. Rhyming and following a beat are important skills, but only when used in the service of self-expression. Tupac spits from the gut with absolute sincerity. GZA raps from his head. Doom is pure flow. Some rappers like Lil B and Young Thug produce music with meta-trite or unintelligible lyrics but still succeed by force of personality and the uniqueness of their sound. Everyone has to find their own message and style.
Developing a personal style can take years. Aspiring rappers spend vast sums of money on the equipment necessary to produce their art. Very rarely do they make it back, or even expect to. Rapping is also a deeply social activity, and many people use it as a way of bonding with their friends in a collaborative, supportive atmosphere. It’s everything the apps tend to miss.
When we showed our rapper consultants the existing app, they responded with a general tone of bemusement, and found polite ways to say that the app wasn’t quite for them. You may recall this quote from earlier: “That’s not hip-hop, that’s just gangsta.” We hadn’t planned on a major redesign, but that moment of candor inspired us revisit the app’s identity on a broader scale.
(Re)Designing The Definitive Rap App Link
We redesigned some of the tech to make the rapper’s voice feel more alive as they speak. The initial version used a visualizer composed of elaborate floral shapes that unfurled to audio input along predetermined patterns. It evoked the ornate flourishes of blackletter gang tattoos and the playful opulence of a rapper who insists on using gold-plated credit cards. It embodied a perception of rap as gaudy and entertaining, but neither expressive nor sophisticated under its surface.
We wanted to replace it with something simpler, but more modern and sincere. We created an equalizer that bubbles up and down responsively to visualize the full audio spectrum of a user’s voice. Each person’s voice takes on a unique shape, and it gives a sense of immediate, intimate feedback that your words are being heard.
We stripped away the dense patterns and gold highlights in favor of a sleek look inspired by trends in contemporary hip-hop cover art. We wanted to portray hip-hop as it portrays itself. Hip-hop has moved from street crime to haute couture, art collection, and tech entrepreneurship. Oversized gold jewelry still has its place, but taste and sophistication have become equally important markers of success.
For copywriting and general branding purposes, we needed to give the app a strong voice. I drew up a tongue-in-cheek graph of famous rappers, plotted by their production value and lyrical complexity. The graph became useful in highlighting the generation of rappers we wanted to emulate most strongly. It became clear that the app needed to make the user feel like Kanye West: creative, bold, and a true individual in every sense. We wrote all of our copy in ALL CAPS, worked in wordplay and pop culture references at every opportunity, and when in doubt, asked ourselves what Kanye would say.
We downplayed the technical wizardry of the app and instead emphasized a sense of ownership over your music. We accomplished this through a suite of simple features like the ability to customize your song titles and make album art with a quick selfie; we later added the ability to remix your recording to different beats for greater creative control. Whereas most apps take it for granted that recordings exist as abstract digital entities, we packaged them as loosely skeuomorphic vinyl records that can be scratched and rewound with a touch – something delightful that you have just created.
Unlike apps like Rap to Beats, Rhymeo, or Choke, which give users rhyming dictionaries and scripts, we made the decision to never, under any circumstances, tell the user what to say. Once you start recording, you enter a word-free zone to avoid contaminating your flow. This makes the app intimidating to some, but it means that whatever you say is your own. AutoRap will act as your recording studio, producer and marketer, but you need to bring your own message. Compared to similar apps, AutoRap users generate an incredible amount of interesting and diverse original content, from buoyant swagger26 to bawdy humor and flirtation.27
We did several rounds of user testing, including one intense session with a group of students at a local school. Much to our relief, everyone’s face lit up when they used the app.
We released the new design and saw a big lift in the number of recordings our users made. Our next step was to build out screens to feature rap songs from around the world. In addition to “like” and “share,” users can reply directly with their own impromptu raps inspired by what they heard. The original rapper can reply back, and before you know it there’s a rap battle under way. The app renders the audio from each reply together into a single seamless track, so that other people could listen in. We went on to create “rooms” for topical hashtags, modeled loosely after the real-world dynamics of a collaborative cypher. Extensive A/B testing increased the number of users who share their recordings to public screens. A network of small communities surfaced, comprising users who took the app seriously as a place to have creative fun and practice rapping with friends.
The Value Of Connecting To Your DAU Link
If you work in tech, I’m guessing you want to hear some numbers. As of now, about 50 million people worldwide have downloaded AutoRap. Every month our users start 7 million recording sessions. It’s well-rated in the App Store, and every now and then a song made with AutoRap goes viral. The app even makes a healthy amount of money. AutoRap has achieved a level of success well above every other app in this space. On the other hand, these metrics are only skin-deep, and have never impressed anyone I’ve spoken to outside of the tech industry. I doubt many of our users would care.
The real measure of AutoRap is whether it affords people meaningful creative access to the music they love. I see this as especially important for the members of our audience who the tech industry tends to chronically neglect or misunderstand. I have no way to quantify this aspect of the app, but it’s only appropriate that the best way to gauge it is by listening to individual voices. To that end, I heard from one user that they couldn’t afford studio equipment to start their rap career, and AutoRap is letting them pursue their dream. Another said that the app helped them recover from surgery by keeping their spirits up. Every time I browse the app, I find new people pouring their souls into original pieces of music, often collaborating with other people they meet in the app. AutoRap is hardly a complete or finished project, but it is more than a novelty to many of its daily active users.
Looking back on this project, what stands out most is the value of approaching our users on their own terms and striving for authenticity. In other words, building empathy. Empathy has acquired buzzword status in tech, and often translates to a checkmark in someone’s process. This isn’t good enough. It’s important to break out of your comfort zone, especially in a place like SoMa, and speak directly, even intimately with other people who see the world differently.
Final Notes Link
I wrote in the first person as a matter of convenience. My collaborators deserve full credit: Oscar Corral for the visuals; Nick Kruge for the recording visualizer, vinyl, and ingenious animations throughout; Mike Allen for research and enthusiasm; and half a dozen engineers for giving the project life.
(da, ml, og, il)
- 1 http://genius.com/artists/The-blind-mc
- 2 http://genius.com/Marc-andreessen-why-andreessen-horowitz-is-investing-in-rap-genius-annotated
- 3 http://poly-graph.co/vocabulary.html
- 4 https://www.smashingmagazine.com/2013/07/authentic-design/
- 5 https://www.smashingmagazine.com/2016/10/finding-better-mobile-analytics/
- 6 https://www.smashingmagazine.com/2010/06/design-better-faster-with-rapid-prototyping/
- 7 https://www.smashingmagazine.com/2009/05/100-obscure-and-remarkable-cd-covers/
- 8 http://www.smule.com/
- 9 https://itunes.apple.com/us/app/autorap-by-smule/id524299475?mt=8
- 10 https://www.smashingmagazine.com/wp-content/uploads/2016/05/01-rap-insider-images-opt.jpg
- 11 https://www.smashingmagazine.com/wp-content/uploads/2016/05/01-rap-insider-images-opt.jpg
- 12 https://www.smashingmagazine.com/wp-content/uploads/2016/05/02-tech-insider-opt.png
- 13 https://www.smashingmagazine.com/wp-content/uploads/2016/05/02-tech-insider-opt.png
- 14 https://www.smashingmagazine.com/wp-content/uploads/2016/05/03-ar-old-opt.png
- 15 https://www.smashingmagazine.com/wp-content/uploads/2016/05/03-ar-old-opt.png
- 16 https://www.smashingmagazine.com/wp-content/uploads/2016/05/04-uncool-opt.jpg
- 17 https://www.smashingmagazine.com/wp-content/uploads/2016/05/04-uncool-opt.jpg
- 18 https://medium.com/@marksluckie/what-it-s-actually-like-to-be-a-black-employee-at-a-tech-company-e32bb222818b#.gylnzoqah
- 19 https://www.smashingmagazine.com/wp-content/uploads/2016/05/05-comparison-opt.png
- 20 https://www.smashingmagazine.com/wp-content/uploads/2016/05/05-comparison-opt.png
- 21 https://www.smashingmagazine.com/wp-content/uploads/2016/05/06-art-comparison-large-opt.png
- 22 https://www.smashingmagazine.com/wp-content/uploads/2016/05/06-art-comparison-large-opt.png
- 23 https://www.smashingmagazine.com/wp-content/uploads/2016/05/07-comparison-songbook-opt.png
- 24 https://www.smashingmagazine.com/wp-content/uploads/2016/05/08-rapgrid-opt.png
- 25 https://www.smashingmagazine.com/wp-content/uploads/2016/05/08-rapgrid-opt.png
- 26 http://www.smule.com/recording/midi-mafia-charger/237956304_59666803
- 27 http://www.smule.com/recording/midi-mafia-da-woods/189698290_60994360
- 28 https://www.smashingmagazine.com/wp-content/uploads/2016/05/09-metrics-opt.jpg
- 29 https://www.smashingmagazine.com/wp-content/uploads/2016/05/09-metrics-opt.jpg