CBA Tablet App

Working as part of a product team I was focused on not only visual design, but contributed in the fields of Interaction Design, Motion Design, Copy, Brand Identity, Development, Conceptualisation and User Experience.

Working through sprints on specific features I would work with a UX designer to sketch, prototype, test and iterate on the UX flow.

Alongside the UX process, I was working closely with two other visual designers, Tony Bolcina and Johnny Le to create the design principles and visual language of the app. Together we worked on countless variations until we came up with a language we were happy with and that best represented the brand and experience.

The language we came up with is called Dimension. This is used throughout the app to give a sense of scale and spatial awareness as the user carries out their banking tasks. Dimension uses shadows, blurring and animation to bring the app to life and help the user carry out their tasks.

As the features were taking shape and the UX was standing up to the fortnightly user testing sessions I would work on the visual design of these screens. The design of the app was truly a collaborative effort as we would hold daily review sessions in which we would share what we had done in that day and get important feedback from our peers. These sessions were vital for insuring consistency across the app and to quickly get feedback.

Specifically, I worked on the payment features, settings and support pages while collaborating with the other designers to develop the overall design direction of the app.

As the designs were getting worked on and signed off we would move the assets into a program called PaintCode. This program acts as a global component library, allowing the designers to set the colours, shadows, icons, graphical assets, and animations of the app. These assets are then easily exported into Objective-C for the developers to ingest ingest into their builds.

The benefit of this program was that it gave us control over these elements and allowed us to update as we felt necessary even once these assets had been referenced in the build. This would mean if there was a icon change for example, all we would have to do is update it in paintcode and re-export it, which would then automatically get updated in the build. This saved lots of development time and allowed us to block the build.

One of my main responsibilities on this project was to take charge of the animations and interactions, prototyping them to set the style and timing and working closely with the developers to bring them to life. Throughout the project I experimented with different animation prototyping tools depending on what stage of development we were working on.

Earlier on I would start off with post-it notes cut out into shapes of the interface elements and move them around on my desk to find the best movement and layering of them. As the designs progressed I would move into Flash and animate on the timeline, starting off with plain boxes and eventually adding more detail to represent the designs as they were developed.

For the smaller interface animations I would work in paintcode to create them using their code based animation controls, these were then exported to Objective-C for the build.

The more complex animations were worked on directly with developers, with a reference animation that I would create in flash as a guide to communicate the intent and timing.

This project was an incredible learning experience for me, I have come out of it with a lot more knowledge and appreciation for what goes into making a product.

A better development process – Working hand-in-hand with developers on this app has enlightened me to the importance of collaboration and building those relationships. We created new processes for working together and have built an environment where they are now happy to teach designer’s how to use Xcode and Swift to help us help them. They have even invited me to speak at several developer events since launching this app.

Learnt the value of user testing and failing fast – The fortnightly user testing sessions and daily reviews taught me to fail fast, and learn from these failings. Working on iteration after iteration of my payment flow for example let me get over a design-centric view and let the user experience be a much bigger consideration in my designs.

Found new prototyping methods – I have experimented with many tools for prototyping animation on this project, from flash, quartz code, principle, post-it notes and others. Each one has pro’s and con’s and which tool is right for the job will depend on the complexity and purpose of the animation needed.

Learnt to code – Working closely with the dev’s has heightened my interest in development and has pushed me to learn how to use Xcode and Swift. I attend weekly training sessions and am completing online courses on the subject in order to understand how my designs get built, and how to better communicate to the team.

Within the first week of launching this app made it to the number 1 spot on the App Store under the Finance category. We are now monitoring all the user feedback and working on new features and enhancements to the app going forward.