Project: Rapchat for iOS and Android

Role: UI/UX Designer

Date: November 2018 - Present

Website: https://rapchat.me/

Role Description: Design interfaces and experiences for end users of Rapchat. Employ HCI and design theory, analyze user data patterns, and articulate data findings into design decisions. Additionally, support product and marketing teams in designing and preparing graphic assets.

twitter header copy.png
 

Users and Audience

  • The target users of Rapchat are young adolescents and adults that enjoy music. This encompasses listening to music, creating music and dancing to music.

5M+

User on App

50M+

Total Reach

1M+

Listens Daily

550k+

Monthly Active Users

 
large aaron.png

Persona 1

Aaron Schultz

  • Aaron is a student attending Ohio University. He is an introvert, and listens to rap music while walking in-between classes and while doing homework.

Goals:

  • Explore, interact and consume new rap music

Pain Points:

  • Difficulty creating raps

 
large maria.png

Persona 2

Maria Perry

  • Maria is a high school senior. She is an extrovert that has a large social media following. She values her social capital, and is also a talented rapper/singer.

Goals:

  • Increase social capital

  • Meet and collaborate with other creators like herself

  • Create rap songs

Pain Points:

  • Does not have money to pay for studio time or to hire a producer

  • She is mobile and on the move more often than not

 

 Design Process

  • This is the iterative design process that I follow, and some of the main tools that I use.

design process.png
 

Case Study 1: Rapchat Video


 
large phones.png

Project Summary

  • Integrate video throughout entire application. This includes content creation and consumption.

Key Performance Indicators

  • Increase in Rapchat plays

  • Increase in Rapchats created

  • Increase in discoverability (measured by follows)

  • Maintain application’s music roots

 
large market analysis.png

Market Analysis

  • By assessing similar video apps we were able to build a friendly user experience with little learnability based off of Jakob’s Law.

Key Findings:

  • Full screen video consumption

  • Easy-to-use, visual discover page

  • Ability to add fx to post video production in studio (filters, stickers, type, etc…)

 
large brainstorming.png

Brainstorm Solutions

  • After meetings with the CEO, head of product and lead engineer - we were able to go through individual use cases to answer how the video studio (creation tool) would be built while balancing business wants, user needs and technically viable availability.

Conclusions

  • 3 track options in studio: beat, video and audio

  • Preview page after recording for post production

  • Can technically only add 1 video track

 

Interactive Prototypes

  • Interactive prototypes were made to find pain points along the user’s journey. Frustrated first-time users makes for a bad user experience which leads to a decrease in user retention.

Studio

Discover Page

Home Feed

 

User Feedback

  • We asked specific questions and assigned tasks to interviewees regarding the new Rapchat video concept. The goals were to find usability issues and receive user feedback. We performed observational interviews at Ohio State University, and questionnaires over a community Rapchat Slack channel.

 

Launch and Learn

  • After introducing video within our app - Rapchats created and Rapchats played had a noticeable increase. This also allowed Rapchat the flexibility to work with new partners and artists due to the introduction of a new medium. The introduction of the new studio has given more power to the creators as the variety of content created has increased. We are continuing to smooth out pain points, and increase usability both on content creation and consumption.

hero graphic copy.png
studio - beat, audio, video copy v3.png
vfx v2 port.png
studio - beat, audio, video v2.png
edit screen dragging sticker copy.png
studio - beat, audio, video copy 3 portfolio.png
home feed v3 copy 3 portfolio.png
comment popup port.png
share screen port.png
discover pg_portfolio.png
 

End Case Study 1

 

 

More Rapchat Projects

 
discover pg_port.png
 
IA_port.jpg
 
web sharing pages_port.png
 
marketing graphics_port.png