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.
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!
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.
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.
Know what you are working with.
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, on the other hand, were a bit tricky to solve and required some thinking.
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.
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 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
Prepare (written material) for publication by correcting, condensing, or otherwise modifying it.
Préparer (matériel écrit) pour la publication en le corrigeant, en le condensant ou en le modifiant de toute autre manière.
Because everyone should have a great experience.
Identify the step by step interaction for blind or low vision users that require voice guidance.
Key objectives:
It's not over until it's over.
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.
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.
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.