6 ms·

Swiss Post Design System

141 points by denysvitali 4y ago

swost 4y ago
sschueller 4y ago
"The Swiss Post Design System pattern library for a unified and accessible user experience accross the web platform." [1] I really appreciate government and publicly funded organizations open sourcing their work. Another example is Swiss Television and their apps[2] or government apps[3]. The public paid for it so they should also be able to benefit from all the work. [1] https://github.com/swisspost/design-system https://github.com/swisspost/design-system [2] https://github.com/SRGSSR https://github.com/SRGSSR [3] https://github.com/admin-ch https://github.com/admin-ch
- ThePowerOfFuet 4y ago
  > I really appreciate government and publicly funded organizations open sourcing their work. Another example is Swiss Television and their apps[2] or government apps[3]. The public paid for it so they should also be able to benefit from all the work. The Free Software Foundation Europe agrees: https://fsfe.org/activities/publiccode/publiccode.en.html https://fsfe.org/activities/publiccode/publiccode.en.html
- _xoo 4y ago
  Unfortunately, not all government apps are open source.
- blululu 4y ago
  In general this seems fair, but it also creates an externality. A licensing system that offers a permissive license to the community that paid for it, and a more restrictive licensing terms for people in parts beyond seems more fair. Thinking of the United States, I could easily imagine that some states would just wait to copy the services developed by one of the larger states - which creates an unfair free rider situation.
  - thesumofall 4y ago
    To which realistic disadvantage of the originator? Even in a scenario in which this becomes common practice and in which other organizations are indeed reusing the shared code (and that is a big if!), you could still argue that the originator benefits by attracting talent, shaping standards, positioning themselves as digital leaders, bringing transparency into what happens with taxpayers money, ...
    - scoopertrooper 4y ago
      It's a classic free rider problem. Some jurisdictions will chronically under invest because they can rely on the largesse of others. The incentive for every jurisdiction would be to degenerate into becoming free riders. This doesn't happen in the corporate world (as much) because of various factors such as tax incentives and market pressures, but would be much more likely in the stately world of government IT. A better solution would be license the code, such that it could not be used to provide public services unless the governing body contributed to a development association (either in money, code contributions, or some mixture thereof).
      - brnt 4y ago
        > The incentive for every jurisdiction would be to degenerate into becoming free riders. Only societies starved of ideas other than lowest common denominator free-market thinking. In reality societies choose to do the thng that cost money, for no other reason than that they want the outcome. We do tons of things for no specific (short term) gain. Some would say that this is what sets a great civilization apart from the rest.
      - panick21_ 4y ago
        Its not a classic free rider problem. Because the service does not degrade for the people who originally wrote the software. The original authors couldn't care less if somebody else under invests.
  - deleted 4y ago
    [deleted]
danpalmer 4y ago
I like that this is basically a customisation of Bootstrap. As much as it's nice for designers and engineers to build a design system from scratch, Bootstrap is a mature, well designed codebase, and you can do a lot worse than using a customised version as the basis for a company specific design system.
- samwillis 4y ago
  I was about to post the same comment, but want to add that I think Bootstrap v5 has reached a really nice point with a mix of the original component based vision but utilising the utility class based construction inspired by Tailwind. v5.2 also moved a lot of the SCSS variables to CSS vars which is much nicer to work with.
- tobr 4y ago
  Interested if you could elaborate on this, as someone who’s never used Bootstrap as I don’t really see the point if you are implementing a custom design anyway. What is the elevator pitch for basing this on Bootstrap?
  - dgb23 4y ago
    Familiarity. You can achieve a cleaner, lighter and more focused CSS/SCSS codebase without it, but people know Bootstrap and it's quick and easy for them.
  - gedy 4y ago
    - When the design changes again, you don't have to rewrite all the code. - You can use this across different web technologies. - You can use with off the shelf component libraries.
  - danpalmer 4y ago
    When creating a new design system you need to cover at least: 1. CSS architecture, making all the components inter-compatible with each other (very complex). 2. Accessibility. 3. Browser compatibility and responsiveness/mobile capabilities. 3. What components are you going to provide? 4. Documentation for the team using it. 5. Fixing all the bugs in it. 6. The _actual design_. Bootstrap pretty much gives you 1-6. It makes decisions that are easy to criticise if you've got the resources of a big tech company behind you, but for most people, customising Bootstrap will let them focus on #7 and get all the rest pretty much done for them. There are alternatives, taking any of the major CSS frameworks like this that has customisation built in will work, Foundation is another good one, but Bootstrap has a lot of the mindshare.
