top of page

Redesign of City Website

Objective: To redesign the City website to improve user experience, accessibility, and overall usability for residents, businesses, and visitors.

Background

The City website serves as a critical platform for providing information and services to its community. However, the existing website faced several issues:

Outdated Design

The visual design was outdated, leading to a lack of engagement

Poor Navigation

Users found it difficult to navigate and locate information quickly

Accessibility Issues

The website did not fully comply with accessibility standards

Content Management

The website had too much information presented in an unorganized manner..

Research and Analysis

Goals

Enhance User Experience: Create a user-friendly interface that is easy to navigate.

Improve Accessibility: Ensure the website complies with WCAG 2.1 standards.

Mobile Optimization: Design a responsive website that works seamlessly on all devices.

Content Organization: Streamline content to make it easier to find relevant information.

Modern Design: Update the visual design to reflect a modern and engaging look.

User Research

1. Surveys and Interviews: Conducted surveys and interviews with residents, businesses, and city employees to gather insights on their needs and pain points.

2. Analytics Review: Analyzed website traffic data to understand user behaviour and identify high-traffic areas and drop-off points.

3. Competitor Analysis: Reviewed websites of other municipalities to identify best practices and innovative features.

Design Process

Information Architecture

Key Finding

After thoroughly conducting our research, we uncovered several critical insights and key findings.

Streamline User Navigation

Users struggled to find information on services and events

Enhance Website with Responsive Design

Many users abandoned the site due to slow load times and poor mobile experience

Expand Online Services

There was a high demand for online services and self-service options

Content Audit

The website had too much information presented in an unorganized manner.

Wireframes and Prototypes

Created user flows for different personas to ensure seamless navigation

User Flow

Screenshot 2024-07-18 at 4.00.28 AM.png
Screenshot 2024-07-18 at 4.03.28 AM.png

Developed a new site map to organize content logically and intuitively.

Sitemap

Low-Fidelity Wireframes

Sketched initial wireframes to outline the layout and structure.

Screenshot 2024-07-18 at 10.52_edited.jpg

High-Fidelity Prototype

Developed interactive prototypes using tools like Figma to visualize the design and gather feedback

Screenshot 2024-07-18 at 2.28.01 PM.png

Refreshed Homepage

Simplified the layout, added a slider for more information and the latest updates.

Screenshot 2024-07-18 at 2.28.49 PM.png

Mega Homepage Navigation Bar

Implemented a Mega Navigation menu at the top, showcasing all departments and services.

Screenshot 2024-07-18 at 2.44.15 PM.png

Online Water Billing Revamp

Improved user experience, facilitating easy access to the customer portal and payment page.

Visual Design

Created a style guide with color schemes, typography, and iconography that aligns with the city’s branding

Style Guide

Screenshot 2024-07-19 at 4.01.53 AM.png

Ensured the design is responsive and looks great on all devices. Optimizes to provide an excellent user experience on all devices, including desktops, tablets, and smartphones

Responsive Design 

Screenshot 2024-07-19 at 4.59.29 AM.png

Conducted usability testing sessions with real users to identify issues and gather feedback. Made iterative changes based on feedback to enhance usability. 

Usability Testing

Featured Items

1. Improved Navigation: Simplified the navigation menu with clear categories and subcategories.

2. Search Functionality: Enhanced the search function with predictive text and filters to help users find information quickly.

3. Accessibility Compliance: Implemented features like text resizing, high contrast mode, and screen reader compatibility.

4. Online Services: Added online services such as bill payments, permit applications, and event registrations.

5. Events Calendar: Integrated a dynamic events calendar that allows users to filter by category and date.

6. Mobile Optimization: Ensured the website is fully responsive, providing a seamless experience on mobile devices.

7. Content Strategy: Streamlined content to reduce clutter and highlight important information.

Outcome and Impact

User Satisfaction: Increased user satisfaction and engagement as indicated by post-launch surveys and feedback.

Traffic Increase: Notable increase in website traffic and user retention.

Accessibility Compliance: Achieved full compliance with WCAG 2.1 standards.

Mobile Usage: Significant improvement in mobile traffic and user experience.

Service Utilization: Increased usage of online services, reducing the burden on city staff and improving efficiency.

Conclusion

The redesign of the City of Richmond Hill’s website successfully addressed the key issues identified during the research phase. By focusing on user-centered design principles, accessibility, and mobile optimization, the new website provides a modern, efficient, and engaging platform for the community

A/B Testing Report 

Design

Old Version:

Not in trend so not easy to use
New Version:

Latest trend so easy to use

Layout

Old Version:

Not a responsive design
New Version:

Responsive design.

Navigation

Old Version:

Navigation in not good
New Version:

Make navigation easy

Images

Old Version:

Low quality & not arrange properly
New Version:

Good quality & arrange properly

bottom of page