In early 2014 Imagination Labs approached koffeecup with the task of building a kiosk application for Shell and their Gastech exhibition. With design complete by Imagination Labs, the front end challenge was left up to us at koffeecup.

Learning made fun!

During the few years I experienced as a hybrid designer front end developer (I guess it's a thing these days) there's one project I credit with a lot in terms of levelling up. Shell Gastech is a very simple application, it pulls in a feed of articles, galleries and videos. There's not really much more to it.

Despite the relative simplicity, it is also a Chromium application, which meant supporting every single other browser in the world was out of the window. The developers dream. Not only did this project teach me a lot about organising CSS but also alot about new methods (at the time) such as vmin, vmax and calc.

Some background & process

As mentioned in the intro, the project was presented to us by Imagination Labs on behalf of Shell. Design had already been taken care of in-house by their excellent, fluid team. We had a relatively short time span as well to produce this project, but fortunately the app wasn't too complex in terms of data or backend.

The challenges for this app came more so with the front end. The app despite being developed for Chromium was destined to be used on relatively old digital kiosks and Surface tablets. The next caveat to the app was that it had to be flexible over these multiple device viewports - as well as this a masonry grid to boot.

Being that time was short and we had certain challenges on the front end, the process was quite rapid. We had decided to break CSS properties down into classes for the most part (this is pre-Tachyons) in a similar way to Bootstrap. We knew we didn't require that much, it was the first time I'd approached a project like this. Of course it wasn't perfect but we found in the first few days of development our CSS was super organised - not something you're familiar with in an agency sometimes.

Small shoutout

Throughout this project I was very fortunate to work with a true guru of front end (Pawel @ koffeecup). The guy in my 2 years at koffeecup taught me an incredible amount but I felt like the challenges we faced with skinning video player UI, caching of CSS, setting up of Grunt etc. I learnt a lot!

For that reason I hold this project very dear.

Design & User Experience
All work belongs to Onefootball GmbH