RedlineTriad 4y ago
I actually work with the team behind this, if you have any questions feel free to ask! Feels like a 4th wall break when something from your job pops up on the orange site.
- tazjin 4y ago
  With Javascript disabled (I've configured it to be opt-in in my browser) this page renders completely blank. Is that due to the framework, or is it something related to the hosting method used here?
  - gfellerph 4y ago
    This is an Angular app rendered entirely on the client. Sorry we don't provide any server side rendering or fallback. It's targeted at Devs that usually have JS enabled.
    - swost 4y ago
  - RedlineTriad 4y ago
    I asked and got this answer: > The DemoPage is an Angular App (SPA). But there is a lot of CSS you can use/run without Javascript. And gfellerph, the lead dev, left the other comment. (You can see the whole team at the bottom of the demo page)
- nicopappl 4y ago
  Ahah, I'm glad to see you here! I do enjoy the postfinance app, but I recently had to use the service.post.ch website, and it was one of the most unpleasant experience I had with a computer in recent times. I'm so sorry to breach all protocols of decency and just complain here, but I thought "if only I get a hold of the [derogatory term] who designed that website," and you are here! The praise in this thread is clearly from people who never had anything to do with the modern Swiss Post. I had to setup a mail "hold" order (in Switzerland you have to pay an extra fee and make a request to not deliver mail when you leave for a few weeks) and I found the UI to be very confusing. I think the design of the site could be improved, here is what annoys me the most: * The "clickable" button color being so close to the "disabled" color that it's very hard to distinguish when they are not next to each other (as most of the time) and very confusing when you try to click on a seemingly active button and nothing happens * Calendar widgets letting you select every date, but after selecting the date, you get an error message * communications in German despite the whole process being in French and the destination address being in a 100% French speaking canton * downright bad French translation (hi from the 25% of the Swiss population) eg: "Reprendre" is *not* a valid button name, maybe use "selectionner" * ending into a redirect loop when going back during the check-in step The UI feels broken. There is a lot of "strange" space, or button layouts accidentally ending up on two rows eg: the login nag dialog (I could reproduce it on Firefox and Chrome). It felt like a miracle when I managed to complete the process after about 1 hour (process that technically only requires my name, address and payment coordinates) I'm used to computers acting up and generally bad software (hell, I use Linux), so I could handle it, but my mom says she has trouble with the website as well. If you need more details, or a generous Romand QA tester, don't hesitate to contact me (domain of email address in my user profile). I feel that good software is important, especially for a state-run monopoly. Because it's always the most marginalized people that end up eating up the hidden costs of rushed-up software.
RektBoy 4y ago
I envy you Swiss people, this is public company and when I see its profit. I feel embarrassed for our Czech post.
- soco 4y ago
  It's a public company heavily supported by the government, allowed to make nice profits while also trimming down on the public service and increasing prices. The irony.
  - martopix 4y ago
    All Swiss public companies (Post and railways are the best examples) are amazing and offer services that feel 1 century ahead of everyone else I experienced. Even if they weren't making money, I would gladly pour my taxes on them because the level of service of say public transport here is completely priceless.
    - seymore_12 4y ago
      Agree. I can add to this the retailers Migros, Coop and digitec.ch (amazing). We are so used to the quality of their services, that we take them for granted.
    - mmmpop 4y ago
      The Swiss government seems to be one of the few exceptions to "taxation is theft" because everyone seems pretty happy with where their tax dollars go. Must be nice.
      - mmmpop 4y ago
        martopix 4y ago
        Calling fascist everyone that disagrees with you will certainly not help and should not have a place on HN.
alex_suzuki 4y ago
The Swiss railways (SBB) also have an Angular Component library, which is well maintained and I’ve had the pleasure of using. https://angular.app.sbb.ch/ https://angular.app.sbb.ch/ Important to note that these organizations rely heavily on external contractors and small to mid-sized firms for their development. Making the tooling shared and accessible is probably a win on multiple levels.
hcarvalhoalves 4y ago
Unpopular opinion: it seems a waste of time to have every company/organisation (re)design an entire visual language instead of using browser/OS standard controls, as well as having to (re)learn how to use each of those UIs as a user. If designers at these companies create "design systems" to have consistent UIs, why not aim for the ultimate consistency in UIs – whatever is standard in my computer?
- n8cpdx 4y ago
  There’s no such thing as browser/OS standard controls. Windows alone doesn’t have a standard UX across built-in apps. Then each browser has its own take on how to render native controls. Imagine trying to document your web app but it has 15 totally different UI appearances. And I can tell you from experience with xplat tech like Xamarin.Forms, write once run anywhere with Native control appearances is a disaster, even in relatively controlled environments (limited to iOS and Android).
  - hcarvalhoalves 4y ago
    > There’s no such thing as browser/OS standard controls. There's no such thing as standard controls between different sites today either. But I'm certain there's more variation between sites than there's ever been between different browsers, and the variation between browsers is less likely to bother an individual user than the variation between every site in the whole web. This is a "there's no single standard for browsers, so let's make every site unique" argument.

141 points by denysvitali 4y ago

"The Swiss Post Design System pattern library for a unified and accessible user experience accross the web platform." [1] I really appreciate government and publicly funded organizations open sourcing their work. Another example is Swiss Television and their apps[2] or government apps[3]. The public paid for it so they should also be able to benefit from all the work. [1] https://github.com/swisspost/design-system https://github.com/swisspost/design-system [2] https://github.com/SRGSSR https://github.com/SRGSSR [3] https://github.com/admin-ch https://github.com/admin-ch

ThePowerOfFuet 4y ago
> I really appreciate government and publicly funded organizations open sourcing their work. Another example is Swiss Television and their apps[2] or government apps[3]. The public paid for it so they should also be able to benefit from all the work. The Free Software Foundation Europe agrees: https://fsfe.org/activities/publiccode/publiccode.en.html https://fsfe.org/activities/publiccode/publiccode.en.html
_xoo 4y ago
Unfortunately, not all government apps are open source.
blululu 4y ago
In general this seems fair, but it also creates an externality. A licensing system that offers a permissive license to the community that paid for it, and a more restrictive licensing terms for people in parts beyond seems more fair. Thinking of the United States, I could easily imagine that some states would just wait to copy the services developed by one of the larger states - which creates an unfair free rider situation.
- thesumofall 4y ago
  To which realistic disadvantage of the originator? Even in a scenario in which this becomes common practice and in which other organizations are indeed reusing the shared code (and that is a big if!), you could still argue that the originator benefits by attracting talent, shaping standards, positioning themselves as digital leaders, bringing transparency into what happens with taxpayers money, ...
  - scoopertrooper 4y ago
    It's a classic free rider problem. Some jurisdictions will chronically under invest because they can rely on the largesse of others. The incentive for every jurisdiction would be to degenerate into becoming free riders. This doesn't happen in the corporate world (as much) because of various factors such as tax incentives and market pressures, but would be much more likely in the stately world of government IT. A better solution would be license the code, such that it could not be used to provide public services unless the governing body contributed to a development association (either in money, code contributions, or some mixture thereof).
    - brnt 4y ago
      > The incentive for every jurisdiction would be to degenerate into becoming free riders. Only societies starved of ideas other than lowest common denominator free-market thinking. In reality societies choose to do the thng that cost money, for no other reason than that they want the outcome. We do tons of things for no specific (short term) gain. Some would say that this is what sets a great civilization apart from the rest.
    - panick21_ 4y ago
      Its not a classic free rider problem. Because the service does not degrade for the people who originally wrote the software. The original authors couldn't care less if somebody else under invests.
- deleted 4y ago
  [deleted]

danpalmer 4y ago

I like that this is basically a customisation of Bootstrap. As much as it's nice for designers and engineers to build a design system from scratch, Bootstrap is a mature, well designed codebase, and you can do a lot worse than using a customised version as the basis for a company specific design system.

samwillis 4y ago
I was about to post the same comment, but want to add that I think Bootstrap v5 has reached a really nice point with a mix of the original component based vision but utilising the utility class based construction inspired by Tailwind. v5.2 also moved a lot of the SCSS variables to CSS vars which is much nicer to work with.
tobr 4y ago
Interested if you could elaborate on this, as someone who’s never used Bootstrap as I don’t really see the point if you are implementing a custom design anyway. What is the elevator pitch for basing this on Bootstrap?
- dgb23 4y ago
  Familiarity. You can achieve a cleaner, lighter and more focused CSS/SCSS codebase without it, but people know Bootstrap and it's quick and easy for them.
- gedy 4y ago
  - When the design changes again, you don't have to rewrite all the code. - You can use this across different web technologies. - You can use with off the shelf component libraries.
- danpalmer 4y ago
  When creating a new design system you need to cover at least: 1. CSS architecture, making all the components inter-compatible with each other (very complex). 2. Accessibility. 3. Browser compatibility and responsiveness/mobile capabilities. 3. What components are you going to provide? 4. Documentation for the team using it. 5. Fixing all the bugs in it. 6. The _actual design_. Bootstrap pretty much gives you 1-6. It makes decisions that are easy to criticise if you've got the resources of a big tech company behind you, but for most people, customising Bootstrap will let them focus on #7 and get all the rest pretty much done for them. There are alternatives, taking any of the major CSS frameworks like this that has customisation built in will work, Foundation is another good one, but Bootstrap has a lot of the mindshare.

RedlineTriad 4y ago

I actually work with the team behind this, if you have any questions feel free to ask! Feels like a 4th wall break when something from your job pops up on the orange site.

tazjin 4y ago
With Javascript disabled (I've configured it to be opt-in in my browser) this page renders completely blank. Is that due to the framework, or is it something related to the hosting method used here?
- gfellerph 4y ago
  This is an Angular app rendered entirely on the client. Sorry we don't provide any server side rendering or fallback. It's targeted at Devs that usually have JS enabled.
  - swost 4y ago
- RedlineTriad 4y ago
  I asked and got this answer: > The DemoPage is an Angular App (SPA). But there is a lot of CSS you can use/run without Javascript. And gfellerph, the lead dev, left the other comment. (You can see the whole team at the bottom of the demo page)
nicopappl 4y ago
Ahah, I'm glad to see you here! I do enjoy the postfinance app, but I recently had to use the service.post.ch website, and it was one of the most unpleasant experience I had with a computer in recent times. I'm so sorry to breach all protocols of decency and just complain here, but I thought "if only I get a hold of the [derogatory term] who designed that website," and you are here! The praise in this thread is clearly from people who never had anything to do with the modern Swiss Post. I had to setup a mail "hold" order (in Switzerland you have to pay an extra fee and make a request to not deliver mail when you leave for a few weeks) and I found the UI to be very confusing. I think the design of the site could be improved, here is what annoys me the most: * The "clickable" button color being so close to the "disabled" color that it's very hard to distinguish when they are not next to each other (as most of the time) and very confusing when you try to click on a seemingly active button and nothing happens * Calendar widgets letting you select every date, but after selecting the date, you get an error message * communications in German despite the whole process being in French and the destination address being in a 100% French speaking canton * downright bad French translation (hi from the 25% of the Swiss population) eg: "Reprendre" is *not* a valid button name, maybe use "selectionner" * ending into a redirect loop when going back during the check-in step The UI feels broken. There is a lot of "strange" space, or button layouts accidentally ending up on two rows eg: the login nag dialog (I could reproduce it on Firefox and Chrome). It felt like a miracle when I managed to complete the process after about 1 hour (process that technically only requires my name, address and payment coordinates) I'm used to computers acting up and generally bad software (hell, I use Linux), so I could handle it, but my mom says she has trouble with the website as well. If you need more details, or a generous Romand QA tester, don't hesitate to contact me (domain of email address in my user profile). I feel that good software is important, especially for a state-run monopoly. Because it's always the most marginalized people that end up eating up the hidden costs of rushed-up software.

RektBoy 4y ago

I envy you Swiss people, this is public company and when I see its profit. I feel embarrassed for our Czech post.

soco 4y ago
It's a public company heavily supported by the government, allowed to make nice profits while also trimming down on the public service and increasing prices. The irony.
- martopix 4y ago
  All Swiss public companies (Post and railways are the best examples) are amazing and offer services that feel 1 century ahead of everyone else I experienced. Even if they weren't making money, I would gladly pour my taxes on them because the level of service of say public transport here is completely priceless.
  - seymore_12 4y ago
    Agree. I can add to this the retailers Migros, Coop and digitec.ch (amazing). We are so used to the quality of their services, that we take them for granted.
  - mmmpop 4y ago
    The Swiss government seems to be one of the few exceptions to "taxation is theft" because everyone seems pretty happy with where their tax dollars go. Must be nice.
    - mmmpop 4y ago
      - martopix 4y ago
        Calling fascist everyone that disagrees with you will certainly not help and should not have a place on HN.

alex_suzuki 4y ago

The Swiss railways (SBB) also have an Angular Component library, which is well maintained and I’ve had the pleasure of using. https://angular.app.sbb.ch/ https://angular.app.sbb.ch/ Important to note that these organizations rely heavily on external contractors and small to mid-sized firms for their development. Making the tooling shared and accessible is probably a win on multiple levels.

hcarvalhoalves 4y ago

Unpopular opinion: it seems a waste of time to have every company/organisation (re)design an entire visual language instead of using browser/OS standard controls, as well as having to (re)learn how to use each of those UIs as a user. If designers at these companies create "design systems" to have consistent UIs, why not aim for the ultimate consistency in UIs – whatever is standard in my computer?

n8cpdx 4y ago
There’s no such thing as browser/OS standard controls. Windows alone doesn’t have a standard UX across built-in apps. Then each browser has its own take on how to render native controls. Imagine trying to document your web app but it has 15 totally different UI appearances. And I can tell you from experience with xplat tech like Xamarin.Forms, write once run anywhere with Native control appearances is a disaster, even in relatively controlled environments (limited to iOS and Android).
- hcarvalhoalves 4y ago
  > There’s no such thing as browser/OS standard controls. There's no such thing as standard controls between different sites today either. But I'm certain there's more variation between sites than there's ever been between different browsers, and the variation between browsers is less likely to bother an individual user than the variation between every site in the whole web. This is a "there's no single standard for browsers, so let's make every site unique" argument.