Project Panopticon

How might we present the stand of senatorial candidates on key issues to help the electorate make informed votes?

March - May 2019

Project Nature

Web Design, Data Visualization

Tools & Methods

Figma, Adobe Photoshop, Adobe Illustrator


Project Panopticon was created just at the height of the 2019 Philippine Senatorial elections. It is a data visualization website created to present the raw data of the stand of senatorial candidates on key issues. It was made to assist Filipino voters as they decide on the senatorial candidates worth their vote.

“People should not be afraid of their governments, governments should be afraid of their people”. - V for Vendetta


Project Panopticon was borne from our observation of a person’s difficulty to organize political data for themselves. We recognized the urgency to provide reliable and candid information and we took it upon ourselves to answer the call.

Panopticon is a disciplinary concept brought to life in the form of a central observation tower placed within a circle of prison cells. When people believe they are being watched, they will act according to how they want to be seen by the watcher. 

We believe that the government’s activities should be heavily scrutinized by its citizens. When government officials are thoroughly monitored by its citizens with how they are leading, using taxpayer funds, and responding to issues, they are motivated to follow through with the promises they made prior to being elected.

We believe that citizens should have the power to watch the government. Always.

Website Design & Features

The process of creating the website happened in a mad rush. At the time, we had no idea what the site would even look like, but we were guided by the idea that the citizens should be the ones watching government and not the other way around. We ended up using a predominantly black and yellow design, giving off a secret and edgy vibe.

The site has a few important features, for incumbent senators of the 17th Congress and senatorial candidates of the 18th Congress.

Then Incumbent Senators (17th Congress)

We made it possible to easily track the official activities of individual senators using data gathered from the official website of the Senate of the Philippines (

  • Quick Info: Present users with basic information on a senator including: (1) term of office, (2) official office location, (3) contact numbers, (4) E-mail, (5) Official Website
  • Top Committee Involvement: Presents users with the top three committees a senator is most active in in authoring bills
  • Senatorial Activities: List of bills authored, bills voted in favor, bills voted against, and bills with no vote (abstain)
  • Collaboration: Presents the user with a graph showing the frequency a senator collaborates with other senators in authoring bills

Presenting basic information on a senator

A graph showing the collaboration frequency with other senators

Then Senatorial Candidates (of the 18th Congress)

The site allows users to view key issues discussed during the elections and the positions of the candidates regarding the issue. 

The site allows users to view key issues discussed during the elections and the positions of the candidates regarding the issue. Data was gathered from various news sources was collated in Google Sheets (spearheaded by John Philip Lim & Bella Brillantes). This was then translated into a model where users can interact with the data.

A screenshot of the comprehensive Google Sheet on Key Issues discussed

Below is a gif showing how we organized and presented all the information on the Google Sheet.

A demo showing how we presented information

Guerilla Testing

We were eager to have something out as soon as we could and iterate accordingly from feedback gathered. When the website was live I immediately asked friends and family to look at the website and give us their honest thoughts on the site. Feedback was collected from informal face-to-face interaction and online channels.

We were praised for our initiative but it also came with much criticism on the design regarding small issues such as button design and especially with the choice of the dark aesthetic. I collated everything on Google Sheets so we could easily track criticism and our response to said criticism.

A screenshot of some of the Feedback we received and how we organized tasks

Problems Encountered & Lessons Learned

Lack of Human Resources

When we started Project Panopticon, it was only really composed of no more than three people, and so our reach and resources were very limited. Should we have had a few more people to design, develop, research, and market, perhaps we would have had a wider reach. Despite this, we were still able to garner more than 8,000 page views on our website.

Choice of Dark Aesthetic

As I learned from embarking in this project, using a dark aesthetic is a risk. On one hand, using a dark aesthetic can generate emotion and exude an air of mystery, elegance, power, and formality (according to color psychology). On the other hand, readability becomes an issue.

The challenge here was to strategically make use of negative space to avoid distracting users from relevant information. Moreover, when using a dark aesthetic, one must use elements such as pictograms, icons, images, and so forth in order to avoid straining the eyes from too much text against the dark background.

Low Public Presence of Candidates

While our goal was to present the audience with unbiased information by presenting them with raw data, biases could not be avoided due to the low (or nonexistent) public presence of candidates. Despite our best efforts in researching, we could not find all candidates’ stand on issues and so they were not properly represented. Instead, they were marked with “No Data Found”.

No items found.

See my other projects

Let's collaborate!

Thanks! I got your message :)
Oops! Something went wrong while submitting the form.