Recently I had the opportunity to work with a team to produce a responsive wayfinding application. The app’s audience was both the public-at-large and for internal staff within the Virginia General Assembly.
The General Assembly Building is undergoing a remodel and members of the General Assembly along with its associated agencies and staff have moved to a new location on Capitol Square.
During each legislative session, the old General Assembly Building, AKA “GAB”, was in use for 50+ years. Thus, familiarity with the meeting rooms and how to navigate to members’ offices was somewhat of a known path for various groups like the public, lobbyists, staff, and members themselves.
Come One, Come All!
There is much updated technology in the temporary building. Examples are streamed committee meetings and data driven signage.
However, the biggest challenge is getting everyone to the new places.
Thousands of visitors seek out several people or places during the legislative session each year, in the months of January through March. A new building and set of meeting and office locations creates another layer of confusion and stress for these visitors.
To achieve wayfinding without personal assistance, the web development team created a navigation web application that is “responsive”, working on various web browsers, computers, and mobile devices. This allows all visitors to either prepare before visiting, by printing maps at home or by using their mobile device while on-site to navigate to desired offices or meeting rooms where legislation is being taken up or where the public may want to testify. The app also allows staff like administrative assistants and reception to have an easy way to direct users to a location along with a printed map if needed.
QR Code addition
Often, staffers are very busy trying to help visitors navigate their way through the building or make appointments for visitors to see representatives. This can actually lead to long lines in front of Delegates’ or staff offices. To shorten communication time and these lines, a publicized QR code was placed around the building around certain “hot spots” where directions and help are needed. By creating a custom QR code, I was able to create high resolution signage. The third-party service also keeps analytics on scans of the QR in tandem with our Google Analytics property for the app’s domain. This is helpful, as it of course can present ROI on work that was done to create the custom app. Analytics can also depict high usage of the app and where the scans were performed, suggesting which days were the highest for foot traffic inside the building.
The Development Process (Gallery)
Click or tap images to see various stages of web development and the technologies used in the project.
Uh, yeah, it needs to print too.
Print will never die, even in the web development world. There was a need for visitors to print maps and wayfinds before arriving from their desktop or mobile devices. This also was necessary for on-site receptionists when engaging the public-at-large during a legislative session. Upon printing, the app’s interface is minimized (using CSS print styling) only printing necessary information, such as associated staff for the member along with maps which were made legible at printing on US letter in a portrait orientation. During the export process from Adobe Illustrator, I was able to dictate a resolution that could serve both for screens and printing without a major data hit
Soup to Nuts Delivery
Projects like this one are exciting, fulfilling me creatively as well as providing a public service that creates a transparent way for the public-at-large to locate their elected officials to discuss their concerns with them in person vs. email.
Technologies Used for the App (stuff developers will probably only read)
Data Source(s)
A proprietary Ruby on Rails web app delivers web services to present floor and room diagrams along with supplementary information about who is in the room and the staff around it.
When text changes are applied to the designated room, they display dynamically along with diagrams that can change from time to time. This way, if a room’s ownership suddenly changes, all details can be manipulated vs. that of a static web application.
Ye’ Olde Bootstrap
For the actual navigation app, I used the Bootstrap open source toolkit with Ruby on Rails. A new backend developer started us off with Rails 5 and an implementation of NPM & Yarn. We keep everything source controlled in a private GitHub organizational account and use Heroku for PaaS.
Adobe Illustrator & Photoshop
For the maps, I started literally “from the ground up”, using various pre-existing architectural CAD drawings, placing them in Adobe Illustrator, editing them for the desired presentation of floor plans.
I created a layered system of wayfinds that corresponded with directions to each set of offices. Then these could be toggled on/off to display directions for each room before an export of the flat image.
Recently stumbled across a fun and quick way to create various sizings for a cross-browser and device images. Using Adobe’s new 2018 CC “Export for Screens” (option+command+E) ninja shortcut was integral, as it allowed for exports of consistent widths along with resolution, so I could automate a batch for several files at once later in Photoshop. A lot of tests were run to make sure these intricate maps didn’t weigh down phones on LTE or WiFi.
Cool finds
Browsers now using apple-touch.pngs?
Yeah, see how Apple’s proprietary…
link rel="apple-touch-icon" type="image/png"
ends up delivering the frequently used sites icons in browsers?
This icon makes the app look native when someone “saves to homescreen”. I still used the elderly favicon, but the legibility of these has to really be taken into account vs. the touch icon.
