Project details
Client: Hype Machine Concept
Role: UX/UI Designer
URL: hypem.com
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.
Music gives a soul to the universe, wings to the mind, flight to the imagination and life to everything.
The Problem
Identify & define
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.
Task-Based Analysis
What are users trying to accomplish on the site?
Main Navigation
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. The links are redundant and display the same information twice, relatively near each other as well. Not ideal use of the limited real estate.
Streaming Player
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. 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.
Social Media
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. 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.
Music Discovery
Presently, the site uses various forms of music discovery, by classifying into different categories: latest music, popular music, genres and event listings. Too much clutter on the website causes information overload, and potential site abandonment.
Competitor Sites
Analyzing the Trends
The discovery phase included an analysis of various competitor sites, such as SoundCloud and Last.fm. Both sites are popular social sound platforms, aimed at music exploration, helping users gain insight on popular tracks, trending artists and upcoming events in their community.
SoundCloud
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.
- 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: https://www.last.fm/
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.
- 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
Key Takeaways
- Trending Artists, Top Tracks & 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
"Where words fail, music speaks."
-Hans Christian Andersen
Wireframing
A wireframe comp was created for the general home page layout, then translated into a visual design.
The 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.
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.
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.
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.
Updates Made
- Maintained search bar in main nav area.
- Eliminated hovering and exposed music scrub bar, which now sticks to bottom of page and adjusts with page height.
- Consolidated navigation items to eliminate any redundant links, which allow more room for fresh and 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.
The Outcome
Bringing Music to the People
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.
Essentially, this new design now caters to the three primary tasks of the site: Music Discovery, Music Streaming and Music Sharing.
