CONTEXT

Duration
3 Weeks

Roles
Researcher, UX Designer, and UI Designer

Tools
Figma

What is Hot New Hip Hop?

Hot New Hip Hop is a news source for users looking to keep up with the hottest and newest hip hop content on the daily. The platform is home to one of the largest hip hop communities and serves as a direct link between artists and fans.

Why this redesign?

Before streaming services like Spotify and Apple Music made it easier to find and listen to new music, websites like Hot New Hip Hop were the main way for users to access the latest hip hop music and news. The growing popularity of streaming services has caused traffic to sites like Hot New Hip Hop to decline. I decided to redesign the site for the following reasons -

1. To deliver a personalized experience and intuitive user interface while serving a purpose that can’t be fulfilled by streaming services.

2. To make the website more visually appealing and inviting to interact with.

SOLUTION

A personalized on-boarding experience.

My solution to help HNHH become the go to destination for hip hop news and music was to curate the information and content, so it would be more relevant to the user. I did this by creating an on-boarding experience that’d better understand what and who the user was interested in keeping up with.

RESEARCH

Heuristic Evaluation

I started off the re-design by conducting a heuristic evaluation on the site to understand when and why users felt frustrated when using the website. I tried to accomplish a series of basic tasks/user stories to help me determine how I could improve the site. The biggest issues identified during the heuristic evaluation related to help and documentation and aesthetic and minimalist design. Below are some of the main issues that needed to be addressed -

1. Too much white space and an irregular amount of “breaks” in the content on the website.

2. Lots of duplicative information and ways to navigate to specific content. Information architecture is confusing.

User Interviews

Not many individuals still use HNHH as their main source for hip hop news and entertainment. This led me to conducting user interviews aimed at learning more about what a user wants in a music specific news source. Below are the learnings and insights I drew from the 4 user interviews I conducted -

1. Users don’t like to waste time scrolling or looking for information. They prefer relevant, easy to consume content.

2. When users think of ways of finding music they immediately rely on their choice of streaming service.

3. Users consume a lot of different content and media on a daily basis with the limited amount of free time they have. If they wanted to subscribe or keep up with an additional news source it’d have to be worth their while - something different and intriguing.

Mobile Application Reviews

While I worked on the desktop version for this redesign, I made it a point to read reviews for the mobile app to see if there was anything that could help me improve the experience. Below are the most common issues I read -

DEFINE

Pain Points

Based on the research I conducted, the most pressing problems that I identified were -

1. The user interface is very poorly designed and off-putting to users.

2. The content isn’t relevant enough to the user to keep them engaged causing the site to have a low retention rate.

3. The information architecture isn’t intuitive and duplicative in many ways.

“How might we?” questions to help guide my design decisions -

How might we tailor the user experience on Hot New Hip Hop to keep hip hop lovers engaged with new and relevant news?

How might we tailor the user experience to offer value and content to the user that they’re not able to get from their streaming service?

IDEATION

Information Architecture

To make the site easier to use and more relevant to the user I knew I had to reorganize and consolidate some sections. The more options you give a user the more cognitive load you’re asking them to take on when making a decision.

Original Information Architecture

Updated Information Architecture

Sketch Wireframes

Before moving to Figma, I sketched wireframes to guide my design decisions and interactions.

Low Fidelity Prototype

Since the desktop version of this site was very poorly designed I knew I needed to choose a good layout that’d be intuitive and easy on the user’s eyes. This led me to designing different layouts of key pages and conducting A/B tests during user testing to determine the most optimal user interface.

FEATURES & REDESIGNS

Designing the On-Boarding Experience

We live in an era where everything is curated and personalized to our preferences with the help of technology and machine learning. It’s something we’re accustomed to and when we don’t get it, it’s very noticeable and discouraging.

Currently, users have to sift and scroll through pages and pages to find something worth clicking into. Users spend more time scrolling than actually consuming relevant information, and that’s why I decided to create and design an on-boarding experience. The current site has no on-boarding process whatsoever.

When on-boarding, users have the option to connect their streaming service to help HNHH suggest content that is in line with the user’s listening preferences and interests. Taking the time to on-board helps curate the user experience and offer the user relevant content they’re actually interested in.

Designing the Home Page

To keep the user engaged on HNHH, I had to make sure the initial content the user saw was trending and relevant to them. This page highlights four articles specific to the user’s interests along with the trending articles and songs. I moved the search bar from the top right hand corner (old design) to the center and under the main navigation bar (new design) in case the user is looking for something specific.

Designing the Artist Profile Page

The old design page for an artist was consumed entirely by their profile picture forcing users to scroll below the fold to see the information they actually clicked into the page looking for. In the old design, there’s two ways to access the same information on this page and I made it a point to consolidate the user flows in the new design. The new design organizes the all the same content from the old design in a way that makes it easier to read and interact with.

Designing the Song Detail Page

Much like the Artist Profile page, the Song Detail page is entirely consumed by an image above the fold. It’s a picture of the song’s album cover and it again forces the user to scroll below the fold to learn more about the song. I made it a point to make the image of the album cover as small as possible to provide more space for information the user is actually looking for.

CONCLUSION

Looking Ahead

To take this redesign project to the next level, I plan on doing the following things -

1. Find more users versed in the hip hop world to conduct user testing on to determine if my design decisions added value to the user experience.

2. Redesign the mobile application version of HNHH, since that’s where majority of the negative reviews came from.

Takeaways

Redesigning a site that you have little access to in terms of data and relevant users to learn more from can make the project tougher. To gather research and determine pain points that needed to be addressed, I had to rely on reviews found on the Apple Store and interviews with users who use more traditional news sources (NYT, WSJ, CNN, etc.). This forced me to think outside of the box and dive deeper during the research phase to make sure I had enough information to make the best design decisions.

Redesigns aren’t meant to be complete makeovers. It’s important to understand the site’s purpose and how the current design is either enforcing or hindering that purpose. Then, while redesigning the site, it’s imperative that the design decisions and changes made continue to remain in line with the brand and website’s purpose. It’s easy to go off on a tangent and create additional features or pages that are nice haves but don’t add value.