Cordon Media

City of Hamilton Website Redesign

Interactive Touchscreen Development
Interactive Touchscreen Development
Interactive Touchscreen Development
Interactive Touchscreen Development
Interactive Touchscreen Development
Interactive Touchscreen Development
Interactive Touchscreen Development
Interactive Touchscreen Development

Introduction

Hamilton.ca is the official website for the City of Hamilton. It is a municipal website that provides access to information and services to four million visitors per year. The Cordon Team was engaged by the City of Hamilton to aid in the redesign of the City’s website. The main objectives of the redesign were to improve the City’s online image, allow for effective communication between citizens and the City, and provide easy access to its online services. However, citizens do not find the website visually appealing or easy to use due to an overload of information. There is a significant need for the City of Hamilton to update the website to become AODA compliant and responsive in order to better serve its citizens in today’s technology-driven society.

Responsive

To solve these issues, Hamilton.ca was re-designed to be responsive and more service-oriented. The new design achieves a clean and crisp look with the strong use of typography, icons and colours. These tools are the foundation for responsive design as they easily translate across all devices with very little load time. The use of icons is also very important to the City of Hamilton as they do not have many quality photos at their disposal. Besides adding visual interest, icons are effective communication tools when language barriers arise. They allow users to quickly digest what it means without reading.

Service Focused

For this reason, icons are a key component to the service tiles on the homepage. With the large amount of content available on Hamilton.ca, it is important to prioritize the services that citizens are looking for without digging through the website. As such, they are placed prominently on the homepage. To accommodate for the City’s changing needs, the service tiles are dynamic. Content editors can add, remove or switch the order of services depending on popularity. Each service tile lists the top three tasks available for citizens.

Accessible

Hamilton.ca is an important resource for citizens, thus it is crucial for the website to be accessible to all – including those with disabilities. To be WCAG Level AA compliant, several techniques were implemented. All actionable items do not solely rely on colour to distinguish visual elements. Other graphical aids are used as well, such as lines, arrows, icons and labels. All important content and visual aids have a high colour contrast ratio to ensure legibility. The website is also keyboard accessible for those with a visual impairment. Multiple ways are presented to help users navigate through the website: such as mega menus, breadcrumbs and static links. These are some of the many techniques that were used to ensure accessibility.

Results

By keeping accessibility in mind, focusing on services, using key elements for responsive design and HTML5/CSS3 technology, Hamilton.ca achieved a user friendly website that caters to citizens across all devices. The website is navigable in multiple ways with the help of an organized mega menu, slide out menu for mobile devices, breadcrumbs, related content areas and an accessible search bar from every page. The new Hamilton.ca is a leading example for all government websites as the content is well organized by the citizen’s view, easy to navigate and accessible on every device. Many government websites struggle to balance the needs of their internal stakeholders as well as their citizens. Hamilton.ca is a good example of how to balance both while maintaining a modern design.