The project

Our brief? Update the outdated. Worksafe’s Injury Hotspots site was a great way to get workers thinking about keeping themselves safe, but was looking as tired and worn out as a FIFO worker at the end of their trip home. And because at the backend it was the tech equivalent of a confined space, with all the data hardwired into the site, it was pretty much impossible to put in fresh information.

This project was all about information. Worksafe have a lot – like a lot – of very detailed information and data about safety. This interactive site is one way to communicate that quickly and effectively to the average worker. So the site had to be user friendly to achieve its aims. No UX tripping hazards allowed.

Not only did we have to work out a way to make the information engaging and accessible to users, but it also had to be easy for Worksafe to manage.

image of old website


Prize winning project

awards cup image

350% increase in usage after launch compared to the old site

Creative communication on a well-worn topic

brain image

The design

The design We brought the look right up to date – flattening out the graphic and making it bigger, choosing a more readable font and using new colours to make the message stand out.

We can do this stuff standing on our heads, but on this project, it was trickier than usual. The design and development processes were even more closely linked because the design had to allow for a lot of variables in the data we were presenting.

So, for example, because the bubbles that show the percentage of injuries to a body part are different sizes according to the percentage shown, we had to make sure they didn’t overlap in any of the versions. This had to be done through coding rather than manual design.

Of course we had to make the site work across a range of devices, but we were also asked to design for print as well, so that workers and employers could print and display posters. We made a nifty automated html to PDF poster creator, which draws on the same data at the website.

image of work-safe new design

The Solution

image of camp quality new website

Using a body map, the tool shows people the areas of the body that are most likely to be injured according to the industry they work in.

Clicking on the relevant body parts reveals advice on how to prevent those injuries. The concept was already there but, we had to make it work and look better.

We 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 individually updating the hundreds of different places that the information might appear. Like most of our projects, we wanted our client in the driver’s seat (with seat belt on, of course)

image of work safe new responsive websiteimage of work safe new responsive websiteimage of work safe new  responsive website
image of mysql

Tech talk

Because Worksafe’s hosting platform Squiz doesn’t work with Joomla, and they had specific requirements around hosting and their JSON data, we donned our hard hats and adapted to their environment.

Luckily we’ve got adaptable developers who know pretty much everything about everything. And we tested in Worksafe’s environment too, making sure there were no safety hazards for unsuspecting users.

Bring a little colour to your web project

Click image for next case study