Assignment #9: Third Interactive Prototype

May 13, 2004

Problem Statement

There are many calendars on the U.C. Berkeley campus that post events of interest to other departments or organizations. However, there is currently no automated way to share event information among these numerous calendars. Usually the process of cross-posting an event requires either manually copying the event information from one calendar and pasting it into the next, or sending an email to a calendar administrator. This is problematic in many ways. First the process of re-entering event information wastes time, is inherently error prone and creates a data maintenance nightmare. Second, replicating event information increases data storage costs, can compromise the general integrity and timeliness of event information, and can increase overall complexity. Finally, incompatible data models limit the amount and type of event information that can be repurposed. These issues hinder the creation and consumption of web-based event information on the Berkeley campus.

[Top]

Solution Overview

Our solution to this problem is a system consisting of:

  • a standard data model of an Event which is flexible and scalable enough to accommodate the requirements of most calendars on the Berkeley campus, encoded in an XML schema to facilitate data transmission
  • a Calendar Management Tool which allows users to manage their events stored in a central repository, easily share their events with other campus calendars and customize their calendar's appearance
  • a visually compelling dynamic web-based calendar for administrators who do not currently have the resources to create their own
  • a design for a system architecture consisting of a centralized event repository based on the Event data model which allows for XML feeds to and from the repositories for "high-level" calendar administrators who choose to maintain their own website and repository

However, our project for this class is only the Calendar Management Tool, so that is what will be discussed in this report.

[Top]

Personas

Persona #1 - Megan Richardson

Technology level: Med-low

Interest in sharing events: Medium

Unique situation: Currently has no calendar, would like to send events to other calendars and receive events from other calendars

Megan Richardson is the 22-year-old UC student and member of CalPirg, the California branch of a student organization whose mission is “to deliver persistent, result-oriented public interest activism that encourages a fair, sustainable economy, and fosters responsive, democratic government.” She is from Boston and has been maintaining the CalPirg website in her spare time. Megan created her first website as a high-school senior using Dreamweaver. She understands basic HTML, but is not very familiar with data-driven websites or cascading style sheets. As she has not yet worked in the business world, she has also never used a personal calendaring system such as Outlook.

CalPirg sponsors 8-10 campus events each semester, such as rallies against hunger and homelessness or for clean and affordable power. The organization attempts to publicize these events to its members and the general public by posting them on their website and sending emails out to their mailing list in order to increase attendance and catch the attention of legislators. However, because Megan is very busy with schoolwork and activism during her senior year and not many of the other CalPirg members have website design expertise, they have not had time to redesign their website in order to present their events in a coherent, easy to use, calendar-oriented format. Megan would love to have a tool that would automate the creation of a functional, well-designed calendar for the CalPirg website. CalPirg might also be interested in publicizing other campus and community events that support their mission in their calendar, as well as publicize their events in other calendars to increase attendance at their events. Megan would not want to spend more than an hour setting such a system up, and could spend only about a half hour per week maintaining information on CalPirg events. CalPirg has about 4-5 major events a semester, and 2-3 events that occur on a weekly basis. If a nicely formatted calendar could even increase attendance at their events by 10%, it would be well worth her time.

Megan’s Goals:

  • Create a simple calendar or list of events as well as send out emails on events that her organization sponsors on their website in order to encourage the participation of members and the public in these events without having to hire a programmer
  • To ensure that their website supports the organization’s mission, which is to deliver persistent, result-oriented public interest activism that encourages a fair, sustainable economy, and fosters responsive, democratic government
  • To spend most of her time on schoolwork and activism, and less time on the technical details of managing a website

[Top]

Persona #2 - Harold Jackson

Technology level: High

Interest in sharing events: High

Unique situation: Campus Event Aggregator (with a few events of their own), wants to use CSS, needs to be able to indicate parent/child events

Harold Jackson is a 40-year-old Program Manager in the Public Relations office of the UC. He is a Los Angeles native who enjoys walking his dog and playing tennis with his wife, who is also a programmer. He is responsible for overseeing the maintenance of the UC website and Calendar of Events. It is essential that the website project a professional image, as it is an important means of advertising the university to the general public, alumni and potential donors. Harold has extensive web programming experience, and his website is currently dynamically generated. He works with a java programmer on the website, and both of them are familiar with XML. Harold and most of his group use calendaring systems such as Outlook or iCal. They also use the CalAgenda calendaring system to schedule meetings.

