[interview] the project story
Project Overview
A unique interactive and educational tool, designed for all devices.
Project Commissioner
Project Creator
Team
Worksafe Victoria
Butterfly
Arash Arabi - Senior Software Engineer / Solutions Architect
Aaron Cameron - Test Analyst
Beth Evans - Digital Producer
Sophie Gulbenkian - Senior Designer
Brad Masters - Digital Producer
Hee Sien Ooi - Developer
Elliot Van Dugteren - Digital Producer
Project Brief
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.
Project Innovation/Need
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."
Super speedy:
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.
Responsive design:
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.
Design Challenge
The real challenge was finding a simple, clean and fun way to display the large amount of data at the centre of this project.
User Experience
Each users journey will differ slightly as they navigate their way through each industry and hotspot discovering the best practices to stay safe in the workplace.
By creating an interesting and interactive tool, the users ability to extract key information about safe work practices within their industry is increased.
Tags
Digital Experience - Website - Government
This award celebrates innovation and creativity in design of a unique user experience in the combination of text, audio, still images, animation, video, and interactivity content for websites. Consideration given to clarity of communication and the matching information style to audience.
More Details