Francis Rubio
Search

Get in touch.

So I know how to address you in my reply.

So I can reply to your message.

How can I help you?

Hire me full time

UI/UX Design

Web development

Consulting

Brand design

Training

Public Speaking and Workshops

Mentorship

Ask questions

You may include links to relevant information, inspirations, moodboards, or similar products. Ask as many questions as you want!

Philippine Consulate General

A website revamp for the people

Official Website
Made for
Philippine Consulate General, Calgary, Alberta, Canada
I worked as
Web designer and developer
Duration
January to March 2022
Philippine Consulate General - Calgary

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.

Screenshot of the old website of the Philippine Consulate General to Calgary, Canada Screenshot of the old website of the Philippine Consulate General to Calgary, Canada Screenshot of the old website of the Philippine Consulate General to Calgary, Canada
Figure 1: The old website of the Philippine Consulate General to Calgary was far from usable and being mobile friendly.

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.

Screenshot of the new website in dark mode Screenshot of the new website in light mode

The new website adapts to the user’s system dark color scheme.

Screenshot of the new website's navigation menu that opens into a dialog

The new website organizes the links into sensible groups in the navigation menu.

Screenshot of the new website's press releases

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.

Back to top