A Little Background

The Independent Investigations Office (IIO) of British Columbia is a civilian-led police oversight agency responsible for conducting investigations into incidents of death or serious harm that may have been the result of the actions of a police officer, whether on or off duty.

After FreshWorks was awarded the RFP for rebuilding the IIO website, we immediately set out to better understand exactly what their needs were for the new website and what challenges they were facing with their current site. During multiple discovery sessions we were able to gather very useful feedback from the employees who populate the website with content as well as from website visitors. Apart from the need to redesign and modernize the look and feel of the website, the backend workflow to capture content and frontend user experience when searching for content could be improved upon.

Due to the sensitive nature of the content, we had our work cut out for us to come up with a way to allow IIO to capture content in the back-end much easier and as a result get the most up-to-date information published on the website much sooner. On the front-end we had to figure out how we organize and present the content to visitors in an easily consumable way while at the same time providing various tools for them to quickly and easily find the content they’re looking for.

The Design

The previous website used WordPress as its content management system, and the statement of work required the use of an open-source CMS for the new website. Since WordPress is open-source and those who capture content were already familiar with how it works, it was the logical choice to keep using WordPress for the new website.

We collaborated with the IIO staff to choose a WordPress theme that we would be basing the new design on. We looked at various aspects of the theme such as how content is laid out on the homepage, what search functionality is available and how customizable it is. Our designer took the theme we chose and applied the IIO branding to it. We also had to design the screens that were specific to the IIO’s content and custom functionality that we would be developing.

From Wireframes to Design

The Content

The IIO has been operating since 2012, so there was a fair amount of historic content that we had to migrate over for the new website. We had to take their past and current content capture workflow into consideration to ensure that the older content still works with any new organization, functionality and/or workflow improvements we implement. At the same time we didn’t want to completely change their workflow for capturing future content. We therefore focused on automating some of the processes that they did manually on a regular basis and also on creating self-explanatory, easy to use back-end interfaces grouped into self-contained screens and content types to ease their content capture workflow.

Since we were going to continue using WordPress as the content management system for the new website, we had access to all of WordPress’s functionality that allows developers to customize the back-end and front-end to suit all end users’ needs with regards to content capture and consumption. Most of the IIO’s content revolves around the cases that they are investigating. A case can have the following attributes:

• Case number

• Incident date

• Location where the incident took place

• Agency – such as the municipal police department involved in the incident

• Whether the incident resulted in serious harm or death

• Status – which depends on how far along the investigation is

Throughout a case’s investigation, various media releases can be posted about the incident and/or the investigation’s progress. Once the investigation concludes, a public report is released which discusses the outcome. These three content types (cases, media releases and public reports) are published on a regular basis and are regarded as the most important and most frequently accessed information on the website.

Other less frequently published and accessed information is content contained on static content pages that give more information about the organization; publications which are essentially downloadable documents such as annual reports or memoranda of understanding; and frequently asked questions.

To ease content capture in the back-end, we kept these different content types separate by using WordPress’s custom post type functionality. Each of the content types are set up as their own separate custom post type with their own menu options and tools to view, create, search, edit, and delete posts captured within each of these content types. The benefit of creating separate custom post types compared to simply mapping posts to different categories, is that each custom post type can have its own customizations such as having unique custom fields, custom taxonomies and specific actions and filters that get triggered when capturing these different types of content.

Cases

As previously discussed, cases have various attributes whose values depend on the incident and the investigation’s progress. To get this content to show on their previous website, they had to manually update the HTML of a static content page in order to list out all the current cases together with their attributes. We wanted to automate this process in the theme by fetching case posts that get captured in the back-end.

We created a custom post type for cases and made use of the Advanced Custom Fields WordPress plugin to create an easy to use interface to capture the various attributes of a case. Depending on the investigation’s progress, there are conditional fields that allow you to link to a specific media release or public report that is associated to the case.

We created custom taxonomies for locations and agencies so that they can easily map the case to the values that pertain to the case instead of having to enter it manually. They can also add additional locations and agencies, which all pull through on the front-end dynamically in the form of search filters. Users can select a specific location and/or agency from a dropdown to only show cases from that location and/or involved agency.

Media Releases and Public Reports

Keeping with their established content capture workflow, the titles of posts captured as a media release or public report contain the file number of a case that the post is referring to. In order to make it easy for website visitors to find a specific case and all content related to that case, there has to be a case post captured in the back-end where the case number matches the case numbers in the titles of media releases and public reports. We built functionality into the back-end to automatically generate a case post when a media release or public report is captured and the specified case number that was entered in the title doesn’t exist yet.

There is a two-way link between cases, media releases and public reports on the front-end. When viewing a case, you can see all the media releases and public reports associated with the case.

When viewing a media release or public report that is associated to a specific case, the various attributes of that case are displayed above the post’s content to the user and can be interacted with in order to find similar cases based on the chosen attribute. All of this functionality happens automatically based on the case number and there is therefore no need to manually update page content anymore.

FAQs

Similar to the cases listing page, the previous website’s FAQs page was a single static content page that had to be manually updated. Visitors to this page would have to scroll through and read all the content in order to find the question and answer they’re looking for. In order to overcome the frustrations of capturing and maintaining this static content in the back-end and manually specifying its presentation on the front-end, we decided to also create a custom post type for FAQs. This custom post type simply has an input for a question, an answer field and an FAQ group to map it to.

On the front-end the theme automatically fetches all the FAQ groups together with their questions and presents an easy to use accordion for the groups, their questions and the answers. This way a visitor can easily find the specific question and answer they are looking for and the need to manually edit page content is removed from those capturing the content, removing frustrations both in the back-end as well as on the front-end.

Homepage

The most important page of a website is the homepage, since it is the first page a visitor sees. It should present the most recent information as well as tools to find the specific information a visitor is looking for.

The IIO website homepage has a combination of manually specified content and dynamically fetched content. We set up specific custom fields for the homepage that allows IIO staff to customize all the static text content in their various locations on the page. There is a carousel of content that is fully customizable with regards to the posts/pages it displays and the order in which they appear to the user. The most relevant static information is therefore presented to the user as soon as they enter the homepage.

The latest media releases and public reports are dynamically displayed on the homepage together with links to view all media releases and public reports. A feed of the IIO’s latest Twitter posts is also displayed on the homepage.

Search

One of the most important requirements of the new website was to make it simple and fast to find specific content, regardless of the page the user is on. Although the website has many tools and functionality that a user can interact with in order to find the specific content they’re looking for, the fastest way to find content is by making use of the global search functionality, which is available throughout the website from the menu bar.

We made use of the search functionality included in the header of the base WordPress theme that we chose and hooked the custom post types that we set up for the IIO into the list of post types that you can search and filter on.

The search container automatically displays search results as you type, and displays filters that you can use to only show content from certain content types that you’re interested in. Searching for a case number will show all content associated to that case, or searching for a question might show results from the FAQs for example.

To Conclude

We wanted to create a great user experience for administrators to capture content in the back-end as well as for the users visiting the site to consume this content. It was important for us to help streamline their workflow by automating certain aspects of capturing the content and the subsequent display on the front-end as well as creating interfaces in the back-end that allows IIO staff to capture and edit manual content a lot easier. They no longer have to edit HTML on static content pages to display the most recent posts and can spend more time focusing on the content itself instead.

Different content types are set up as separate custom post types and organized more logically both in the back-end as well as on the front-end. By adding various tools and filters, automatically linking content to cases as well as implementing the powerful search functionality to the front-end, the ease of navigating and finding specific content on the website has also been improved significantly.