Rapchat Browse

Refactoring app navigation and the browsing experience.

Click to play video

Overview

Rapchat’s most engaged with feature by far, is beats. Users spend hours each day browsing for beats that they like and want to record over. But the experience of browsing for beats and inspiration was sub-par.
‍
I was tasked to lead the refactoring of the entire browse experience, which comprised of standard track browsing, the top 100, beats, and producers.

The Problem

The most used feature within the app is hidden within the overcrowded browse tab and is not frequently updated with fresh content – letting users run out of new beats.

When I arrived at Rapchat, the founders were sitting on a wealth of user feedback explaining their frustrations with beat discoverability – it just hadn’t been properly addressed.

Business Goal

  1. A refactored app navigation that prioritizes beats and adds space for a more content rich experience to supplement usage.

The Team

This project took 6 weeks with our small team:

  1. Me – Design
  2. Seth – CEO
  3. Mike – COO

Product

Before diving into research I wanted to get as clear as possible around what the problem was. To do this, I created a hierarchy map to showcase the inequalities within the various tabs.

This helped me visualize part of the problem – that the browse tab is over-cluttered with content and not clear.

Image of information architecture of previous rapchat app

As shown, the majority of the content within the app is grouped under the “Browse” Tab.  This was a result of new features getting added into this bucket with little regard of where they make sense within the app experience.

Research

I conducted 6 user interviews with users across the world, in the US, Mexico, and Barbados. The focus of these interviews was to determine how the understand how to best structure the app hierarchy to suit user needs.

Assumptions ↓

  1. Users want to have beats be dynamically suggested and not static so they can find more beats easily.
  2. Users do not want to have beats on its own tab as it would be confusing with browse.

Takeaways ↓

  1. Users explicitly want browse and beats to separated.
  2. Users want beats to have its own section to improve discoverability.
  3. Users want challenges to have its own section so the browse experience is decluttered.
screenshot with the text "previously the only way to access beats"

Visualizing the New Structure

image of the improved information architecture of rapchat after refactoring

The improved flow showcases a more organized app structure, with beats and browse being completely separated and challenges having their own home within browse.

This directly improves the discoverability of beats, allowing Rapchat to provide users with a personalized experience of beat suggestions.

The Previous UI

Aside from just changing the structure and navigation within the app, there were various visual inconsistencies that needed to be addressed.

4 images of the previous rapchat UI within browse

The New Experience

Click to play video
Click to play video

The Browse Tab

Beats being removed from the browse tab allows for proper organization and discoverability.
‍
Key points:

  • Challenges now live in their own view.
  • Designed space for personal recommendations and dynamic content.

Challenges

Challenges are a huge part of the in-app experience that was lacking from an organizational standpoint.

Key points:

  • Challenges are now viewed and logged in chronological order (there was no organization previously).
  • Removes the clutter from the browse tab – challenges are overwhelming if users aren’t competing or already did.
Click to play video
Click to play video

Beats

Beats being removed from the browse tab allows for proper organization and discoverability.

Key points:

  • There is now a space for personalized recommendations which could increase songs created and retention.
  • Overall simpler and more efficient structure that allows users to find beats quicker.
Click to play video

Top 100

One of Rapchat’s most engaged with features was truly lacking in experience.
‍
Key points:

  • Rapchat’s top 100 users are most likely relatively popular on other social media platforms, giving them an incentive to share could directly boost awareness and reach.
  • Overall simpler and more efficient structure that allows users to find beats quicker.

Outcome & Reflection

This project was completed and is currently in the handoff stages, I am actively communicating with developers and stakeholders throughout the process. We had parts of the app built and shipped to beta testing in waves.

First, changing the navigation, then updating the UI. We chose to break up the design into two builds to reduce the load for users and our dev teams.

Reflecting on the project I would have focused more effort onto the Producer experience as well as directly reviewing user feedback once this build was shipped.

← Back to all work