[HN Gopher] Swiss Post Design System
___________________________________________________________________
Swiss Post Design System
Author : denysvitali
Score : 126 points
Date : 2022-10-10 09:42 UTC (13 hours ago)
(HTM) web link (swisspost-web-frontend.netlify.app)
(TXT) w3m dump (swisspost-web-frontend.netlify.app)
| danpalmer wrote:
| 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 wrote:
| 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 wrote:
| 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?
| gedy wrote:
| - 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.
| dgb23 wrote:
| 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.
| danpalmer wrote:
| 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.
| pcurve wrote:
| 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.
| danpalmer wrote:
| 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.
| pcurve wrote:
| you nailed it. Bootstrap has very powerful customization
| options if you're willing to invest some time learning
| scss config files.
| andimm wrote:
| Did you mean Bootstrap gives you 1-5 and you can focus on
| #6 or do I not understand what #7 is?
| jsnell wrote:
| The numbering is off, there's a duplicate 3.
| swost wrote:
| RektBoy wrote:
| I envy you Swiss people, this is public company and when I see
| its profit. I feel embarrassed for our Czech post.
| soco wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| "I should appreciate that the government does things with
| my money that I don't like!" - every fascist that
| downvoted me
| gfellerph wrote:
| https://www.post.ch/en/about-us/profile/facts-and-
| figures/fi...
| abc03 wrote:
| 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.
| soco wrote:
| 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.
| rscho wrote:
| Rampant privatization is not any more enticing than what
| you describe.
| smcl wrote:
| 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
| [deleted]
| RedlineTriad wrote:
| 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.
| nicopappl wrote:
| 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.
| RedlineTriad wrote:
| 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).
| martopix wrote:
| 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.
| tazjin wrote:
| 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?
| RedlineTriad wrote:
| 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)
| gfellerph wrote:
| 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 wrote:
| hcarvalhoalves wrote:
| 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 wrote:
| 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 wrote:
| > 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.
| alex_suzuki wrote:
| 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.
| sschueller wrote:
| "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
| _xoo wrote:
| Unfortunately, not all government apps are open source.
| ThePowerOfFuet wrote:
| > 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
| blululu wrote:
| 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.
| [deleted]
| thesumofall wrote:
| 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 wrote:
| 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 wrote:
| > 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.
| amadeuspagel wrote:
| Similarly, other countries might just use science funded by
| the US - is that also an unfair free rider situation?
| sschueller wrote:
| 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 wrote:
| 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.
___________________________________________________________________
(page generated 2022-10-10 23:01 UTC)