Sunset by the beach

City of Port Colborne

The Need

The City of Port Colborne’s website was built and launched in 2009. At the time, it was a very forward looking design with a custom content management system (CMS). By 2015, the website was being surpassed by the design and features available from other municipal websites, making it harder for City of Port Colborne staff to promote the city and attract visitors and new residents from other areas.

The Solution

The Olio team created a new website design that would utilize the existing custom CMS. This retrofit approach drastically reduced the cost of building the new website, and meant very little change for Port Colborne’s website administrators. The new design supported a responsive layout for tablets and smartphone devices, and established guidelines for Port Colborne’s staff to help them create graphics that would be consistent with the new look and feel.

2015 - Present
Art Direction, User Experience, User Interface Design, Frontend Development, Mobile Responsive, Backend Development, Ongoing Site Optimization
Project Link:
City of Port Colborne
Port Colborne Website homepage


Port Colborne Website typography

Colour Palette

Port Colborne Website colour palette

Graphic Elements

Port Colborne Website Graphic Elements

How We Got There

Working from multiple design concepts, Olio’s team helped city managers ensure that the new design met project goals. With a limited budget, we worked quickly and efficiently to identify a new website, style guide, and worked toward implementation.

The resulting project introduced a fresh design, modern code and markup to ensure cross-browser compatibility, and responsiveness on mobile devices. The extensive navigation created a unique challenge, as Port Colborne provides many services locally to residents, and it wanted to ensure that information was all readily available. Olio’s designers were able to craft a navigation system that works well across devices, utilizing a proven model of placing section sub-menus to the left of content when appropriate.

During Implementation, Olio worked closely with City staff to re-work existing content where needed to match the new layout and design. The number of changes needed were small, but we tested every page together to work through any issues that arose through the process. We also worked with the City to ensure that high profile landing pages (e.g. Visitors, Residents, Business) were used as effectively as possible.

Olio continues to support the City of Port Colborne’s new website, producing new property tax calculator and water/wastewater calculator for the website in late 2016, and will continue to support the website’s features and functionality as needed.

Related Projects.