WorkSafe Injury Hotspots – Responsive Website

Injury statistics and practical solutions

The Injury Hotspots tool allows users to discover workplace injury statistics for their industry or occupation. It offers practical solutions for preventing these injuries, including tips and links to best practice guides produced by WorkSafe as well as OHS leaders from around the world.

Each Injury Hotspot also offers links to more safety information, including guides and publications produced by WorkSafe and trade bodies.

The evolution of the hotspots tool

The original project started in 2007 (launched 08) and was my first major project at WorkSafe that included a total end to end concept to delivery. The project included many halves and full day workshops that helped us align on:

Business objectives
Personas and target audience
Content needs

WorkSafe had the statistical data and knew where and how workers were being injured, the problem was how can we take those number and create an interactive tool that would be intuitive and educational. With some of the bigger questions answered, the idea we came up with was to create a visual hotspot tool for each industry (48 industries in total), which would be self-contained and could link to the other industries.

The man with a tan

In 2007-8, I created the first version of the Injury Hotspots tool using Flash ActionScript 3.0, featuring a 3D spinning character model. I built the model to be androgynous and didn’t notice until the day the app was launched when a senior director pointed out the model had a tan line.

Relative danger hotspot bubbles that show the percentage of injuries to a body part and are different sizes according to the percentage shown. Activating the hotspot would bring up information about those injuries or risks, and solutions about how to improve workplace safety in those areas. I personally created every element in 2007 project, plus did the project management, running user workshops, the app design, and the 3D character. Flash was very much the go-to tool for web interaction in 2007, with the ability to update content dynamically using XML and remote .as files.

The original hotspot tool was so successful that it was purchased by other safety governing bodies around the world and many universities still use it as a training tool.

The 2015 redesign and rebuild

The tool that was launched in 2008 and has been widely used by stakeholders ever since. However, the statistics and solutions have not been updated since it launched, with most statistics taken from 2002 to 2007 data. The data needed to be updated but some of the earlier content such as placement of hotspot bubbles had been hard coded into the tool, so a simple update is not possible.

A full redesign of the tool needs to occur, providing an opportunity to add enhancements and improve the user experience.

The updated tool should offer an engaging, interactive and personalised way for workers and employers to seek useful and practical OHS information.

Look and feel

The new hotspots should be simple, modern, gender-neutral, caring, educational, bright, intuitive.

My role

This was a project close to my heart after putting in so much time and effort into the conception and build of the first version, already a very successful tool.

On the 2015 upgrade, I worked alongside Meg Tempest (Senior Comms Advisor, WorkSafe) as WorkSafe technical lead and user experience consultant. Together we did the business requirement and brief for an RFQ, which was sent to three external agencies.

The Butterfly effect

After careful consideration, the job was awarded to Butterfly. We loved the fact that they read the brief and understood there was a lot of sentiment about the old tool. Their presentation was bang on and presented a modern, responsive version of a very tricky application, taking dry dull data and packaging it up just how we imagined.

Functionality and features

Responsive design

The app needed to be dynamically branded for each of the five WorkSafe’s Agents depending on which agent the user selects. It was also decided the app would need to pre populate the call and email functions with the specific agent contact details.

Dynamic live data

Butterfly set the site up so that the information shown to users is drawn from a live source and absolutely current. Worksafe can plug new information straight into the database and not have to worry about multiple code updates.

PDF poster creator

The app needed the ability to print on the go, so that workers and employers could print and display posters. Butterfly made a nifty automated HTML to PDF poster creator, which draws on the same data at the website.

Lean agile code

The entire app is built using modern CSS frameworks SASS, with JSON data, and SVG. This keeps the app light in code and gives the owners easy distribution and deployment. We love the instant load times and the reactiveness considering the amount of data.

Award winning success

The injury hotspots keep growing in success with a 350% increase in usage, and this latest version also won myself and my colleague awards for innovation and collaboration, and also picked up some recognition in various web and design awards.

Annual WorkSafe WorkStar Awards 2015

“For your work in undertaking a major upgrade of the Injury Hotspots tool including updating the data, improving the user experience, enhancing search functionality and making the tool accessible on smartphones and tablets”

Clare Amies, CEO, WorkSafe Victoria