Banque Nationale du CanadaATM Project
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. It was adopted as the team standard on every subsequent project I worked on at NCR.
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
font-weight: 100;
color: #15435c;
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 from the start rather than reviewed at the end.
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.
The Decision
The whole project turned on one question: what does the design team actually hand the backend team? NCR had an answer already, and it was the wrong one.
The path I took
Hand over production frontend codeI wrote the ATM's real HTML and CSS and gave the backend team the thing itself. There was no interpretation step between the approved design and what got deployed, because there was nothing left to interpret.
The option I killed
Keep the measurement guidelines and add review cyclesThe safe option was to carry on issuing static specs and catch the drift later with more design QA. It was cheaper for me, it kept the roles clean, and every project that had done it that way had shipped, just with rework budgeted in.
What choosing it cost
I took on the delivery risk for the entire visual system personally. When the build broke there was no spec to point at and no shared blame: it was my code, so it was my problem, including the parts that broke during Angular integration in a codebase I did not own. It also meant I had to be in Montreal for the final sprints rather than reachable over email. And it quietly made the team's new delivery model depend on someone being able to write production frontend code, which, on that team, meant me.
How I Knew It Held
I do not have access to NCR's or the bank's analytics, and I will not invent a percentage. Here is what I can defend.
- Engineering headcount I worked inside
- Roughly 20 backend engineers through Angular integration
- Frontend ownership
- Sole frontend engineer, kickoff to launch
- Languages held by the same layout
- English and French, with 30–40% character expansion
- Browser floor
- Internet Explorer 11, non-negotiable, decided before any design work
- Decision with witnesses
- Leadership flew me to Montreal for the final development sprints rather than supporting remotely.
- Process outcome
- Production code replaced measurement guidelines as the CXD handoff artifact on every subsequent project I worked on.
What was never measured
Nobody instrumented the deployed interface, and as a vendor I would not have had access to the fleet data anyway. If I ran this today I would ask for four things before launch: task completion time by transaction type, error and retry rate at PIN and amount entry, voice-guidance sessions that reach a completed transaction, and completion rates split by language so the French expansion problem shows up as a number instead of a layout review.
What I would do differently
I made the team's delivery model depend on a skill only I had on it. The handoff change was the right call and it held, but I never wrote the CSS architecture down as something another designer could extend, and I never paired anyone through a second project on it. That made me the single point of failure for the thing I had just made standard. If I did it again I would treat teaching it as part of shipping it.
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. On every subsequent project I worked on, the implementation-drift rework that used to be budgeted for simply was not needed. The code was the spec. The cross-team delivery model (designer, frontend engineer, and backend team in continuous alignment) became the template for how CXD ships.