Swiss Post Design System

https://swisspost-web-frontend.netlify.app/

by denysvitali • 4 years ago

141 45 4 years ago

swisspost-web-frontend.netlify.app

sschueller2• 4 years 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

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

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

ThePowerOfFuet• 4 years 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

_xoo• 4 years ago

Unfortunately, not all government apps are open source.

blululu• 4 years 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• 4 years 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, ...

amadeuspagel• 4 years ago

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

sschueller2• 4 years ago

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?

jlg23• 4 years ago

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.

danpalmer3• 4 years 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• 4 years 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• 4 years 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• 4 years 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• 4 years 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.

danpalmer3• 4 years 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.

RedlineTriad3• 4 years 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• 4 years 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?

gfellerph3• 4 years 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.

RedlineTriad3• 4 years 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• 4 years 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.

RedlineTriad3• 4 years ago

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

martopix2• 4 years ago

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.

gfellerph3• 4 years ago

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

RektBoy• 4 years ago

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

soco3• 4 years 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.

martopix2• 4 years 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.

gfellerph3• 4 years ago

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

alex_suzuki• 4 years 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/

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.

hcarvalhoalves2• 4 years 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• 4 years 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).

hcarvalhoalves2• 4 years 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.

Swiss Post Design System

Related Stories