Designing ShowCaster Polls

The brief

The team @ShowCasterTV has recently completed a make over of its interactive polls feature. ShowCaster Polls enables user to run live interactive polls across the web, tv, tablets and phones and is a great use for 2nd screen applications. ShowCaster is used by a large TV broadcasters such as Channel 4 and Sky so scalability is a key consideration – all features need to support extreme load from large numbers of concurrent users.

A poll’s functionality by design is quite simple – a single question and a few options to choose from. Its simplicity should also be reflected on the user interface in order to deliver a good looking, yet focused poll-driven experience. The task at hand was to give the previous design a make over, but at the same time ensuring its simplicity remains intact, as well as ensuring the new UI adapts nicely across the multitude of screen sizes and applications that ShowCaster integrates with and is embedded into.

The challenge

The challenge was small – choose a design that will fit across multiple screen sizes and render the experience nicely across all platforms. However, the bigger challenge was the fact that our UI designer had decided to leave the country and begin his adventures elsewhere. This then lead to a bunch of hardcore engineers used to writing awesome code, instead spending time scratching our heads staring at something called a paintbrush tool. It wasn’t going to work, but we needed to refresh the UI quick.

The saviour

So, after looking around for help, we stumbled across something we were on more familiar grounds with. Twitter? Good. Framework? Good. Open-source? Good. Twitter’s open-sourced UI framework? Awesome.

With Twitter’s Bootstrap UI framework, we were able to use predefined UI elements, which come with all the bells and whistles i.e. nice CSS3 features like border radius, box shadows, transitions, and it includes all the browser specific shims and prefixes – all supplied by Bootstrap! Not only does it render well, it all works beautifully by simply adding a predefined style or data class to an HTML element – well, with exception to IE8 – but since no one uses IE8 anymore cause its crap, we’re fine right? :)

Responsive UI

For those who know a little about Bootstrap, the scaffolding structure is pretty neat – especially since it works nicely when enabled with ‘responsive features‘. With the responsive features enabled, Bootstrap adjusts the scaffolding structure to stack when the screen width is less than 767px using CSS3′s media queries. As powerful as it is, we have disabled it on our design because the simple design of the Polls concept needed the page to be ‘adaptive’ (to grow and shrink with the page) rather than responsive (stacking elements / increase element visible measurements).

So, without further ado, below are some screenshots of what we were able to churn out within a couple days.


Want to see the whole thing in action? Sign up for ShowCaster (free) and try it out yourself.

@munwaikong

Oh… and btw, looking for a design role? We’re hiring!

Design, ShowCaster