MusicBrainz Home Page Redesign
Oct. 22, 2024
MusicBrainz is one of the internet's largest open-music encyclopedias. Their home page and search features are feel outdated. Let's see what we can do.
MusicBrainz login page as of Nov. 2024
Pain points:
Visual Clutter
The home screen is extremely cluttered and the information is far too dense for the user to process quickly. Elements like MetaBrainz blog, Tag your music, Quick start, Community, etc. are all crowding the screen and many of them overlap in terms of functionality. The home page also has too many links for the user to navigate.
Font Size and Colors
Smaller font sizes can cause accessibility issues for people with vision impairments or difficulties. At 12px, the body font size is too small for even the average user to read; the smallest font should be at least 16px. The link colors are also an aggressive shade of blue, creating a very sharp contrast.
Lack of Visual Hierarchy and Flow
The home screen lacks visual flow and the user may be unsure where or what to navigate to first. Core actions like registering/logging in are hidden and small, and placed in an unusual location in the top left. The search bar is similarly placed in an odd position at the top right.
Final Prototype:
User-centered Redesign:
I redesigned the home and search functionality of website in a simple way without straying too far from the original color palette and visual layout. The goal was to make it easier for new users while keeping existing users' familiarity in mind.
Repositioned Search Bar and Login
I repositioned the search and the login/register buttons for usability and familiarity. I highlighted the "Sign Up" button in purple to draw more attention to it, especially for new users. I also removed the tab for searching in categories (artist, song, album, etc.) since it might confuse the user and narrow down searches too much. Instead, when the searches are made, the user can see what category the result belongs to.
Font Size and Color
The home screen lacks visual flow and the user may be unsure where or what to navigate to first. Core actions like registering/logging in are hidden and small, and placed in an unusual location in the top left. The search bar is similarly placed in an odd position at the top right.
Info Cards
I re-categorized the existing information and links into a concise, more compact information card format. I also scaled the icon sizes down to provide more room to work with.
