My Role

On the Bank of Cyprus ATM project I operated across three concurrent roles: Conceptual Designer, Lead Frontend Engineer, and partial Project Manager. This scope put me at the intersection of design, delivery, and cross-team coordination — responsible for output quality from concept through production.

One of five Conceptual Designers invited to define the visual direction. My submission was selected as the design foundation — the Lead Designer built the full ATM system from my exploration.

As Lead Frontend Engineer, I built the full ATM flow in production-ready code. The handoff was working software — not guidelines — that Bank backend engineers integrated directly into the ATM system.

Drawing on my experience leading the National Bank of Canada ATM project, I took on a partial Project Manager role — coordinating design cycles, managing frontend engineers, and keeping the project on track through delivery.

Conceptual Design

Five designers competed to define the ATM's visual direction — the objective was to retain the project in-house rather than losing it to an agency. My submission was selected as the design foundation for the full ATM system. The design had to be innovative enough to impress bank stakeholders and structured enough to build from.

The Goal

  • Design 3 main screens
  • Use Bank of Cyprus' brand colors
  • Take an innovative approach

My Submission

Selected as the design direction for the full ATM project.

Dark

The dark-color scheme used gradients to simulate depth and geometric shapes as brand-anchored texture — achieving visual hierarchy without shadows, which were a performance constraint in the ATM environment.

Light

Outdoor ATM placement demanded a light-color scheme for daylight contrast. I built both schemes as switchable modes — a simple architectural decision that allowed the system to toggle themes programmatically, removing the need for a separate design process for each environment.

4 Designs Iteration

When the Bank requested a different color palette applied to my design structure, I produced four variations — same design architecture, different color expression. This demonstrated that my structural approach was system-level: palette-agnostic, adaptable, not locked to a single visual choice.

White / Yellow

Blue / Yellow

White / Blue

Blue / Blue

Development

Design rules were systematized across the full ATM flow — establishing a consistent visual contract that held quality at every screen, independent of who built it.

Development

I structured development into four cycles — a deliberate parallel-track strategy that kept my team ahead of backend integration while earlier cycles were in client approval. Cycle 1 component styles cascaded forward automatically. Each cycle was faster than the last.

This required continuous alignment with the Lead Designer and proactive planning to maintain cross-team consistency across cycles. The backend team always had a stable, tested integration target.

Multilingual Support

Multilingual support is a system-level constraint — not a translation task. I designed the ATM UI to accommodate both English and Greek without layout breakage or hierarchy degradation. The design system had to hold across both languages by default.

English

  • Word: 8 characters
  • Paragraph: 21 words and 129 characters

Language

The method of human communication, either spoken or written, consisting of the use of words in a structured and conventional way.

Ελληνικά

  • Word: 6 characters
  • Paragraph: 21 words and 140 characters

Γλώσσα

Η μέθοδος της ανθρώπινης επικοινωνίας, είτε ομιλούμενη είτε γραπτή, που αποτελείται από τη χρήση των λέξεων με δομημένο και συμβατικό τρόπο.

Project Management

As Lead Developer with prior ATM delivery experience from the National Bank of Canada project, I was the natural anchor for the team — coordinating across design, frontend, and backend to keep delivery on track.

Taking the lead

I scaled the team under deadline — brought in two additional engineers, delegated Iconography and Animations with defined quality standards, and ran parallel tracks with the Lead Designer. Design and development stayed in sync throughout.

Cross-team communication with backend engineers was continuous — my knowledge of the ATM environment's constraints let me anticipate integration problems before they surfaced. The handoff was clean. The project delivered on schedule.

Iconography



Animations

Animations required a technically constrained solution — the delivery environment dictated the approach.

Sprite

Final Animation

Sprite Animations

The constraint: pure CSS and SVG only — no JavaScript — to protect backend library integrations. When SVG animation failed in IE11, I pivoted to a 24-frame sprite PNG with CSS step animation. The technical constraint drove the architectural decision. The result loaded fast and ran reliably inside the ATM.

Impact

Delivery across three concurrent roles — designer, engineer, and project lead — on a high-stakes banking project with international stakeholders. The parallel-track development system kept the project on schedule and became a repeatable delivery model. Production-ready code handoff eliminated the interpretation gap between design and backend integration. The scalable component and animation system established a reusable foundation for future ATM projects within NCR.