Rap battles
UI
•
UX
•
Interactions
2020
A competition and community engagement feature for rap students, inspired from the real world rap battles
How it works
Students entering into the rap battle section can either start battling with an opponent, or can watch & vote for others' battles. When a student starts a battle, they get matched with an opponent and becomes ready for dissing each other. A diss means a short video clip of the student dissing the opponent. They have 24 hours time to diss each other, as many times they want. Once the time gets expired, all the diss videos are stitched together alternatively as a sequence (called a streak) and published for voting. Other rap students can watch & vote the streak for 48 hours, and then the winner gets decided based on their votes.
Battles home
The home page for rap battles is mainly a feed of all ongoing and completed battles. The primary action is to start a new battle and the feed is to discover and vote for battles.
Opponent matching
Once a user starts a new battle from the homepage, an opponent gets matched based on their battling rank (win/attended ratio). The closest one gets selected as the best match. The user can visit the profile and chat with opponent if they wish to, and then start the battle form their end. If they prefer to chose a different opponent, they can restart the matching process.
Start dissing
Once the opponent is matched, the user is asked to upload or shoot their first diss. The upload screen gives an idea of how the entire streak is going to look like.
Shooting from camera has features like metronome to help them keep up with the tempo. Also a countdown indication of 30 seconds is shown.
Once the video is shot or uploaded, it becomes the first diss in the streak. They just need to wait until the opponent disses back the user, and diss again.
The streak
For a battle to be able to get published, the streak needs to have atleast 1 diss from each side. The validity of streak creation is 24 hours and the participants can upload as many disses they want during this time. Components are colour-coded to differentiate between the two participants.
Watching a battle
A streak can be watched in different modes. By default disses play one after other automatically, but if the user wishes, they can manually watch any diss from the streak. In the fullscreen mode, swiping up & down helps to explore more battles.
Continuos watch
Fullscreen watch
Manual watch
Voting
A streak is ready and gets published after 24 hours of starting the battle. Once published regular visitors can watch and vote the battles from the feed. Voting remains open for 48 hours.
Non-voted card
Voted state
Final results out
Colour accents
UI elements related to a participants are colour coded to easily differentiate one from the other. The person who starts the battle takes blue and the opponent is green.
Initiator is blue
Opponent is green
