MetroLyrics is the most popular lyrics website worldwide, with the most comprehensive database of legal lyrics in the world. (over 700,000 titles) At it’s core, the brand believes in a hyper focus on the emotional connection inherent to the lyrics experience. With this in mind, we set out to give it a best-in-class design to insure that our users can not only find the lyrical content they desire, but to be immersed into the deeper context of the music & the artists they are passionate about.
Our goal was to make the music and artist experience take center stage. To achieve this, we set out to greatly simplify the visual language of the brand. We began with the tone of the logo. We removed the whimsical musical note and replaced with a bold & contemporary yet timeless typographical treatment that reflects the context of what the brand is about.
Upon arriving at the front door, users are greeted with the latest and most relevant news & events in contemporary music today. These lead stories anchor the top of the page followed by a free flow of discovery in blocks of stories, artist collections, most popular lists, galleries and video content. Then anchored at the bottom are the latest song titles and media that have been added to the repository of lyrical content.
The site header has been greatly streamlined with a significantly smaller footprint. Despite it’s reduced size, we believe that there is a new clarity to the updated site branding as well as a more direct focus to the critical navigational paths to lyrics, videos, news, artist and search.
It’s all about the Music / Artists
The content MUST take center stage: In this vein, our updated artist pages have become a central hub who’s intent is to clearly string together the deep mix of lyrical content, news, photos and video media available. We utilize large and striking visuals to brand each musician’s section as a central focal point through out the series of pages dedicated to each artist. Users can utilize the overview to see the top level biography information along with hot content that is either recently published or trending among our broad user base.
The artist’s lyric tab exposes a list of all his or her songs in our catalog. Since many artists are quite prolific, these lists can become very long. Thus, we provide the ability to distill by album, song title or featured lyrics. The list is then displayed by song title, the year produced, video if available along with the song’s popularity ranking among our users.
Song Lyrics
Our song lyric experience has also been greatly simplified to insure the most ease and best readability to the song title. Our tools that users have come to expect such as ringtones access, share functions, commenting or content corrections are easily accessible via the ever present took kit to the left. These share functions can be used to broadly share the page or to broadcast a specific short segment of the lyrics.
Shown above, links to the song video sit directly to the right of the lyrics. We believe that the lyric experience is greatly improved by being able to watch / listen while following along to the lyrics simultaneously. When users click to play, the thumbnail will transition to a fixed modal to play the video. The rest of the page will then dim leaving only the video along with the scrollable lyric flow on the left. This isolates the core elements of the lyrics into a very focused experience. However, related content and core tools remain to make it easy to jump from one song to another -OR- to take advantage of any of the consume utilities mentioned above.
Now that you have found the lyrics you wanted, quickly explore more from your favorite artist by jumping from song to song. Below each song title you will find a link to the album that it comes from. The desired effect is to simplify discovery of the complete set list of the album.
While, the main news section will give you the latest in more general music news – the Artist’s news tab will makes it easy to find the most interesting news stories at a more granular level specific to the given musician.
As well, Metrolyrics has and continues to showcase an impressive library of both recent and archived photography and videos of your favorite musicians. (A shared source with our partners at LastFM) We have laid out the discovery experience in a simple yet easily scanned masonry grid while providing a larger image in a modal view. This separates the explore from the consume experience which hopefully makes it easier to discover, enjoy, share and chat with your peers over our elaborate collection of artist imagery.
Well there you have it… The result of a ton of hard work by all sorts of passionate folks in product, engineering and of course design. We are excited with this update along with some meaningful new features and functions that we plan to roll out in the coming months. However, like all our efforts, this is not an end result, but simply a new platform for us to build on. So you can count on seeing more changes and updates based on user and industry feedback.
I am an avid student and evangelist of user-centered design principles - I have created or overhauled some of the world's largest online Business & Technology properties. My focus has always been on building functional design systems that creatively solve business problems. Solutions that convey brand & messaging, but more importantly, are intuitive to maximize the possibilities of an interactive medium. 
