Cranberry SchedulerWeb Dynamics

1

Who Is Involved

• The team• Aaron Papp• De'Liyuon Hamb• Shawn LeMaster

• The clients• Dr. Bouvier• Students and teachers that use the HCI lab

2

Our Process

• Agile development• Evolving requirements• Short development cycles

• User roles• UI designer• Main developer• Database Manager

• Weekly stand-up meetings• Discuss requirements and progress• Assign tasks

3

The Problem

• Scheduling the Human-Computer Interaction (HCI) Lab is currently done using paper

• Requires users to go to the HCI lab to check the schedule and record times

• Time-consuming and annoying for users

4

The Goal

• Simplify the process of …• Reserving the lab• Tracking meetings• Tracking volunteers

• Be easily accessible from different locations• Web application approach• Intuitive

5

The Constituency

• Researchers• Schedules meetings

• Volunteers• Signs up for meetings

• Teachers• Tracks research• Meetings• Volunteer participation

6

User Flow

7

Low-Fi Prototyping

8

Researchers

• Scheduling• Rehearsals• Volunteer interviews

• Different research locations

• Remote scheduling

• Email reminders

• Volunteers come to you 9

Humble Beginnings

10

Introducing Locations

11

Translating to Reality

12

Volunteers

• Remote sign-up

• Email reminders

• Choose projects that interest them

13

14

15

16

Teachers

• Aggregate data

• Tracking volunteer points

• Group management

• Location management

17

18

Usability Testing

• 7 tasks• As a researcher

1. Create appointment2. Edit appointment3. View all appointments4. Change settings5. View meeting details

• As a volunteer6. Register as a volunteer7. Confirm your participation in a project 19

Feedback

• 3 tests for feedback

• Largely positive overall

• All tasks were successfully completed• Minor hiccups at a couple spots

20

Feedback

• “Selecting a date on the calendar requires clicking the tiny number. Clicking anywhere should work also.”

Before After

21

Feedback

• “Task #3 confused me for a second, had to fumble with the page to find it. […] But after I seen where it was, it made sense.”• Task 3: View all of your appointments

22

Feedback

• “Clicked wrong place to find the interview information.”• Task 4: “Find the detailed view for this meeting.”

23

Overall

• “No complaints.”• “Enjoyed the layout/color scheme”• “It was simple for me to use.”

24

Development Goals

• Focus on cross browser compatibility• Standards compliant code• HTML5, JavaScript event driven• No 3rd party plugins

• Working around Internet Explorer’s problems• No legacy support

• Hardware compatibility• Develop for smallest common resolution

25

Development Principles

• Using pre-built components• Smarty Template Engine, jQuery, ...• Reduced development time• Increased usable features

• Separation of components• Technically possible to be one large file• Bad practice and hard to work with

• Markup, CSS, and JavaScript on the front-end• Database, PHP, and templates on the back-end

26

Developing Towards Templates

• UI development geared towards templates• Simplifies changing the UI• Change one template instead of separate files• Helped after requirements changed 2nd semester

• Separates content from markup• Better markup readability

• 3 primary templates• Header, body, footer• Sub-templates for page specific markup

27

28

Object-Oriented PHP

• PHP is a procedural language• Object-orientation tacked on

• Chose OO PHP for development• Easier to make changes• Easier to support• Separation of components• Not handling everything in one file

29

Wrapper Classes

• Created classes to black box data handlers• GET, POST, SESSION, SERVER• Can make changes to the handler class• To handle magic quotes for example

• Abundant use of singletons• Prevent duplication of resources• Database connections• LDAP connections

30

Security• PHP Data Objects and prepared statements

• Smarty Template Engine• No dynamic includes• Variable filtering

• Tokens on POST forms

• Secure session handling• Inactivity timeouts• Authentication checks

• Internally restricted redirects31

Database

• MySQL• Free and open source• Well supported by web hosts

• Engine• InnoDB

32

33

Integration

• End product based on hi-fi prototypes

• AJAX• Pull calendar events in the background

• Data validation

• Form pre-filling

34

Demo

35

Questions?

36