Philippine Consulate General
A website revamp for the people
Problem
The official website of the Philippine Consulate General of Calgary was really outdated, broken, and was miles away from being responsive and mobile-friendly. They came to HatchUp Media to commission a revamp of the website. Their original website was hosted on Wix, and it was very far from usable.
They wanted the new website to have a CMS that they can use to add new press releases. As for other major changes to the site such as navigation links, we agreed to change it whenever the needs arise.
Development
To make it fast, I opted into making it a static site using Eleventy, a static site generator. Since this website will be used mostly for posting informational content and advisories, it will not have the need for front end frameworks that use JavaScript, and everything can be done from the server. For the layout, I used a baseline CSS system that I developed for reuse in new projects, and used SCSS in development. No JavaScript frameworks are used, and apart from the navigation menu and other necessary interactive components, the site has very minimal scripting. We also used Google Analytics for the site analytics. The site is hosted via Netlify, and the CMS is powered by Forestry.
Results
The new website follows the design language of most of the Philippine government sites. On top of that, the site is now more responsive. The site also suffered from having too many links, and one of the most efforts we put into was in the information architecture of the site. It also adapts to the user’s system dark color scheme.
The new website adapts to the user’s system dark color scheme.
The new website organizes the links into sensible groups in the navigation menu.
Because of the new CMS, press releases are easier to create to the new site. New press releases are also easier to find because of the new press release previews in the front page.
