Introduction:

For this portion of the project, we all decided to come up with two different designs independently. At our first meeting we saw that we all had radically different ideas as to how the interface was to be implemented. All our designs agreed, however, on their simplicity. We discussed the pros and cons of each, and how each could be improved. We made it a point that the main tasks we identified (discussed in the scenarios section) always be easily achievable in the design. At the end of the meeting, each of us chose our favorite interface and went home to improve it in the ways we had discussed. We also came up with several scenarios. Below is the most amusing one we came up with.

At our second meeting we presented our designs again, and outlined possible storyboards for each. After some discussion we agreed on how the storyboards would work. Each design was drawn by a different person, and each of us typed up the storyboard for our designs.

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.

Scenario: Amy's Birthday Bash

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.

Since Amy did not have an account, she first had to create one. When she visited the "join" page, the service checked her MIT certificate (to make sure she is a student) and then asked her to input a user name and a password. Once the sign in process was completed, Amy logs into her account.

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!!! Don't wanna miss out!!! PS Bring presents.” After posting, she checks the "Party" topic and sees that her event has been posted. She also checks the event schedule and verifies that the date and time have been entered correctly. She unfortunately notices that Beta Beta Beta is having a party that day. Scared that her birthday bash will be ruined by a dumb frat party, she clicks on the event to view how popular it is. Thankfully, it only got three likes, and only two people have left comments. Since the event had been made several days ago, she guesses that it won't be anything huge. She post a nasty comment of the likes of "Come to Amy's b-day instead!" , but after a few seconds she realizes it was rude and deletes it. She checks her page again, and already sees 25 likes and 7 comments. After reading the comments, where everyone expressed their interest in attending her party, Amy is satisfied and logs off.

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.