10 ms·

Australian Government Design System

172 points by prawn 8y ago

evantahler 8y ago
The government supports react!
- dwd 8y ago
  More like my tax dollars supports someone scratching their itch to use React. Is it just me or does https://www.dta.gov.au/our-projects https://www.dta.gov.au/our-projects load with no stylesheet. Fast and useable like it's 1996!
  - ThePadawan 8y ago
    It is you.
    - dwd 8y ago
      Seems dta.gov.au is broken on Firefox Focus on Android. Looks fine on desktop and regular Firefox for Android.
      - Maxious 8y ago
        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 https://github.com/mozilla-mobile/focus-android/issues/2772
  - King-Aaron 8y ago
    Definitely just you
walrus01 8y ago
Canadian federal design identity: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/manual.html https://www.canada.ca/en/treasury-board-secretariat/services...
- lstamour 8y ago
  Alternatively: https://wet-boew.github.io/wet-boew/index-en.html https://wet-boew.github.io/wet-boew/index-en.html
nhf 8y ago
See also: * 18F and USDS (USA): https://18f.gsa.gov/ https://18f.gsa.gov/ and https://www.usds.gov/ https://www.usds.gov/ * GSA Technology Transformation Service: https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services https://www.gsa.gov/about-us/organization/federal-acquisitio... * US Web Design System: https://v2.designsystem.digital.gov/ https://v2.designsystem.digital.gov/ * Government Digital Service (UK): https://www.gov.uk/government/organisations/government-digital-service https://www.gov.uk/government/organisations/government-digit... * GOV.UK Design System: https://design-system.service.gov.uk/ https://design-system.service.gov.uk/
- petepete 8y ago
  The markup is very similar to the GOV.UK's Design System. An excellent starting point in my opinion.
- nafey 8y ago
  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.
  - celticninja 8y ago
    And they all look broadly similar
  - tehbeard 8y ago
    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.
  - davnicwil 8y ago
    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).
deleted 8y ago
[deleted]
Untit1ed 8y ago
We use this for https://search.data.gov.au 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.
- sbfriends 8y ago
  Your site doesn't render anything without JS enabled :'(
dbg31415 8y ago
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/ 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/ 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 https://imgur.com/a/t0iwmWi
- chemicalnovae 8y ago
  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".
  - dbg31415 8y ago
    Fair. 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.
    - deadcat 8y ago
      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.
      - 8y ago
cyberferret 8y ago
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...
- kartikgupta7 8y ago
  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-digital-design-system-nsw-government https://www.digital.nsw.gov.au/article/weve-released-first-d...
  - aynsof 8y ago
    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.
    - pm 8y ago
      As did the former CTO.
  - arthurbrown 8y ago
    NSW design system is built on top of the DTA design system. They've done exactly what you're suggesting https://www.digital.nsw.gov.au/digital-design-system/components/ui-pattern-library/how-use-pattern-library/npm-install-components https://www.digital.nsw.gov.au/digital-design-system/compone...
    - kartikgupta7 8y ago
      ah, did not know that. thanks!
new_here 8y ago
Getting there.
interfixus 8y ago
And the Aussie crypto debacle? How we would all start boycotting everything digital down under, remember? No, we probably don't. That was last month, beyond any conceivable attention span. Still, I'll pass.
- quickthrower2 8y ago
  Following these guidelines has nothing to do with that.
- ageofwant 8y ago
  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.
King-Aaron 8y ago
Could... could this be the most modern department in the Australian government?
mosselman 8y ago
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': https://designsystem.gov.au/templates/content/customise/ https://designsystem.gov.au/templates/content/customise/ Apart from that the whole effort looks pretty polished.
- alexpage 8y ago
  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 https://github.com/govau/design-system-components
Apocryphon 8y ago
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.
legostormtroopr 8y ago
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?
- pan69 8y ago
  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.
- chrisseaton 8y ago
  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.
- justaguyhere 8y ago
  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
altitudinous 8y ago
Standards are good.
mianos 8y ago
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.
- svict4 8y ago
  Centrelink/DHS and myGov went through separate projects to redesign and use some parts of the design system.
- deadcat 8y ago
  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 ?
svict4 8y ago
Victoria Government design components: https://ripple.sdp.vic.gov.au https://ripple.sdp.vic.gov.au Worksafe Victoria uses Vue for their design system: https://todaydesign.github.io/worksafe-frontend/ https://todaydesign.github.io/worksafe-frontend/
deadcat 8y ago
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.
- svict4 8y ago
  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.
  - deadcat 8y ago
    I would like to, but they are too tightly coupled to our stack.
    - svict4 8y ago
      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.
      - deadcat 8y ago
        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.

172 points by prawn 8y ago

evantahler 8y ago

The government supports react!

dwd 8y ago
More like my tax dollars supports someone scratching their itch to use React. Is it just me or does https://www.dta.gov.au/our-projects https://www.dta.gov.au/our-projects load with no stylesheet. Fast and useable like it's 1996!
- ThePadawan 8y ago
  It is you.
  - dwd 8y ago
    Seems dta.gov.au is broken on Firefox Focus on Android. Looks fine on desktop and regular Firefox for Android.
    - Maxious 8y ago
      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 https://github.com/mozilla-mobile/focus-android/issues/2772
- King-Aaron 8y ago
  Definitely just you

walrus01 8y ago

Canadian federal design identity: https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/manual.html https://www.canada.ca/en/treasury-board-secretariat/services...

lstamour 8y ago
Alternatively: https://wet-boew.github.io/wet-boew/index-en.html https://wet-boew.github.io/wet-boew/index-en.html

nhf 8y ago

See also: * 18F and USDS (USA): https://18f.gsa.gov/ https://18f.gsa.gov/ and https://www.usds.gov/ https://www.usds.gov/ * GSA Technology Transformation Service: https://www.gsa.gov/about-us/organization/federal-acquisition-service/technology-transformation-services https://www.gsa.gov/about-us/organization/federal-acquisitio... * US Web Design System: https://v2.designsystem.digital.gov/ https://v2.designsystem.digital.gov/ * Government Digital Service (UK): https://www.gov.uk/government/organisations/government-digital-service https://www.gov.uk/government/organisations/government-digit... * GOV.UK Design System: https://design-system.service.gov.uk/ https://design-system.service.gov.uk/

petepete 8y ago
The markup is very similar to the GOV.UK's Design System. An excellent starting point in my opinion.
nafey 8y ago
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.
- celticninja 8y ago
  And they all look broadly similar
- tehbeard 8y ago
  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.
- davnicwil 8y ago
  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).

