Swiss Post Design System | Hacker News Reader

Swiss Post Design System

swisspost-web-frontend.netlify.app

141 pointsdenysvitali47 comments

"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

[2] https://github.com/SRGSSR

[3] https://github.com/admin-ch

> 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

Unfortunately, not all government apps are open source.

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.

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

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

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

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.

Similarly, other countries might just use science funded by the US - is that also an unfair free rider situation?

Not much of a United States when you think the other states might be taking advantage of your state. How can you prosper as a strong union with that attitude?

My $0.02: At least me, as a tax payer, would like to be able to say "yes, please give to to free riders". I already paid for my problem to be solved and I did so, because the solution was worth the price. That's where my math ends (unless someone pays me to do some more math). Yes, please take my solution, just don't bother me with support or feature requests; I'll pass along the number of the company that implemented the solution.

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.

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?

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.

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)

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.

Hey, thanks for the feedback, some of my own comments:

* I don't work on the team of this demo itself, they are just part of my "Cluster" (unsure what it even is, yay to re-orgs). I am part of the Developer Platform team and am responsible for internal tooling (some dev, some ops).

* Postfinance and Swiss Post are mostly separate, though we share some things. I assume the design is one of those things.

* There is no one UI team, this page here is a demo of the Common Web Framework, which is managed by the CWF team.

But I will forward a link to you comment to the CWF team anyways, since they can probably do more with the feedback than me (if they haven't read it already).

The level is still vastly better than any public service in Italy, but I have also been frustrated by the post.ch website before. It's often very unintuitive to know where to go. And it does change language kind of randomly from an area of the website to the next. Still, quite good.

Hi @nicopappl, I forwarded your feedback to the responsible product owner and have received an answer: "Thank you for your detailed feedback and for taking the time to do so. We regret that your experience on the Swiss Post portal was not satisfactory. We will be happy to take your feedback on and see what we can improve in the future in terms of wording/translations and the general customer experience when placing orders. Nevertheless, we of course hope that the order was executed satisfactorily following the placement of the order. We would be delighted if you could place orders with Post CH Ltd in future as well."

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.

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.

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?

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.

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

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.

We've built custom UI Components from scratch. Millions in development resources. I miss Bootstrap. Never understood why it became fashionable to hate on it.

I saw some of the "hate" (strong word) at my previous job, and it pretty much boiled down to 3 things:

- Bootstrap JQuery

- Not going all-in on customisation with the built-in customisation options, but rather hacking on custom styles on top in our own stylesheets.

- Starting from Bootstrap 3.

I suspect that much of the hate stems from things like this.

you nailed it. Bootstrap has very powerful customization options if you're willing to invest some time learning scss config files.

Did you mean Bootstrap gives you 1-5 and you can focus on #6 or do I not understand what #7 is?

The numbering is off, there's a duplicate 3.

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/

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.

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?

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

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

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

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.

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.

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.

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.

https://www.post.ch/en/about-us/profile/facts-and-figures/fi...

They are supported by being a monopoly by law on letter correspondence. No need for extra subventions when you can decide yourself on your pricing and quality of service.

Rampant privatization is not any more enticing than what you describe.

Because there are only two ways of doing things in the world?

The quality of service appears to be pretty high, among the best in the world. I don't know about pricing, things in Switzerland are always pretty pricey even compared to the UK

While technically it doesn't receive tax money because it must earn a profit, it of course is partly financed by the government. Just one example: I lived in an apartment that was owned by the Swiss Post (close to the post office but a separate building ). With a AAA credit rating, it is of course cheap to buy buildings and make a profit. A regular private company couldn't do this. Well, I benefited as well as the rent was relatively cheap compared to similar apartments.

Reply on news.ycombinator.com