Brand Expression

UI/UX/Code .

Brand Expression is an animated UI toolkit for Barclays. It is a top level investigation into how the Barclays brand can express itself through motion design. The overarching principles are covered in the overview section. They are illustrated with interactive prototypes listed in the BMB and ROLB sections. These are illustrative of how motion could work in situ.

The purpose of the interactive examples is to communicate design intention and initial concepts. They promote discussion around brand expression and are used to inspire an overall approach to animation.

We created all the motion elements through After Effects and the plugin Bodymovin after investigating few different options to create the most impactful prototype. We then, built a structure around it to easily navigate among those components and have a better understanding of the message conveyed. The idea behind this framework, was to make it simple to implement the principles for both developers and designers.

Applied correctly, motion should help make the experience feel seamless, elegant, and more rewarding.

Motion within the interface should be implemented with thoughtful consideration. It should never obstruct or slow down the user experience. It should introduce useful or delightful feedback to the user and should help guide, orientate and reassure them.

This project is the first version of a general overall rethinking around motion. It has been created to open a conversation about personnality through Barclays digital ecosystem. Working as a small team at a quick pace within a large corporation, helped them to push quickly some new interactive elements in their apps and websites to test the different principles we highlighted. After succesfully laying out those first principles, we are now refining them based on users and internal inputs.