Prototype Photos


Iteration # 1 - DJ 

Images

Description


Screen from Virtual DJ. The bottom right pane is our own custom plugin. It allows the user to put in their
DJ ID, add songs to the pane via drag & drop, and connect to our web interface.


This screen is the first page that the user would get to after they have logged on and registered an account.
It has instructions on how to install the plugin and what to do next. Links to the other pages are in the second dropdown pane.


This page shows how the DJ can allow users to vote on songs. The songs are pulled from
 Virtual DJ once the DJ has installed our plugin and connected to the web interface.


This page shows how the DJ can end voting for a song. He does this once he has decided which song he wants to play.


This screen shows analytics relating to which genres have been played so far at the party using a bar graph.


This screen shows analytics relating to which genres have been played so far at the party using a pie chart.


This screen shows analytics relating to which genres have been played so far at the party using a time line.

Iteration # 1 - Audience

Images

Description

Home Screen

  • Clickable picture of dj
  • "Now-playing" label/text
  • Mood meter
  • "Old Songs" button
  • "New songs" button
  • Rate buttons
  • Tweet button

"Tonight's Playlist" Screen

  • Shows a list of songs previously played with a timestamp next to each song.
  • Each song has a like button.

"Next Song I" Screen

  • Displays 3-5 songs with checkbox.
  • User checks a box and clicks "Vote".
    • User would be sent to "Next Song II"

"Next Song II" Screen

  • Displays songs previously voted on, with current votes.
  • Song with most votes is highlighted.

Briefing


DJ

As he prepares for the upcoming party, DJ MackVibes sets up his equipment, software, and speakers. He hopes that using this new website, MackVibes, will bring a new interactive experience with his audience.

He sets up VirtualDJ and, as the crowd begins to grow, he starts the show and utilizes the website, getting a grasp on what the audience is looking for.

Audience

You decide to go a party. When you arrive at the party, one of the party hosts notifies you that the DJ is using a crowd-feedback system. They provide you with a QR code that you can scan, and have access to, alternatively there is also a link that you could enter into your mobile browser.As you walk into the party, you now can use the application whenever you want through your smartphone. The application has 3 basic screens, a homepage that tells the current song, a vote page that allows you to cast votes, and a previously played playlist of the songs the Dj played so far at that event. 

Scenario Tasks


DJ

  1. Theoretically download our plugin and organize his music into a playlist for the party
  2. Select 3 songs for the audience to vote on, and begin the voting process
  3. End the voting process and analyze results, both
    1. Genre popularity, and
    2. The overall mood of the party
  4. Analyze feedback from the audience about the overall performance

Audience

  1. Vote for song to listen to in the next few minutes
  2. Like previously played songs from the audience and interact with that list
  3. Upvote and/or downvote DJ performance

Observations


Summary (DJ)

In the overarching comments given by our user testing groups, we noted that there were several comments that came up repeatedly, mainly our need for a consistency in UI. Because one of the main needs for our user base was in-obstruction to the other software that they are using to keep the party going. Information, such as genre popularity with both audience voting and previous songs played, could be useful if it were shown with automatic updating and historical data saved and available. Showing the visual information with other indications, such as alarms and lights to inform of voting results or recommendations for song selections. Other possible changes include more effective timelines and seamless plugins for the most common software that people use for their DJ equipment, as well as*:*

  • Click the bars and see what songs fit in that category 
  • Find what was played on the last part of the hour 
  • Circle chart needs to have indicator of what's popular currently 
  • DJ feedback, shows genres during period of time to see what could have been better 
  • Needs to be clearer and quickly readable 
  • Show the DJ visualizer on Virtual DJ 
  • Time slots on DJ feedback page 
  • No immediate relevant information 
  • Know what people want, can adjust accordingly 
  • Adding a time reference 
  • Bar graphs need to show time 
  • Circle does not give more information than bar.  
  • Lights can be effective, indicate certain alerts or important info. 

Audience

- didn't know if the next song would slide out or go to a new screen
- didn't see a back button
- didn't see the tabs on the dj screen
- didn't have the sceen for adding a party
- DJ info was not obvious
- Tabs might not be a good idea
- We should have a thank you for voting page
- sliding wasn't intuitive
- might want to see how many votes next song has before user votes
- assume similar icons have similar views
- would like to save the song for later
- would like to tweet about the song
- would like add in function for the next song
- make it clear that the choose the next song is important
- need to show the user that the app is easy to use and quick to load up
- possible Windows 8 log in to imply swipeability
- front screened cluttered
for viewing songs, instead of an I button, have it have almost a opening up tab like view

Summary (Audience)

From our observations, we can see a few usability issues. First, our navigation mechanism seemed to be confusing. We see this because one user was looking for a back button but couldn't find one. Also, many users did not realize that they could swipe to get to the next screen. We also realized that we were not giving the user immediate feedback that their vote was counted. This was shown when a user mentioned that it would be nice to have a thank you screen after they had voted. Finally, we noticed numerous times that users would get a bit uncomfortable with the front page since there was a lot to take in on one screen.

Prototype Iteration


DJ

For the DJ interface we made few changes. Initially, our users had difficulty finding which screen to start on. To alleviate this issue, we added a home page so that each user would be presented with a more uniform interface where they could log in and then be brought to the next page with directions to download the plugin. We also found that users had trouble navigating our pages in general. We fixed this by adding a navigation bar to the top of the we interface. We also found that users had trouble navigating our pages in general. We fixed this by adding a navigation bar to the top of the we interface. We also received many specific requests for individual pages. We updated this pages to add the additional indicators.

Audience

Image

Description

 

The main goal in changing the home screen was to 
make it simpler. We ended up removing the mood
meter and the DJ image (which were deemed unnecessary).
 
We added a navigation bar to the top of the application.
This was made to help users remember the different screens
that they can access.


We added a quick tutorial screen for users that would
be presented when users initially opened the app.
This helped make it more intuitive for users to 
understand how to interact with the application.

  • No labels

1 Comment

  1. I appreciate all the hard work you put into this. I think you still have a bit of work left to do to get the most out of the paper prototyping stage, but I think most of it can be handled by just thinking critically about the feedback you got already. Your feedback from grading is below.

    User testing observations: It looks like you didn't test your prototype iteration on three more users. Your observations are also not consistently high level or organized. I'm unclear on how many users you tested on each part of your interface, and I'm also unclear on how exactly the DJ interface (which is the one you need to focus on for this project) changed in your iteration. I'm also a bit unclear on what your prototype actually looked like. The scans make it easy to read, but generally you should have some moving bits in your prototype. I don't see any in the images so they're hard to evaluate.

    A few things to note, going forward: keep an eye on the requirements in the assignment. Make sure you really stick with the feedback you've gotten so far. Keep in mind what makes this assignment interesting (the user population), and really focus the implementation on those parts.

    Please let me know if anything is unclear.

    Best,

    kp