I've wanted to open a device lab ever since reading this blog post from Jeremy Keith waaaay back when. It wasn't until years later, with the right team and a new office with a spare room that it became a reality.
The lab represents a space where technology, inclusivity and community intersect and it was a real joy to do project work that extended beyond the browser and into something tangible.
The Device Lab was my passion project while working for Humaan and it was a great experience opening our doors to local developers, startups, students, educators, government agencies, suits, thieves and other curious visitors in my time as coordinator.
The lab is probably much like many other testing environments you might find in the web development industry. A collection of devices in a room. What make this lab different is that the doors are open to the public!
Before opened we dubbed the lab the Device Lounge. This reflected our intention for the space to be warm and welcoming for visitors. Somewhere you felt relaxed. Casual, conversational copy and a vibrant colour palette helped convey this online.
It's an open source project of sorts, this one centered around face-to-face human interaction rather than around the often faceless act of forking ones repo.
Functional design still has the opportunity for attention to detail, and here it presented itself in the sites header. The modular logo (designed by Kylie!) is subtly animated and is a composite of svg assets and CSS shapes brought to life with
keyframe animation and
We wanted the online and onsite experience to remain consistent (and positive) for our lab visitors. Someone making an online booking was greeted with a conversational form in an attempt to make the interaction feel as natural and engaging as a form can feel. Once submitted I would follow up with a phone call to quantify their needs and expectations, ensuring we could optimize the experience for them if possible.
A performance budget you say?
Typically you might start a design project with some rough sketches or a moodboard. This project begun with a performance budget. On first load the site needed to weigh < 1mb on the common mobile viewport and < 2mb for common desktop viewport.
To help achieve this the design remained lean and the css written mobile first. Developer Dan Barret got us over the line with lazy loading of assets like large images and google maps and webpack optimisation.