The goal of the Green Party of Ontario is to build a fair and just society in balance with nature. The Green Party places value on the health and vitality of its families, local communities and economies. The party’s focus is on people. Although the Green Party’s current website includes images of people throughout, these images are small and not very engaging. This makes the website appear outdated and disconnected from its constituents. The goal of Coldfront Labs Inc. was to design a new Drupal 7 site from the ground up. This new website would be mobile friendly, engage potential and existing supporters and would incorporate the Green Party’s key values.

Original navigation and newly designed navigation

Original and new website header for the Green Party of Ontario

Simplification

Through onboarding and cardsorting we helped the Green Party of Ontario determine a more useful and simplified navigation for the site. We determined that users with less choices, have an easier time navigating around - especially when those choices are organized under more global headings that are easily viewed through dropdown navigations. A/B testing determined that users enjoyed not having to navigate to different pages to find the information they required. They were successful in finding the information they required under the new menu items that had clear dropdown indicators.

New website header and navigation for the Green Party of Ontario

Donations

A focus was also placed on donations, which had not previously been a part of the old website’s main navigation. In the past, the option to donate was further down the page, and as a result was not as obvious to users visiting the site.

New website header and navigation for the Green Party of Ontario

People, engagement and the Party Leader

One of the most important areas of focus for the Green Party of Ontario is on their party leader Mike Schreiner. In order to find out more about Mr. Schreiner I made use of a full-width hero image with a clear call to action which was key to bringing a face to the party. Our goal at Coldfront Labs Inc. was to bring more images and people into the design with reusable backgrounds. This approach emphasized a focus on the people and the support that was being provided to the party.

New website header and navigation for the Green Party of Ontario

Using duotone images assisted with bringing party colors into the design more prominently thus resulting in a more cohesive design; as many of the images came from different sources of varying quality.

Content is King

It was important to the Green Party of Ontario that they focus on their most up-to-date content. Therefore, the party focuses on their news, blog posts and events. As a way to direct the array of content, strong typographic choices were made in order showcase relevant articles, and excerpts. Through usability testing it was determined that large headings and defined summaries helped users of the site to scan the page more easily for the items that interested them.

New website header and navigation for the Green Party of Ontario

Building a Style Tile and UI Components

Because Coldfront Labs Inc. would only be supplying the design for the website with a limited number of mockups for the homepage and inside page types, it was important to provide a clear blueprint of what all the assets looked like in a variety of combinations. As part of our design process we always create a Style Tile for our clients showcasing all the fonts and user interface components. This technique allows for quicker iterations, cohesive design among all UI components and facilitates moving more quickly into building a style guide in-browser for clients.

UI components for the Green Party of Ontario UI components for the Green Party of Ontario

Outcomes

Dealing with Content of All Types

One of the most difficult things about this project was managing all the different types of content that the party wanted to showcase and migrate from their old site design. We did this by focusing on typography. We also planned a new information architecture and content architecture with the developers who would be building the final site. The photographs presented another challenge. It wasn’t clear at the beginning of the project how diverse the quality would be of the hundreds of campaign photographs. Some photographs had been taken by professionals and others were taken by volunteers. This was a problem since the client wanted their new site design to be more image focused. Coldfront Labs Inc. came up with an elegant solution that the client was happy with and provided a duotone psd template to cohesively use the best content images despite their varying quality.