NICOLE
AZLYRICS_logo2-04.png

az lyrics case study

AZLYRICS_logo2-04.png

AZ Lyrics Redesign / Fall 2018

How might we improve the AZ Lyrics website such that it is more visually appealing and efficient for users?

—Problem

  1. 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.

  2. 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.

  3. Outdated Visuals—The overall website feels visually bland and outdated with its lack in variation in color, layout and text.

Original landing page.

Original landing page.

Original charts page—no indication of rankings or options to see top songs of today, the month, and all time.

Original charts page—no indication of rankings or options to see top songs of today, the month, and all time.

Original lyrics page I—the centered alignment of the romanized, Korean, and English translation of the lyrics is inefficient.

Original lyrics page I—the centered alignment of the romanized, Korean, and English translation of the lyrics is inefficient.

Original search results page—vertical stacking of search results, no separation of top results, songs or artists.

Original search results page—vertical stacking of search results, no separation of top results, songs or artists.

Original lyrics page II—the centered alignment of the romanized, Korean, and English translation of the lyrics is inefficient.

Original lyrics page II—the centered alignment of the romanized, Korean, and English translation of the lyrics is inefficient.

Original artist page—the stacked, centered alignment of the albums and songs make the page too linear, no visuals of the albums or the artists themselves.

Original artist page—the stacked, centered alignment of the albums and songs make the page too linear, no visuals of the albums or the artists themselves.

—Solution

  1. 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.

  2. 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.

  3. 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.

Redesigned AZ Lyrics logo—resembles the letters “az” being typed into a search bar to cater to AZ Lyrics’s theme of searching.

Redesigned AZ Lyrics logo—resembles the letters “az” being typed into a search bar to cater to AZ Lyrics’s theme of searching.

Redesigned landing page—major search bar in the middle with artist highlights behind it.

Redesigned landing page—major search bar in the middle with artist highlights behind it.

Redesigned charts page—rankings of songs are shown, more information shown horizontally.

Redesigned charts page—rankings of songs are shown, more information shown horizontally.

Redesigned search results page—divided into the top result, related songs, and related artists horizontally.

Redesigned search results page—divided into the top result, related songs, and related artists horizontally.

Redesigned lyrics page—lyrics in the original language (if applicable), romanized version, and English translation are organized horizontally so users can avoid scrolling a lot and so they can see translations side by side.

Redesigned lyrics page—lyrics in the original language (if applicable), romanized version, and English translation are organized horizontally so users can avoid scrolling a lot and so they can see translations side by side.

Redesigned artist page—a large, static photo of the artist(s) is provided on the left, while a short biography and list of the artist’s songs and album are provided on the right column.

Redesigned artist page—a large, static photo of the artist(s) is provided on the left, while a short biography and list of the artist’s songs and album are provided on the right column.

Note: still currently working on the HTML/CSS of this redesign! Stay tuned :’)