City of Decatur, GA Website Redevelopment

Decatur’s website has not been significantly updated since 2009.

However, it has grown organically into a very content-rich resource for its constituents.

This is an ideal point on the site’s evolution to build a better, more scalable infrastructure to house the content.

With the dependency on the internet increasing and new web applications being developed daily, the current website needs to be rebuilt to better serve its audience and take advantage of new technology.

It is one of the primary tools that Decatur’s constituents use to interact with the city government, and should be built around the needs of these users.

The City of Decatur wants its website to continue to be a model for all city sites by following the lead of successful, interactive commercial sites and a focus on the end user experience.

Decatur also maintains a second website that is accessed via the main site under the Visitor’s tab.

That site is specifically designed for visitors and tourists and is part of the Decatur Tourism Bureau.

The graphics and design are different but both are accessed by the same content management system.

The proposal should also include an update of this site.

The rebuilding of Decatur’s website is a large task due to the high functionality that is required for both the end user and backend users.

A rebuild will include both a new, restructured website and a robust content management system that is easy to use.

A number of technologies and solutions are needed for the project.

The new website needs to include a database which allows webpage content to be specified for different audiences, making it user-centric.

It is also important to provide some type of forum functionality to connect the community that gathers at the Decatur site by taking advantage of the latest web version and Open Source technology.

Such a large site will need a strong, adaptable framework including document management, archiving capability, custom agenda/minutes functionality, and custom forms; and all technology should be updated to allow for future growth and expansion.

Once the infrastructure is in place, the City of Decatur will have more flexibility to expand online services and incorporate up-to-date functionality.

The site should also be ADA compliant.

The City has explored the use of Artificial Intelligence, interactive and virtual technology options and is looking for ways to incorporate this technology in a meaningful and useful way in order to expand its ability to communicate with and engage the public.

Gunner Technology will build, design, support and host two sites from the ground up while maintaining the branding and familiarity that visitors have come to know and like about the site.

Additionally, Gunner will create an administrative backend using the latest technology to allow easy content development for site administrators.

One of the biggest goals of the redevelopment will be to make the new sites flexible to all devices using Responsive Design.

"I was really surprised to see it wasn't already," Gunner Technology CEO, Cody Swann, said. "These days, the vast majority of users access the Internet from their mobile devices, and the Decatur sites just weren't mobile friendly."

Additionally, the site architecture needs a major overhaul as the content is somewhat organized by department with no logical relationship to task.

Gunner will work with the city to get a comprehensive list of tasks their visitors would want to accomplish and create an architecture built around these tasks.

Gunner will build out custom functionality as listed below that will turn the sites into interactive tools rather than one-way informational brochures.

All development will take place on a separate, hidden environment.

At the end of development, all content will be migrated to the new sites, where they will be tested prior to being launched to the public.

Whenever a site enjoys organic growth the way the Decatur site has, change is always a challenge.

"It's a good challenge, but a challenge nonetheless," Gunner Technology CEO, Cody Swann, said. "If there's organic growth, that means the users have adapted to it and like it. Any change - no matter how good or needed - is going to ruffle some feathers. Most users don't like change, especially right away."

The website also has a lot of content and a lot of different types of content, including third-party integrations such as SeeClickFix, Google Search, OneMap and SwaGit to name a few.

"Content migration will definitely be a challenge," Swann said. "In fact, that's where I see the bulk of the hours going for this project."

The city also wants to explore integrating Artificial Intelligence into the site.

"The one thing that jumps out to me immediately there is chatbots," Swann said. "Visitors could save some time and phone calls by getting answers from AI chatbots embedded on the site."

Finally, in the pre-conference meeting, the city made it clear that, as is usually the case with city government, the budget wasn't going to be huge.

The City of Decatur broke the requirements into the following categories:

User-Centric Issues

The Website Redevelopment Proposal should address the following user-centric issues including but not limited to:

