Time to delight our users.
As consumers we see and interact with micro-interactions every day, often without recognising it.
Even though we’re not fully conscious of the micro animation at the time, often taking them for granted – it doesn’t mean they are not important, far from it actually.
These micro-interactions are what make customers feel good about themselves and feel good using our apps and websites – making user experiences more intuitive and engaging.
“I don’t know what it was about that app but it felt super slick”.
Pizza Hut, YUM! Brands
UX, UI, Concept Art, Illustration, Animation & Final Production.
PURPOSE & INTENT
Micro-Interactions are used to communicate meaningful feedback to the user.
When we perform an action we expect a confirmation animation to happen – clicking a button, scrolling a page or adding an item to the cart. The animations should always be used in a subtle way not to overwhelm the user. Functional animation with a purpose should always be a priority over visual animation for the sake of it.
These are the four parts to Micro-Interactions:
The 2 types of triggers: user-initiated or system-initiated.
Either the user interacts to initiate an action or the system detects certain qualifications are met and initiates an action.
Rules determine what happens when a micro-interaction is triggered.
Feedback updates the user - this could be anything the user sees, hears, or feels when a micro-interaction is happening.
This refers to what happens to a micro-animation when conditions change.
App Screen Loader
The web-wrapper app could
take up to 4 seconds to load
on some older devices.
The animation is used to
disguise the loading lag-time,
creating a seamless experience.
The swirl concept of the animation
is based on the spoon movements
when adding the tomato base to the pizza.
We ran this as an A/B test with and without the animation.
The intention of to bring more delight to the checkout part of the journey.
As fun as the animation is showing the customer how close they are to confirming payment & receiving their food delivery, the animation unfortunately proved to be more of a distraction.
We never ended up using this animation as it proves the point – functional animation with a purpose should always be a priority over visual animation for the sake of it.
In ideal situations there was no lag-time, however on those rare occasions when there was a bad signal or the user had a low internet connection – WorldPay confirmation could take a few seconds.
Only in low-connectivity situations would we display this looped animation. It masked the issue, yet still provided the user with feedback that it was processing the transaction.
Add To Basket
We benchmarked our concepts against existing brand guidelines, assets and materials. Then came up with our own set of guiding principles which included:
Using a limited colour palette, highlighting elements with red to increase sophistication and reinforce the Pizza hut brand colour.
Lines will be “imperfect” and shapes organic to give the images personality and a hand drawn feel.
We focus on the food – the ingredients are our hero, we never use real people.
The animations should work for all markets, Symbolism or imagery should be global.
Based on which tab the customer has selected the relevant animation would loop adding subtle delight to the experience.