Thursday, April 24, 2014

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.


Thursday, April 10, 2014

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.















Thursday, March 27, 2014

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!

Tuesday, March 25, 2014

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.

Tuesday, February 25, 2014

Usability Test

The Usability Test pointed out a few things to consider. We are going to make the Login/Register page the first thing seen and then take the user to the homepage once they are logged in.

The Homepage would go directly to the Streaming Now page. Based off the Streaming Now page, the user said she thought the purpose of the business was to stream music from different DJs at different bars. She mainly thought the site could stream music from different DJs and allow you to search by DJ or bar to find the music.

The user's answers to this question made us realize that we need to communicate the amount of information we have about DJs and bars so they are immediately aware they can find DJ and bar events, contact information, specials or hours, or even samples of music. The user mainly thought it was about music streaming at that moment, but we want users to use the website for more than that.

The user easily recognized the main sections of the website. From the Streaming Now page, the user would first go to the DJs tab to find a DJ she likes. The user navigated the website pretty easily and in the way we intended for her to:

  • To find what bar a DJ is at, she would go to the DJ page and click on the DJ, then read their profile information
  • To change subscriptions, she would go to My Profile and look under the Subscriptions section.
  • To find the hours of a bar, she would click on Bars, find the bar she wants and click it, then read  the Hours section of their profile.
  • To find shows happening at that moment, she would go to Streaming Now (but was hesitant to pick this).
    • We asked her what she would expect to find on the Streaming Now page. She said she would look at the player and see the DJs at different bars. If she found one she liked, she'd click on the bar to go to their page and look at their info for the night.
      • This made us realize that the Streaming Now options should have direct links to the bar and DJ's profile.
The user thought the site clearly portrayed the features, but would be more clear with logo and tagline. She also thought the overall design matched the purpose of the site.

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.

Script for Usability Testing

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 in any way. 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.

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 your favorite DJ is at?

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

Where would you go to find hours of a bar 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!

Tuesday, February 4, 2014

Site Map


Identity Strategy



Business Name: 614 After Hours
Website tagline: Bringing You the Best of Columbus Nightlife
URL/Domain Name: 614AfterHours.com
Email: info@614AfterHours.com
Facebook: 614 After Hours
Twitter: @614AfterHours

Monday, February 3, 2014

Personas

Primary 


Secondary

Competitive Analysis

Fratbeats.com: Fratbeats was picked because it offers themed playlists and mixes that are similar to what our site would offer and it reaches a similar audience.

Visibility of system status
They have a simple, self-explanatory navigation system that makes it very easy to find what you're looking for. To keep users informed, it has a paragraph on the main page with information about the radio and how to do a few things. When you click on playlists but do not select one, it takes you to an informational page about how to select a playlist. However, most websites would have taken you to a list of those playlists instead of instructions.
Match between system and the real world
Parts of the website use simple language that most users would understand, such as "playlists" and "artists" to navigate. There are a few parts that were confusing to a first time user, however. One tab says FB radio. When you click on it, it has the same music feature that you find on the homepage. I didn't even know what to find under the FB tab and then I was confused as to how it was different. Another system-oriented feature was the requests tab. When I clicked on it, there was some unfamiliar language and it was overwhelming. It also took me to a completely different website, which confused me as to the relationship between the two sites. Lastly, there were two places to submit requests. It explained the difference, but I did not understand the terms they used. This part could have been more user-friendly.
User control and freedom
The simplicity of music players makes it easy to undo your actions. By clicking the tabs, you can escape where you are. If you are in a playlist, it is easy to pause the music, select new songs or pick another playlist. Users can navigate freely and without any major consequences of accidental clicks.
Consistency and standards
It was easy to follow platform conventions. There was a time where I couldn't tell if two different pages held the same content because one was no labeled. This confused the consistency. There were also two different places to request mixes with different formats. It used system-oriented terms that I was unfamiliar with, so I am not sure what the difference is between those.
Error prevention
I did not run into any problems on the website. Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
Recognition rather than recall
When trying to find playlists, if a specific one was not selected, it would take you to directions on how to select one. I did not feel like I needed to remember things as I went, because each page explained things as needed or it was self explanatory. All of my options were visible and instructions were easy to find if needed.
Flexibility and efficiency of use
I could not find any accelerators. There was nowhere for me to log in, make playlists or save preferences to tailor my experience. Each time I went back to the site, I would go through the same process for selection, so nothing was speeding up the interaction.
Aesthetic and minimalist design
All of the dialogues and information were important to what I was doing and there was not much excess that I felt overwhelmed or annoyed by. For playlists, there often wouldn't be any information, just the playlist. The relative visibility was perfect for me, a first time user, to understand everything as needed. The design is very simple and basic, so it has a minimalist design.
Help users recognize, diagnose, and recover from errors
I did not receive any error messages from the website. It all functioned properly. The system made it easy for me to recognize what would cause errors and my abilities on the site. I imagine, based off the dependability of the site, they would have an easily understood error message.
Help and documentation
I couldn't find many resources when looking for help to navigate the system. The only instruction was when I clicked on the playlist tab. When you search for help in the bar, an irrelevant blog post comes up. It does not have a Help page, but it does have a page where you can contact them with any questions.

Right from the start, I thought their format was easy to follow and understand. With no experience on the site, I was able to carry out all of the tasks I wanted to. There was some confusion with the different radios and getting to the same radio two different ways. I was able to understand most of the language they used, but there are a lot of things they should clarify for first time users (for example, the difference between the two different kinds of requests you can make). There were some features on this site that I think we will take into consideration when building out website shaped off my user experience. Some features I really liked and understood, but we will explain others more to make sure anyone can understand. FratBeats.com has put together a great website, but there is room for improvement that I hope we can use for our own site.

Pandora Analysis: Pandora was chosen because it is the top music streaming website.

Visibility of system status
Pandora is very visibily appealing and very clear where everything is makes it easy to use.
Match between system and the real world
Pandora has everything set up that it could be useful for a first time user. Such as a search bar to find your favorite artist, genre, or song. Based on what you search the site plays music related to what you put into the search bar. I believe everything on site everyone has seen everything or has heard of everything that is on the Pandora site.
User control and freedom
The Pandora player is very easy to use with the play and the next buttons to pause the song that you are listening to, or to skip the song and listen to another song. Also on the site you can give songs ratings with a thumbs up or thumbs down.
Consistency and standards
Very easy
Error prevention
I did not run into any problems while on the site, but you do need to have an account to listen to certain music for a long period of time. To prevent error messages is to make sure that there is no way to find an error on the site, which there was none.
Recognition rather than recall
When on the first page you recognize everything and most things do not change at all so it is very east to remember and to use.
Flexibility and efficiency of use
You can sign up for Pandora and it would remember what you search and make those searches into your "stations." If you upgrade your account to actually paying money you can skip songs with no ads, but if you do not you have commercial ads breaking up songs and what not, just like you are listening to the radio in your car.
Aesthetic and minimalist design
All of the dialogues and information were important to what I was doing and there was not much excess that I felt overwhelmed or annoyed by. The relative visibility was perfect for me, and would be very easy to use for a first time user, to understand everything as needed. The design is very simple and basic, so it has a minimalist design.
Help users recognize, diagnose, and recover from errors
I did not receive any error messages from the website. It all functioned properly. The system made it easy for me to recognize what would cause errors and my abilities on the site. I imagine, based off the dependability of the site, they would have an easily understood error message.
Help and documentation
The help tab would be very useful for someone that had no idea go how to use the site. It described everything out step by step on how to use the site properly.

When first getting on the site it is very appealing to the eye and you can see everything clearly and you can see how easy everything is going to be used. Overall, I think the site would be very easy to use for first time users and it is very user friendly.

SUMMARY: 
What we learned from using Fratbeats.com is that we need to make sure all of the terminology can be understood by a first time user. That was a part of their website we found irritating, along with the navigation to instruction pages when clicking on playlists. They also had content repeated on some pages, so we will be sure not to repeat ourselves unnecessarily. We definitely want to model the "playing and streaming" features after theirs. It was very easy to pause, undo actions and more. Our website will contain more accelerators to tail the experience to each user. 

Pandora helped give us the idea of creating profiles so it can be easily tailored to each user. Also, due to the real time aspect of our music, our play features will be set up similarly with limited options to skip. We also want our site to be aesthetically pleasing like theirs. We hope to avoid the time restrictions Pandora has as well as advertisements between songs.

User Research


For our research, we made a survey, but also decided to interview bar managers and DJs.

BARS
For bar interviews, we talked to representatives from Ugly Tuna and Midway. Both bars have the same demographic (age 21-25, college students) and said they would register their bar for this website. Ugly Tuna would want extra marketing out of it and Midway would like more business (increased attendance and sales).

Ugly Tuna thinks this would benefit their bar because their audience would get to know how cheap their specials are. Midway, however, thinks they would benefit through getting more business and marketing.
The only hesitation was if other bars have better deals on certain days.

