The New QU Roombooking System

The New QU Roombooking SystemQuality and Usability Lab Forschungskolloquium 12 May 2014

Agenda

Introduction

▼

Process

▼

Outlook

▼

Demo

2

The Current State

• TheQULab1usesGoogle Calendartomanagerooms• TheusabilityofGoogle Calendarinastandardscenarioisremarkable• But,booking/managingroomsisnotastandardusecaseforacalendarap-plication

• Severalshortcomings• Lackofclarity(especiallywithalotofbookings)• Inabilitytorestrictuseraccessefficiently• Hierarchicalrelationshipsbetweenroomsandequipmentcannotbepictured

1 QualityandUsabilityLabattheDepartmentofSoftwareEngineeringandTheoreticalComputerScienceatTUBerlin

Introduction>Process>Outlook>Demo

3

The Team

Different levels of experience• Bachelor•Master• Professionalexperience

Different backgrounds• ComputerEngineering• InformationSystems•MedicalTechnology


• FourstudentsatTUBerlin

•Weeklyconsultationwiththedepartment• SupervisionandsupportbytheQULabstaff

4

The Goals

Didactic Goals• Obtainatheoreticalfundamentofusabilityengineering• Hands-onexperienceinasoftwaredesign/engineeringproject• Gainmethodologicalcompetenceinprototypingandmodelling

Product Goals• Programausable,welldocumented,betaversion• Documentfindingsoftheprototypingphaseforfutureimplementation


5

Process

6

TheUsability EngineeringLifecycle


Möller, S.Usability Engineering Quality Engineering,Springer Berlin Heidelberg, 2010, 57-74

Design

EmpiricalTesting

Analysis

Proto-typing

IterativeDesign

FeedbackfromField

ExpertEvaluation

7

Analysis


1. Pre-Interviews• Sixpotentialusers•Writtensurvey• Sampletask• Openinterview

2. Technical Requirement Analysis• Determinationofcriticaltechnicalne-cessities• LDAPsupport• Administrationcapabilities(GUIforuser,roleandroommanagement)

8

Analysis


• Verylonglistoffeaturesresultingfromthepre-interviews• Aquestionnairewasusedtoprioritizefeatures

9

Analysis


3. Questionnaire• 16participants• Onlinesurvey• Questionsbasedontheresultsofthepre-interviews

• Assumptionsonthedesiredfea-tureswereconfirmed• Two-stagebookingprocedure(pre-booking,firmbooking)

• Addingofequipmentbookings• Displayofroommetainforma-tion

10

Analysis


4. Competitor Analysis• Evaluationofthemaincontenders

•Meeting Room Booking System(http://mrbs.sourceforge.net)• Typo3 Extension Raumbuchung(http://www.typo3-macher.de/typo3-ext-raumbuchungssystem.html)

•DISPOROOM(http://www.disporoom.com/en)• Noneoftheseoptionswassuitablefortheintendedpurpose

11

Prototyping


1. User Flowchart• Abasicflowchartoftheuserinteractionwascreated

• Derivedfromresultsoftheinterviews

• Furtherprototypingactivitieswerebasedontheflowchart

12

Prototyping


2. Paper Prototype• StaticmockupinMicrosoft Powerpoint• InspiredbyGoogle Calendar• Extendedfeaturesreflectingfindingsoftheanalysis

13

Expert Evaluation/Empirical Testing


Click Prototype• DynamicwireframeinHTML/CSScreatedbyAxure

• Basicfunctionalityalongclickpaths• Usedtoconductausertestcomparingeaseofuseandspeedwiththeexistingsolution

• “ThinkingAloud”methodwasusedtofur-therrefinetheuserinterface

• TheprototypewasdiscussedwithexpertsfromtheQULab• Thedesignwasfurtherrefinedbasedonevaluationandtesting

14

Implementation


Choosing a Framework• Duetopriorknowledgeinthegroup,PHPwaschosentobeusedaspro-gramminglanguage

• SeveralframeworksofferMVCcapabilitiesandotherdesiredfeatures

PHP5 MVC Templates Validation Ajax LDAPSupport

CakePHP

Symfony

Zend2

• OnlyZend Framework 2metallrequirements• Opensource(New BSD License)• PHP5.3+• SOLIDobject-orienteddesignprinciple

15

The System Architecture


Application Database

User Database

Mapper

Controller

ViewJSO

N API

Application Framework

JavaScript Stack

jQuery, jQuery UI,RequireJS, FullCalendar, jsTree

LDAP

16



Back End Design• RunningonastandardLAMP (Linux,Apache,MySQL,PHP)stack• Object-oriented•Model-View-Controllerparadigm• RelyingonZEND2forallnon-standardmethods(nootherthirdpartybackendsoftware)• Easymaintainability• Smoothupdates

• UsesLDAPserverforuserauthentication• AnyLDAPimplementationshouldsuffice(testedwithOpenLDAP)

17



User Interface Design•Mostlyderivedfromtheclickprototype• ZURB Foundation 5based

• Responsivedesign• “MobileFirst”approach• Gridbased

• Fewchangesforeaseofimplementation• Dynamicuserinterface•MakingheavyuseofJavaScript• Clearcolourconcept(mostlywarmtints)• Novisualeffects,animations,etc.toensuregoodperformanceevenonolderdevices

18

User Interface


19

Outlook

20

Implementation Roadmap

• Thesoftwaremeetsallexpectationsforthesemesterproject• Compromiseshadtobemadealongtheway• Thereismoreworktodo

• Bettererrorhandling• Unittesting•Moreadaptabletemplatingsystem• Conductabroadusertest

• Evaluateuserfeedback• Fixreportedbugs


21

The Code is now Open Source

• LicensedunderThe MIT License (MIT)• “WhiteLabel”editionoftheSoftwarewithoutcomponentsspecifictoTUBerlin

• Participantsoffurtherseminarsworkingonthisprojectarecordiallyinvitedtocontribute


The Roombooking Project on GitHub https://github.com/roombooking/pjroombooking

22

https://github.com/roombooking/pjroombooking

Demo

23


UsernamePassword

24

Discussion

25

Appendix

26

Illustration CreditIconsPage6:ScrumdesignedbyBjörnAnderssonfromtheNounProject

Page18:responsive-banner-main.svg,Copyright(c)2013-2014ZURB,inc.(MITLicense)

Page20:CrystalBallbyMatthewHawdonfromTheNounProject

Page22:OCTOCATbyGitHub,Inc.

Page23:WorkerbyBartLaugsfromTheNounProject

Page25:ConversationbyTakaoUmeharafromTheNounProject

PhotographyPage1:“Reserviert”byVasile CotovanuislicensedunderaCreativeCommonsAttribution2.0Genericlicense.Basedonaworkathttps://www.flickr.com/photos/vasile23/10356852823/.Toviewacopyofthislicense,visithttps://creativecommons.org/licenses/by/2.0/legalcode.

Illustration

27