FCLWD Website Redesign
Redesigned, optimized, and trained FCLWD’s team to manage a high-performing, WCAG-compliant site.
Background
The Fort Collins - Loveland Water District (FCLWD) has been a cornerstone utility provider in Northern Colorado since 1961. Serving over 60 square miles and a growing population of more than 67,000 residents, the district is responsible for delivering safe, clean, and reliable water services to homes and businesses across Fort Collins, Loveland, Timnath, Windsor, and surrounding areas.
Challenges with the previous website included
Lack of mobile responsiveness
Lack of mobile responsiveness
Non-compliance with accessibility (WCAG) standards
A dated, hard-to-navigate layout
Services We Delivered
Website Redesign
WCAG Accessibility Compliance
Custom Development
Performance Optimization
Search Engine optimization (SEO)
Discovery & Requirements
Visual Design
User Experience Strategy
Handoff & Team Training
Quality Assurance & Testing
Key Challenges
Accessibility Gaps
The existing website was not WCAG-compliant, making it inaccessible to users who rely on screen readers, keyboard navigation, or assistive tools. This not only excluded a portion of the community but also put the district at risk of non-compliance with accessibility standards.
Outdated & Non-Responsive Design
The site was built on an older framework and lacked mobile responsiveness. Key user journeys—like checking water alerts or paying a bill—were difficult to complete on smartphones or tablets, which now account for a significant portion of web traffic.
Poor Performance & Load Times
The website performed poorly on speed tests, scoring just 62 on Google Lighthouse. Unoptimized images, bulky code, and lack of caching slowed the experience, leading to frustrated users and potential SEO penalties.
Limited Content Management Flexibility
The internal team had minimal control over the site. Updating a single document or adding an announcement required external support, leading to delays and reducing their ability to serve the community in real time.
The Solution
The existing website was not WCAG-compliant, making it inaccessible to users who rely on screen readers, keyboard navigation, or assistive tools. This not only excluded a portion of the community but also put the district at risk of non-compliance with accessibility standards.
WCAG A & AA Accessibility Compliance
The existing website was not WCAG-compliant, making it inaccessible to users who rely on screen readers, keyboard navigation, or assistive tools. This not only excluded a portion of the community but also put the district at risk of non-compliance with accessibility standards.
Semantic HTML and ARIA roles
Keyboard-friendly navigation
Proper heading structure and color contrast
Screen reader–accessible forms and labels
Skip links and logical focus order
Mobile-First, Responsive Redesign
Using a modern, clean layout with a mobile-first approach, we redesigned the site to ensure it works flawlessly across all devices. Key content—such as water updates, service notices, forms, and billing information—is now easy to find and interact with, whether viewed on desktop, tablet, or mobile.
Performance Optimization
We rebuilt the site using a lightweight, modular theme that prioritized speed. Through best practices such as lazy loading, image compression, minified CSS/JavaScript, and browser caching, we increased the performance score from 62 to 95+ on Google Lighthouse. The result is faster load times, better SEO performance, and a smoother experience for all users.
Empowered CMS & Team Training
To ensure the FCLWD team could take ownership of the site moving forward, we:
Customized the WordPress admin experience to match their workflows
Provided step-by-step written documentation
Delivered custom video tutorials tailored to their site
Screen reader–accessible forms and labels
Conducted live training sessions with their staff
The new CMS structure allows them to easily update content, post announcements, manage documents, and more—no coding required.
The Process
Our collaborative approach ensured the solution was tailored to FCLWD’s mission, team, and end-users.
Discovery & Planning
Our engagement began with a collaborative discovery phase. We held structured conversations with key stakeholders from the Fort Collins – Loveland Water District to gain a thorough understanding of the site's purpose, its users, and the limitations of the existing platform. We also analyzed site analytics, reviewed customer service inquiries, and mapped out the most common user journeys.
Through this research, we identified several critical challenges: a lack of accessibility compliance, a confusing site structure, and an outdated CMS that prevented staff from making timely updates. We also uncovered the need to better serve users on mobile devices, where key tasks like checking alerts or accessing documents were frustrating or even impossible.
The outcome of this phase was a clear project roadmap that defined content priorities, user roles, accessibility objectives, and technical goals. This strategy served as the foundation for all design and development decisions moving forward.
User Experience & Design
With strategy in place, we focused on optimizing the user experience across all devices and user types. Our goal was to ensure that every interaction—whether it's a resident looking for emergency updates, or an internal staff member uploading a document—felt seamless, intuitive, and efficient.
We restructured the site navigation and page hierarchy to reflect user needs rather than internal organization. This meant prioritizing quick access to essential content like service alerts, billing information, and contact forms. We also applied accessibility best practices early in the UX phase, ensuring a consistent, inclusive structure for screen readers and keyboard navigation.
Style Tiles
Before creating full designs, we presented style tiles to quickly explore visual directions. These included typography sets, button styles, color palettes, form elements, and icon treatments—allowing the team to review and refine aesthetic preferences without being distracted by layout.
Accessibility played a central role in this phase. We carefully selected colors and contrast ratios that met WCAG 2.1 AA standards while maintaining FCLWD’s brand presence. Font choices were tested for legibility across screen sizes, and components were reviewed to ensure visual clarity for all users, including those with color vision deficiencies.
Wireframes
We created low- and mid-fidelity wireframes to map out the structure of key templates, such as the homepage, alert listings, FAQ sections, and contact forms. Wireframes were built with mobile-first principles in mind, ensuring functionality and clarity across all screen sizes.
Each wireframe focused on usability—placing the most important content at the forefront, minimizing distractions, and following a clean, predictable layout flow. We also paid attention to accessibility structure by establishing clear heading hierarchies, tab order logic, and form input positioning.
Wireframes were shared as interactive prototypes, which allowed stakeholders to explore the proposed layout and navigation paths. This feedback loop gave us the opportunity to refine the user journey based on real-world use cases before finalizing the design.
Usability Evaluation Plan
To validate the effectiveness of our UX and design choices, we developed a usability evaluation plan that outlined how we would test the experience with both internal stakeholders and external users. The goal was to surface any navigational barriers, content confusion, or accessibility concerns before development was finalized.
This plan included a set of guided user tasks (e.g., finding a service alert, submitting a contact form, accessing a PDF on mobile) along with structured feedback prompts. We also incorporated basic accessibility testing using keyboard navigation and screen readers to simulate real-world use for disabled users.
Findings from this evaluation helped us make adjustments that improved clarity, reduced cognitive load, and ensured WCAG compliance. Small but important details—like label placement, button spacing, and icon usage—were refined based on actual user interactions during this phase.
Technical Specification
Once design and UX planning were complete, we created a detailed technical specification to document everything required for development. This included accessibility criteria, frontend and backend architecture, performance expectations, and CMS functionality.
We defined a custom WordPress structure that balanced flexibility with simplicity—empowering FCLWD staff to manage content independently without risking site stability. The spec also included user roles, content types (e.g., alerts, documents, staff bios), and guidelines for how the team would manage SEO, security, and backups.
Performance was another major focus. The specification outlined targets for Lighthouse scores, image compression, caching strategies, and lazy loading. This document served as a blueprint to guide developers and align expectations across all stakeholders.
Development
Using the approved specifications and designs, we built a fully custom WordPress theme tailored to FCLWD’s operational and editorial needs. We followed a modular, scalable approach—building reusable components that allowed for quick layout changes and consistent styling across pages.
Accessibility was built in from the ground up. Semantic HTML, proper heading structures, ARIA roles, and accessible interactive elements ensured the site met WCAG 2.1 AA standards. We also implemented real-time form validation, skip links, and logical tab navigation to enhance the experience for users with disabilities.
In parallel, we optimized site performance by minimizing code, deferring non-essential scripts, compressing images, and setting up browser caching. The result was a responsive, high-performing website with a Google Lighthouse performance score of 95+. Most importantly, the FCLWD team was able to manage the site confidently post-launch thanks to a user-friendly admin interface, documentation, and tailored training.
Content Migration Strategy
One of the most important and sensitive parts of the FCLWD website redesign was the content migration process. The legacy website had years of accumulated content—much of it outdated, redundant, or difficult to locate. Our goal was not only to migrate this content to the new CMS but also to audit, organize, and optimize it for usability, performance, and accessibility.
We began with a full content inventory and audit, mapping every page, document, and link on the existing site. This allowed us to categorize what to keep, update, combine, or remove. We worked closely with FCLWD stakeholders to identify critical content—such as service alerts, board meeting agendas, water quality reports, and billing resources—that needed to be prioritized and made easily accessible.
The migration itself was handled with care. We cleaned and reformatted content to match the new site structure, ensuring proper use of headings, alt text, metadata, and accessible PDFs. Each page was reviewed to meet WCAG 2.1 AA standards, and we created redirects to preserve SEO value and user bookmarks. By the end of the process, all essential content was live in a cleaner, more intuitive structure—ready to serve the public more effectively and be easily managed by FCLWD’s internal team.
SEO
Redesigning a public utility website like the Fort Collins – Loveland Water District (FCLWD) involves far more than visual updates. It requires a deep understanding of the community's needs, regulatory requirements, and long-term maintainability. We approached the project with a structured process grounded in research, strategy, and collaboration to ensure the final product was not only attractive but also functional, compliant, and scalable.
The legacy FCLWD website had limitations: it was outdated, not mobile responsive, and lacked modern performance and accessibility standards. Our process began by identifying these core problems and aligning on clear digital goals, including a fully responsive design, WCAG 2.1 compliance, improved SEO, and a backend system that empowered the internal team to manage the website independently.
From initial discovery to post-launch support, our phased workflow ensured consistent progress and transparency. We focused on usability, fast loading speeds, and accessibility at every step. The result is a municipal website that is faster, more intuitive, and future-ready—built to meet the daily needs of residents, contractors, and district staff.
Industry
The Fort Collins – Loveland Water District website operates as a non-profit special district, meaning its primary purpose is to serve the public—not to generate revenue.
Funded by customer rates and governed by an elected board, FCLWD reinvests all resources into maintaining infrastructure, ensuring water quality, and supporting the community.
Because of its non-profit status, the website needed to reflect values like transparency, accessibility, and public trust. Every design decision—from the clear navigation structure to the emphasis on WCAG accessibility—was made to support open communication with residents and empower them to find essential information quickly and easily.
Rather than promoting services for profit, the FCLWD website focuses on education, accountability, and community service—offering easy access to board meetings, conservation resources, and water usage updates. It’s a digital tool that supports a mission, not a market.
Results
The new website has been a transformative upgrade for both residents and internal staff. Notable outcomes include:
Fully WCAG 2.1 AA–compliant design, making the site accessible to all users
Performance score improvement from 62 to 95+, delivering faster load times
Increased mobile traffic and engagement due to responsive
Positive community feedback, particularly from users relying on assistive technologies
Client Feedback
