BLUE FLYERS
Pitt Flyers: A convenient and environmentally friendly approach to event management the University of Pittsburgh
IS 2470 - Interactive Systems Design
Final Project
Dhruba J Baishya
Chris Szymansky
Rajesh V.B
[pic]
School of Information Science
University of Pittsburgh
Fall 2008
Dec 10, 2008
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
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 . 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 . 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 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.
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.
[pic]
Design Process
The concepts of the interactive system design that were used in this project are as follows.
Conducted User Studies - Interviews
Analyzed user studies
Developed Prototype version 1.0
Reviewed Prototype Screens with Users
Design Task Analysis and Task Hierarchy Model
Task Sequence Model
Developed Prototype Version 2.0
Data Collection
System Design
Developed system components and integrate into Facebook API
Conduct 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.
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
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
-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:
[pic] [pic]
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 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.
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.
[pic]
User Task Diagram – All Tasks
5. Task Sequence Model
[pic]
Task Sequence Model – Detailed navigation for browsing events
[pic]
Task Sequence Model – Detailed navigation for uploading events
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.. 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.
[pic]
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.
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.
[pic]
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:
[pic]
MVC architecture
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.
[pic]
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.
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
[pic]
Screenshot of the ‘Event Slideshow’ Link
[pic]
Screenshot of the ‘Upload Events’ Link
[pic]
Screenshot of the ‘Add/Remove organizations’ Link
[pic]
Screenshot of ‘Upload Events’ integrated with the Facebook API
[pic]
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
[pic]
1. I think that I would like to
use this system frequently
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.
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 Data
A 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, 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.
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.