AZ Lyrics Redesign / Fall 2018
How might we improve the AZ Lyrics website such that it is more visually appealing and efficient for users?
Unnecessary Features—Upon entering the AZ Lyrics site, users are likely to have a song title already in mind that they could just quickly type in the search bar, making the A-to-Z navigation unnecessary.
Inefficient Layout—Because of the overall singular, stacked layout of the website, particularly when users scroll through the search results or lyrics, users are likely to scroll for longer periods of time when browsing or looking for the items they are looking for.
Outdated Visuals—The overall website feels visually bland and outdated with its lack in variation in color, layout and text.
Emphasis on the Search Bar—I wanted to utilize AZ Lyrics’s original landing page slogan “it’s a place where all searches end” to make Searching a more emphasized theme in the website. This involved getting rid of the A-to-Z navigation, enlarging the search bar in the landing page to make it more call-to-action, and redesigning the AZ Lyrics logo in a way that resembles a search bar with “az” inside it.
A More Organized, Efficient Layout—I made the layout more spread out and organized so that users are able to browse through lyrics and list items quicker and more efficiently. The search results page for example is organized horizontally rather than vertically and is sorted out by three categories: the sole top result, the songs and the artists that are related to the user’s search input. Additionally, for non-English songs, there are three lyrics columns for the song’s original language, the romanized translation, and the English translation, which was not a feature in the AZ Lyrics site. This allows users to view these lyric versions side-by-side.
A Pop of Color—The color scheme was changed to an overall black and white scheme to allow the colors of album covers to pop out better. I implemented a hot pink accent to appeal to the modern music and pop culture vibe. The use of white text on black underlays helps major texts pop out to set a better hierarchy.
Note: still currently working on the HTML/CSS of this redesign! Stay tuned :’)