OVERVIEW

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”.

PROJECT

Multiple

CLIENT

Pizza Hut, YUM! Brands

MY ROLE

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:

Trigger

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

Rules determine what happens when a micro-interaction is triggered.

Feedback

Feedback updates the user - this could be anything the user sees, hears, or feels when a micro-interaction is happening.

Meta-Rules

This refers to what happens to a micro-animation when conditions change.

REQUIREMENTS

App Screen Loader

TRIGGER
System initiated.

CONSTRAINTS
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.

ANIMATION
The swirl concept of the animation
is based on the spoon movements
when adding the tomato base to the pizza.

UX EXPERIMENT

Payment Animation

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.

LOOPED

UI Animations

As always, there is controversy surrounding pineapple on pizza – so we created an alternate with a tomato character. I created these in Adobe Animate with a Wacom tablet and exported as looped GIFs.

UI ANIMATION

Order Tracker

LOADER ANIMATION

Pendulum

UI ANIMATION

Continue

UX EXPERIMENT

WorldPay Animation

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.

RESEARCH

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.

UX EXPERIMENT

Localisation Animation

Based on which tab the customer has selected the relevant animation would loop adding subtle delight to the experience.