Hacker News new | past | comments | ask | show | jobs | submit login
Australian Government Design System (designsystem.gov.au)
172 points by prawn 63 days ago | hide | past | web | favorite | 56 comments

See also:

* 18F and USDS (USA): https://18f.gsa.gov/ and https://www.usds.gov/

* GSA Technology Transformation Service: https://www.gsa.gov/about-us/organization/federal-acquisitio...

* US Web Design System: https://v2.designsystem.digital.gov/

* Government Digital Service (UK): https://www.gov.uk/government/organisations/government-digit...

* GOV.UK Design System: https://design-system.service.gov.uk/

It's interesting that apparently it's mainly government services in the Anglosphere that use design systems.

An - admittedly cursory - search for non-Anglophone governments that promote the use of a design system only brought up the Swiss federal government: https://swiss.github.io/styleguide/en/

Both Finnish and Estonian authorities are said to be working on a styleguide but apart from a guide on the Estonian part that mainly focuses on Estonia as a brand there doesn't seem to be anything publicly available yet: https://brand.estonia.ee/design/

The English ones are probably most easily found since design guidelines are usually written in the local language. https://design.gov.ru/design-system/#principles

That's certainly a good explanation.

Still, for instance I wasn't able to find anything for either the French or the German authorities in their respective local languages.

For Dutch government services on the other hand there's the Rijkshuisstijl styleguide: https://www.rijkshuisstijl.nl/

