NS

Een Design System van wereldklasse

Een Design System van wereldklasse

Een Design System van wereldklasse

Sneller en beter ontwerpen dan je nu doet

Sneller en beter ontwerpen dan je nu doet

NS wil reizigers in één consistente digitale omgeving helpen: van plannen tot instappen. Daarvoor was een design system nodig dat teams sneller laat werken, zonder in te leveren op kwaliteit, toegankelijkheid of herkenbaarheid.

Een goed design system heeft heel veel impact op: consistentie, samenwerking, snelheid, schaalbaarheid en vertrouwen. Nessie brengt productteams, designers en developers bij elkaar in één gedeelde taal.

Wil je meer weten over design systems voor jouw organisatie?

Niels van Veen · Design consultant

Page heading

Voorbeeld van componenten, patronen en richtlijnen in Nessie.

“Door Nessie kunnen onze teams efficiënter ontwerpen en ontwikkelen. Maar bovenal zorgt het voor een consistente en toegankelijke gebruikerservaring.”

“Door Nessie kunnen onze teams efficiënter ontwerpen en ontwikkelen. Maar bovenal zorgt het voor een consistente en toegankelijke gebruikerservaring.”

Product owner · NS

Vraag

Hoe ontwerp je één samenhangend systeem voor een organisatie met talloze producten, kanalen, teams en reizigersmomenten? Nessie moest niet alleen mooi zijn, maar vooral bruikbaar, onderhoudbaar en breed gedragen.

Aanpak

We combineerden inventarisatie, componentontwikkeling, documentatie en governance. De basis: ontwerpen wat teams echt nodig hebben, en telkens bewijzen dat het werkt in de praktijk.

Nessie: een herkenbare naam en beeldtaal voor het design system van NS.

De 4 dingen die we het tofste vinden aan Nessie

De 4 dingen die we het tofste vinden aan Nessie

Het design system werd pas waardevol toen het zichtbaar ging werken in echte producten. Deze vier onderdelen maakten het verschil.

Form heading

#1 Nessies voor Werk, IOS en Android

Voor verschillende platformen zijn patronen en componenten zorgvuldig op elkaar afgestemd. Zo voelt ieder kanaal vertrouwd, terwijl elk team de juiste bouwstenen heeft.

#2 Componenten die echt NS zijn

Niet zomaar generieke componenten, maar bouwstenen die passen bij de dienst, toon en herkenbaarheid van NS. Van knoppen tot notificaties en van formulieren tot reisinformatie.

#3 NS moet fijn werken voor iedereen

Toegankelijkheid is geen extra laag, maar een uitgangspunt. Componenten zijn beschreven met states, toetsenbordgedrag, contrast en duidelijke richtlijnen voor gebruik.

#4 Documentatie — niet per se sexy, wel cruciaal

De documentatie zorgt dat elk team begrijpt waarom iets zo ontworpen is, hoe het toegepast moet worden en wanneer je van het patroon afwijkt.

Hoe Nessie tot stand is gekomen

Bij NS werkt ieder team aan een ander deel van de reis. Daarom begon het werk met luisteren, inventariseren en het vinden van patronen die overal terugkomen.

Opstelling en inventarisatie

Samen met teams brachten we bestaande patronen, componenten en pijnpunten in kaart. Zo ontstond een gedeeld beeld van wat Nessie moest oplossen.

V

NS

Staan de fundamentals?

Kleuren, typografie, iconen, spacing en contentprincipes vormen de basis. Pas als die stevig staat, kun je betrouwbare componenten bouwen.

Componenten ontwikkelen

We ontwikkelden componenten die niet alleen visueel kloppen, maar ook technisch en inhoudelijk helder zijn. Elk component kreeg richtlijnen, states en voorbeelden.

80+

80+

Design componenten voor NS Reizigers

20+

20+

Teams die ermee werken

8.1

8.1

Gemiddelde waardering voor Nessie

“Jannizij, Nessie hoef ik niet uit te leggen: wat je nodig hebt staat klaar.”

Hoe staat jouw design system ervoor?

Werk je aan een design system, wil je bestaande richtlijnen opschalen of wil je teams consistenter laten ontwerpen? We helpen je graag ontdekken wat de volgende stap is.

Samen sparren over jouw Design System voor jouw organisatie maken?

Mobiele app voor service

Digitale ervaring voor gezinnen

valsplat

Privacy · Contact · LinkedIn

Create a free website with Framer, the website builder loved by startups, designers and agencies.