Coalition chart

Loksabha Elections 2014 was fought in presidential style and was considered one of the most polarised elections in India's history. There were three major questions:

How big would Narendra Modi's victory?
How badly would the incumbent Congress party lose?
How much impact would Aam Aadmi Party make?

How to best represent the Parliament?

Two Level: India follows a multi-party system. There are two national parties and many regional parties. It is rare for one party to receive a majority. Hence, one national party and many regional parties form a coalition to prove a majority. When designing the donut, we wanted to make sure that we take into consideration this reality of Indian politics. Hence, the donut has two levels. The outer layer are the alliances i.e. BJP+, Congress+, etc. Within the area allocated to each party are small lightgray slices, one for each party of the alliance.
Won/Lead: The app was designed to show case results live on Election Counting Day. Hence, for most of the day, a party is generally leading in a seat but that may or may not translate into a won. Hence, the donut has two parts for each alliance and party. One is seats won and another is seats leading. Seats won had 100% opacity and seats leading have lower opacity.

Live blog

Elections are much beyond numbers. There is a lot of emotion and enthusiasm that cannot be displayed in numbers. To communicate this to the readers, we implemented a live blog where journalists would continuously write about the latest happenings and news every few minutes.

Mapping out the results

We used the Parliamentary Constituency Map of India. On hover over any constituency, the results are shown in a tooltip. Next to it, we showed the summary of results for the whole nation. Below it, we showed the various key battles being bought e.g. Modi versus corruption crusader Kejriwal, a description of the battle. As the counting would happen live, the vote percentage for that candidate will be updated live. This allowed for readers to track these key battles as and when they happened.

There were few key states where a heated multi-cornered battle was expected e.g. Uttar Pradesh. To know about each of these regional battles, the reader has to simple click any where in Uttar Pradesh in the map and the map zooms in. At state level, the focus now shifts away from alliances to each individual party's performance.

On zooming into the map, the URL changes from firstpost.com/election-results/map to firstpost.com/election-results/map/uttar-pradesh-2014. This allows for better SEO and allows users to share results of one state alone. To improve SEO via Google crawling, we added a drop down with every state's name.

Live data refresh

Another objective was to make the page LIVE like a sports score card page. The front-end continuously polled for new data every 15 seconds. We also needed a way to communicate to the user that the page was LIVE. Hence, following UI elements were added.

A red bold LIVE NOW label on the header.
Last Updated at at various places.
The donut chart animates every time it refreshes.
A bright red Ticker at the bottom of the page giving results of Key Battles.
Finally, a hard page refresh every 3 minutes.

Data Integration

The web app was receiving data from AC Neilson's APIs. The APIs provided a live feed of polling count from each parliamentary constituency. Along with this, there were other APIs to fetch news, blog, etc. We followed a two pronged approach. The app has to be interactive and live. Hence, the donut, tables and key battle results were all coming live every 15 seconds. However, the heavier data e.g. data for each of the 543 constituencies for the map was processed via a cron job and pushed to the server once in 2 minutes.

FirstPost.com

Book an obligation free consultation.