Shared Workspace Web App

Introduction

I led a team of fellow HCI students in a year-long effort to develop a shared workspace web application. We stepped through an entire design cycle; we began with a vague concept, refined our focus through research, ideated, engineered a high-fidelity prototype, and validated our concepts with user studies. Most notably, I wrote all the prototype code (learning JavaScript and jQuery along the way).

Overview

In 2010, my team worked directly with professionals in Vodafone Group R&D located in Munich, Germany. We operated as a private HCI consultancy, guiding our client from a vague goal ("assisting nomadic knowledge workers") through a user-centered software development process, ultimately producing a functional, documented prototype.

As the project was a capstone for my HCI Master's degree, ethnographic research played a primary role in our work, from our initial interview process, to workshops with professionals in Munich, to user testing. Detailed information regarding our methodology, findings, and design process can be found in the team's final paper here (901 KB).

Leadership

At the onset of the project, my peers designated me as team leader based on our experiences together to date (one semester of study at Carnegie Mellon University). I took this designation seriously, although I could hardly know the amount of effort it would require.

Over the ensuing year, I shaped the course of our project through scheduling meetings, assigning responsibilities, interfacing with our client, reporting to our advisor, setting deadlines, and involving my team mates. This experience was management trial-by-fire in the most substantial leadership position I had held to date. I gained much experience in project administration, and the varied backgrounds (both cultural and academic) of my team mates made this all the more challenging.

While the role presented its fair share of challenges, my resulting personal growth was well worth it.

Coding

Our substantial research and design work yeilded a wireframe of a shared workspace application. This application would allow multiple users to draw on the same digital surface, viewing each other's contributions in real time. Our specific focus concerned enhancing the "situational awareness" (a popular topic in the HCI academia) of the collaborators.

As my team's most experienced programmer, I volunteered to build this system. I chose to implement the shared workspace using a combination of JavaScript and CSS (what new kids call "HTML5", or older ones call "DHTML"). Although I considered SVG, portability was a concern. I found that using HTML5's canvas element in concert with dynamic DOM elements allowed me to leverage benefits of raster- and vector-based approaches. I used jQuery to simplify the code base (particularly as it related to AJAX and DOM manipulation) and to ensure cross-browser compatability. The client-side JavaScript code is over 2,200 lines (fully commented) or 28 KB after minification. This code is available upon request.

The server processes the clients' XMLHttpRequests with PHP and MySQL and responds in JSON.

Programming the prototype from the ground-up like this taught me a great deal. I formalized my understanding of JavaScript, learning to appreciate the language on its own terms (quite beyond my 2000-era understanding of it--basically "a tool for popups and mouse rollovers"). Although I still think AJAX is incredibly hacky (Websockets where are you?), I learned much about efficiently programming asynchronous communication.

@ a Glance...

  • Duration: 12 months
  • Team mates: 3 (1 cognitive psychologist, 1 electrical engineer, 1 designer)
  • Responsibilities: project manager, software engineer
  • Technology: HTML5, CSS, JavaScript, PHP, MySQL