Bank of CyprusATM Project
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.
Dark
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.
Light
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
Development
The visual design was further simplified and design rules were applied for consistancy throughout the user flow to assure a better and clean experience.
Development
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.