Harold’s ultimate goal in relation to the campus calendar is to publicize as many important events occurring on the UC campus as possible, and to highlight especially important events on the website. His groups sometimes organizes public relations events of their own as well. Currently events are submitted to the university calendar via a web form, and not many departments presently enter their events in this fashion. As a result, Harold’s staff has to spend time contacting various departments to find interesting events to post to their calendar. Harold thinks that if he could somehow find a way make it easier for campus departments and organizations to send him events, he could greatly increase the number of events he would receive and be able to publicize. In evaluating a new system, however, he would want to ensure that it is at a minimum an improvement over the current system in terms of functionality, and offers a design that integrates with the overall UC website. To accomplish this goal, he would like to be able to maintain the appearance of the website using cascading style sheets. He would also need to be able to clearly list events which have parent-child relationships with other events, such as conferences and the daily presentations and talks which occur there.

Harold's Goals:

  • Create a web-based calendar that will be the ultimate aggregator of all events at his university, which will be used by the public as well as people at the university
  • “Market” the university to potential contributors and the general public by highlighting the diverse and exciting events that occur there
  • Ensure that the calendar looks professional and eye-catching, and integrates with the overall “look and feel” of the university website
  • Publicize the public relations events of his department
  • Make the process for entering and approving events as easy as possible so that even “low-tech” users in his department can do this
  • Encourage other calendar owners to send him events
  • Use cascading style sheets to maintain website look and feel
  • Clearly list events that have a “parent-child” relationship on the website so that it is easy for visitors to find what they are looking for (e.g. Conferences during which many different daily presentations occur)

Persona #3 - Nina Sanchez

Technology level: Low

Interest in sharing events: Low

Unique situation: Political constraints on event listings & need to send email when new events are added

Nina Sanchez is a 27-year-old Program Coordinator of the Center for Middle Eastern Studies. She is single and has a very active social life. She lives in the Mission in San Francisco where she often attends art openings, musical events, and goes dancing whenever she gets the chance. She manages the office of her small department, including scheduling seminars and classes, fundraising, and maintaining their website. As their department often deals with political figures that may hold strongly opposing viewpoints, the members of her department must always be careful to avoid potential clashes between their visitors. This includes ensuring that people who would not want to be associated with each other are not featured prominently on their website at the same time.

Nina works with the Program Director to recruit potential speakers and secure funding, and uses the website to advertise their many events. They would not want to include events other than their own, as they see the website as a marketing tool for their organization only. Making sure the website presents a professional image is an important consideration for Nina’s team. She would also like to keep events posted even after they have passed, as new visitors to their site are often people searching for terms used in their descriptions of past events. Nina has no experience with programming, and her webmaster maintains the Center’s website. The calendar is very basic, consisting only of a list of events.

Nina would be interested in a new calendaring system if it would be easy for their members and visitors to use and would enhance their reputation by presenting an even more professional image. She would also like to maintain the current system of sending out an email to their mailing list whenever a new event is added, and ensure that she is able to modify events on their website at a moment’s notice, as locations are sometimes changed right before their events. Nina would love to be able to include links for their users to create maps to their events, as they often hold events off-campus. She favors the current list format of their calendar, and does not currently use a personal calendaring system, although she has used a PDA in the past.

Nina's Goals:

  • Create a web-based calendar which will showcase only the events that occur in her department
  • Present a professional image that will encourage potential speakers and contributors to work with their organization
  • Manage the sometimes heated political climate that surrounds their speakers, including making sure two speakers who have opposing political views are not featured together on their website
  • Drive traffic to their website by keeping past events listed there
  • Send email to mailing list when a new event is added
  • Modify events on a moment’s notice
  • Allow users to easily create maps to their events

[Top]

Scenarios

Scenario #1: Post, Edit, & Delete Events
You are the calendar administrator for the Mechanical Engineering department. You have been using the calendar system for a few months, and subscribe to events from many different calendars. You have chosen to manually approve all events that you subscribe to before posting them to your calendar. Today you are logging in to review new events that came in over the weekend.

  1. Log in with user ID and password "me"
  2. Review your Pending events
  3. Post all EECS events to your calendar (3 events). You are familiar with EECS events and don't feel it necessary to review each one in detail.
  4. You are not sure whether you want to include the Bio Engineering "Guidant Information Meeting" and so decide to review it more closely.
  5. You decide that you don't want to post it on your calendar and want to remove it from your Pending events list.
  6. You received an email asking you to change the time for the "ME Grad Visiting Day" on 4/14/04 to 2-4pm. This event has already been posted to your calendar. Find it and make the time change.

Scenario #2: Add Event & Administer Calendar
You are the calendar administrator for the Mechanical Engineering department and need to add a new event to your calendar and change the background color of your calendar.

  1. Log in with user ID and password "me"
  2. Add the following event:
    Date: 4/25/04
    Time: 1-2pm
    Title: How Smart Helmets Save Lives
    Event Type: Lecture
    Location: Etcheverry Hall
  3. Post it to your calendar immediately
  4. Find and review the event you just posted
  5. Change the background color of your calendar to blue
  6. Change the site navigation that is displayed on your calendar to vertical

