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
Developed a new site map to organize content logically and intuitively.
Sitemap
Low-Fidelity Wireframes
Sketched initial wireframes to outline the layout and structure.
High-Fidelity Prototype
Developed interactive prototypes using tools like Figma to visualize the design and gather feedback
Refreshed Homepage
Simplified the layout, added a slider for more information and the latest updates.
Mega Homepage Navigation Bar
Implemented a Mega Navigation menu at the top, showcasing all departments and services.
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
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
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