buzzUMD Design


Step 1 : Developing low-fidelity prototypes

Initial Prototype 1

Designs:
  1. Map view (Main Page)
  2. Calendar view
  3. Search view
  4. Events view
  5. Log in / Registration
  6. My account view
Transition Diagram:
-Transition Diagram
Explanation / Evaluation:
This prototype essentially focuses on creating an inset where much of the actual page functionalities will be viewed. Users have four basic views to see; map, calendar, login and about. The map view and calendar view anchor the website and allow anyone to see events in both calendar format and map format where the size of the b marker for the event indicates the buzz level associated with that event. After users login in (or register) they will then have the option to host events, manage events already scheduled or toggle a variety of options. The design focuses on a Web 2.0 feel with a simple, uncluttered webpage designed to attract user attention to the central inset. The above images portray how this would look and how it would work from viewing maps and calendars of events to logging, searching and hosting events. The transition diagram exemplifies one of many user paths that could be followed and focuses on a sequence of eventrs where a user sees events on the map and calendar, logs in , searches for an event and finally decides to host their own event.

Initial Prototype 2

Designs:

  1. Map view (Main Page)
  2. Calendar view
  3. Log in view
  4. Add event view
Evaluations:
This prototype mainly concentrates on ease of use and provides layout that helps user find needed information quickly. Since we are dealing with public events available to anyone interested, registering is optional. Registration is mandatory for anyone who want to host an event. But this prototype components are divided into 3 main views, map, calender, and groups. When user visits the site, map will be the home screen. Map will use the IP address of location where user is visiting from to display events withing close proximity. On the right side of the page events are displayed, sorted by distance from user. If user plans to attend a particular event user can click on RSVP where they can provide email address (optional) for notification related to that particular event. Calender view displays same events but incorporated into calender view. This allows use to find event based on date and time for easy scheduling. Map and calender will utility Google components that will allow user to easily integrate to their existing account. Groups view allows user to see list of all registered organization and their profile info. Under each organization a link will appear for future events hosted by the organization. When user click on the link, right side of the page will be refreshed and display all hosted future events. There will be additional view for the host, who can add, remove, update events on the web site. In the case when changes occur for event, all users who have RSVP will be notified. Having few views minimizes time spend by user when searching for event on the webpage, with one click RSVP option.

Initial Prototype 3

Designs:



  1. Map view (Main Page)
  2. Calendar view
  3. Create event view
  4. Log-in View

Evaluation
Prototype 3 focuses on having a centralized layout where everything, except the center window, remains constant. Users can sign-in and register at anytime by logging in to the top right corner. The common buttons in all the pages are Map, Calendar, Create event and Log-in. The Map is the main page which displays the map with all the events. It also has filters such as event type, date and event list. The decision of having map as the main page for this prototype was based on making an easy access for users who quickly want to check out events when they open the website. The calendar is an alternate view to the map where all the events are shown in a calendar format. Create events page requires user to sign up or sign in (if already a memeber) followed by creation of the event and confirmation. Log-in page is a seperate log-in that users reach after they click sign in on create event page. This prototype even integrates facebook and twitter for better communication between users and creators through those sites.

Step 2 : Evaluate prototypes
Overall all three prototypes included similar elements, including a central inset, a sleek design, similar map and calendar views, a top left logo and a top right horizontal menu. However, after reviewing all three prototypes and seeking the input of friends and acquaintances, we determined that prototype 1 was most appealing. While all three prototypes included important ideas and design choices that we are sure to incorporate in our final prototype, we all agreed that prototype 1 was a bit more polished and introduced some very innovative design choices like the b letter buzz indicator that could make it a particularly attractive interface design for our target, prospective users. From a functional standpoint, all three designs were similar. All three prototypes, based on a cursory review, seemed plausible and implementable. With regards to a task-centered review of each prototype, we elicited the insight of friends whom we believed could help us determine what a person might want to see when they are searching for events, hosting events, publicizing events, learning about events and commenting on events. All prototypes incorporated a task-centered implementation where their were slides for adding events, viewing events (on maps) and (on calendar), logging in and addining events. One additional reason prototype 1 was very appeling was how robust the design sample was in regards to addressing such functional aspects as usability (having a section for email reminders, contacting hosts, mapping events, inviting others to look at the event and searching similar events--all in a conveniently located content box on an events information page). One thing that our focus group did suggest to us was that we incorporate the filtered map view of prototype 3 in any final prototype.

Step 3/4 : Reconsider priorities and refinement

After a final round of deliberations, we decided to go with prototype 1 with some modifications. We reconsidered a few of our more central priorities including--the idea that our web site should be more simple than functional, that we not attempt to interface with other social media networks, that we not attempt to implement more of a group-centric design and that we not focus so much on privacy for a site that is supposed to be facilitating event politicization. Indeed we decided that our final design should seek to allow more user controls and functionality and not attempt to have a super simple, minimalist design in an effort to seem cool. Additionally, we decided that adding links to a Facebook and Twitter account to buzzUMD could do very little harm. While Facebook and Twitter could be considered competing tools for event politicization, it would probably add to buzzUMD's overall popularity and growth to promote the website through what has become some of the most important venues of communication between college-aged individuals. We also realized that it would be very beneficial for us to include group/host searchability, organization and profiles to allow for more of a social dimension to event publiczation. This way people could sign up and follow a specific host or group and have email alerts setup to indicate that the group/host they are following is planning to host an event. Lastly we reconsidered our stance on privacy and decided that we should implement a design that will allow some hosts/groups to not have users follow them or keep track of their events. Their may be groups who would rather simply throw events periodically and would not liked to develop an online following or allow the public to search other events they may have held in the past or are planning to hold in the future.

In sum, we decided that our final prototype will be based on the design of initial prototype 1 with the addition of the social media and map filter aspect of initial prototype 3 and the group functionality of prototype 2. We also plan on incorporating the above stated reconsiderations in our final implementation of the site and its design.


FINAL PROTOTYPE DESIGN


  1. Transitions
  2. Map View (Main Page)
  3. Calendar View
  4. Log-in View
  5. Create Event View
  6. Event View
  7. Search View
  8. Host Search View
  9. User Control Panel View