hickory CiviKit Templated Municipal Website

Project Goals

Produce a templated website solution for small municipalities, that includes robust flexibility to diverse clientele, ensuring all unique needs are met with a single template solution. The template must also provide flexibility within the back end, for CiviKit staff to implement customizations.

Completion

Winter 2023

Survey & Research

Before producing the UI of the municipal template, we gathered research and findings from existing CiviKit clients, that are using other website templates. The existing templates being used do not include robust flexibility and include several challenges.

We started by conducting a survey for existing clients, gathering feedback on their current templated solution advantages and challenges. The survey was short and focused in order to ensure an ideal return of feedback and beneficial answers.

Survey questions included:

  1. What works well on your existing website? (Homepage and internal pages)

  2. What does not work well on your existing website? (Homepage and internal pages)

  3. Is there information your users are finding difficult to locate on your current website?

  4. Are there any additional areas within your website that you’d like to see improved? Please explain.

  5. How satisfied are you with your current back end workflow? Please explain.

Research

After gathering survey results, we reviewed our CiviKit client websites for common patterns and errors. In addition, we researched municipalities not currently using CiviKit products. These municipalities were similar in population, demographics and located within Canada.

Notable Survey Findings

  • Websites were not originally customized for a templated approach. For example the templates being used were originally produced to meet different municipal client goals.

  • Templates used did not include flexibility in content placement or flexibility to include content not within the original design.

  • There was a limit in menu structure and functionality across the templates. Most of our existing clientele required a traditionally styled menu structure for their diverse residence, while majority of our solutions included a mobile first approach on desktop.

  • Templates do not allow for ideal flexibility to showcase each municipality's brand identity.

  • Not all templates included dynamic or categories quick links. After reviewing these websites, we felt that our clients would benefit from this solution.

Notable Research Findings

  • Overall the municipal websites researched felt cluttered and overwhelming. These website included a lot clickable elements within the same space and lacked hierarchy.

  • Incorrect usage of images. Most images were of event posters with text, logos or other content overtop of an image. This common occurrence hinders text legibility and accessibility. Our findings suggested that small municipalities required an alternative solution to images.

  • Links or buttons lacked continuity to ensure users can easily identify clickable elements when surrounded by regular text.

  • Websites lacked correct colour contrast and menu hierarchy.

  • Homepage content varied from website to website. For example some municipalities had no events being promoted.

Template Interface

When working through the template design, we referenced the survey and research results, implementing these findings within the design. While there was commonalities within the results, the results varied depending on the municipality size or resources. For example not all municipalities researched had consistent homepage content, a high quality image library or knowledge on accessibility or user experience.

In order to achieve a successful robust template, the template needed to include optimal flexibility to ensure all clients alike can update and maintain their website. We also needed to ensure that the user experience and accessibility were well thought out, so that municipalities were providing their residents with a great experience.

Content Flexibility

While working through the design, we worked with the development team to ensure the back end worked smoothly with the customization flexibility of the interface. For example, each content row on the homepage can be customized to include different content to meet client needs (ie: Upcoming Events could be changed to Council Meetings). To aid in the flexible content rows, the client could also customize how the content was being displayed. For example the tiles within the homepage can include an image, icon or none. This approach meets needs for clients that lack a high quality image library. The client could also customize how many elements were being featured within the content row.

Other areas of content customization included the homepage banner. When conducting our research we noticed the way in which clients use this piece varies. Some clients use it to feature content such as news, while others used it visually to set the tone of the website. For this piece we created optimal customizations to include a full width image with an image credit of welcome message (short snippet text), a single feature or rotating banner carousel to feature several items.

In addition to the flexible content rows and homepage banner, we included customizations within the quick link row (links to highly visited pages). When reviewing our existing client websites, as well as external municipal websites, we noticed that most would benefit from categorized quick links. Categorized or dynamic quick links provide a service focus approach, allowing users to access several links grouped by categories such as residence, businesses or visitors. This approach allows for our clients to promote more information on the homepage while providing an easy to use experience that does not overwhelm users. To meet needs for all clients alike, the quick link row can also be customized to be a traditional approach (static quick links that are not categorized), as well as potential clients can customize how they wish to visually display these links, by using an icon (through FontAwesome) or no icon (styled to look like a button).

Content card customizations

Here is an example of a card with an image, middle is a card with no image or icon, and at the bottom if an example of the card with an icon (FontAwesome).

 

Homepage banner flexibility

At the top is an example of a full width banner image with an image credit. Top middle is an example of a full with banner image with snippet text. Middle bottom is an example of a single feature, and bottom is an example of multiple features in a banner carousel.

 

Quick link customizations

At the top is an example of traditional quick links with an icon, middle is dynamic quick links with an icon, and at the bottom is dynamic quick links styled as buttons.

 

Column flexibility within a content row

Rows range from 2 to 4 columns or features.

Visual Flexibility

In addition to the content flexibility, the template needed to include interface flexibility to ensure that each potential client could showcase their brand identity while using the template. In order to achieve this, we again, worked closely with the development team. The development team took the interfaces visual flexibility and created an ideal back end experience for CiviKit admin staff to implement customizations.

Interface customizations included, corner radius, fonts, background patterns, colours and placeholder images. All customizations ensures ideal accessibility, where we researched modern accessible fonts, created background patterns that provided visual interest while ensuring legible content, and colours met accessibility standards.

Final Interface

Since the completion of the Hickory template, it has became CivKit’s leading template solution. It’s robust flexibility has proven particularly popular with clients such as: smaller Municipalities, Libraries and Police services. The internal and external success of the Hickory template, kick-started a new template named Willow. The Willow CiviKit template embraced a similar, flexible approach and was completed in early 2024.

Hickory template examples:

Willow template example: