Empowerment Council Website Re-Design

The Empowerment Council is a non-profit organization that helps users of addiction and mental health services advocate for systemic change. I worked with a small team to create a new website for them that would explain their mission clearly and house the many resources that they offered.

Our challenge was to refresh the look to better express their organization's character, improve the overall usability, and to make the mission of the organization as clear as possible. The site also needed to be easy to update by the Empowerment Council staff.

I began by creating two mood boards based on their values of equity, respect, justice, collaboration, independence, integrity and accountability; and based on information gathered through stakeholder interviews. Through those interviews I learned that, though their organization deals with serious issues, the client didn't want the site to feel depressing. So my challenge as a designer was to create a look that was both positive and serious.

The client chose the more colourful design because they felt it expressed the energy that comes with changing things for the better. Based on that feedback I continued to work with a colourful, energetic look.

Typography & Colour

I chose the font Proza Libre for the titles because it has the friendliness of a sans serif, but because it's a humanist font, it feels less modern and still carries some of the gravitas that a serif has. I paired it with open sans, a very readable and popular web font, for the body text.

The colours needed to look related to the CAMH olours, but also distinct, so it was clear that the Empowerment Council was its own entity. They also needed to meet the strict AODA guidelines for contrast and readability. I choose a dark blue and light blue because blue is calming and serious, with a green that's fairly bright and playful, for a palette that is overall serious but not boring.

Home Page Layout

Once the colours and fonts were chosen, the next step was to design the home page. It had to achieve the goals of quickly and concisely explaining what the organization is about, what ty. I went with the image of overlapping word bubbles of different shapes and sizes featuring people of different backgrounds, to represent the idea of many different voices coming together for a common goal.

Imagery

The image that we chose for the header was important because it was the first thing users would see. We didn't have the budget for original artwork, so we had to work with stock imagery. I went with the image of overlapping word bubbles of different shapes and sizes featuring people of different backgrounds, to represent the idea of many different voices coming together for a common goal.

The other major challenge of the site was finding a way to house the many important resources that the Empowerment Council provided for its users. Using WordPress, we modified an existing theme by adding a sidebar and search function, creating a system that made the client's documents easy to browse, search within and update.