Know Your Vote - Election Information Portal

Learn how we built a website for the 2019 Indian General Election to help the citizens know the essential information regarding the election and the candidates contesting.

Mockup image of Know Your Vote site screens

Summary

Overview

Elections are the heart to the democracy. Citizens get a chance to vote and elect representatives who can make political decisions for them and the country's welfare.

There are various factors influencing the voters' decision making skills like the rise in social networks’ dominance, promotional campaigns with fabricated information or lack of information available about candidates contesting in it.

We took this oppurtinity to conduct an experiment by developing a website to provide essential information regarding the Indian General Election conducted in 2019 and candidate's participating, to see if it can address and resolve the existing problems.

Project Duration

7th April 2019 - 16th April 2019

Status

Completed

Team

  • Hariprasad KC
  • Karthik Venkataraman M

Roles

  • UI/UX Design
  • Branding
  • Front End Development

Tools

  • Sketch (Design & Prototyping)
  • Adobe Illustrator (Branding)
  • Visual Studio Code (Development)

Technologies

  • HTML/SCSS/jQuery
  • Bootstrap (Front-End Framework)
  • Golang (Back-End)
  • Github (Version Control & Code Management)
  • Google Cloud Platform (Deployment)

Democracy is a system of government in which power is vested in the people and exercised by them directly or through freely elected representatives. The term is derived from the Greek ‘demokratia,’ which was coined in the 5th century BCE to denote the political systems of some Greek city-states, notably Athens.

Democracies fall into two basic categories, direct and representative. In a direct democracy, citizens, without the intermediary of elected or appointed officials, can participate in making public decisions. Such a system is clearly most practical with relatively small numbers of people - in a community organization, tribal council, or the local unit of a labor union, for example - where members can meet in a single room to discuss issues and arrive at decisions by consensus or majority vote. However, today, as in the past, the most common form of democracy, whether for a town of 50,000 or a nation of 50 million, is a representative democracy. Citizens elect officials to make political decisions, formulate laws, and administer programs for the public good.

Challenges Faced During Elections

Voting in an election is a fundamental process in a democratic system. It is a chance for a country’s citizens to have a say in the people who represent them or an issue that impacts them and makes political decisions by majority rule.

With the rise in social networks’ dominance, today’s election scene and the voter’s knowledge are heavily influenced by the biased inputs available and consumed in the form of news, videos, and memes, which are fabricated and promoted, leading to citizens exposed to misinformation.

Another common issue faced during elections is that major parties with needed funds and resources can reach the people with elaborate campaigns through all mediums. Still, small parties and independent aspirants fall short of such privileges and fail to reach them. Thus making the citizens unaware of such contestants.

Our Experiment to Address the Problems

To resolve the mentioned problems, we decided to create a website for 2019 Indian General Election that showcases all the relevant details about the candidates participating in the election and experiment with it to know how far it can reach to help the citizens.

The election dates were nearing, and we had less than two weeks to design, develop and make the website live, so we decided to concentrate on showcasing the details for Chennai city alone.

Administrative Divisions of Chennai

Chennai, formerly known as Madras, is the capital of the Indian state of Tamil Nadu. Located on the Coromandel Coast of the Bay of Bengal, it is one of south India’s largest cultural, economic, and educational centers.

As Tamil Nadu’s capital, Chennai houses the state executive and legislative headquarters primarily in the Secretariat Buildings in the Fort St. George campus. Chennai has three parliamentary constituencies — Chennai North, Chennai Central, and Chennai South — and elects 24 Members of the Legislative Assembly (MLAs) to the state legislature.

Building Know Your Vote!

Data Collection

Gathering Candidate Information

Gathering the data of each candidate was a challenging task. We couldn’t scrap the needed details from their Wikipedia page or articles on the web because we have to provide legit information to the people. Data sourced from the internet must be fact-checked to avoid any discrepancies, and it might consume more time. To make the situation worse, we found some candidates didn’t have any digital footprint that forced us to find some other reliable source.

We finally decided to obtain the candidate’s information from the affidavit filed with the government for contesting in the election. We were able to get the following information from it:

  • Personal Information
  • Party Information
  • Financial Information
  • Criminal Records

User Flow

Journey of a Site Visitor

The website has a simple user flow. A site visitor selects the constituency they belong to or enters their Pincode if they don’t know it. Based on the selection/input, they are navigated to the respective constituency page with the list of candidates contesting. The visitor then chooses the candidates to know their details.

Flowchart showing the user joruney in Know Your Vote site
Know Your Vote site's user flow

Design

Shaping the User Interface

The primary goal was to keep the site’s user interface minimalistic and accessible since the target audience was voters who might have visual impairments like color blindness or low vision. A heavy sans-serif font like Lato was used, and proper colors were chosen for better contrast ratios.

Image showing the typography and color system of Know Your Vote site
Style guide of Know Your Vote Site

The site’s information architecture (IA) was structured in a way that a visitor can get all the needed information about the constituency and the candidate for better understanding. Cards and tables were used as primary UI components to display the data. The prototypes were designed using Sketch, and branding assets were designed using Adobe Illustrator.

Flowchart showing the information architecture of Know Your Vote site
Information Architecture of Know Your Vote site
Image depicting the breakdown of Know Your Vote site's Logo
Breakdown of Know Your Vote site logo

Development

Coding the Website

We used a tech stack that was easy and quick to implement. I worked on the front end development, and Hariprasad worked on the back end. The basic development work was completed within 3 days, and we had thorough testing by checking the usability and performing cross-browser testing on multiple devices and platforms.

The front end was built with Bootstrap, and custom styles were written using SCSS. JQuery was used to perform DOM manipulations, event handling, and make AJAX calls to fetch candidate and constituency details. WCAG guidelines were followed to achieve the AA level of Conformance, and valid WAI-ARIA attributes were added to the HTML elements to help users access the website via assistive technologies like Screenreaders. Chrome Lighthouse audit was performed to double-check, and suggested fixes were implemented.

Golang was used for the backend that powered the APIs and to handle navigational routing. All the raw data about the candidates and constituencies were stored in JSON format and processed during GET requests. The source code was maintained in Github, and the website was hosted in Google Cloud Platform using App Engine.

Screenshots of Know Your Vote site

Takeaways

Though it was a project with a very short deadline, the learning curve was huge. We got a chance to understand the state’s administrative and political framework and the Indian Electoral system’s functioning. We also learned about valid methodologies for data collection.

Our site had 8,000+ unique visitors during the election period, and many personally reached us to let us know how useful the website was for them. They expressed how the site served as a one-stop portal to know about all the candidates contesting in detail.

We also received a few feedbacks for improvements that they wish to see in the next version. Some of the valid queries we received were:

  • To localize the website and view it in local/native languages like Tamil, Malayalam, Hindi, etc.
  • To include articles on improving the voting literacy among the citizens.
  • To include data about candidates from other districts and states.
  • Open source or crowdsource the website code to bring in more collaboration for extending it.
L
I
G
H
T
D
A
R
K