NCR Voyix – Vision (ATM & POS Health Monitoring)

Technical Lead – Frontend · 2021 · 1 year · 5 people · 8 min read

Led end-to-end design, development, and deployment of a global ATM and POS terminal health monitoring platform — building the NUI internal CSS library from scratch, establishing engineering best practices across a 5-person team, and delivering full application test coverage on a dual-framework React and Angular codebase

Overview

Architected and delivered Vision — NCR Voyix's enterprise-grade monitoring platform for tracking the operational status and health of ATM and POS terminals across global networks. The application gives operations teams real-time visibility into terminal uptime, fault detection, and hardware diagnostics at scale. Led a team of 5 frontend engineers through the full product lifecycle — from initial design collaboration through to deployment — across a dual-framework stack of React 16 and Angular 12, while simultaneously building internal tooling and establishing team-wide engineering standards.

Problem

Operations teams managing large ATM and POS terminal networks had no unified, real-time interface to monitor device health across geographies. Terminal faults, connectivity drops, and hardware failures were detected reactively — often after customer impact had already occurred. The application needed to surface terminal status data from thousands of devices globally in a performant, accessible UI, while remaining maintainable by a small engineering team. There was also no shared frontend design language or internal component library, leading to inconsistent UI patterns and duplicated effort across the codebase. Code quality standards were informal, test coverage was insufficient, and the dual-framework nature of the stack introduced additional coordination complexity.

Constraints

  • Global terminal network — UI must handle high-volume, real-time status data without performance degradation
  • Dual-framework stack (React 16 + Angular 12) requiring consistent design language across both
  • No pre-existing component library or design system — NUI library needed to be built from the ground up
  • Accessibility compliance required for enterprise deployment across regulated financial and retail environments
  • Full application test coverage required to meet enterprise reliability standards
  • Small team of 5 developers responsible for design, development, and deployment in parallel

Approach

Took full ownership of the frontend architecture and team delivery from day one. Began by establishing the NUI CSS library as a shared design foundation — ensuring consistent, accessible UI patterns could be consumed identically across both the React and Angular portions of the application. Introduced ESLint, ES6+ code snippets, CSS architecture, and TypeScript utility types to systematically raise code quality and reduce inconsistency. Expanded test coverage incrementally across the full application, prioritising critical user flows and component behaviour. Maintained regular communication with the product owner through structured sprint demos and approach discussions. Mentored junior developers through the technical challenges of a dual-framework environment, conducting structured code reviews focused on building long-term understanding rather than just enforcing correctness.

Key Decisions

Build the NUI CSS library as a framework-agnostic design foundation

Reasoning:

With React and Angular coexisting in the same product, framework-specific component libraries (e.g. Material UI or Angular Material alone) would have produced divergent UI patterns that were expensive to keep aligned. A plain CSS library — framework-agnostic by design — ensured that both the React and Angular surfaces consumed the same tokens, components, and accessibility patterns, making the product feel like a single coherent application regardless of the underlying framework.

Alternatives considered:
  • Adopt Angular Material for Angular surfaces and Material UI for React surfaces separately
  • Use a third-party design system (e.g. Carbon Design System, Ant Design)
  • No shared library — each developer styles independently per framework

Introduce ESLint, CSS architecture, and TypeScript utility types as a quality baseline

Reasoning:

Engineering standards on a team of 5 without formal enforcement tend to drift — especially across a dual-framework codebase where different conventions naturally emerge per framework. Introducing linting, structured CSS, and TypeScript utility types created an automated quality floor that reduced review overhead, caught errors at write time rather than review time, and made onboarding new developers significantly faster.

Alternatives considered:
  • Rely on code review alone for quality enforcement
  • Adopt a stricter all-in-one tool like Prettier + XO
  • Defer quality tooling until post-launch stabilisation

Incremental test coverage expansion prioritised by risk and user impact

Reasoning:

Starting with full coverage from zero was not feasible within delivery timelines. Prioritising test coverage by feature criticality — terminal status views, fault alerting flows, and data grid components first — delivered the highest reliability return for the time invested. This approach also made test writing a continuous team habit rather than a one-off sprint, producing more maintainable coverage over time.

Alternatives considered:
  • Defer all testing to a dedicated QA phase post-feature delivery
  • End-to-end tests only via Playwright or Cypress
  • Aim for 100% coverage from sprint one regardless of priority

