Worksafe | Injury Hotspots Website
A unique interactive and educational tool, designed for all devices.
The Worksafe Injury Hotspots site is designed to help workers return home safe from work every day. This responsive tool enables employers and employees to educate themselves on the injury statistics for their industry in a fun and interactive way. Users are able to click on injury hotspots for their industry to reveal related hazards and practical solutions to decrease their chance of injury in the workplace. All the information is derived from a data source dynamically to ensure up-to-date and relevant industry information.
Dynamically generated diagrams:
Each industry diagram is generated via the tool dynamically from basic data pushed to the site.
Each information bubble (\”20%\”), placement on the diagram\’s body (e.g. Head) is all generated from the code, not image mapped or otherwise manually placed.
Dynamic \”bubble\” placement and scaling:
The size of the bubble is proportional to the amount shown (e.g. 50%), and much effort went into ensuring these bubbles never overlapped across devices, and diagrams with multiple injury hotspots.
Business analyst on the project Brad Masters says, \”Basically it\’s really good math to make sure the design stays pretty.\”
Loads in an instant. Clicking through accordion content is very quick.
SASS & SVG:
Produced using the latest techniques in SASS as well as all SVG graphics for perfect responsive scaling.
The site works across multiple break points on desktop, tablet and mobile to be responsive across a range of devices.
Dynamically Generated Printable PDF:
Using the same statistical data that forms the basis of the site, the tool gives the user an opportunity to download and print a high resolution dynamically generated PDF poster with information about their chosen industry. This poster can then be placed within the workplace to help educate people about the practical solutions available to make the workplace safe.
To support the release of the new tool printed and e-distributed assets were designed to increase the awareness about the tool.