Halifax Mutual Aid
Branding and low-carbon web design and development
2020
Halifax Mutual Aid is a group of volunteer carpenters committed to taking action against houselessness in Halifax by building small crisis shelters. In their words, "We are aware that what we are doing is not a solution to the housing crisis in our city nor it is a solution to homelessness. That said we would rather build safe, secure shelters using our limited resources than leave fellow community members to die outside in the cold this winter. We do not see what we are doing as a long-term solution, but rather a short-term necessity given our circumstances."
Their mission is a compassionate reaction to a tragic failure by local government that will affect a staggering number of people in Halifax. They wanted to jump in as quick as possible to start accepting donations for materials to fund the builds. Their brand and low-carbon website was created over 3 days with the goal of quickly spreading awareness to acquire funding before it gets too cold. The launch sparked immediate interest across local news sources and social media. They've accumulated enough funds to build a handful of shelters. Additionally, the simple branding and web design decisions helped make Halifax Mutual Aid's average carbon emission per page 0.17g.
Please consider donating to Halifax Mutual Aid if you are able.
Visit halifaxmutualaid.com here
Visual Identity Design
Halifax Mutual Aid's brand needed to spark alarm to the issue at hand, but also demonstrate their altruism. The logo does this by depicting individuals lending a hand to those in need.
Their colours are high-spirited, yet friendly. The orange speaks to the energy and alarm behind the project, but is also trustworthy and subtle.
Their brand typefaces are Georgia and Helvetica. Georgia's classic softness keeps the voice of Halifax Mutual Aid's website thoughtful and sincere. The biggest bonus with using Georgia and Helvetica, is that they are system fonts, meaning when it's used on the website, it will remove the need to link any web fonts. This reduces the overall weight of the page.
Sustainable Web Design
Halifax Mutual Aid's carbon emissions per page are low from decisions made in the branding, design, and development.
The few images of the crisis shelters they've built were a massive success in reducing file sizes. The original images were between 200KB and 500KB. After converting the images to black and white, and dithering them (reducing the amount of colours in the image) to 4 colours, then using the brand's orange in replacement for greys, the images ranged between 50KB to 80KB. Even with this huge reduction in file size, and a reimagining of the image's aesthetic, the dithered images don't sacrifice any artistic qualities.
Original image, 188KB
Image after dithering, 82KB
The simplicity of the brand made the website's carbon goal very easy to achieve Additionally, Halifax Mutual Aid wanted a site that was very minimal and heavily showcase their mission statement. The site is one page, but is built to grow in the future as Halifax Mutual Aid takes on more community projects aside from crisis shelters.
The site was designed to be responsive for any device, and was designed mobile first. By designing mobile first, we were able to organize the content to create a clear and poignant narrative in the site's most reduced state. Plus, the amount of mobile users outnumbers those who would be visiting on a desktop, so the site should be as beautiful and delightful to use on small screens.
We used a lightweight WordPress theme, called GeneratePress, for this site. The theme, even its free version, had everything we needed to build the site. Because it's not bulky with unnecessary features for customization, much of the small finessing of functions or features were done with custom CSS. To keep the site's page size small, plugins were used selectively.
Caching was used for content whenever possible to keep the site's load time low. We also used CSS and Javascript minifies to remove any code that wasn't being used.
On Google's Performance Tracker, halifaxmutualaid.com rated 95% on desktop and 83% on mobile. This exceptionally high score relates to the page's efficiency and speed, which is important for sustainable websites because it means they require less energy to load. halifaxmutualaid.com emits just 0.17g of CO2 per page load, which is 87% better than most tested websites (according to websitcarbon.com).