Tech Stack

  • React 16
  • Angular 12
  • TypeScript
  • NUI CSS Library (internal)
  • RxJS
  • CSS
  • ESLint
  • Jest
  • Karma
  • Jasmine

Result & Impact

  • Global ATM & POS coverage
    Terminal Networks Monitored
  • Built from scratch, used across both frameworks
    NUI Library
  • Full application coverage achieved
    Test Coverage
  • 5 frontend developers
    Team Led

Vision gave NCR Voyix operations teams a single pane of glass for monitoring terminal health across their entire global network — shifting fault detection from reactive to proactive. The NUI CSS library became the shared design foundation for the product, eliminating UI inconsistencies between the React and Angular surfaces and significantly reducing the cost of future UI work. Engineering quality improvements — linting, CSS architecture, TypeScript utility types, and expanded test coverage — raised the team's delivery confidence and reduced the frequency of production regressions. Junior developers mentored through the engagement grew into capable contributors who could navigate the complexity of a dual-framework codebase independently.

Learnings

  • Framework-agnostic CSS libraries are the right solution when multiple frontend frameworks coexist in a single product — they enforce design consistency without coupling to any one framework's ecosystem
  • Engineering quality tooling (linting, type enforcement, CSS conventions) should be introduced at the start of a project, not retrofitted — the cost of late adoption is proportional to codebase size
  • In real-time monitoring applications, perceived performance matters as much as actual performance — optimistic UI updates and loading state design are as important as raw data throughput
  • Mentoring on a dual-framework team requires deliberate effort to build mental models that transfer across frameworks, not just teach syntax
  • Test coverage is most sustainable when it is built as a continuous team habit from sprint one — coverage sprints at the end of a project produce brittle tests written under time pressure
  • Product owner alignment through regular demos accelerates decision-making and prevents the accumulation of misaligned assumptions that are expensive to unwind late in delivery

NUI CSS Library

Designed and built the NUI internal CSS library as the shared design foundation for the entire platform:

  • Framework-agnostic architecture — consumed identically by both React and Angular surfaces, ensuring visual consistency across the full application
  • Accessible component patterns built to WCAG standards, covering interactive elements, data grids, status indicators, and alert components used throughout the monitoring UI
  • Design token system defining color, spacing, typography, and elevation values as CSS custom properties, enabling consistent theming and future design updates with minimal surface area
  • Rich component library covering the full range of dashboard UI needs — status badges, terminal health cards, fault alert banners, data tables, and filter controls
  • Internal documentation with usage guidelines and code examples, enabling team-wide adoption without per-component onboarding

Global Terminal Health Monitoring

The operational core of Vision — giving NCR Voyix teams real-time visibility into their global terminal network:

  • Live terminal status dashboard displaying uptime, fault state, and connectivity health across thousands of ATM and POS devices worldwide
  • Fault detection and alerting surfacing hardware failures, software errors, and connectivity drops as they occur — shifting operations from reactive to proactive
  • Terminal detail views with hardware diagnostics, recent event logs, and health trend data for individual device investigation
  • Geographic network overview enabling operations teams to identify regional outage patterns and prioritise field response
  • Customisable monitoring filters allowing teams to segment terminal views by device type, region, network, and fault severity

Engineering Quality & Best Practices

Established a set of engineering standards that raised the quality floor across the entire codebase:

  • ESLint integration with a custom ruleset enforcing consistent code style across both React and Angular codebases from a single configuration
  • ES6+ code snippets standardising modern JavaScript patterns and reducing boilerplate across the team
  • CSS architecture introducing a structured stylesheet layer with clear separation between base styles, component styles, and utility classes
  • TypeScript utility types adopted across service, model, and props layers to reduce type duplication and improve compile-time correctness
  • Full application test coverage achieved through incremental, risk-prioritised expansion of unit and integration tests across components, services, and data flows

Team Leadership & Mentorship

Built a capable, self-sufficient team across a complex dual-framework environment:

  • Structured code reviews with written feedback focused on reasoning and transferable principles — building team capability, not just enforcing rules
  • Technical mentorship on React and Angular patterns, reactive programming with RxJS, accessibility implementation, and testing strategy
  • Junior developer pairing on complex architectural decisions, accelerating growth through exposure to real production constraints
  • Cross-functional collaboration with UI/UX designers, backend engineers, QA, and the product owner to ensure seamless integration and on-time sprint delivery
  • Sprint demos and product owner communication keeping stakeholders aligned on approach, progress, and upcoming technical decisions throughout the engagement
All projects