• Organizing content by task rather than by department: With the assistance of the city, Gunner will compile and document a comphensive list of tasks categorized by type of visitor. The UI/UX team will then use this list to create navigation structure.
• Creating logical pathways to content that mirror user tasks: Once we have all the tasks categorized, our UI/UX team will begin creating the information architecture and testing it in focuse groups.
• Keeping page design relatively simple: Gunner will create a simple, clean, content-focused design by relying on Material UI and the best practices from Google's Material Design Design Framework.
• Having a “bookmark-able” homepage: Gunner will create the sites as a Progressive Web App. Along with many other benefits, this means that the site will allow users to bookmark the site on a desktop computer and add an app icon for the site to the home screen on their mobile devices."
• Helping users “self-assist”: Gunner will integrate the cloud-based solutions Zendesk Support and Zendesk Guide to allow visitors to get help as quickly as possible.
• Mechanisms for user feedback: The integration with Zendesk Support will allow visitors to offer guided feedback as in "Was this page useful?" as well as open-ended feedback such as "The site doesn't work on my Windows Phone." and "You should include live photos from events on the site."
• Getting found by and opening up site to search engines: Building the site as a Progressive Web App automatically will assist in Search Engine Optimization. PWAs are a Google-led initiative and, as such, boost search rankings. Additionally, Gunner will optimize the site for the targeted geographic region.
• Building a website on a strong, adaptable framework with a content management system that allows for real-time updating, flexibility in design and sensible workflow: For maximum flexibility, Gunner will split the front end from the backend, using the headless CMS, GraphCMS to manage content on the backend and the React-based Gatsby static site generator for the front end. This seperation will allow for front-end agnostic modules, allowing Gunner to leverage common modules from a number of Open Source communities.
• Document management and archiving capability: GraphCMS has built-in support for managing and arhiving documents.
• Monitoring meaningful metrics to determine whether the site is achieving objectives: Upon contract award, Gunner will work with the City to determine the Key Performance Indicators and determine goals for each of these KPIs. During development, Gunner will add Google Analytics, which will track these KPIs. The Gunner team can then use Google Analytics to generate reports on the KPIs whenever requested.

Architecture Development

Development of the architecture documents (or blueprints) that will be used throughout implementation to ensure that site organization and design remain consistent and effective.

• Include detailed schematics that show all pages organized by user pathways.

• Wireframes will be defined, detailing the page(s) where content is located

  • Wireframes will illustrate different types of templates based on the type of content that is presented throughout the site.
  • All unique pages will be diagrammed.

To satisfy these requirements, Gunner will produce the requisite wireframes using Adobe Photoshop and Adobe Illustrator. Additionally, Gunner will develop a spreadsheet with all the requisite pathways, including starting point, destination and every step in-between.

Foundation

The creation of a new foundation that will replace/upgrade the current content management system with a system that allows for real-time updating, design flexibility and incorporation of up-to-date tools.

Use functionality options and applications to improve navigation, and content delivery.

• Development of a website database. GraphCMS uses MongoDB as its database. Additionally, to satisfy search requirements, Gunner will use Elasticsearch-service">Amazon Elasticsearch Service to build and host an Elasticsearch database.
• An upgraded CMS that will allow for custom templates for the overall site and specific pages, allowing for design flexibility. GraphCMS is completely separated from the frontend, which means the Gunner team will not be tied to the same technology for frontend development (unlike other options like WordPress, Drupal and Joomla). This will allow the team to build a plethora of different templates using the world's most popular web view framework, React.
• Inclusion of larger, more popular CMS tools that reach a broader audience, and third party plug-ins and upgrades that are readily available to expand the site functionality (example: WordPress Plug-in Community). "GraphCMS is the hottest CMS right now because it is comletely separated from the frontend. For the frontend, the Gunner team will use Gatsby, which is a React static site generator. Because both are Open Source and have thriving communities, Gunner will have access to numerous plug-ins and modules, which the team will vet before putting into use.**
• The upgraded system will embrace the dynamic nature of the web and allow for upgrades that encompass current technologies and ways to deliver content, even if they don’t exist now (example: Drupal and Joomla’s modular nature allows for many different type of integration). Again, this is the benefit of a backend (GraphCMS) that is totally separated from the frontend (React + Gatsby). This allows future development to go in any number of different directions without being tied to a single technology. For example, if the team used Joomla for the backend, they would be stuck with Joomla for the backend.
• The upgraded CMS tool will allow for detailed and relevant search results. The flexibility will also allow for a customized presentation of these results, giving the end user exactly what they need to know about the content that is returned. Gunner will use Elasticsearch-service">Amazon Elasticsearch Service to build and host an Elasticsearch database. Elasticsearch is the industry leader in Open Source search and provides for the storing of meta data to provide explination around results.
• The upgraded system will open up the number of ways content can be delivered. Functionality such as RSS feeds, text notifications and email newsletters allow the exact same content found in the site to be delivered differently depending on the context. Gatsby allows for automatic RSS feed generation while GraphCMS provides publishing hooks which can be used to send text notifications and email newsletters tailored to user prereferences.
• The upgraded CMS tools will use a template system to separate the content from the presentation. Templates will not be just the “skin” to the site, they will be how the site is presented, from navigation display to widgets which allows for greater control over how the user interacts with the site. With Gatsby and React, all code is separated into something called components, which is akin to a template. These components are used to build everything from site navigation to search functionality and contact forms.

