LZ Lando ZeilstraSenior UX en product designer
← Alle cases
Design systemNS – Developer portal

Een developer portal dat aansluit op de rest van NS, gebouwd met Tractie

NS ontwikkelt digitale diensten voor reizigers en voor interne processen. In een multidisciplinair Agile team werkte ik aan de doorontwikkeling van het developer portal. In plaats van eigen oplossingen te bedenken, bouwde ik het ontwerp op met de componenten en patronen uit Tractie, het Enterprise Design System van NS.

RolSenior UX en product designer
Periode2025
SectorMobiliteit
Samen metMultidisciplinair Agile team, stakeholders en developmentteams
Componentenoverzicht van de Tractie-library, met onder meer breadcrumbs, button, calendar en checkbox

Mijn rol

  • Ontwerpen van dashboards, portalen en UX-flows met Tractie
  • UX-research en stakeholderinterviews
  • Consistentie en herbruikbaarheid door design patterns en componenten

01

Het probleem

NS ontwikkelt digitale diensten voor reizigers en voor interne processen. Binnen een multidisciplinair Agile team werkte ik aan de doorontwikkeling van het developer portal.

Het portal moest consistenter, beter herbruikbaar en toegankelijker worden, binnen de bestaande digitale kaders en enterprise-structuren van NS.

02

Wat ik ontdekte

Consistentie win je niet door elk scherm opnieuw te ontwerpen, maar door slim te kiezen uit wat er al is.

UX-research en stakeholderinterviews lieten zien wat gebruikers en teams nodig hadden. Voor veel van die behoeften had Tractie al een beproefd component of patroon; de winst zat in het consequent toepassen ervan.

03

Keuzes en afwegingen

Eerst kiezen uit Tractie, dan pas iets nieuws

Voor elk onderdeel van het portal keek ik eerst welk Tractie-component of -patroon paste. Alleen waar niets aansloot, ontwierp ik iets nieuws, binnen dezelfde regels.

De juiste navigatievorm per context

Tractie onderscheidt een navigation bar, side panel en navigation drawer. Per deel van het portal koos ik de vorm die past bij het aantal niveaus en de beschikbare ruimte.

Gegevens als Description List

Technische details en eigenschappen staan in een Description List: vaste paren van titel en waarde die snel te scannen zijn, in plaats van losse tekstblokken.

Ontwerpen in dezelfde taal als development

Door de anatomie en namen uit Tractie te gebruiken, zoals title, utilities en tabs, sloten ontwerp en code direct op elkaar aan.

De bouwstenen uit Tractie

De header uit Tractie: title, leading visual, utilities en tabs.
De header uit Tractie: title, leading visual, utilities en tabs.
De opbouw van de navigatie, met hoofdnavigatie bovenin en naslag en instellingen onderin.
De opbouw van de navigatie, met hoofdnavigatie bovenin en naslag en instellingen onderin.
Drie navigatievormen: navigation bar, side panel en navigation drawer.
Drie navigatievormen: navigation bar, side panel en navigation drawer.
Description List: titel–waardeparen voor gegevens die je snel wilt scannen.
Description List: titel–waardeparen voor gegevens die je snel wilt scannen.
De naamgeving van design tokens: base, context en modifier.
De naamgeving van design tokens: base, context en modifier.
Een dialoog opgebouwd uit Tractie-componenten.
Een dialoog opgebouwd uit Tractie-componenten.

04

Het ontwerp

Navigatiepatronen in Tractie: submenu, tabs en navigatielijsten
Navigatiepatronen uit Tractie, toegepast op de structuur van het portal.

05

Resultaat

  • ✓Meer consistentie en herbruikbaarheid door de inzet van design patterns en componenten.
  • ✓Ontwerprichtlijnen, toegankelijkheid en UX-kwaliteit geborgd binnen de kaders van NS.
  • ✓Een soepele implementatie dankzij nauwe samenwerking met development.

06

Wat ik nu anders zou doen

Ontwerpen binnen bestaande kaders is geen beperking. Juist door te kiezen uit wat er al is, blijft er tijd en aandacht over voor de onderdelen die echt om een nieuwe oplossing vragen.

Samenwerken

Herken je dit vraagstuk in jouw team?

Ik vertel er graag meer over in een gesprek, inclusief wat er niet in deze case past.

Neem contact op Bekijk LinkedIn