deleted 8y ago

[deleted]

Untit1ed 8y ago

We use this for https://search.data.gov.au 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.

sbfriends 8y ago
Your site doesn't render anything without JS enabled :'(

dbg31415 8y ago

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/ 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/ 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 https://imgur.com/a/t0iwmWi

chemicalnovae 8y ago
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".
- dbg31415 8y ago
  Fair. 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.
  - deadcat 8y ago
    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.
    - 8y ago

cyberferret 8y ago

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...

kartikgupta7 8y ago
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-digital-design-system-nsw-government https://www.digital.nsw.gov.au/article/weve-released-first-d...
- aynsof 8y ago
  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.
  - pm 8y ago
    As did the former CTO.
- arthurbrown 8y ago
  NSW design system is built on top of the DTA design system. They've done exactly what you're suggesting https://www.digital.nsw.gov.au/digital-design-system/components/ui-pattern-library/how-use-pattern-library/npm-install-components https://www.digital.nsw.gov.au/digital-design-system/compone...
  - kartikgupta7 8y ago
    ah, did not know that. thanks!

new_here 8y ago

Getting there.

interfixus 8y ago

And the Aussie crypto debacle? How we would all start boycotting everything digital down under, remember? No, we probably don't. That was last month, beyond any conceivable attention span. Still, I'll pass.

quickthrower2 8y ago
Following these guidelines has nothing to do with that.
ageofwant 8y ago
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.

King-Aaron 8y ago

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

mosselman 8y ago

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': https://designsystem.gov.au/templates/content/customise/ https://designsystem.gov.au/templates/content/customise/ Apart from that the whole effort looks pretty polished.

alexpage 8y ago
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 https://github.com/govau/design-system-components

Apocryphon 8y ago

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.

legostormtroopr 8y ago

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?

pan69 8y ago
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.
chrisseaton 8y ago
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.
justaguyhere 8y ago
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

altitudinous 8y ago

Standards are good.

mianos 8y ago

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.

svict4 8y ago
Centrelink/DHS and myGov went through separate projects to redesign and use some parts of the design system.
deadcat 8y ago
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 ?

svict4 8y ago

Victoria Government design components: https://ripple.sdp.vic.gov.au https://ripple.sdp.vic.gov.au Worksafe Victoria uses Vue for their design system: https://todaydesign.github.io/worksafe-frontend/ https://todaydesign.github.io/worksafe-frontend/

deadcat 8y ago

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.

svict4 8y ago
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.
- deadcat 8y ago
  I would like to, but they are too tightly coupled to our stack.
  - svict4 8y ago
    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.
    - deadcat 8y ago
      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.