My Role

As a Lead Frontend Engineer in this project and the only developer on the CXD (Consumer Experience Design) team at NCR Corporation at the time, I worked closely with the Lead Designer to bring the approved designed screens to life as an interactive prototype to present to the Bank for further approval.

My role working on the National Bank of Canada (NBC) was to revamp my teams process by eliminating the Measurement Guidelines material and provide working Frontend code ready for Developers to assure the best ATM Software final result.

The Process

How I revamped a Company's process to provide a better deliverable solution for a fail-proof implementation for a one-to-one final result? Currently, the main method used today!

Guidelines Measurements

At NCR Corporation, Guidelines Measurements were the main form of deliverables to third party teams for final implementation. Many times, this resulted in improper frontend integration of approved designed screens.

  • 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 took into my own hands in improving the Company's existing process and provide a better solution. This would be the first time my team would be providing production ready code to any other team for implementation.

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

Challenges & Requirements

Know what you are working with.

Hardware Limitations

As we all know, not every project is created equal, and the legacy ATM hardware environment I was about to develop for and the browser it supported was one of the challenges I faced going into this project. The code needed to be compatible with one specific browser, IE11 (Internet Explorer 11). Knowing the limitations and past experiences, I made sure that my team kept the design very simple so styles would translate well and show up perfectly as intended inside the ATM.

Animations

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

Assets

Final Animation

The Goal

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 static image files and old methods of animation. HTML and CSS was used for animating the assets which were broken down into separate pieces. This is where I needed to learn to adapt and look at the overall benefit of the project. Give or take it was the best choice, as the overall result loaded up fast inside the ATM.

Multilingual Support

Don't compromise your UI Design.

Language

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 French.

If your UI uses multiple languages, then your typography layout should vary depending on the language. Languages have different average word lengths and heights, affecting how it appears across UIs. With this in mind, creating a nimble and compact design for such a small screen was challenge to make sure design was not compromised.

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

Because everyone should have a great experience.

Voice Guidance

Identify the step by step interaction for blind or low vision users that require voice guidance.

Key objectives:

  • Ensure that the ATM is easy to use and provides accessibility for all users.
  • Demonstrate proposed step by step experience.
  • Expecting that this could function similar to a “tour” or blank state interaction.
  • The thought is that only the active step would be white and everything else would be dimmed out. See page 12.

Implementation & Support

It's not over until it's over.

Team Player

Final steps; I stood on standby as Angular base code was implemented into the existing frontend templates I had delivered. Further provide support as code changed in the process of data binding, making sure overall look and feel remained accurate to approved screens designed and layout did not break. This was a crucial part for me to be involved in and I had to pay extra attention to the work being done as there were too many hands in the kitchen at this point (Approximately 20 Backend Engineers).

It was a requirement for me to be flown from our base office in Orlando, Florida to the city of Montreal in Quebec, Canada to help and over see the work being done by Backend Engineer team on their final development sprints before it finally being delivered to the Bank for launch.

The Experience

As the only Frontend Engineer evolved on the project from start to finish, it gave me a lot to deal with, the expectation and responsibility was very high. This was probably my most stressful project thus far at the company, most of the pressure fell on my shoulder to complete these screens and support a large team of Backend Engineers.

Success

Overall a great experience, this project has helped me understand the importance of staying organized, to plan ahead so there are no unforeseen hiccups on the way, or the necessity of going back to fix silly mistakes that could have been prevented ahead of time.