Hackathon 3.0 Project: Virtual Office Directory

In early 2016, Cayan celebrated the completion of a nearly $8M global renovation of its Boston headquarters and Northern Ireland, United Kingdom offices. The resulting colorful and bright 42,000 square foot Boston and 22,500 square foot Belfast offices promote teamwork and collaboration while complementing individual working styles. The build out of Cayan’s Boston location includes “watercooler meeting points” designed to mimic living room enclaves as well as high top tables and bar stools to encourage more eye-to-eye conversation in place of traditional conference room scenarios which can drain creativity.
 
One of the challenges after all the dust had settled was learning where everyone’s new seats were.
 
For my hackathon project, I decided to write an internally-hosted tool to allow people to find, visually, where other employees, conference rooms, informal spaces, and break rooms were located.

I set out to build some mockups and play around with an initial visual concept using a tool called Balsamiq. The resulting mockup assisted me in building an HTML5 template using Bootstrap 3.0. I wanted to implement an auto-complete feature and, the jquery.ui autocomplete plugin presented a quick and easy-to-implement solution for this.

I wanted a scalable vector based floorplan, using Scalable Vector Graphics (SVG), and wanted the floorplan to be separated from the core implementation, so this could work with different office floorplans, such as our Belfast office, to provide similar functionality to them.

I decided on using a free SVG editor tool called Inkscape v0.9. With this tool I was able to load a PNG floorplan image that I obtained from our operations department, and trace over all the seats with vector shapes. Having the floorplan in SVG (which is XML) would allow me to query the rendered-result using standard DOM query methods like "document.getElementById".

The next problem was figuring out how to map the seat, office and conference room shapes to people and conference room objects. I wanted to ensure that if people moved location, we wouldn't need to go in and change anything in the floorplan SVG, so I made the decision to use the id attribute in the shape and rect SVG nodes to encode the unique seating codes that already existed as part of the office relocation seating data.

The seating location data came in the form of an Excel spreadsheet that I received from our operations team. This spreadsheet was used by operations to guide people to their new seats during the days of the office move. The file had name to seat-code mappings, but the data needed a little adjusting. I decided to use Excel to help sanitize the data and used Excel formulae to organize all the seating data into a large array of JSON objects. This was then copied and pasted into a JavaScript file which was loaded into the application. In the future, we could get this data from our Active Directory servers, so that all this data could be integrated with our up to date staff directory.

Since I was going to be showing both seats and conference rooms, and possibly other employee resources, I decided on simple icons to demonstrate the fact that a Conference room was being searched vs. a person. I decided on the FontAwesome Bootstrap library for iconography which offered a wide array of icons, implemented as fonts which were lighter-weight and more scalable than the default Bootstrap Glyphicons.
 
The two most challenging parts of the implementation were:
  1. Mapping the SVG room objects to seat codes. This involved me editing the SVG and changing the id of each appropriate shape to the seat code in the data.
  2. Loading the SVG through JavaScript. I ended up making an Ajax query for the SVG file, which meant that I didn't have any cross-origin concerns with loading data asynchronously, and looped through the loaded SVG nodes and appended them onto the HTML container that would display them. This was slightly slower than an <embed> or <object> tag, but would let me use the document.getElementById method to access shapes by their id or seat-code.
The Virtual Office Directory in Action
 
The end result was neat. The user would type the first few characters of a person or conference room’s name, and the dropdown would present whichever entities matched the text. Upon selecting an item, the text would be mapped into a hashtable which returned the index into the array of JSON objects. The resulting object would provide the selected name, the name broken into First and Last fields separately, the seat-code, and the category (Conference room, Office, desk etc.). This would then take the seat-code and query the DOM for the rectangle or shape whose id corresponded with that seat-code. The shape would now have its background fill color changed, so that this would be visible to the user.

I’m pretty happy with how things worked out. If I had a bit more time, I would have added a “Set-my-location feature” which would show the user where their seat is on the floorplan. The user would search on their own name and click "set my location" and this would put a star on their desk and allow them to see where others were in relation to them. And, since the floorplan is scalable, I wanted to implement zooming and panning, using the native SVG transform and scaling capabilities.