Wireframes

Clickable Wireframes

This is our login/register page. We wanted to do this so they cannot listen to music or enter the site without registering and agreeing to the Terms of Use. It also gives us a chance to introduce them to the site and different features of it after they register for the first time. We resemble Pandora in this way.

 

This is a close up of our header and navigation. There are four main tabs, a search bar, social media widgets, and buttons for My Profile and Logout. This is made available to them once they enter the site.

This is the page they will first come to upon registering or signing in. It shows what shows are currently being streamed.

This is what their Profile page will look like, but it will include more detailed information that is relevant to their account.

This is one of our more detailed pages. It is an example of a DJ's profile.

This is the Bars landing page that lists all of the registered bars on our website and has a featured bar section.

This is an example of one of our simpler pages: the Contact page. 

Lastly, this is a close up of our footer.

Final Revised Script

Hello! Thanks for taking time out of your schedule to do this! 

I am currently taking a class about web design and finding ways to approve upon a website. You are not being tested. This is a simple usability test for the website. You can't be wrong in any way.

I am not the designer, so you do not need to worry about offending me. I want you to speak freely.

To understand your thought process, I encourage you to talk out loud as you go. It helps me understand how you make decisions.

First, I will need you to log in or register, but you do not actually have to insert information in the boxes. Now I am going to ask you to look at the homepage of the website.

What do you think the purpose of the business is?

What do you think the site can do?

What are the main sections of the site?

Where would you first go if you came to this page?

Now I'd like for you to explore the site. Where would you go to find what bar DJ B-ROB is at?

Where would you go to change what DJs and bars you subscribe to?

Why did you think you would find it there?

Where would you go to find what hours Big Bar has that night?

Where would you go to listen to a show happening at that moment?

Thanks for completing that. The intentions of this site are to promote DJs, allow users to stream local music and promote bars away from campus.

Do you think the site portrays these features?

Does the overall design match the purpose and content of the site?

Thanks for your input and participation! I appreciate it. Do you have any questions?

Usability Test on Outside Audience

To gather subjects for the Usability Testing, we wanted to find college students who use Pandora and similar streaming websites, because they are more likely to use a website like ours, and students who prefer/know DJs.

First, we interviewed a senior named Melissa who often uses Pandora. When asked the purpose of the business and what the site can do, she guessed that it was for streaming live music and listing DJ's and bars in the Columbus area. She easily guessed the main sections of the site and said she that when coming to the website, the first place she'd go would be to remain on the Streaming Now page and start listening to music. When asked to find the specific areas of the website, she found them all quickly and on her first try. She think the site portrayed the purpose and content of the site in an easy-to-navigate, clear way. However, when we told her the purpose of the site was to "stream local music and promote bars away from campus," she did not think the prototype really promoted bars away from campus. If she did not think it promoted bars away from campus, then we will use bars away from campus as the "featured bar" whenever possible, because it will be given more attention by the users. If the next subject answered that she knew where to find music that was playing now "because it was the home page that I had already been to," then we will revise the script to ask that about where to find subscriptions because it is less obvious (and we did change it).

Secondly, we interviewed Lexi who prefers bars with DJ's. Lexi had many similar answers to Melissa in the way that she found everything quickly and easily. She said that if she were to come to our home page, she would first go look at the list of bars, because she would want to see the information provided about the ones she may be attending that night (to see their specials). She did not think the overall design matched the live streaming aspect as well as it could because "most sites would make it available on each page" like Pandora. If we wanted to make sure users could stream the music while visiting other pages on the site, then we would add a mini player to the header, because they will then be able to pause it while on any page. After interviewing Lexi, we revised the script to ask why they thought they'd find subscriptions where they did.

Next, we interviewed Alex whose friend is a DJ. He guessed the purpose, main sections, and features of the site pretty accurately. Because his friend is a DJ, he said upon entering the site he would first go to the DJ's tab and look for his friend's profile. He navigated the site easily and found everything we asked of him on his first try. After he found the My Profile button to review his subscriptions, I asked why he expected to find it their and he said "because that's where other websites would put it." This is good because it shows we are remaining consistent with web standards. He thought the overall design matched the purpose and content well, but thought we were promoting DJ's more than the other intentions for the site that we listed.

Lastly, we interviewed Chad, a junior who recently turned 21 and started going to bars. Chad answered the first few questions spot on what we were looking for and began navigating it well. He ran into a similar problem one of our in class subjects had when asked to find subscriptions he has. He did not think to look in the header, but he did look to the footer. If he also had a hard time finding this, then we should make the button bigger or introduce that feature once they register because they will then know where it is or be able to recognize it. Other than that, he thought it all matched our purpose and intentions and was interested in the site.

Therefore, after going through these interviews, we found a few changes we may want to consider making:

• Promoting bars away from campus: making them the Featured Bar as often as possible and rearranging the list on the Bars page to put campus bars at the bottom.
• Live streaming: making it more accessible from any page and making it more prominent.
• My Profile features: making them more apparent or introducing them when they first enter the site so it is easier for users to find and change preferences.

