Project Summary

The Independent Investigations Office of British Columbia (IIO) 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. 

We redesigned the  IIO website so that users can easily access information on current and past cases. Website visitors can sort cases by area, incident classification, agencies involved, and incident year. Additionally, the custom-built workflows help IIO staff reduce time spent on publishing or modifying online content significantly.

Challenge

By the time FreshWorks started redesigning the IIO website, the existing design was outdated and no longer aligned with the IIO brand. Furthermore, website visitors could not easily navigate to desired content due to the lack of advanced search tools. 

On the backend, adding new content to the previous website was very labour intensive for IIO staff. Each piece of content (cases, media releases, etc.) needed to be uploaded in multiple places and manually linked to each other.

Solution

The solution is a modern website that allows website visitors to access desired information easily while enabling IIO staff to efficiently upload and modify website content.

 
IIO-Mockup-iMac.jpg
 

Due to the sensitive nature of IIO’s business, the whole FreshWorks team was required to get a criminal record check prior to project start. 

With the Independent Investigations office is located in Surrey and the FreshWorks team working from the Victoria office communication was mainly done through video calls and a few on-site visits.

During the discovery phase, FreshWorks conducted user research through focus groups with IIO staff and frequent website visitors. The feedback received during the focus groups was then used to develop user stories and to determine the main objectives for the project. 

The goal for the frontend website was to enable users to easily navigate to and search for the desired content. The goal for the backend was to enable IIO staff to easily add new content in one place and have workflows take care of adding it to any additional spots.

Wireframes vs. Actual Homepage

IIO shared some website layouts with the team that guided the project designer in determining the final designs for the new website. Since the previous website was hosted on website and the Independent Investigations Office of BC staff was used to the system, FreshWorks designer, Karen Bao, suggested multiple Wordpress themes. Upon decision for a theme, Karen was able to go ahead and apply the IIO theme all the way across the new website template.

Once designs were approved, the development process started. Some of the content found on the IIO website is hosted on static pages, allowing the developer to take advantage of the existing Wordpress template, significantly reducing development time. For the custom pages, such as the cases page or media releases, the developer configured the backend so that each piece of content  is considered a custom post (ie. media releases, FAQs, cases). 

“Being able to use some of the existing templates for the static content pages, saved a lot of development time and allowed us for a quick turnaround on this project.”

Etienne Stemmet, Full Stack Developer

When IIO staff adds new content, depending on the post type, different custom fields are shown in the backend. For example: Adding a new case requires the IIO staff member to also identify the case number, incident date, and classification. 

A benefit of these very customized fields allows the website visitor to easily filter and find all content related to a desired case.

To read more about the technical aspects of this project, check out this article by Etienne.

Overall, the new Independent Investigations Office of BC website allows visitors to easily navigate to the desired documents, while decreasing the labour required by IIO staff when creating new or updating existing content.

Features

Contact Form

Previously, all IIO’s staff emails were listed on the website’s contact page, leading to user confusion about who to contact for what information. The new contact form now allows website visitors to select a reason for inquiry from a dropdown and workflows run in the background that automatically forward the inquiry to the right person.

Advanced Search

Through customization, IIO’s website is able to offer advanced search features that allow visitors to easily search for and navigate to their desired content. Users can filter content by pages, cases, media releases, public reports, FAQs, and publications to further narrow down search results for specific cases.

Improved User Experience

The conducted user research was essential in improving the user experience of the new IIO website. Additional measures were taken to improve overall usability of the website, including categorization of content and sorting the frequently asked questions by stakeholders. Furthermore, the website is now responsive and is easily usable from any device.

Automatic Content Mapping

All content related to one particular case (case report, media releases, etc.) are automatically connected based on the case number and can easily navigated between. For example, a media release that has a case number in the title will automatically get associated to the case. If the case number does not exist within the system yet, a new case will automatically created.

Results

Since the launch of the new website the Independent Investigations Office of BC has received lots of positive feedback from internal and external users. This includes users that have previously voiced frustrations about the usability of the old website.

Additionally, the IIO staff has been able to add and modify content across the website a lot more efficiently than before leading to significant time savings.

 

Check out our other projects