Midway only has live music 3 nights a week, while Ugly Tuna has live music every night of the week.

Ugly Tuna would be willing to pay for this service, but Midway would not.

DJ'S
We interviewed DJ B-rob who said he would be interested in creating a profile on the site. His genre is open format. DJ B-rob said he would upload samples of his music and believes his followers would tune in. He typically performs at Ugly Tuna, Cantina and Sugarbar.

SURVEY
The survey was sent out over social media and gathered 102 responses of which 80 were fully completed. Females accounted for 63 percent of the responses and 37 percent were males. Of the responses 91 percent were between the ages of 18-22. 

Forty percent of the responses were by fourth year undergraduates, and other levels of undergraduates (1-3,5) made up for 49 percent. The remaining 11 percent were in graduate school, young professionals or other.

We asked questions to gauge current behaviors to see if they'd be a fit for our website. The first question asked which websites and applications participants used most for music (allowed to select more than one):

Answer


%
iTunes


75%
Pandora


76%
Spotify


44%
SoundCloud


23%
YouTube


75%
Radio websites or iHeart Radio app


13%
Google Play


3%
Television or Xbox channels


3%
Other


16%

We were excited to see that three out of four of the most popular answers were online streaming websites (Pandora, Spotify and YouTube) meaning our website aligns with existing habits.

Next, we asked which genres they like to listen to (allowed to select more than one):
Pop/Today's Hits


78%
Country


57%
Rap


42%
Hip Hop/R&B


52%
Electronica/Techno/Dubstep


37%
Alternative


59%
Rock


46%
Heavy Metal


8%
Reggae


11%

The genres that appeal most to our website idea are Pop/Today's Hits (78%) and Electonica (37%). It is great that one of those was the most selected answer and that the interest in other relevant genres should align with some music offered on our website. 

To continue gauging behaviors that coincide with our websites purpose, we asked what they use to play music when the host friends at their place. The top two most likely used methods were (1) music previously downloaded to phones or iPods and (2) Pandora or Spotify. Again, these behaviors align with our website's offering. Participants were mostly neutral or unlikely to use radio and other sites that stream music, and most unlikely to not play music at all. We are happy that online streaming websites were the second most popular source for playing music as that is similar to what our website will be.

 Beyond music, we wanted to learn how often they go to bars: 
Answer


%
Never


8%
Less than Once a Month


12%
Once a Month


11%
2-3 Times a Month


20%
Once a Week


21%
2-3 Times a Week


22%
Daily


4%

And how often they go to bars more than a mile away from Ohio State's campus.
Answer


%
Never


17%
Less than Once a Month


37%
Once a Month


21%
2-3 Times a Month


13%
Once a Week


0%
2-3 Times a Week


7%
Daily


4%

These results show that the majority of our participants are bar-goers, which we are targeting. It also shows that there is a need for our website to improve attendance at bars away from campus.

Based off the average of the rankings of our participants, we found that the most common factor is where people’s friends are or where they want to go followed by having favorite bars that they continually go to. Cover charges, specials, transportation and proximity all scored very similarly. The least important factors were age restrictions and entertainment happening that night.

Our main concern is that entertainment is one of the least important factors, although it is somewhat close to neutral. We hope that those participants that weigh it as an important factor would find much use in our website to make decisions. We also see the opportunity to make this a bigger factor.

This question still holds a lot of importance, because it lets us know what information is important for us to list about each bar and how to incorporate that to make our site useful to more people.

 Next, we asked their preferences for when attending bars.
Answer


%
DJ


45%
Live performer


32%
Radio/playlist


22%
None


1%

We were very excited to see that almost half of our participants prefer DJs. This reinforces the idea that people will seek out DJ's music online or go to bars/clubs based of DJs and entertainment.

Only 27 percent of the participants actively follow a DJ or performer (go to shows, social media, etc.). This 27 percent is our main target audience for our website. The other 73 percent we hope will follow a DJ once they try our site.

The next portion of our survey tried to gauge the interest in our website idea:
  • 65 percent said they would somewhat likely, likely or very likely "LIKE a website that allows me to stream live music from bars and clubs on any given night."
  • 58 percent said they would somewhat likely, likely or very likely "USE a website that allows me to stream live music from bars and clubs on any given night."
  • 37 percent said they would somewhat likely, likely or very likely "tune in to a specific DJ or bar from home."

Lastly, we left an area for input at the end in which one issue to address was brought to our attention. They mentioned that remote listeners may try to record the music and post it online.