An Interactive Website for Canada’s Largest Community Event

An Intuitive User Experience

The main focus for CNE’s website was to create a seamless experience for users to plan their visit and explore all the events taking place during the 18-day gathering. We created a site map that makes it easy to discover everything from their annual Cat Show to the whimsical Nook of Gnomes exhibit.

To make the site more interactive, we created a custom schedule for visitors to easily view daily events. The schedule features a React filter that sorts events by experience and location making content easier to find. A map was also integrated to visually showcase the exhibit.

Let’s Get Playful and Bright

With an audience that is modern and young-spirited, we brought playfulness back into the site by intertwining the vibrant and bright colours of CNE’s brand. To create a visually compelling story, all buttons and actions have micro-animations along with illustrative icons in the menu. We also added elements such as gradients and shapes throughout the site for added fun.

To ensure that the site remains accessible for all, we kept reduced motion in mind for those who would prefer viewing without animations. To do so we made sure tabbing was possible along with visual cues to indicate where users are on the page.

An Admin Friendly Content Management System (CMS)

We wanted CNE’s admin team to enjoy the flexibility and ease of their WordPress CMS. Previously they found it difficult to update and add content autonomously so our biggest goal was to empower them to edit their site independently. 

Using Gutenberg and custom ACF blocks, we made sure the backend matched the frontend so the CNE team could get an idea of what the content would look like before going live. This makes it incredibly easy to put together a page regardless of their web experience.

The Beauty of Agile

A tight deadline and ambitious goals meant organization was key in delivering a successful product. The project began in March with a detailed minimum viable product (MVP) set to roll out at the end of May. By breaking down all the work into phases, we were able to reiterate on, enhance, and release new features every week. The result was an improved workflow at all phases that made constructive feedback and collaboration an integral part of the website’s success.