Stella Artois – My Chalice mobile experience

Front-end development (HTML5, CSS3 (Sass), JavaScript, SOMA.js MVC, RequireJS) - March 2013

Tablet view

I joined Stink Digital’s front-end team to work on My Chalice from Stella Artois, a responsive, single-page Android/iOS mobile/tablet experience. Built using native JavaScript, SOMA.js MVC and RequireJS, the experience allows purchasers of Stella Artois promotional packs to enter a code using their mobile and enter, navigate and interact with a virtual bank vault. A winning code allows the user to virtually engrave their details onto a Stella chalice glass, which is then posted to them.

Try out the archived site on your mobile
(Vault access code: 6000000000)

Mobile view

I produced the HTML, CSS (using Sass for mixins and partials), as well as a number of the JavaScript classes, views and models, notably the orientation model, the functionality for the unlocking of the vault by rotating your mobile, a from-scratch responsive touch-driven content slider and the integration of the 360 degree skybox. Extensive use is made of CSS3 animations/transitions for interactions and sprites. Optimised for iOS6/Android 4.

Try out the archived site on your mobile
(Vault access code: 6000000000)