If our in class usability tests yield similar answers, these may be taken into account for our final overall design, because they would then have become consistent problems.

Clickable Wireframe Testing

Both users thought the purpose of the business is streaming music. When asked what all the site can do, again both mentioned streaming music, but the first user went further and said you could look up bars and certain dh's playing at that bar. The second user mentioned finding deals at bars.

Users 1 and 2 easily recognized the main sections of the website, but only user 1 included "My Profile" in main sections. User 1 said she would first go to the bars tab and the second user said she would first click "Tune in" in the live streaming player.

Finding what bar DJ B_Rob is playing at was an easy task that they navigated well, but user 1 didn't acknowledge the "Upcoming Shows" section until she read through the above information. Similarly it was easy for them both to find Big Bar's hours, but user 2 recognized the hours in the Featured Bar section and user 1 didn't see it and went to their profile to find hours. When finding where you could listen to a show that was happening at that moment, they both selected the streaming now page and said they did so because "now" implies that it is currently being played.

One issue we ran into was when user 2 did not know where to go to change what DJs and bars she subscribes to. She was on the DJ's profile looking for information about subscribing and didn't seem to acknowledge the header where My Profile was placed. The first user found it very easily.

Both users thought the site portrays the features we listed as the purpose of the site and thought the overall design matched the purpose and content. The first user said it was "standard with each tab" and "laid out well."

If the user was confused about where to change her subscriptions, then we should be sure to explain, when they are registering, that the tab for My Profile at the top is where they can change any information, see what they have previously listened to and subscribe to DJs and bars. This way they know that all those features exist and will take advantage of them and know where to find them.

Because the users were more focused on the live streaming music, we are going to make more of a point to introduce users to the searching for DJs and bars feature, DJs music on their pages, and the information you can find about each bar and DJ. To do that, we will give a little summary of the website when they register that they read before entering.

Revised Script

Hello! Thanks for taking time out of your schedule to do this! I hope you had an okay time finding us!

We are currently taking a class about web design and are finding ways to approve upon a website. You are not being tested. This is a simple usability test for the website. You can't be wrong in any way.

I am not the designer, so you do not need to worry about offending me. I want you to speak freely.

To understand your thought process, I encourage you to talk out loud as you go. It helps me understand how you make decisions.

First, I will need you to log in or register, but you do not actually have to insert information in the boxes. Now I am going to ask you to look at the homepage of the website.

What do you think the purpose of the business is?

What do you think the site can do?

What are the main sections of the site?

Where would you first go if you came to this page?

Now I'd like for you to explore the site. Where would you go to find what bar DJ B-ROB is at?

Where would you go to change what DJs and bars you subscribe to?

Where would you go to find what hours Big Bar has that night?

Where would you go to listen to a show happening at that moment?

Why did you think you would find it there?

Thanks for completing that. The intentions of this site are to promote DJs, allow users to stream local music and promote bars away from campus.

Do you think the site portrays these features?

Does the overall design match the purpose and content of the site?

Thanks for your input and participation! I really appreciate it!

Usability audience

• Where can you find 3-5 individuals from your target audience to test this web site on?
• We feel that we could find easily 3 to 5 people to test our web site just on campus, but some other places would be the friends of Anthony because he know a lot of people that are involved in the bar scene and also involved in the music industry.
• How can you solicit for these individuals to take your test?
  • Will you require flyers/marketing around a certain area or building?
  • We could make flyers and post them near or in bars, or where a lot of people walk. we would have to make the flyer eye catching so people stop and look then more than likely they will test out our site.
  • Will you send out emails to a particular group of people on or around campus?
  • We could post in groups on Facebook that we are both in and post all over social media to get people to test our site.
  • Will you ask 3-5 friends you already know for assistance that might represent candidates from your user group? Think back to your personas and which people might fall into a similar category as the theoretical personas.
  • I know some of my friends do fit our personas but I feel like that where we would post our flyer or ad would give us a better picture of who actually would use the site, rather than our friends because if they are really our friends they will do it anyway, so i want people i do not know to use/test out our site.
• How has your site changed since your paper-prototype version?
• The navigation bar was removed from the login and register page so they cannot access anything without logging in.
• Our home page became the Streaming Now page instead of a separate landing page.
• In our footer, we removed privacy policy (it will be worked into terms of use) so we could find a place to link to the About page.
• We also added a header to the top of each page so you can tell what page you're on.
• We also created a "Log out" button
• How do you foresee differences in usability testing from the paper wireframe exercise we did in class - will you have to modify your script?
• Overall, we found out we need to communicate the music samples of DJs and information about DJs and bars more clearly, so users don't think they can only stream music happening at that time. We also need to provide direct links to the bar and DJ's profile from the Streaming Now page. We also concluded that the Login/Register page should be the first thing the user sees to grant them access to the site. When they are granted access, they will be taken directly to the Streaming Now page. We chose this page because it directly relates to the purpose of the website more than other pages and is more likely to encourage people to stream music or pick those bars. With this being said, we do not think that we have to change our script.