Every quarter, Atlassian holds an event called ShipIt. Essentially, the whole company stops work for 24 hours (usually a Thursday and Friday) to form teams and compete to build kickass products, plugins, or features. For ShipIt 25, Patrick Teen, Jason Sheehy, and I decided to tackle the visitor sign in app at reception here in Sydney. The current sign in experience (an iPad with a rather ugly app) has been the target of much critique from the design team. Anyone who visits the Atlassian Sydney office has to sign in at reception. This includes guests, Atlassians from other offices, interview candidates, folks from our board, and the media. Frankly, the app that we’ve been using up until now is a bit of an embarrassment. As the first impression of Atlassian for a lot of people, it doesn’t exactly scream that we care about good design! The brief We interviewed our front desk heroes, Kellie Holmes and Courtney Clapper, to find out what they wanted from their sign in app. Their main requirements were: Must look awesome! Pre-filled reasons for visit (interview, meeting, building maintenance, etc.) rather than a blank field Auto sign-out when a guest’s visit has finished Visitors can manually sign out Notify Kellie and Courtney when people come and go Atlassians receive an automatic direct message when their visitor arrives The solution We decided to build a responsive, touch-friendly web app rather than a native app for iOS for three main reasons: Time – We only had 24 hours Expertise – We already knew how to write HTML, CSS, and JS Flexibility – Other offices may wish to use an Android tablet, desktop, etc. Front end While I started designing some screens, Pat and Jason set up a development environment. We went with a simple front end with straight Javascript, precompiled Stylus, and served by a Node.js / Express server. The application utilizes the AUI CSS / JS flatpack. From this, we created buttons, an auto-completing staff field using a filtered drop-down, and simple slide transitions created with jQuery animate. In order to achieve that native app feel, we made a few choices: The first was to use Fastclick, a useful utility to remove the 300ms delay touch devices use to detect double-tap. Then, we included the appropriate meta information so our iPad would load it as a full screen application. Finally, we used GPU-accelerated transitions to make sure the slide animation rendered as crisply as possible. Back end For the back end, Jason had the awesome idea of using HipChat. So we did! We created a room called Sydney Reception where messages get posted when people sign in out. In the app itself, visitors can select from an auto-completing list of Atlassians – populated by the HipChat user list – and choose who they’re visiting. That person then gets a direct message on HipChat from Front Desk saying their guest has arrived. In addition to HipChat, the Node.js server maintains a log of visitors in MongoDB (a JSON-speaking document […]
Previous Topic
