My Role

As Lead Frontend Engineer — the only developer on NCR's CXD team — I partnered with the Lead Designer to deliver the National Bank of Canada ATM: interactive prototype, production-ready code, and on-site implementation support. I used this project to redesign the team's delivery process at the system level: replacing static measurement guidelines with live frontend code. That process change is still the standard today.

The Process

A single project changed how NCR's CXD team delivers. Here's the before and after.

Guidelines Measurements

NCR's existing handoff process — static measurement guidelines — consistently produced implementations that diverged from approved designs. The problem was structural: guidelines required interpretation, interpretation introduced error, error required rework. It happened on every project.

  • Architect the Flow
  • Create the Visual Design
  • Hand off Measurement Guidelines to Developers
60px
auto
font-size: 25px;
font-weight: 100;
color: #15435c;
15px
15px

Live Prototype Interactive

I proposed and drove a new model: production-ready frontend code as the primary handoff artifact. No guidelines. No interpretation layer. The first time CXD delivered working code to a backend team — and it eliminated the gap between design intent and final implementation entirely.

  • Architect the Flow
  • Create the Visual Design
  • Hand off Production Ready Code to Developers

Challenges & Requirements

Knowing the delivery environment before designing for it is the difference between a clean handoff and a broken implementation.

Hardware Limitations

The ATM ran on IE11. Every design and engineering decision was made with that constraint as the starting point. I worked with the Lead Designer to ensure the visual system was IE11-compatible from the beginning — not patched at the end. Environmental constraints drive system-level decisions.

Animations

Animation in IE11 is an engineering constraint problem, not a creative one. The design has to work within what the environment supports.

Assets

Final Animation

The Goal

Approach: HTML and CSS only — no JavaScript — to protect backend integrations. SVG failed in IE11. I pivoted to static image assets with CSS frame-by-frame animation, decomposing each motion into discrete composable pieces. The result: fast load, reliable rendering, zero integration conflicts.

Multilingual Support

Multilingual support must be solved at the system level — layout, typography, and component structure — not retrofitted to existing screens.

Language

English to French can mean 30–40% more characters for the same content. I designed the ATM UI to accommodate both English and French — layout, typography, and component structure held without degradation across either language.

On a small ATM screen, every character has cost. I designed a compact typographic system with defined rules for character density, text alignment, and word wrapping — flexible enough to hold across both languages without breaking layout or compromising readability.

Things we took into consideration

  • Font Support
  • Chracter Length
  • Text Alignment
  • Height
  • Word Density

English

  • Word: 4 characters
  • Paragraph: 12 words and 96 characters

Edit

Prepare (written material) for publication by correcting, condensing, or otherwise modifying it.

Français

  • Word: 8 characters
  • Paragraph: 20 words and 123 characters

Modifier

Préparer (matériel écrit) pour la publication en le corrigeant, en le condensant ou en le modifiant de toute autre manière.

Accessibility

Accessibility was a defined requirement — designed in at the system level, not reviewed as a final checklist.

Voice Guidance

I defined the voice guidance interaction model for blind and low-vision users: a progressive step-by-step system where only the active state is fully visible and all others are dimmed. The visual focus state mirrors the audio guidance — reinforcing rather than conflicting with the voice output.

Design objectives:

  • ATM is fully usable by blind and low-vision users via voice guidance alone.
  • Step-by-step interaction model with clear audio cues at each decision point.
  • Interaction modeled similarly to an onboarding “tour” — progressive disclosure of context.
  • Only the active step is fully visible; all others are dimmed — reducing cognitive load for sighted users too.

Implementation & Support

Handoff is not the end of delivery. Delivery ends when the product is live and stable in production.

Team Player

I embedded with a team of approximately 20 backend engineers through Angular integration — monitoring visual output in real time, catching layout regressions, and ensuring approved designs translated faithfully to the deployed ATM software.

I was flown to Montreal to be on-site through final development sprints. That decision by leadership reflects the level of delivery ownership I held on this project — my presence was necessary for a clean launch.

The Experience

As the sole Frontend Engineer from kickoff to launch, I carried the full delivery risk for the visual system. High-stakes, high-ownership, delivered on time.

Success

Impact: The NBC ATM project produced two lasting outputs — a shipped product and a new system-level delivery process. Production-ready frontend code replaced static guidelines as the team standard. That process change reduced implementation error and rework on every subsequent project. The cross-team delivery model — designer, frontend engineer, and backend team in continuous alignment — became the template for how CXD ships.