[Prototype] Interactive Design: Album App

Post 1) For the first prototype of my album application, I focused on incorporating a lyric booklet into the app. My primary goals in this week’s prototype were to determine a visual style and to find an interesting way to view the lyrics in both written and illustrated forms. My next step will be figuring out how to show explanations of specific lyrics and furthermore how to prompt users to find those explanations.


Post 2) After two rounds of user testing, it became clear to me that before I could delve into further functions of the app, I had to correct issues with what I already had. Neither of the users I worked with followed the order of functions that I had hoped for. At the home page, both users clicked on every icon on the page before the doors, which were supposed to be the only clickable icons. From this, I gathered that I had to find a way, through composition, to draw the user to click on the icons that lead to the song’s lyrics.. I attempted to solve this problem by replacing the doors with diamond icons, as both users first attempted to click on the diamonds. For the most part, the rest of the user testing went according to how the app should ideally be explored (see the video above, in Post 1). However, both users were disappointed that they could not click on the visual translation of the song lyrics, and that they could not go back and forth between song pages, only forward. I solved these problems 1) by making the visual lyric icons clickable, having them lead  to the written lyrics


2) by creating a function that allowed users to navigate back and forth between pages.

This is the result:

Post 3)

The third round of user testing revealed that my revision was very successful.The user almost perfectly navigated through the application as I intended (referenced in the video above, from Post 2.) However, the user attempted to click both the key icon and sheet of paper icon at the top corners of the song pages. Making the visual representations of the lyrics clickable rendered these other icons irrelevant, so I decided to delete them altogether for this week. My next focus became creating a better context for the app. I want it to be clear that the app is (so far) essentially just a digital lyric booklet for an original album, without me having to explain it beforehand. For this final round of user testing, I am not going to explain the app to my user. I am going to give them headphones, and as they navigate the app I will play the songs that correspond to each page.

If everything goes according to plan, it should look like this:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s