ATM UI Re-Design Project
Mission
UI Re-design project for Scotiabank’s new ProFlex4 ABM (Automatic Banking Machine) system in the Caribbean market. The result will impact ATM users across 22 countries in that market.
What I Have Accomplished
There are 26 new UI screens that we have designed in the project. A package of Visual Composition and Specification guide was also created and delivered to the ATM development team.
My Role
As a Visual Designer, I was responsible for designing and creating wireframes, mockups and visual graphic assets of the new UI Design. I was also reponsible in designing & creating styleguides to document the new UI design.
First of all, we went to do a little field research/study on the ATM transaction flow from other competitor's machine and then compare them with Scotiabank's exisiting flow to seek for possible improvement. We video typed a few transaction flows from different banks during this research phase.
We first went through numbers of brainstorming sessions and came out with a few UI re-design ideas as a team. However, due to the budget limitation and time allowance, we have decided to work around the existing UI features and re-design their visual assets to improve the overall look and feel.
We studied the entire old ATM flow and identified the key/unique screens that we need to re-design.
A simple comparison between an old ATM flow and a new one after we improved and optimized the old one.
Samples of new ATM UI Design that we have completed.
With help from the Development team lead, we get to study the backbone structure of a web-base ATM system. For instance, Scotiabank ATM is using a web-based UI system named UI-ProFlex4 UI. This is very important phase, as we need to implement our newly designed UI by modifing the exisiting html5 and CSS structures of ProFlex4 UI.
I also need to hand code html5 and CSS to rapid prototyping a new UI Design so that the development can speed up the production process on their end. Above is a screen capture of a html5 web page that I created for this purpose.
A sample page of the visual specification guide that we have created for this project. There were 43 pages for this style guide.