Archive for November, 2012

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

Hooray!

After working ridiculously hard for the past few months, I’m proud to give you¬†myVoiPay. Not only can you can now add and manage VoiPay Calls & MicroPayments services from a slick and simple user interface, myVoiPay also provides up-to-date analytics for all your services. From the dashboard of myVoiPay, you can set up new services and start generating revenue within minutes. The dashboard also features a simple graph and summarised table data to show you how your services are performing at a quick glance. Need a more detailed view? No worries – you can also download the raw detailed data into a csv file and query the data as you wish.

 

 

The brief of the project was to keep it slick, simple and clean. It is easy to clutter a self serve portal with configurations that no one really understands and will never really use, so we wanted a self serve portal where you can do everything all from the same page. i.e. create, edit, delete, clone services all from the same dashboard that displays your analytics data.

Another neat feature we implemented is service sharing – enabling you to share ¬†analytics data for certain services with others (for example sharing with affiliates or partners) or allow others to manage your services on your behalf – all without giving up your username and password. This can be done by sharing the service(s) with other user(s) with permissions of ‘Admin’ or ‘Viewer’.

Is there more?

We have lots of exciting new features planned for myVoiPay in the near future – so stay tuned for more. i.e. you might find a feature to run promotions in the near future (you didn’t hear it from me).
So… what are you waiting for? Sign up for free and give it a whirl.

Props to the individuals involved in delivering this milestone – Go Team VoiPay!

@munwaikong

VoiPay