(I just didn't find it at first because I searched for something along the lines of "nederlands overheid" rather than the official term "rijksoverheid").

The markup is very similar to the GOV.UK's Design System. An excellent starting point in my opinion.

How many design guidelines do we need I wonder. Is the ideal scenario that every UN member comes up with a design system for their govt websites? I feel like this is somewhat wasteful.

It's probably (hopefully) wasteful in the same way that having multiple browsers, multiple web frameworks, even multiple programming languages is wasteful.

Sure, there is duplication of work, redundancy etc. But what you end up with is a much wider surface area to try different things, better things, copy ideas and combine good ideas in different ways.

On the contrary, if every country just pools ideas and selects the 'best' via a giant committee selection process, would you really expect that to produce a better result over the longer term? (Genuine question and I'm open to the answer being yes but I personally suspect not).

And we should all switch to Esperanto.

Wasteful perhaps, but I don't see governments giving up sovereignty over any part of their IT infrastructure, not matter how much anyone yells "slippery slope argument".

UN guidelines to ensure said infrastructure is available and accessible to a countries population would make sense though.

> How many design guidelines do we need I wonder.

Given that these are presumably research-based guidelines specific to that government's network of sites, that number would be 1.

And they all look broadly similar

We use this for https://search.data.gov.au and have just survived the easiest accessibility audit I think I've ever been through. It's nice using a set of components that make your UI _more_ accessible rather than less, which has been my usual experience in the past.

Your site doesn't render anything without JS enabled :'(

Colour me surprised. I clicked on the link expecting the usual abomination that is an Australian Federal Government website that I usually deal with, but I was pleasantly surprised at the nice design and layout.

Now, if only we can extend this to our local state government...

One would think that the federal design system would seep down to the state governments but NSW is creating it's own design system - https://www.digital.nsw.gov.au/article/weve-released-first-d...

NSW design system is built on top of the DTA design system. They've done exactly what you're suggesting


ah, did not know that. thanks!

The Digital Transformation Agency (DTA) is the Australian government agency behind the Design System. Paul Shetler, the former CEO of the DTA, quit after a philosophical disagreement with the new minister. Shetler's company is now consulting with the NSW government on a lot of their digital transformation work, including their design system.

As did the former CTO.

Doesn't do a great job with focus states.

Hit tab and scroll through the page:

* Buttons overview - Australian Government Design System || https://designsystem.gov.au/components/buttons/

And then compare it to this page:

* Buttons | United States Web Design System || https://v2.designsystem.digital.gov/components/buttons/

A lot of elements don't do a great job with lining up the focus states, they seem just sort of bolted on.

Here are a few issues I saw: https://imgur.com/a/t0iwmWi

I mean...it's actually green and gold.

But seriously, I can only think of a handful of official things that use the "official" colours, lots of sports teams but not really used by the government.

Edit: Parent originally mentioned that the website doesn't use the "Official Australian Colours".


I removed that part of the comment

As an American living in Sydney, and working for an agency, I feel like accessibility is behind the US. This set of tools should help, but also the use of Lighthouse by QA teams is key.

With Lighthouse, any score below 90 on any metric means our work fails QA —- it’s in our contracts to exceed 90. As a result, our clients rave about how easy it was to pass accessibility and security audits. Only secret is Lighthouse, and other automated checks, as part of the build process.

The agency I work for is doing pretty extensive work to support JAWS 2018/2019, and NVDA. The problem we have is that a fix for a specific issue in JAWS may break NVDA (or cause double reads).

Making everything work nicely in our Single Page Apps is a nightmare.

If you try and make it work after the fact, yes. Nightmare.

If you know it's a target when you are in architecture, much easier to design it in a way that will pass the tests.

Not saying that it's always perfect, but generally speaking having tests is better than not. Just key to have the tests early and often, so you can fix issues before they get baked in throughout a complex system.

Hey @dbg31415 we have created an issue. Thanks for the great feedback!


Cool, see my other comment as well -- for the agency I work for in Sydney, an 85 on Lighthouse would be a failing score. We need a 90 or higher on every metric to be able to hand it over to the client. Be useful to run a Lighthouse audit on your site and see what's causing the score to dip.


We just pushed fixes for the lighthouse issues. If you notice anything else feel free to let me know. Really appreciate the feedback!


We have a lot of work to do for PWA's and performance. We have some issues open in the backlog however they will require some architectural changes and require a bit more time.

Could... could this be the most modern department in the Australian government?

But why? Outside of a few big names (eg. Bootstrap), open-source CSS frameworks come and go on whim. This is CSS Framework that is also dependent on government funding, being supported by the very shallow Australia tech sector - no offense but working in Australia, many high quality developers are lured away from Australia to higher paying areas.

While this is neat, whats the guarantee this will be kept up to date over the next 1,2 or 5 years?

I think you're confused about what this is.

They're not pitching it as a design framework for others to use.

They're just showing the design framework they use internally. They guarantee they will keep it as up to date as they need it for as long as they need it as they own it and they're paying people to work on it.

I think that the purpose of a design system like this is the ability to create a uniform UI over various government agencies. Not to serve as a general purpose framework.

Last I checked the US Federal Government alone has a handful of thousand websites (not sure about Australia). If you added state, city etc governments, the number can easily run into five figures. It might be a good idea if they followed a standard set of UI/UX patterns and language. That said, the hard part is actually making them use the consistent standards

That menu at the top of this page is horrible at communicating where you are. There is just a small interrupted line at the bottom and a slightly different color that shows we are at 'Content page':


Apart from that the whole effort looks pretty polished.

Thanks for the feedback @mosselman. Do you have any ideas on how we can improve this?

Our main menu has just been released and is going through usability testing right now.

During the design process we experimented with underlines on the active main menu item, however it felt messy.

Feel free to create an issue on GitHub if you want to start a discussion. https://github.com/govau/design-system-components

It would be great if some of the web sites like mygov or the ATO business portal used stuff like this instead of the brain dead frameworks they use now.

The business portal already has work underway to replace it. The Tax Agent portal has a replacement currently in beta. My gov itself doesn't have much content on it - or are you referring to ATOOnline ?

Centrelink/DHS and myGov went through separate projects to redesign and use some parts of the design system.

Victoria Government design components: https://ripple.sdp.vic.gov.au

Worksafe Victoria uses Vue for their design system: https://todaydesign.github.io/worksafe-frontend/

Bigger Australian government departments tend to roll our own components anyway - simply because we are all running on our own stacks with differing needs.

The department I work for still uses Knockout/Durandal for example.

So you should always play to the skills in your team, agreed. But in this case, it gives consistency across Government. If your Department/Agency is rolling their own components, why not add them back into the Design System for others to use? Less repeated effort, cheaper for the tax payer.

I would like to, but they are too tightly coupled to our stack.

Right, so there's probably a discussion that needs to be had with your enterprise architecture team on why said stack was used (irrespective of skill sets available) when certain features are available "for free" (e.g. the DesignSystem)

I'll have a wild stab in the dark in saying that if the stack is really tightly coupled, that there's extra labour required by the dev team to meet the Digital Service Standard. Which is, really speaking, unnecessary public expenditure.

You are preaching to the choir here mate. Keep in mind we have over 60 developers, and over 100 single page applications under development/support.

The frameworks we are using have been in use here since 2014 (pre-dating the DesignSystem). It is not an easy matter to switch over to these components, especially considering the only framework supported is React.

As far as unnecessary public expenditure... I could probably write 1000 pages on it and not make a dent.

The government supports react!

More like my tax dollars supports someone scratching their itch to use React.

Is it just me or does


load with no stylesheet.

Fast and useable like it's 1996!

Definitely just you

It is you.

Seems dta.gov.au is broken on Firefox Focus on Android.

Looks fine on desktop and regular Firefox for Android.

I disabled the "Trackers blocked" which fixed the css. Reenabling left the css working fine with only 1 blocked item (probably Google Analytics).

Is there anyway to debug what got blocked? seems other sites have reported this false positive too https://github.com/mozilla-mobile/focus-android/issues/2772

Standards are good.

Perfect! I've just started watching Utopia, which was recommended in another HN article. The show makes me wonder what working for the Australian government is really like.


Following these guidelines has nothing to do with that.

The people making and publishing design specs and frameworks, are not the people that want to read your email to your side-shag, mate.

They both work for the same cunts though: the Australian people. Although you would never guess that if you spoke to actual Australians.

Getting there.

Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact