Project Description

In this project, we were assigned to build a responsive website for the 2017 Vancouver by-election campaign. We had to put a specific category up on our website to facilitate the voters when they are navigating the site.

Tools Used


Atom (HTML + CSS)

Adobe Illustrator

Team Members

Oliver Aung

Robin Wang

Michelle Shen

In this project, we had to apply the practice of "Information Architecture" which helps users understand their surroundings and find what they’re looking for.

My Role

All members of this project were required to code HTML and CSS. But my major role is to collect and filter the information that needs to be put on the website. We chose the 'voting steps' and 'ID required' as our main content.

Main voting page

Our main page has 3 main navigations. In order to maintain a good information architecture, I had to generate a list of all the items that need a structure and organize and label them to create a coherent structure. 


We used an umbrella image on our home page which connects with our offline approach (details below).

Information on the webpage

Since we have a very specific but limited content, I had to make sure that the users understand everything that they need to know. These contents were made to be easily accessible without any confusion. Layouts were carefully considered so that there was no obscuring of the information.

Our final task for this project is to come up with one offline approach which would lead voters to our website. I pitched an idea of using an umbrella with certain information inside of the umbrella which would connect the users to our online site. We created a prototype umbrella with a map of voting place inside of the umbrella directing the users to our website. we connect this theme to our website's homepage. 

Asset 1.png
This site was designed with the
website builder. Create your website today.
Start Now