Rap Genius (January 2013)
The focus here was to focus on what most users are coming to Rap Genius for and how to give them what they want with the least mental investment from them (this design was done before Tom from RG mentioned in an interview at DLD 2013 that some of the capacities of RG were purposefully made difficult to create divisions in their user base). With this in mind, I focused less on completely starting from scratch and, instead, keeping key elements of the information structure and general aesthetic (color scheme, font style) as they are already.
Instead of using Bebas Neue and Helvetica, however, I chose two similar fonts that complemented each other better - Gotham HTF Condensed and Gotham HTF Book. I also used Gotham HTF Bold as a filler text for the Rap Genius logo, which was made with a custom font I didn’t have access to.
First, I hid information between the title of the work and its contents within an expandable section, viewable upon clicking the expand icon next to the title. I also created a “Published” icon to indicate that a user would need ≥600 Rap IQ to edit the song in question. This message would be viewable if the icon were hovered over. I imagine most users are not editing explanations, so this information isn’t always needed.
Second, I consolidated information on the right sidebar and made sections more digestable with (a) more whitespace, (b) section headers, (c) consolidated navigation bar and admin link bar (top and bottom of the sidebar, respectively), and (d) expandable sections. This keeps information beyond a certain threshold viewable to those who want to read that information, and it eliminates distractions for people who are on the page strictly for lyrics. The separation also reduces confusion for new visitors to RG and makes the information significantly easier to digest. Condensing the contributor list to 10 users also adds a layer of exclusivity to those users who add the most value to a set of explanations; this is consistent with the exclusivity of editing Published songs that’s assigned to those users with Rap IQ greater than 600.
Third, I attempted to improve the explanation interface. The current explanations swing up and down on the page as a user peruses the annotations of a set of lyrics on the site. This calls for the user to do more work in consuming the information, and, in some cases, forces the user to scroll up to see the beginning of an explanation after clicking a specific passage (e.g. http://cl.ly/MiDd). In my alternative design, I had the explanation interface roll out over the right sidebar and stay in one place no matter where the lyrics being explained were. This trades one set of information for another (i.e. the sidebar content for the explanation), and paired the passage in question being cited at the top of the explanation interface, this gives users less to digest and makes it easier to read explanations without having to swing their eyes up, down, right, and left every time they move to the next passage.
Lastly, I inverted the color scheme for two main reasons: (1) as Rap Genius begins to become a bigger hub for longer form content — speeches, articles, plays, literature, etc. — readability is incredibly important. Having dark text on lighter backgrounds would improve the experience for long-form content consumers and would lead to longer lasting traffic and engagement; and (2) the internet is accustomed to dark on light. That might sound like a silly reason, but this creates a custom amongst frequently trafficked sites on the web.
From my understanding, the black background is one of the trademarks of Rap Genius, and it’s possible that a white background could turn off community members. This is meant as a humble proposal — more as a concept. The full design can be viewed here: http://bit.ly/YOjOrV. It shows the full explanation interface, social media engagement, and a header bar UX redesign.
To work more within the aesthetic of the RG site, I created a darker variant of all the designs here — http://bit.ly/VEptQk.
Roles: product research, user analysis, redesign