Hype Machine Case Study

Overview

This case study is intended to improve the overall brand presence of The Hype Machine’s homepage to provide a simplified, more intuitive user experience and help increase social sharing and member enrollment. The goal is to enhance usability on the site, as well as streamline with the Hype Machine’s most critical metrics:

Music Discovery, Music Streaming and Music Sharing.


Background Information

Hype Machine is an independent music platform that keeps track about what music bloggers write about. Essentially, Hype Machine is used as a music discovery tool, spreading fresh new music across social media. Hype Machine tracks a variety of MP3 blogs for analysis, consumption and discovery. If a post contains MP3 links, or some embedded media (Soundcloud, Bandcamp, Official.fm, + more), it adds those links to its database and displays them on the home page.

The existing web presence is run by an independent team in Brooklyn, which started as a web product experiment in April of 2005 and continued as a bootstrapped business. Hype Machine is currently expanding its database, in attempts to spread more new music to the masses.

Hype Machine

URL: http://hypem.com


Task-Based Analysis

MAIN NAVIGATION

Overview: The main nav appears to only display three links (Latest, Popular and Genres) with standard horizontal display. On hover, nested child nav items are displayed. The three main links are also displayed within the main content area, so user can filter through blog selections.

Problem: The links are redundant and display the same information twice, relatively near each other as well. Not ideal use of the limited real estate.

Solution: Streamline the nav by consolidating the various tiers and strip away any unnecessary elements. Only display links in the main nav area below the header, which would allow more room for relevant content. User can quickly filter their selections by using the main nav.

I

STREAMING PLAYER

Overview: The music player currently sticks to the top of the page below the main nav. User can see player controls displaying song title, and on hover the scrub bar will appear below.

Problem: Music player is not very intuitive. It is unclear to the user that one must hover to display the scrub bar and full playback controls.

Solution: Shift music playback controls to stick to bottom of page to free up more content on top. This updated position will be consistent with other popular music players such as Spotify, SoundCloud, etc. Increase usability by eliminating the need for hovering and display scrub bar and all playback controls.

SOCIAL MEDIA

Overview: The site thrives on sharing music across social media platforms, to help bring awareness to new content. The site presently displays social media icons (Facebook, Twitter) only on hover of each individual track.

Problem: Social media sharing is not intuitive and difficult to find. Since the site relies so heavily on social media, social icons need to be more prominent and easy accessible.

Solution: Eliminate any hovering and display social media icons directly below track information where easily visible. Group with other relevant iconography, by placing near “like” icons. This allows the user more interaction, by either liking or sharing a track across social media. In addition, modernize iconography by straying away from the current skeuomorphic design and updating to a more clean, flat design.

MUSIC DISCOVERY

Overview: Presently, the site uses various forms of music discovery, by classifying into different categories: latest music, popular music, genres and event listings.

Problem: Too much clutter on the website causes information overload, and potential site abandonment.

Solution: Maintain search in main nav. Streamline the music discovery tools by placing links in main navigation, as well as visually presenting this information in the sidebar. This will help draw attention to Latest Tracks, Trending Artists and Upcoming Events. Users will easily be able to stay on top of the latest music trends. Display the number of “likes” next to sidebar tracks to promote and further encourage user interaction.


Brief Case Study of Competitor Sites

SoundCloud

URL: http://soundcloud.com

Overview

SoundCloud is a popular social sound platform where anyone can create sounds and share them across the world. Similar to Hype Machine, SoundCloud is essentially a music exploration site. Users can record and upload sounds to SoundCloud and easily share them privately with their friends or publicly to blogs, sites and social networks.

Key Takeaways

  • Scrub bar sticks to bottom of page
  • Users can easily like, share or download/purchase a track
  • Simple navigation encourages music discovery (Stream, Explore)
  • Link to user profile in upper right hand corner
  • Prominent search bar in main header
  • Minimal content keeps focus on streaming
  • Additional features: playlists and recording

Last.fm

URL: http://last.fm

Overview

Last.fm is a social music recommendation service, which scrobbles your music to help you discover fresh new tracks. The more you play, the more you discover. Last.fm also offers insight on the most popular tracks, trending artists and upcoming events in your community so you can always stay on top of the latest music and discover new artists.

Key Takeaways

  • Trending Artists, Top Tracks and Popular Events on home page
  • Music player embedded in middle of page
  • Link to user profile in upper right hand corner
  • Prominent search bar in main header
  • Bold imagery promoting artist exploration
  • Additional features: music scrobbling and recommendations

Initial Study

The Hype Machine’s site has a wealth of information with poor execution, which is hindering its great potential. Users are essentially presented with ‘information overload’ upon page load, which could ultimately lead to site abandonment. Furthermore, while this is in fact a social music site, social sharing is not an easy task as information and links can be difficult to find.

The primary tasks a user would want to accomplish on this site:

  • A: discover new music
  • B: stream music
  • C: share music via social media

Wireframe Solution

A wireframe comp was created for the general home page layout, then translated into a visual design.


Visual Design

Task Success

  • Eliminated hovering and exposed music scrub bar, which now sticks to bottom of page and adjusts with page height.
  • Maintained search bar in main nav area.
  • Consolidated nav items to eliminate redundant links and allow more room for relevant content.
  • Eliminated hovering to display social sharing icons and listed directly below track information. Also refreshed iconography with a new flat, minimalist design.
  • Increased exposure to trending music by displaying Popular Tracks, Trending Artists, and Upcoming Events in right sidebar.
  • Added bold imagery and prominent CTA to hero area to draw attention to and increase membership enrollment.

Conclusion

The new, improved layout offers a much cleaner approach to displaying the content. Rather than being overwhelmed with an abundance of unorganized information, users can now quickly navigate and complete necessary tasks. Information is made to be more quickly accessible and intuitive, and the sense of ‘information overload’ has been eliminated with streamlined content and updated flat design. Users can now quickly discover and save new music to their profiles, as well as share these tracks across social media.

This design now caters to the three primary tasks of the site: Music Discovery, Music Streaming and Music Sharing. Essentially, this improved design allows users an improved user experience to quickly and easily accomplish their goals on the site.