ANZ — Motion & Gesture Framework
The most fluid, delightful and intuitive experiences were always the ones that put detail into a well planned and purposeful animation. It captivates your audience and permeates the design with a moment of wonder and a sense of superb craftsmanship.
It encourages deeper exploration of a design. It helps add a tactile element to interactions because it makes you forget you may just be tapping a piece of glass and instead makes you feel like you’re interacting with real elements on the screen. It’s nice to feel like things are reacting to what you’re doing. They appear tangible, even though they are behind a layer of glass (the device screen).
A well-considered animation influences people’s perception and trust in your product. They are more than just a good user experience. They have emotional appeal which overall creates a more positive and enjoyable experience.
A small selection of prototypes across different projects that I have done.
1. Motion should be used to communicate meaning
One purpose of motion within goMoney is to help guide users through the app. Superfluous animation could make users feel disoriented, and also make the app feel less polished (star-wipes anyone?). Consider where the user is, where they're going and the purpose of the element's animation.
It will usually fall into one of the following categories:
When should motion be smart?
Motion with a smart tone should be considered for core interactive components of the app – those with more utilitarian functions, where it isn't suitable to be too playful. This type of animation can also be used to mask any technical flaws or imperfections. Eg: form fields, tumbler/carousel components, transitions, loading animations, buttons, validation messaging, notifications or toggles.
When should motion convey security?
Whenever the user is making a payment, verifying their identity or performing a serious task, we should try to portray security through the motion of the elements they interact with. This tone of animation will be a lot more solid, systematic and stable than the other tones. The aim of this is to assure the user that everything is locked down and under control.
When should motion be friendly?
This tone is reserved for more lighthearted interactions rather than serious ones. Playfulness and delight can often amplify pre-existing feelings of happiness/satisfaction. Eg: onboarding messages, empty states, icons, some modals/dialog boxes.
Performed a design audit to look at the main flow (page-to-page) of the app and assigning a key tone to each of the screen.
Other digital channels
Designers from other digital channels were tasked to perform similar audits. During our weekly sprints, we will gather and discuss the patterns that have been established and further refine them. The objective is to propose a consistent motion building blocks that are versatile across different digital channels.
Valence vs Arousal
We monitor the emotions of each of the design pattern across a bipolar scale defined in a continuous dimension ranging from pleasant to unpleasant. By studying the behaviour of each pattern through user testings, we are able to plot them on the chart and design them more appropriately. We separate screens that get triggered on a "good" emotion or "bad" emotion within a range of arousal magnitude.
If you are interested, you can read more on how we define interface tonal patterns.
Each screen will have a certain personality traits and it is contextual and it adapts to the moment.
The ease and functionality of a mobile device is shifting the way we think about interactivity. It is ushering in a new age of UI that favours a more direct form of interaction. In ANZ, gestures are more than merely entertaining, they are useful. We investigate different touch mechanics on different contexts. We propose gesture-based controls that are natural, or at least can be picked up quickly.
Gestures help pave the way for more meaningful interaction as it enables speed in user action once it is learned.
A quick way to check your balance on the go on selected accounts. Always have your balance one swipe away so you take out the guesswork with your money without even login in.
An edge swipe from the top to quickly reveal a summary about the user's spending.
Selecting multiple transactions will give you a quick total of a user's spending.
A google-inbox esque interaction. A quick tap on a transaction will get you further information about a particular transaction. A drag on it will dismiss it.
As the user scrolls through the transactions, the masthead will slide off along with the status bar and the date label will anchor to the top of the screen. If the user prefers to plough through the transactions, interacting with the scrolling device will give the user the ability to quickly jump to a preferred timestamp.
Transfer funds is the most used feature in goMoney app. Hence it makes to introduce a drag and drop gesture for a quick transfer of funds between accounts.
Re-ordering accounts into the user's preferred hierarchy. When the account is dragged, it will transition into a contained pill size to visually signify an easier droppable action.
Prototypes are done using my personal prototype build tool using mainly Framer.js and GSAP as the foundation. It is code oriented and open to future technologies such as other APIs integration, AR/VR and is able to tap into native functionalities of a device such as gestures, force touch, gyroscope, accelerometer, etc.
Sometimes we will create a particular animation using After Effects or other prototyping tool that is hard to articulate in coding sense. Scrubbing through a video back and forth wouldn't help the development much. Hence a motion brief with clear annotations and specific animation details is given to the developers for ease of build.
Depending on the development team and code architecture. A motion brief will be less relevant if the development team is using an AE to native animation converter library.
After Effects to iOS and Android animation converter:
We have adopted Google design sprint methodology. It is simply a structured brainstorm based on design thinking and agile development. https://developers.google.com/design-sprint
All the process are documented within Confluence.
During the diverging phase, we explored tons of ideas with pen and paper. If there is an idea that warrants further expression and details, we will work on it further. We will flesh out ideas with their respective key motion steps.
A series of patterns were vetted through user testings and the design team. They are constantly improved, refined and serve as building blocks for detailed design.