Pitt Flyers: A convenient and environmentally friendly approach to event management the University of Pittsburgh
IS 2470 - Interactive Systems DesignFinal Project
Dhruba J BaishyaChris Szymansky
Rajesh V.B
School of Information ScienceUniversity of Pittsburgh
Fall 2008
Dec 10, 2008
1
Table of Contents
1. Project Description…………………………………………………………………………………..3
1a. Background………………………………………………………………………………….3
1b. Our Client……………………………………………………………………………………3
2. Design Process……………………………………………………………………………………….5
3. User Study I………………………………………………………………………………………….7
4. Task Analysis and Task Model……………………………………………………………………..11
5. Task Sequence Model………………………………………………………………………………12
6. Facebook API………………………………………………………………………………………13
6a. Application Types…………………………………………………………………………..13
6b. Application Properties………………………………………………………………………13
6c. Internal Web Application…………………………………………………………………...13
7. System Design………………………………………………………………………………………15
7a. Overview……………………………………………………………………………………15
7b. Pitt Flyers interface design………………………………………………………………..16
7c. Screenshots of the system…………………………………………………………………..17
8. User Study II……………………………………………………………………………………….22
8a. Usability Questionnaire……………………………………………………………………..22
8b. Scoring SUS………………………………………………………………………………...23
8c. SUS Data……………………………………………………………………………………23
9. Conclusion………………………………………………………………………………………….24
2
1. Project Description
The University of Pittsburgh hosts a number of events each day in various venues throughout the
campus. We set out to make a system that enables students and faculty to access information about
these events in a timely manner.
1a. Background
We studied the current ways events are posted. Students tend to post events on the social networking
site Facebook, located at http://www.facebook.com. These events are social in nature and many are
not designed to be public. Few campus staff and faculty members post events on Facebook. Therefore
the reach of Facebook events is typically only a small circle of friends and their friends on Facebook.
A second option is the Pitt Student Events Calendar, located at http://www.events.pitt.edu. Although
this is Pitt’s “official” events listing sponsored by the Department of Student Life, it is underused and
poorly maintained. Any given day has only a few events, when in reality there are a few dozen at least.
The final option is browsing flyers that are posted around campus. Most academic and dormitory
buildings on campus have bulletin boards that are covered in paper flyers advertising various events.
These boards are the most exhaustive listing of events, but they are not presented in an orderly manner.
Different buildings may have different events posted. Based on discussions in the Information
Sciences building, we learned that various systems to display events have been created over the years;
however, department administrative assistants neglect to use these systems, and instead opt to post
paper flyers. Despite the ease of use of paper flyers, they are not environmentally friendly. With the
abundance of technology at our fingertips, we felt that there is a way to create a system that is as easy
to use as posting a flyer, yet minimizes the waste that paper flyers create.
1b. Our Client
We decided that the best way to build a new events system was to talk to someone who deals with
student events every day. We found that the director of the online student events calendar is Joyce
Giangarlo, who is employed by the Department of Student Life at Pitt. Joyce has been with the 3
University for over a decade and works with a number of student organizations, including Student
Government Board and the Pitt Program Council.
We met with Joyce on November 15, 2008 to learn what her vision for the ideal events system is. She
made it clear to us that students do not want a brand new, standalone site for events. In fact, one of the
reasons the current events calendar is so lightly used is due to the fact that students want to see events
tied in with the existing sites they enjoy visiting. The main site that students visit, according to Joyce,
is Facebook.
As previously mentioned, a main issue with events on Facebook is that they are only published to
people who are already a friend on Facebook with the person who posts the event. There is no way to
easily browse all Pitt events without navigating through several menu screens. A another issue is the
fact that only students tend to post events on Facebook. Staff members do not have the time or desire
to build a new event. They would rather have one flyer that they can print, photocopy, and post around
campus.
We then realized we could make a hybrid of the two popular approaches. Students are on Facebook,
and staff members only want to post flyers, so why not develop an application that allows flyers to be
posted directly to Facebook? The idea for our application was born. Both our team and Joyce were
very excited about the prospects of such an application.
4
2. Design Process
Throughout our system, we utilized interactive system design procedures and principles. The diagram
below shows that during the iterative design process, the current design is analyzed in order to build a
model of how the user is expected to perform an activity with the system’s support. This analysis
enables assessments to be made of the design’s usability, which feeds into the enhancement of the
design – thus providing feedback to improve the system.
Design Process
The concepts of the interactive system design that were used in this project are as follows.
Conducted User Studies - Interviews Analyzed user studiesDeveloped Prototype version 1.0Reviewed Prototype Screens with UsersDesign Task Analysis and Task Hierarchy ModelTask Sequence Model
5
Developed Prototype Version 2.0Data CollectionSystem DesignDeveloped system components and integrate into Facebook APIConduct User Studies II - Post-questionnaires
We began our design process by conducting basic user studies about Facebook and internet useage, as
well as how they find out about Pitt events. We then designed two interface screen mockups that were
images, and contained no interactive component. We conducted user studies on these screens to
determine what they liked, what they disliked, and what they would like to system to support. Based on
the results of the user studies, we developed a prototype version 1.0 and reviewed it with two users.
Based on their feedback, we gradually revised the interface prototype version to version 2.0. We
continued the review of the prototype screens and reviewing the prototype screens with thinking aloud
by the developers. We then integrated it on to the Facebook API, and presented the user with a working
system. Once the system was finalized, we conducted our final user studies by performing post-
questionnaires.
6
3. User Study I
Our initial user study involved interviews with two Pitt students, one with a technology-based major
and one with a liberal arts major. We presented them with two mockups images of an events system,
and showed them the current Pitt Events Calendar.
3a. Student Information
Purpose: Discover where students go to find events, how frequently they use Facebook, and how open
they are to using a new events system on Facebook.
Student 1: Alexandra Johnson
Background Information:
Year: Junior
Expected Graduation: April 2010
Major: Health and Rehabilitation Science
Age: 19
Sex: Female
Hometown: Pittsburgh, PA
Interview Location: William Pitt Union – Tansky Lounge
Technical Background:
Any programming experience? No, but did take an HTML course in high school
Number of hours per week online: approximately 30
Number of hours per week on Facebook: 4-5
What do you use Facebook for? Keeping in touch with friends at Pitt and from high school.
Which features have you used?
-Wall posts: yes
-Chat: yes
-Events: yes
-Photos: yes
-Videos: yes
Have you posted an event? Yes
7
Events
Where do you learn about Pitt events? Either Facebook, the Pitt News, or from friends
Have you been to the Pitt Events Calendar? No
[Pitt Events Calendar was explained]
Would you use the Pitt Events Calendar system? “I doubt it, it seems like there’s no one using it.”
Do you ever get event information from flyers? “I see them all over the place but I don’t stop to read
them.”
Thoughts on a flyer system in Facebook? “It might be a good way to get information, but only if a
lot of people use it.”
Student 2: Ben Kable
Background Information:
Year: Senior
Expected Graduation: December 2009
Major: Accounting
Age: 21
Sex: Male
Hometown: Steelton, PA
Interview Location: William Pitt Union – Tansky Lounge
Technical Background:
Any programming experience? Yes, Advanced Placement programming in high school. CS 007
[Introductory Java] at Pitt.
Number of hours per week online: 25
Number of hours per week on Facebook: 3
What do you use Facebook for? Mainly pictures and seeing what people are doing.
Which features have you used?
-Wall posts: yes
-Chat: no
-Events: yes
8
-Photos: yes
-Videos: no
Have you posted an event? No
Events
Where do you learn about Pitt events? Flyers at Sennott Square or the William Pitt Union
Have you been to the Pitt Events Calendar? No
[Pitt Events Calendar was explained]
Would you use the Pitt Events Calendar system? “Yes, but only if it has events that relate to my
major.”
Do you ever get event information from flyers? “Yes”
Thoughts on a flyer system in Facebook? “Good idea. It will be easier than looking around to find
them on walls.”
Three days later we met with these students for a follow-up, where we showed two basic graphic
mockups to each student, as pictured below:
Two prospective interface mockups that were presented to users
Alexandra was impressed at the visual appearance of both mockups, but also said she didn’t have any
preference for either one. She didn’t care which colors and backgrounds were used either. She said as
long as the system resides on Facebook, she would use it if there are a lot of events posted. She was
unable to think of any additional features that were not presented on the mockups.
We then showed Ben two basic graphic mockups. He preferred the simple blue and white mockup with
9
a white background. He commented that the features and simple layout were appealing to him and
meshed with Facebook’s overall aesthetics.
3b. User Survey I Analysis
Our two user surveys were very interesting because they confirmed many of our initial hypotheses
about where students find events. Even though one user had a technical background and one did not,
the results were very similar. Both students interact with Facebook regularly, one is what we would
call a “heavy” user, who has used just about every feature, including events. The other is a casual user
who also has used Facebook events, although he has not created one himself.
Neither user was very enthusiastic about the Pitt Events site. One user wanted events that are tailored
towards his major, while the other was mainly concerned with having a lot of events to choose from.
The user’s typically locate events through Facebook, flyers, word of mouth, and the Pitt News.
10
4. Task Analysis and Task Model
We analyzed the user’s major activities and captured them in a diagrammatic format encompassing
hierarchy in the same. We have included the overall user tasks as well as the individual tasks for
browsing and uploading events.
User Task Diagram – All Tasks
11
5. Task Sequence Model
Task Sequence Model – Detailed navigation for browsing events
Task Sequence Model – Detailed navigation for uploading events
12
6. Facebook API
The Facebook API, known as Facebook Platform, is a freely accessible Web service that provides
methods for accessing and interacting with Facebook data.
6a. Application Types
Facebook Platform can be used from external web applications, where the user visits a 3rd party site
outside of Facebook that uses the Facebook Platform; external desktop applications, where a user
interacts with a downloaded application that does not require a web browser; and internal web
applications, which appear directly on the Facebook site. Every application using the API has to
authenticate both itself and the user before information is exchanged between Facebook and the
application.
6b. Application Properties
Every Facebook user can create an application by using the Facebook Developer application located a
developers.facebook.com. Once this application is added, an application key and a secret key are
provided. These keys are used to validate and authenticate the application to the Facebook server. The
developer can then set and configure a variety of parameters to customize the application
6c. Internal Web Application
Our project is a Facebook internal web application. This means that the application runs completely
within the Facebook website.
13
Our application running as an internal web application through Facebook
As shown above, the result can be produced in one of two ways, either by using Facebook's own
markup language, called Facebook Markup Language (FBML), or through an iframe. Out project
makes use of iFrame. The application is deployed on our own web server. It's location (known as a
callback URL) is set in the application settings panel.
14
7. System Design
7a. Overview
Our application is a three-tiered design, based on the web/server model, which includes client side code
with Web and Database server interaction. The system architecture is comprised of data entry and
display web pages that communicate to an Apache Web server with a MySQL database. The diagram
below depicts the system components and relationship between them.
PHP-MySql Interaction Diagram
We used a WAMP (Windows, Apache, MySQL, PHP) environment for development. The main
technologies used to build the application include the HTML, CSS, and the JQuery Javascript on the
client-side, and PHP with Facebook Platform and MySQL on the server side. The system architecture
is designed using a MVC (Model-View-Controller) pattern. The MVC pattern architecture is explained
in the picture below:
MVC architecture
15
7b. Pitt Flyers Interface Design
Event Slideshow
The event slideshow depicts events in chronological order of when they will be conducted. The user
can pick up any of the events from the list indicated as numbers and go to that particular flyer.
A sample image in the event slideshow
Upload Events
This is restricted to users who have permission from the administrator to upload any flyer to the
system. The only constraint being that any image uploaded should be 650 * 350 resolution.
16
The major advantage of this application is that the Pitt students get to know about any events conducted
across multiple locations in the Pitt campus. Only constraint is that the events should be uploaded to
this Pitt Flyer application. On the other hand, this project also promotes the “Go Green” culture by not
requiring printed flyers and wasted paper.
7c. Screenshots of the System
Screenshot of the ‘About’ Link
17
Screenshot of the ‘Event Slideshow’ Link
18
Screenshot of the ‘Upload Events’ Link
19
Screenshot of the ‘Add/Remove organizations’ Link
20
Screenshot of ‘Upload Events’ integrated with the Facebook API
21
8. User Study II
8a. Usability Questionnaires
We developed a post questionnaire for our user study. System Usability Scale (SUS) is used as a measurement to evaluate the results from the below questionnaire.
Strongly Strongly disagree agree
1. I think that I would like to use this system frequently
22
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5
2. I found the system unnecessarily complex
3. I thought the system was easy to use
4. I think that I would need the support of a technical person to be able to use this system
5. I found the various functions in this system were well integrated
6. I thought there was too much inconsistency in this system
7. I would imagine that most people would learn to use this system very quickly
8. I found the system very cumbersome to use
9. I felt very confident using the system
10. I needed to learn a lot of things before I could get going with this system
11. I was able to quickly find what I was looking for.
12. The organization/layout of the Web site made sense to me and helped focus my search for information.
13. The search tool enabled me to easily find what I was looking for.
14. The information I found was clear and easy to understand.
23
15. The information I found was timely and up to date.
8b. Scoring SUS
SUS yields a single number representing a composite measure of the overall usability of the system
being studied. Note that scores for individual items are not meaningful on their own.
To calculate the SUS score, first sum the score contributions from each item. Each item's score
contribution will range from 0 to 4. For items 1, 3, 5, 7, and 9 the score contribution is the scale
position minus 1. For items 2,4,6,8 and 10, the contribution is 5 minus the scale position. Multiply the
sum of the scores by 2.5 to obtain the overall value of SU.
SUS scores have a range of 0 to 100.
8c. SUS DataA total of 10 responses were received for our questionnaire.
List of SUS scores: 97.5, 92.5
Average:
9. Conclusion
By building the Pitt Flyers application we undertook an interesting project that fills a need at the
University of Pittsburgh. Events are an important component of life at any college, and a major school
like Pitt has so many events in a wide variety of areas that there needs to be an easy and accessible way
to track them. After finding that staff members tend to post flyers and students tend to visit Facebook,
we used the Facebook API to create a system that combines the two.
Our user studies show that the system is largely a success. Users responded with very favorable ratings
in the initial survey period. For this system to improve and become the principle source for Pitt events,
24
we plan to work with Joyce Giangarlo and the Department of Student Life to find ways to continue to
refine the system and then launch the actual Facebook Application with the full support of Student
Life.
25
