I'm a huge fan of RapGenius, and I spend a lot of time on it. However I'm really not a fan of their mobile site so I spent some time thinking about what a RG app would be like. I wanted to focus mainly on three things on this concept:
- Finding songs
- Quickly navigating through annotations
- Adding annotations
To easily find songs, the search icon is available on the bottom menu. Searching can also be performed by pulling down on whatever screen you're in. Instead of pull down to refresh, its pull down to search. This is a more natural way to access the search because it doesn't require an user to stop their scrolling to perform a new action. As the search bar pops up, the keyboard pops up as well so theres no need for a second tap to start typing. Just pull down, releaase, and search your heart out.
One thing I love about the website is that you can just click an annotation, get the meaning, then click on another one to get that meaning. In order to translate this snappiness to mobile, once you tap an annotation, you can scroll through all annotated lyrics with the arrow keys. If a lyric isn't annotated, it will skip right over to the next one. Maybe it will just be greyed out lyrics and say something like "Needs annotation" or something. I've been mulling over this.
You simply tap the lyric, and the annotation wlll pop up. Tap it again to dismiss and go back to the main lyrics.
On the RapGenius website you highlight the lyric to annotate. In mobile it would be a nightmare to do that so instead you can tap and hold grey un-annotated lyrics to write out the meanings.
This isn't in the video but once you tap and hold a lyric, all un-annotated words get separated into "chunks" that you can tap and select to add to the annotation. Maybe a little icon or something pops up on the left so you can select whole lines together instead of tapping individual words. This allows for greater flexibility and ease of use as an annotation can be as large as multiple lines or just one word.
I also added some cool dynamic stuff to the UI. Like the bottom menu flips over when you select an annotation and flips back when you dismiss it. Kind of like the body of text hits the menu bar and makes it flip or something.
Also when you scroll down, you can see the music player snapping to the top of the page. This can allow the user to access the player while scrolling through lyrics.
That's it! Hope you enjoyed watching and reading this as much as I had making it :)
Music is "I'm God" by the amazing Clams Casino