Case Studies #3:

This Case Study is in regards to the website, a site that allows users to search for songs by either lyrics or by singing it through a microphone.

The navigation of the site (on the home page) is set up as follows. There is a primary navigation bar at the very top of the screen that includes “Studio” ( to record a song for others to search by), “midomi Stars” (users with high ratings on their recordings), “Hot Artists” (artists getting several search requests by users), and “Explore” (used to explore artists by genre, style, etc).
To the right of the primary navigation bar are links to register and login to the site.

Above the primary navigation bar is an input area for users to quickly search for music by typing in lyrics, artists, song names, or albums

The primary navigation is always at the top of the page no matter where you are in the site. This allows users to quickly navigate to the content on the site they are looking for.

When on a certain page, the primary navigation bar shows the page as active by changing the text color and underlining the text.

At the bottom of the page, there are links to the site’s legal disclaimers and Terms of Use and Privacy Notice in addition to links to other pages on the site that aren’t present in the primary navigation bar (such as Video Tour.) This section of the page also contains links to change the language of the page.

After clicking the “Explore” link, a secondary navigation bar appears on the page and allows the user to control what content is shown on the page. This includes filtering by genre, language, and time.

The architecture of the site is as follows. The main page leads to the four main pages: Studio, midomi Stars, Hot Artists, and Explore. Clicking on Studio leads to a page that does not contain new links to other pages. Clicking on midomi Stars leads to information about the top midomi users. I can view different categories, such as Top Recordings, and navigate to the user’s information pages and see their other recordings and biographical information. Clicking on Hot Artists leads to a page that lists artists that are repeatedly searched for on the site. From this page I can listen to audio clips of songs, or I can follow the links to the artist’s information pages, where there are links for photos, videos, songs, and fans. In this way, the architecture of the site is not deep until you reach the sections of the site that contain user and artists information.

The content hierarchy is apparent through the size of the text.

Heading 1:
Large font, bold, in white. This is used to display artist names and songs in the center of the site’s page. It stands out against the dark background and is quickly read on visiting the site.

Heading 2:
Large orange font. Used as headers for sections on the main page of the site.

Heading 3:
Medium blue font. Used as titles for songs or artists in different sections on the main page of the site.

Heading 4:
Small blue font. Used to indicate artists names in different sections on the main page of the site.

Small black font, sans-serif.

This typography has its strengths and weaknesses. The strong, contrasting colors of the main headings (bold white font against black) make it very easy to read the top artists and information located in the center of the main page. This is also true of the black font and the orange font (the orange is dark enough that it stands out clearly against the white.) The font that does not stand out enough is the blue text. When against the dark background in the center of the page, it is fairly easy to read.
However, when it is on the white background the normal-weight text and the blue color make it difficult to quickly read.

This is a weakness that should be corrected, as artist names are an important aspect on the site and are the reason why users visit.

The organization of the site is easy to navigate. The information most required by users is located on the front of the main page, and links to other content are placed in locations that are easy to find. The activated primary navigation bar also indicates where on the page I am.

The structure of the site is set up as several rows with a column located about halfway down the page.

At the top of the page, the top row contains the banner, primary navigation, and input box to search for artists and songs.

Below this is the main content row, which contains a link to the voice recording search, iPhone application, and a few of the top artists on the site.
Under the main content are several rows of other information, such as featured videos, hot tracks, up & coming artists, album pick, and new releases. Featured videos, hot tracks, and new releases are themselves in grid format as they contain several thumbnails, while the other sections are in row format as they contain more text-based information than imagery.To the right of the content is a column that contains midomi stars (highly rated users) and current updates to artists and users.


The site uses several icons throughout the website. Some of these include:
Microphone next to “Studio” link
Star next to “midomi Stars” link
Flame next to “Hot Artists” link

Lightbulb next to “Explore” link

These four icons help users understand what each of the primary navigation links accomplish (clicking “Studio,” I’ll most likely be recording something).

Next to the search boxes on the site are two different icons. Next to the recording search is an icon that that looks like sound waves and a magnifying glass, while next to the text search is a magnifying glass icon.
Also, next to songs and artists names are play buttons and shopping cart symbols. They allow users to quickly listen to and purchase music on the site.
The site contains images, but these are only thumbnails of artists and album covers that are in the site’s database. This provides users with graphical content that they can search through, in addition to textual and rhythmic (through singing).

Color Palette:
The color palette of this website is based off of orange, brown, blue, black, and white.

Black (dark gray):White:The website starts off on top with an orange/brown bar that contains the banner and the primary navigation bar. This is next to a bar of light blue, which is then next to a dark gray/black bar that contains highly rated artists. The rest of the page is then on a white background. This scheme draws a users focus to the center of the page, as it as the most activity. This is where the site’s main feature, the ability to find a song by recording a sample, is located. There is enough of a gradient in the colors so that they are not solid, and they are matched up so that they complement each other without looking unpleasant together.

Site Focus:
The purpose of this site is to provide users with information about songs, artists, and albums that they are interested in. Users can enter in search boxes text-based information that they know about a song or artist, and the site will provide them with relevant information. Or, users can use a feature not found at other sites and use the audio search. To do this, users record themselves singing the song and upload it to the site. The site uses software to match up the user’s recording to similar recordings uploaded by other members and displays the information about possible matches to the user. In this way, users can find songs that they know the tune to, but not the lyrics. The site also has music videos and photos of artists on their pages within the site, and users and send messages to artists and other members.

An improvement for the site could be to change the font color and size. Currently, there is text that is readable, but not easily. This includes the blue font on white and the gray font on white. Changing these to a black font or making them bolder would allow them to be read more easily on the white background.

No comments: