Check out architectural diagrams of this project
What was the problem to be solved?
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.
What was the proposed solution?
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.
What challenges arose during the project?
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.
What was the technical approach to the project?
The City of Decatur broke the requirements into the following categories:
The Website Redevelopment Proposal should address the following user-centric issues including but not limited to:
Development of the architecture documents (or blueprints) that will be used throughout implementation to ensure that site organization and design remain consistent and effective.
Wireframes will be defined, detailing the page(s) where content is located
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.
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.
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:
Additional functionality for City of Decatur staff:
What was the project management approach to the project?
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:
What platform was built for this project?
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.
Why was Gunner selected for this project?
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."
Who worked on this project?
What are similar projects Gunner has worked on?
Both projects involved a redesign with content migration as well as a conversion to a Progressive Web App, responsive site combo.
What tools, techniques and methodologies were used on this project?
Agile software development refers to a group of software development methodologies based on iterative development, where requirements and solutions evolve through collaboration between self-organizing cross-functional teams
Monitor AWS resources and custom metrics generated by your applications and services
DynamoDB is a nonrelational database for applications that need performance at any scale
Intelligent threat detection and continuous monitoring to protect your AWS accounts and workloads
Automated security assessment service to help improve the security and compliance of applications deployed on AWS.
Flexible, affordable, and highly-scalable email sending and receiving platform for businesses and developers
SNS is Pub/Sub messaging and mobile notifications for microservices, distributed systems, and serverless applications.
Fully managed message queues for microservices, distributed systems, and serverless applications
Apollo binds data to your UI with the ultra-flexible, community-driven GraphQL client for React, JavaScript, and native platforms.
AWS Amplify is a toolchain which includes a robust feature set for simplifying mobile and web application development.
AWS AppSync automatically updates the data in web and mobile applications in real time, and updates data for offline users as soon as they reconnect.
AWS CodeCommit is a fully-managed source control service that hosts secure Git-based repositories.
AWS Config is a service that enables developers to assess, audit and evaluate the configurations of their AWS resources.
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.
Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.
Material UI is a CSS Framework and a Set of React Components that Implement Google's Material Design
MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need
Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications
PayPal is an online payments and money transfer service that allows users and developers to send money via email, phone, text message or Skype.
Scrum is a framework for project management that emphasizes teamwork, accountability and iterative progress toward a well-defined goal.
Build web, mobile and IoT applications with serverless architectures using AWS Lambda, Azure Functions, Google CloudFunctions & more
tripe provides APIs that web developers can use to integrate payment processing into their websites and mobile applications