Scenarios:
We have three main types of tasks that are possible in the site. The first is to post new news items. These can be events, articles, or simple discussions. The second is to navigate available news items. This can be done by clicking on the desired topic, such as art, music, computers, etc, and scrolling through the available items. Finally, we want the users to be able to discuss the items. Thus, the user needs to be able to enter the comments section of an item and read other users' comments and post her own.
The following are three possible scenarios for our tasks.
Scenario 1:
Amy would like to make an event for her upcoming 21st birthday bash. She has rented out the VIP lounge at Estate and would like it to be the best birthday ever. As such, she needs many cool MIT students to come, and so she would like to publicize the event as much as possible. Since everyone at MIT has a Beaver Buzz account, she decided that she’d post an event on Beaver Buzz. She logs into her account, which she has made previously. She then selects to create a new event. She is prompted for a time and a date for the event. She enters that it will begin at 10:00 PM, and that it will take place 6/12/2011. In addition, she fills out an optional event textbox describing her event as the “event of the millennium.” After posting, she goes to check the event schedule and sees that it has been added. Satisfied, Amy logs off.
Scenario 2:
Pepe wants to try out Beaver Buzz to better his social life. After visiting and looking at the different features of the website, he decided to join to gain posting capabilities and comment on posts made by other users. To join, the service checks his MIT certificate (to make sure he is a student) and then asks him to input a user name and a password.
Once the sign in process is completed, Pepe goes to the homepage and looks for the coolest events on campus in the “What’s Hot?!” section. He then notices that there is a huge party the upcoming Friday. He goes to the event page and notices that there is a 200 message thread about the awesomeness that is going down on Friday. He then adds the party for his weekend “to do” list. Pepe logs off feeling that his social life is taking a turn for the better.
Designs:
Design #1:
This design shows as many article info (author, title, date added, etc) as possible at the cost of not allowing users to preview the articles before having to access their page. The suggested interface shows the most commented events and discussions on the home page. It also allows users to search for events, authors, tags, etc from the "search" bar. Events and Posts can be sorted using a simple drop-down menu. This design focuses on simplicity.
Storyboard - Design 1
Justin Beaver, a Freshmen, is visiting the Beaver Buzz home page for the first time. Justin is excited about the website, since he can learn about what is going on in the MIT community and discuss topics with his peers. He notices that the "What's Hot?!" interface displays the most talked about events and posts. He likes the idea of posting and commenting posts or events and decides to become a member.
Before getting to the Beaver Buzz sign in page, Justin was asked for his MIT certificate (we want to ensure that only MIT affiliated people can access the website). In the sign in page, Justin decides to use "username" as his username and enters a secret password.
Now Justin accesses that "Events" page to see what's going on in campus. He decides to sort events by "upcoming". Now he explores his options for possible weekend outings.
After finishing a PSET, Justin decides to procrastinate by looking into other student's thoughts. He browses the "Posts". After 15 minutes, he goes back to work.
Design #2:
This design trades off how much information you get from each article preview for more articles visible on the screen at once. Discussion posts are sorted by topic and events are sorted by groups/hosts.
Storyboard - Design 2
Terry uses BeaverBuzz to check out recent articles and events for the week. He clicks on the Recent tab to see the hot new discussions. He already has specified which topics he is interested in, through the user settings. He can easily see multiple articles that have been tagged in his favorite topics. He scrolls right within the sports articles/discussions to see older posts which he missed the day before. Terry clicks on a discussion to read the comments on it.
After reading the new interesting posts, Terry decides that he wants to be able to see discussions from more topics. He clicks the add topic button and selects a topic to add to his Recent tab. Terry clicks on the My Posts tab to see if anyone has responded to any of his comments.
Terry wants to post an interesting article about MIT sports that he found online. He clicks on the new post link and enters the information for the article. He pastes the link in the description text field for people to follow to the article. He tags the article in the sports topic and posts it.
Design #3:
This design was meant to be slightly more consistent with other article-sharing websites on the web, such as Digg.com and Reddit.com. In particular, we treat discussions, articles, and events very similarly. However, we did want to make the interface simpler. Thus, there is only two types of actual pages. The first is the “View Topic” mode, which contains links to articles, events, and discussions. These are ordered by most-recently posted. The only exception is the “What’s Hot” topic, which is ordered by how many people have liked the topic. Users may navigate through topics, view the posts, and like/dislike the posts. The other type of page is the “Discussion” mode. Every Article, Event, and Discussion has this mode, and it is where users may discuss the current post. A user may either post a new comment, reply to another comment, or delete one of their old comments.
All other functionality is done through dialog boxes. This keeps the page as simple as possible, and makes it easy to return to the previous point of navigation. In the following storyboard, we demonstrate how a user may interact with the interface. We include (very rough) sketches of the interface at appropriate places. The sketches focus on making the layout simple, efficient, and learnable.
Storyboard - Design 3
Scott, a phD student in the Political Science department, has just heard about Beaver Buzz from a friend, but he’s skeptical about joining right away. He’s decided to check it out first to see if it’s worth it to give out his email to yet another website. He types in beaverbuzz.mit.edu to his url bar and is greeted to the front page, which is by default the “what’s hot” topic.
Scott isn’t particularly interested in the Alpha Pi Omega party, the new Elder Scrolls game, or discussing Hass Classes. He sees the “News” link located in the favorites section and clicks it. The bottom-right page reloads and he is presented with a selection of articles pertaining to current events. This is much more to his liking.
After clicking some of the articles, he realizes his life won’t be complete unless he himself can post articles and comment on them. He sees the “login” option in the upper-right hand corner. He clicks on the option “Get Account.” After using his MIT certificate to verify he is a student, a short dialog window appears. All he has to provide is a username (he chooses “Scott25”), a password, and a valid email address.
He is taken back to his old page, but the upper-right hand corner now displays his user information.
He decides that he’d like to discuss the article entitled “Egypt Uprising.” Being a fierce proponent of Democracy, Scott shows his support for the Egyptian people and leaves a comment. He browses several other topics and their discussions and leaves thoughtful comments. After getting tired, Scott logs off and goes to the gym.
After getting back, Scott logs back on to beaver buzz. This time he only needs to provide his username and password. He clicks on the “View Recently Discussed” link, which pops up a dialog box, and finds that several of his comments have been replied to.
He checks out the discussion for the “Uprising in Egypt” article.
Finally, later that night Scott reads an interesting article, also about the situation in Egypt. The article details the causes of the uprising. He logs back on and clicks the “News” topic. He decides to “Post New,” which takes him to a simple dialog box. He enters the desired name for the new post, “History of the Egyptian Uprising,” specifies that it will contain an article link, and posts that link in the textbox. He submits the article, which is posted at the top of the “News” page.
Out of curiousity, Scott clicks on the “Events” tab to see if there’s anything interesting. While there isn’t anything particularly exciting happening that night, Scott sees that the LSC is playing a movie tomorrow. 
He’s not sure if he’ll go, but he keeps it at the back of his mind. Finally, being an amateur linux hacker, Scott would like to Computers to his favorite topics so he can access it quickly. He clicks the "edit" link next to the "Favorites" tag, at the left-hand topic scroll bar.
Scott notices it's really late, and that since he had oodles of fun on Beaver Buzz getting into flame wars with communists and anarchists he had lost track of time. Satisfied with a day well-procrastinated, Scott goes to bed.