My Role

Coming to this, I ended up taking 3 main roles while working on the Bank of Cyprus (BOC) ATM project, Conceptual Designer, Lead Frontend Engineer, and partial Project Manager.

Inicially, I was brought in as a Conceptual Designer to explore and conceptualize the visual design along with 4 other designers on the team and later hand it off as a starting point for the Lead Designer to move fourth with.

My Lead Frontend Engineer role was to markup the entire ATM flow and provide production ready code to the Bank's Backend Engineers for data biding and implementation.

With experience in working on the National Bank of Canada ATM project, I went into this with a very confident approach so it came natural to me when I started to lead the project and take a partial Project Manager role moving forward.

Conceptual Design

As one of the 5 Conceptual Designers in the project chosen to take a stab at exploring the visual design for 3 main screens from the ATM flow wireframe, we were asked to take an innovative design approach so NCR Corporation could present it to the Bank of Cyprus stakeholders in order to retain the Bank's interest in sourcing us to do the design for the project instead of outsourcing to an agency. My design was later picked as the foundation and starting point for the Lead Designer on the project to go forth with it.

The Goal

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

My Submission

My design was later picked as the foundation and starting point for the Lead Designer to go forth with.


My goal was to have a dark-color scheme and present an eye catching design where colors and components would pop off the screen and give this three dimensional look without the excessive usage of shadows and effects. I found myself playing around with gradients to emulate light and used geometric shapes throughout the design for texture and accents incorporating the Bank's identity colors.


I soon found out that most of the Bank of Cyprus' ATM's resides outside so I quickly mocked up the same screen in a light-color scheme for better contrast and to avoid any interference caused by the bright conditions during day time; like glares and reflections. I still kept the dark-color scheme as an option just in case the Backend Engineers could programmatically activate it during night time.

4 Designs Iteration

Color treatments don't always translate well from design to design. So after some feedback from the Bank to apply a color palette from another design submission onto my visual design, I grasped their request and applied it created 4 variations still keeping my initial approach and style.

White / Yellow

Blue / Yellow

White / Blue

Blue / Blue


The visual design was further simplified and design rules were applied for consistancy throughout the user flow to assure a better and clean experience.


The development phase was broken up into 4 different Cycles (Cycles 1, 2, 3, 4). This method gave me the flexibility to work in parallel with the Lead Designer to keep the project moving forward. While previous Cycles screens were still getting approved by the Bank of Cyprus team it allowed my team to stay on track and consequently ahead of the Backend Developers so we could better handle any change requests or stand by for any support necessary.

In this stage it was crucial to have good communication and understanding with the Lead Designer involved. It was essential to stay organized and maintain consistency throughout the design to plan ahead so development could move fast through the different cycles allowing me to leverage a lot of the existing styles created from Cycle 1 components to cascade down to the next cycles in line.

Multilingual Support

Don't compromise your UI Design. Word length can vary greatly across languages, even those that use similar glyphs, such as English and German. In this project the two main languages we needed to support were English and Greek.


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


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 the Lead Developer and past experience in working on the National Bank of Canada ATM project, my team looked up to me to lead the way.

Taking the lead

Due to our tight deadline two other Frontend Engineers were brought on board to help me create the assets needed. I delegated and supervised the Iconography and Animations so later it could be implemented into my build. Always staying in sync with Lead Visual Designer throughout the design and development phases as we worked in parallel. It was crucial to me to have a team who was willing to listen and understand the process and make the necessary changes and updates as I recommended for the sake of the project.

Constant communication and occasional meetings with the Backend Engineers throughout the project were needed as my assistance was required during implementation phase. Luckily, I already new the limitations of the environment we were building for and what kind of problems to expect. Overall, it was as smooth hand off and a successful project.



Animations on the other hand was a bit tricky to solve and required some thinking.


Final Animation

Sprite Animations

The goal and approach I took into developing the animations was to use the most efficient technology for sustainability and longevity of the project using only markup language and SVG assets without the necessary of Javascript language which could potentially interfere with the Developers integration of any other Javascript library.

SVG became a problem when trying to animate in IE11 and I had to resort to an old method of animation using sprites. We ended up using a 24 frame sprite PNG image and used CSS for animate frame by frame in an infinite loop.