Code
📚 GovAU Design System Site + 💻 Github
Built the Australian Government Design System documentation website to align 1000+ websites over 200+ organisations. The documentation website is a world class example of a design system including accessibility guidance and rationales of design decisions.
Supported, maintained and created communities on discourse, github and slack that drove the future direction of the design system through a federated model.
🛠 GovAU Design System Components + 💻 Github
Created, maintained and enhanced the components of the Australian Government Design System. This included 20+ components using WCAG AA accessibility, HTML, React, JavaScript, jQuery, CSS and SASS best practices.
Wrote fundamental code for generating different accessible light and dark themes. Solved system font typography and spacing snapping to a grid.
🔥 Furnace + 💻 Github
Removed the barrier to entry for users unfamiliar to npm by allowing them to easily download a zip file of the design system.
Furnace is a NodeJS API that collects component dependencies and users options to output them into a zip file. This included continuous integration, continuous deployment, unit and integration tests.
🖌 Harmonograph + 💻 Github
Inspired by my childhood adventures to Questacon I developed a randomised way to draw harmonographs using JavaScript and HTML5 canvas.
A perfect blend of design and mathematics, the harmonograph is a mechanical apparatus that uses pendulums to create a geometric image.
🌈 A11yColor + 🌈 Sass A11yColor
Having to solve colour contrast for 1000+ websites I created functions to generate the nearest accessible colour in SASS and JavaScript. This allowed users to input their colours into a system and the output was guaranteed to meet colour contrast.
🎨 Sass color matrix + 💻 Codepen
Converted colours so users of the design system can see how their colours would look with different types of colour blindness. For example user who has deuteranopia, red #f00 would appear to be a murky lime #9fb300.
🌈 Rainbow
Created a simple GraphQL API that uses a11ycolor to generate the nearest accessible colour. This can be used by systems that generate accessible templates from user inputted colours.
🍕 Pizza (coming soon)
Visual regression testing that's tasty and cheesy.
Talks
📢 Names and positive culture
Communication is hard, what we name things affects how well we communicate. Simple interactions like getting a haircut or ordering an ice cream can increase anxiety due to communication. Poor communication can change outcomes, how things are perceived and how they are used. When building a design system we have to name a lot of things. Some times the names we give should be functional and understandable and other times there are opportunities to be creative and create a positive culture.
📢 Hard work to make it simple
Shared wisdom with Trevor Brennan at Australia's first ever design system meetup. We talked about how to provide a common language for typography, spacing alignment, and an accessible colour contrast system, at a scale suitable for a nation.
📢 React js in government
Talked at the CanberraJS meetup about how to utilise Reacts frontend framework while still being accessible to users without javascript. The focus of this discussion was to rethink the application of javascript frameworks by government and modern ways we can solve this problem.
📢 Living styleguides
Spoke at DrupalGov, Canberra on how living styleguides can provide consistent, scalable and accessible user experiences. Shared how I had been creating simple living styleguides in Drupal using the zen theme.