Process Design

• Content standards will be developed to give publishers clear and consistent templates for new content. The Gunner team will implement a design pattern using the Material Design Design Framework created by Google. React offers tight integration with this framework through the Open Source Material UI library.
• Content management processes will be redefined based on the upgraded CMS. The Gunner team will work with Decatur to create a content maangement process that works specifically for the city and with GraphCMS.
• Document management and archiving guidelines will be defined. This is part of GraphCMS and the Gunner team will work with Decatur to determine when something should be archived and what exactly it means for a document to be "archived"*
• Creation of a training module for all content management staff and publishers. In addition to the generic training offered from GraphCMS, Gunner creates live video documentation for all management of all its products. These videos show exactly how to use the CMS and how to troubleshoot any potential problems. These videos will be made available online to the city.

Content Redevelopment

Rework the current content into new site with additional functionality and content that will assist both the site visitors and City of Decatur staff.

• Additional functionality for site users:

  • Search function on all pages with search results organized by document type (webpage, pdf, MS Word etc.) Gunner will use Elasticsearch-service">Amazon Elasticsearch Service to build and host an Elasticsearch database, which will allow for filtering and organizing search results by document type.
  • Ability for Single Sign-On for all third party programs on the site such as Citizen Request Management, Rec Trac and development software. Gunner will use Amazon Cognito to build Single Sign-On capability into the site.
  • Ambiguous contact email for each department. Example: publicworksinfo@decaturga.com. Gunner will use Amazon Route 53 to create the necessary MX records needed to route email addresses to the approcpirate inbox.
  • Ability to allow visitors to ask questions and get answers on a serial basis with issues that are not time-sensitive. Gunner will integrate Zendesk into the site, which will allow visitors to ask questions and get answers on a serial basis.
  • Ability to provide page-level feedback mechanism (example: “Was this (page) helpful?”). Gunner will integrate Zendesk into the site, which provides page-level feedback mechanism that can solicit user feedback.
  • Printer friendly option for longer content and option to send content to a friend through email and social bookmarking links on each page. Gunner will integrate with the official APIs of the popular social networks such as Facebook, PinteREST, Twitter and more. This will allow users to share content to these networks. To accommodate printing, Gunner will write custom CSS3 media queries that will generate clean, easily printable pages.
  • Ability to implement RSS feeds. Gatsby automatically generates RSS feeds for all content.
  • Have a universal log-in system. Ability to sign up for fee-based activities online, signup and pay for fee-based activities, request city services, request stopping city services, submit complaints online, track status/confirmation of fee-based activities, participate in online discussions, pay for fee pickups and sanitation, register in one place for all public works activities, review status of permit requests online, apply for City of Decatur jobs online. Gunner will integrate custom modules built in React that will allow for registered users to interact with the city through the new website. For interactions requiring payment, Gunner will integrate Stripe and/or PayPal depending on the city's preference
  • Present zoning maps and contact information. Gunner integrate the site with the Google Maps API to provide zoning maps with overlayed contact information.
  • Present GIS information with 5 simple overlays. Gunner integrate the site with the Google Maps API to present GIS information with overlays.

• Additional functionality for City of Decatur staff:

  • Ability to create unique administrative pages which correspond with the web pages that individual content managers are responsible for updating. GraphCMS allows for the creation of uniqe page types and allows for different classification of admin/user to update them
  • Ability to check status of content that is in the process of being placed or uploaded. GraphCMS allows site admins to set the "status" of content such as "Draft", "Published", "Archived" and more
  • Ability to approve content submissions and assign content to multiple staff members. GraphCMS provides this functionality.
  • Ability to pre-set content archive activities. The staff needs to be able to identify a window by which certain content will show, and by when it will ‘move’ to the archives (e.g. meeting minutes stay up on the site for 6 months before being automatically moved to the archives). Gunner will create configurable rules in GraphCMS that will allow for site admins to schedule status changes to content.
  • Update content by content/template types. Templates will include department and general feedback and must have styles built in. Template types and pages should be replaceable. Managers will have ability to post pictures and video by department templates. Gunner will configure GraphCMS to allow content managers and admins to select different templates and replace them via the backend tool.
  • Ability to update content by mobile device for emergency/breaking news updates. Gunner will build an extension to GraphCMS and make it available as part of the Progressive Web App. This will allow admins to update and add content from their mobile devices.
  • Emergency and breaking news alerts to multiple devices. Content admins will have the ability to mark content as "breaking" which will send it to users via SMS, Push and email.
  • Ability to update content in one place and have that content posted in multiple places in syndication (i.e. multiple webpages, Twitter, Facebook, blogs). GraphCMS offers webhooks which Gunner will integrate to syndicate selected content to selected locations.
  • Implement updateable FAQ. FAQs will be a content type in GraphCMS, editable by any content manager or admin.
  • Robust visitor and business goal tracking/reporting. Gunner will integrate Google Analytics into the new site and provide detailed reports as requested as well as quarterly on the site's agreed-upon goals and KPIs.

Implementation

Gunner Technology uses the Agile Scrum model to project management.

Using this model, the team will build out an estimated 500 user stories at the start of the project and assign each a number of Effort Points.

Using the team's Velocity, the project manager will then be able to offer a detailed estimation of time required to accomplish the project.

However, putting together a loose timeline for design and implementation of the website redevelopment, the team can break it out like this:

• Technology/platform build-out: Six months
• Incorporation of CMS solution and databases: 2 months
• Page-level coding: 3 months
• Customization of applications and tools: 1 month
• Content redevelopment: 1 month
• Content publishing: 1 month
• Testing: 1 month
• Launch: 1 month
• Maintenance

Gunner Technology will leverage its partnership with Amazon Web Services to build out a world-class infrastructure for the new sites.

And while GraphCMS is not directly hosted by Gunner, it, too, lives in the AWS cloud.

The bulk of the work needed for this project involves generating static web pages with Gatsby.

To this end, Gunner will build a webhook in GraphCMS.

This webhook will trigger whenever a content manager or admin publishes new content or content changes.

The Webhook will then trigger a build to occur within AWS CodeBuild, which compiles the pages using Node.js and pushes them to Amazon S3 where they reside as HTML5 pages.

The S3 Bucket will be fronted by the CDN, Amazon CloudFront which will be connected to the domain name via Amazon Route 53.

This leaves the interactive functionality such as user accounts, custom notifications and so forth.

For this, Gunner will build the functionality using AWS AppSync and AWS Amplify.

These technologies provide a managed environment for Amazon DB and Amazon Cognito which store user data and authenticate users respectively.

The notifications will be handle using AWS technologies as well.

Notifications will trigger Node.js AWS Lambda functions, which, in turn will trigger Amazon SNS for Push and SMS notifications and Amazon SES for email notifications.

Finally, Gunner will build custom search into the sites using Elasticsearch-service">Amazon Elasticsearch Service.

To ensure the platform is Secure, Gunner leverages several enterprise-level technologies provided by AWS to monitor, detect and prevent Security issues.

These technologies include AWS CloudTrail, AWS Config, AWS Shield, Amazon GuardDuty and Amazon Inspector.

Because the architecture is severless, it will be scalable, durable, Self-healing and highly available.

The question The City of Decatur needs to answer is: "Do we want a truly custom, cutting edge website that can be used as a tool to create and promote a better citiznery or do we want to check a lot of boxes?"

"The truth is, all of these requirements, in the loosest sense of the word 'fulfilled' could be fulfilled using a cookie-cutter solution like WordPress with a bunch of community-written plugins," Gunner found and CEO, Cody Swann, said. "And sure, you'll save a lot of money, but you'll be in this same spot two years from now."

Gunner builds custom-tailored solutions, using open-source technologies that are futureproof both in terms of development and hosting.

Additionally, with systems such as Joomla, Drupal and WordPress, the client is opting for a framework written in a decaying language (PHP) that has been surpased many times over by superiror technology like Node.js and Ruby.

"People will point to the Internet and say that PHP powers a good chunck of it," Swann said. "That's not because PHP is good. It's because these sites are stuck with it."

Perhaps, even worse, many of the community-build plugins for these systems come with huge Security vulnerabilities.

This is why Gunner takes the time to hand-code the majority of the work and rely on trusted Open Source technologies that have withstood Security testing.

"Our solution looks expensive until you consider the cost of a Security breach or having to redo your site every two years for eternity," Swann said. "When you factor that in, you get the highest quality at the lowest cost."