City of Fort St. John

Modern, accessible website launched for a growing northern B.C. city

The City of Fort St. John is a vibrant community in northeastern British Columbia with a population of over 21,000 residents. Known as the energetic city, Fort St. John is a regional hub for industry, innovation, and recreation.

The City partnered with Upanup to fully redesign and redevelop its website, transforming it into a modern, mobile-first, and user-focused platform that simplifies access to City services, programs, and information.

City of Fort St. John

Services Provided

  • Accessible Design
  • Custom Solutions
  • Custom Tools & Features
  • CMS Training
  • Content Inventory/Audit
  • Website Redevelopment

The Challenge

The City needed a complete rebuild of its website to make it easier for people to find and access municipal services online. The existing site had grown complex over time, and the City wanted a platform that was accessible, streamlined, and easy for staff to maintain.
 

Key goals included:

  • Delivering a custom design that reflects the City’s brand and community identity
  • Creating a logical structure through a content audit, inventory, and web content modeling process
  • Improving navigation and usability through a sitemap review and expert recommendations
  • Integrating with the City’s ActiveNet recreation system for real-time activity searches
  • Building accessibility into the design, structure, and features to ensure inclusivity for all users
Website homepage on desktop, before the redesign
Homepage, "Before" redesign
Website homepage on desktop, after the redesign
Homepage, "After" redesign

The Solution

Upanup worked closely with the City’s team to design and build a fully custom Drupal-based website supported by extensive planning, testing, and collaboration.
 

What we delivered:

  • Full redesign and redevelopment with mobile-first responsive design
  • Comprehensive content audit, inventory, modeling, and sitemap planning
  • Custom ActiveNet API integration for real-time recreation activity search
  • Key site features:
    • Text size adjuster for accessibility
    • Accessible website menu and global site-wide search
    • Document repository
    • Emergency dark site for urgent updates
    • Event calendar with custom design elements
    • Feature carousel and featured areas
    • Gtranslate integration for multilingual access
    • Page-specific alerts, quick links, and categorized quick links
    • Job postings and email subscription options
    • Conditional online webforms
  • Staff editing features:
    • SSO (single sign-on) for editors
    • Online website guide with how-to editing steps
    • Multiple publishing roles for content workflows
    • Use of FontAwesome icons for consistent visuals
This solution combined technical strength with inclusive design principles to ensure the new website is welcoming, accessible, and easy to navigate.
Programs & Activity Search webpages, shown on desktop and mobile
Programs & Activity Search, shown on Desktop and Mobile
Bookings and Rentals webpage, and Parties webpage, both shown on mobile
Bookings and Rentals, Parties, shown on Mobile

The Results

The new website gives the City of Fort St. John a powerful platform to:
  • Improve access to services and information for residents, businesses, and visitors
  • Provide a seamless experience across desktop and mobile
  • Ensure accessibility and inclusivity are built into every aspect of the site
  • Support staff with user-friendly editing tools, guides, and content workflows
  • Increase community engagement with better content design and timely communications

“The City of Fort St. John is excited to announce the launch of its newly redesigned website: fortstjohn.ca. [...] the refreshed site offers a modern look, improved functionality, and a more user-friendly experience for residents, businesses, and visitors.” 
- Source link: City launches improved website news article.

Related Work

Are you curious to see more projects like this one? We’ve selected a couple relatable case studies which you can find below.

View All Case Studies