Product Design

• ▪ Industry / Branch
• Semi-Government / Public Transport
• ▪ Organisation
• Dutch Railways (NS)
• ▪ Role
• as - Design Engineer
  as - UX UI Web designer
• ▪ Services
• Concept · Research · UX Design · UI Design · Web Design · Front-end · Web Development · Usability · Accessibility WCAG

---

• ▪ Context
• The Dutch Railways (Nederlandse Spoorwegen - NS) is the National passenger railway operator in the Netherlands, serving over a million travelers daily.

  ---

  Over the years, NS has undergone several digital transformations, and I was at the forefront of one of them.
• ▪ Challenge
• The challenge was to replace the old, static architecture with a dynamic AngularJS front-end, modernizing the user interface and boosting performance without disrupting the real-time travel information that millions depend on.

  ---

  Also, as a semi-government organization, the solution had to meet strict Accessibility standards and serve a highly diverse group of users, from daily commuters to international tourists.

---

• ▪ Summary
• As a UX/UI Engineer and Front-end Specialist, I was responsible for bridging the gap between NS's legacy infrastructure and modern user expectations. My role focused on designing and developing accessible, responsive interface components within the AngularJS framework.

  ---

  I collaborated closely with the NS product team to ensure the new front-end layer delivered a seamless, reliable experience across all devices and user scenarios.
• ▪ Team
• Throughout my time at NS (2013 & 2014-2017), I transitioned across various sectors, enabling me to effectively collaborate with a diverse range of stakeholders, managers, designers, developers, testers and more.

---

• ▪ Ecosystem
• The discovery phase involved examining the limitations of the current static setup and the features of the new AngularJS framework. The main focus was to identify which UI components, such as the journey planner, departure times, and disruption messaging, would benefit most from modernization.
• ▪ User analysis
• The NS user base is one of the most diverse in the Netherlands. It spans daily commuters who need split-second information, elderly travelers who may struggle with complex interfaces, international visitors unfamiliar with Dutch geography, and users with varying accessibility needs.

  ---

  This required a design that was both inclusive and highly efficient.
• ▪ Goal
• 1. - Transition core UX UI components from staticto a dynamic AngularJS environment.
  2. - Enhance performance and perceived speed for critical journey planning tasks.
  3. - Ensure WCAG compliance and a smooth experience across devices.

---

• ▪ Struggle
• Legacy NS pages were slow and clunky, especially on mobile during peak hours, with delays and platform updates hard to find crucial info for travelers was often buried or missing.
• ▪ Accessibility
• The old static pages hindered screen readers and keyboard users.

  ---

  As a public service, accessibility was essential, so the new front-end was built to be inclusive from the start.

Persona

• ▪ Daily Commuter
• • Role: Professional traveling from suburb to city center daily.
  • Goal: Check real-time departure times and platform changes in under five seconds.
  • Pain Point: Slow-loading pages that cause missed connections during rush hour.
  • Quote: "I need the train time, not a loading spinner."
• ▪ International Tourist
• • Role: Visitor navigating Dutch public transport for the first time.
  • Goal: Understand routes, purchase tickets, and receive clear disruption alerts in English.
  • Pain Point: Confusing terminology and interfaces that assume local knowledge.
  • Quote: "Just tell me which platform and when, in English, please."
• ▪ Accessibility User
• • Role: Traveler with visual or motor impairment relying on assistive technology.
  • Goal: Plan journeys and receive travel updates independently using a screen reader.
  • Pain Point: Legacy interfaces with missing ARIA labels, poor focus management, and inaccessible dynamic content.
  • Quote: "I just need it to work with my tools,without guessing where the buttons are."

---

• ▪ Components
• Key UI components like the journey planner, departure boards, and disruption alerts were rebuilt as modular components, enabling dynamic, real-time updates without full page reloads and enhancing performance and user flow.
• ▪ Mobile-first
• I developed the interface to be mobile-first, with enlarged touch targets, simplified layouts, and key information prominently displayed for on-the-go train checkers.
• ▪ Accessible
• I integrated WCAG 2.1 AA compliance from the start, using semantic HTML, ARIA labels, and robust keyboard navigation to ensure accessibility for screen readers and assistive tech.

---

• ▪ Rollout
• Given the critical nature of the service, new modular components were integrated alongside rebuilt UX/UI modules in a phased approach. This strategy minimized risk and enabled continuous user feedback and performance monitoring.
• ▪ Testing
• The redesigned components were tested by users such as commuters and those using screen readers. Their feedback showed that the new dynamic interface made tasks quicker and improved accessibility.

---

• ▪ Modernity
• The integration of AngularJS components improved the NS digital experience by making journey planning faster and more responsive, providing real-time updates without page refreshes, and creating a clean, accessible interface.

  ---

  This transition also set a strong foundation for future digital improvements across the NS system.

• ▪ Transition
• Successful migration of core user journeys from static to a dynamic UX, UI and front-end, enabling real-time interactivity and improved performance.
• ▪ Inclusive design
• Achieved WCAG 2.1 AA compliance across all new components, ensuring the National Railway service is accessible to all travelers.

---

• ▪ Impact
• The modernization effort resulted in a measurably faster, more reliable user experience for millions of Dutch travelers. The new components reduced friction in the journey planning flow and significantly improved the platform's accessibility posture, aligning NS with both user expectations and regulatory standards.
• ▪ Takeaways
• • - Modernization must be painless as possible: For critical public infrastructure, the best technology transitions are those users barely notice, except that everything feels faster. Unfortunately it does not go exactly like that.
  • - Accessibility is a public duty: Semi-government services cannot treat inclusivity as an afterthought: it must be engineered into the component architecture.
  • - Phased migration mitigates risk: Replacing legacy systems piece by piece allows for continuous delivery and minimizes disruption to essential services.