Scenario #3: Find Campus Event & Set Up Subscription
You are the calendar administrator for the Biology department and have been using the system for a few weeks, but so far only for your department's own events. Today you want to start adding some other campus events to your calendar.

  1. Log in with user ID and password "biology"
  2. Find the following campus event: Environmental Science, 4/8/04, 4:00pm: "The Conquest of Bread: 150 years of CA Agribusiness"
  3. Post it to your calendar
  4. Set up a subscription to receive all seminars sponsored by the Civil & Environmental Engineering and Environmental Science departments that contain the word "environment" in the description. You want to manually approve all events before they post. You want to receive events that occur 2 weeks ahead or less. Name this subscription "Environmental Seminars."
  5. Look at your department calendar
[Top]

Final Interface Design

Directions For Use

Our Third and Final Interactive Prototype is located at: http://dream.berkeley.edu/EventCalendar/Documents/FinalDemo.

We are using the same scenarios we used for the Second Interactive Prototype. These scenarios are listed above with the user IDs and passwords required to access the application. You may also use the user ID and password "SIMS" to see the account used for our Final Masters Project presentation.

The following functionality is working:

  • Save and Post, Save as Draft, and Cancel in Create Event
  • Editing an Event you own from the Event Manager
  • Accessing the Advanced Search options from the Event Manager (though this page is not functional)
  • Accessing Event Details by clicking on the title of the event from any screen where it is displayed
  • Posting, Recommending, or Removing events you don't own from Event Details.
  • Editing, Posting, or Deleting events you do own from Event Details.
  • Clicking Search in Search Campus Events will bring up search results, but it is not using the criteria input by the user.
  • Accessing the Advanced Search options from Search Campus Events (though this page is not functional)
  • Clicking Subscribe in Subscribe will add a subscription and give a confirmation message, but it is not using the criteria input by the user.
  • View Live Calendar brings up the default calendar, but it does not actually contain the events of the account being used. It always brings up events for the SIMS account located in an XML file which is not tied to the database called: SimsEventsOrderedListNew.xml. A transform is done in the browser to create this calendar view. Only navigation between grid and month view is possible here. A version of the default calendar which is simply html but where navigation between all different types of views (e.g. Day, Week, Month, Year and Grid or List) is possible is available here.

Functional Specification

A full functional specification describing our final interface design can be found here.

Interaction Flow

What Was Left Unimplemented

The following functionality currently not working:

  • Preview in Create Event
  • Search Pending Events, Clear Search, Post, and Delete in the Event Manager
  • Save Search As Subscription, and Post in Search Campus Events
  • Delete and Edit in the Current Subscriptions section of Subscribe
  • Preview Results in the Create a New Subscription section of Subscribe
  • Export button in Export
  • Although you can view all of the tabs in Format Calendar, none of the functionality is working and currently information on the SIMS calendar is hard-coded into it. A version without the SIMS calendar data is available here.
  • Edit Account Information in Account Info
  • There is no Preferences page
  • There is no Help page

Tools Used

We created our lo-fi prototype using Adobe Illustrator because several of our team members were already proficient in this application. This made the development of the paper prototype a fairly smooth process. We put each screen within a template that looked like a browser so the screens appeared authentic. We used very limited colors in this version of the application so the user would not be tempted to comment on the color scheme, and because we were unsure what our color scheme would be yet. We used colors only in the browser template so that it would be distinguished from our application, and for highlights within the application, which were difficult to convey any other way. Overall, our team found this tool highly effective. The only downside to using this tool was the length of time it took to create a screen, but we believe that this was outweighed by our ability to show our users the most accurate representation of our final intent possible.

We created our interactive prototypes using html, css, xml, xsl, and php. Many of our group members were already very familiar with html, css, xml, and xsl which made development fairly smooth. We did intend to create our application using css instead of nested tables, but found this too difficult. We found that doing transforms of xml documents using xsl within browsers was not always completely successful, as not all browsers can handle this type of action, and some could not interpret all the xsl functions. One of our team members who had been familiar with Cold Fusion learned php to develop this application. In hindsight, because our code not likely to be used for the actual implementation of the system we designed, it may have been just as effective to use Cold Fusion, a technology she already knew, instead of php. Overall, we were very satisfied with the easy of use and results of the tools we used.

[Top]

Design Evolution

A full description of the evolution of our design resulting from the lo-fi testing, heuristic evaluation, and usability studies can be found in the Usability Testing & Interface Design section of our Final Report. We found the usability studies to be the most beneficial form of testing. This was due to the fact that the interface was evolved enough for the users to get a real sense of what the application could do as opposed to the suspension of disbelief and reliance on "human computers" that is required to use a lo-fi prototype. Additionally, because we used real target users of our application for the usability testing, they were able to understand the intent of the application better from the beginning as well as give us feedback about whether the application matched their current workflow. This was not possible for the heuristic evaluation, as our classmates were not the target users of our application.

[Top]