Expressing brand personality in the UI with animation

Question

Working on giving some character to the APP UI by coming up with some animation presets. These could be used on various elements of the app and will be included in a style guide.

Hope to follow a process similar to https://ustwo.com/blog/infusing-brand-spirit-into-the-ui-of-knopka/.

Here's some examples of various characters that might represent a brand and their personality in terms of animation, that might be a good starting point.

• Playful character (Pluto): heavy on easing and bounciness
• Serious character (Bob the builder): quick and precise, almost no easing. No bounciness
• Sensual character (Jessica Rabbit): Smooth easing. Subtle slower animation and fading opacity

Our brand's character might be a combination of 2 or 3 of these.

Note: the output of this is NOT coming up with a brand mascot, but coming up with a UI personality. The expected answer should be more process focused rather than implementation details. It could either provide a whole design process or takeaways you've had on designing brands that could apply to my context.

References

• http://www.beyondkinetic.com/motion-ui-design-principles/
• https://24ways.org/2015/animating-your-brand/
• http://www.andypratt.net/interface-personality/

Answer 1

If we are discussing this from the perspective of doing the brand mascot

I would tackle it as a two-fold process:

1. Mascot design, which will involve the character design process

You will need to start with formalizing the brand characteristics that have to be infused into the mascot. This will also help with the animation. This can be handled with many techniques. My preferred two: word list (list 30 words that describe the brand and desired look and feel that should go into the mascot design) and mood boards (a collage design that combines inspiring imagery and gives a good gut feeling of what the mascot design should communicate). https://en.wikipedia.org/wiki/Mood_board

This will help you create a compound of brand identity connotations that will serve as a guidelines for the design.

Next, do the mascot design itself. It may already be done, but in case it is your task, these are the resources I find useful:

Best app mascot designs http://mashable.com/2010/06/07/best-mascots/#pEGgaO7omkqa Hootsuite mascot design process http://lauraeagin.com/designing-an-app-mascot Character Design inspiration Pinterest board https://www.pinterest.com/explore/character-design/

As opposed to the animated video character designs (like Pixar characters), mascots are generally kept minimalistic, cartoonish, simple and cute. Cuteness is a huge factor that should never be underestimated. Animal mascots are the most popular technic (and it is a whole anthropologic issue in it's own right and deserves a separate discussion ;-).

2. Mascot animation

There are two great resources I have found fascinating: The choreography of animation for UX designers, an article written by an UX designer in collaboration of one of the Disney father founders. https://medium.com/@becca_u/the-principles-of-ux-choreography-69c91c2cbc2a

And the "Illusion of life", the video about 12 main animation principles that explains how animation works and what makes us recognize the emotions in the movement. https://vimeo.com/93206523/

If we are discussing this from the perspective of doing just the UI animation, like the Android video you have shown in the other question

All of the above still applies, with two caveats: the items you will animate will not be an anthropomorphic objects (but they sure can be, think the Pixar Lamp), and the animations will be simpler. But the principles are the same. What you need to transmit is the character, so treat the elements like they are alive and reacting.

Which elements of UI typically need to be animated, from the top of my head:

• Those that need to attract users' attention: tour guide indicators, notifications, etc.
• Those that move the user or UI from some state to another: transitions, loaders, change of status indicators, etc.
• Those that gamify the experience: badges, points, achievements, hats, etc.

Since your app is an e-commerce, there is plenty of UI elements you could animate in both fun and down-to-business way (I would steer clear of sensualism, it's very subjective and can drive a part of TA off): loaders, purchase state indicators, badges, notifications, gifts etc.

Commerce as a topic has plenty of symbolic material to work with. For instance, carts and shopping baskets that bounce happily when user hits "Purchase", credit cards that slide through the terminal, a loader that could look as a present that unwraps itself, a shopping bag that happily goes green to show the eco standard of the app, a gift certificate bouncing for a few seconds in the ancillary panel, flying parcel for the shipment progress bar. And so on and so on.

Answer 2

I think you can check mailchimp's example. When you completed your email campaign on their platform, their brand character chimp will shows up and give you a high-five. I don't remember if the chimp actually do a high-five(raise his hand) or its the whole image just pops-up.

You might want to run a quick test if those character does means something for your users or not. I'm not sure your strategy of 3 characters but you should have a consistency on the brand voice, character. Ex: is your brand a "out-going" or a "serious businessman"?

In most of case we will use motion as part of interaction and you can see widely used in icons, button, when you complete a step...etc.

Check out http://www.materialup.com they have lots of inspiration.

Answer 3

Tying up Brand, Interface and Animation

My source of inspiration on how to push the boundaries of Interface Design and motion graphics is Dribbble.

You will see plenty of examples of two categories of animation there.

One is at a more granular level, can be a logo, an interface. For example, how a hamburger icon reacts when a user taps it and morphs itself int a cross icon.

The other set of categories that you might see is the animation in the application as a whole.

I have been collecting these examples over a period of time and have shared my dribbble buckets to demonstrate both the categories.

Interface Animation > https://dribbble.com/vjaybaskr/buckets/277280-AwesomeAnimation

Animation while Interacting in Mobile Apps > https://dribbble.com/vjaybaskr/buckets/272123-MobileInteractions

Now to tie up brand, animation and interface, one of the best source of inspiration is Dropbox. Again you can find it all in Dropbox account on Dribbble. > https://dribbble.com/dropbox

The reason why i quote Dropbox is that the designers at Dropbox dish out their experiments with the interfaces and animation and consistently take to the production site. Note that this is a evolutionary process and a result of consistent experiments and tests before making it a part of the brand.

I hope you find some inspiration from these references

Answer 4

Good question, my 2 cents as an e-commerce user (okay, maybe 3)

Do By putting an animation in front of me, you are expecting me to pay attention to the same (maybe first time it'll be a thrill, but not everytime) when I just came here to make a purchase. I will be okay to pay attention to

• product features
• feature comparison
• price fall/swing

if you are adding animation to express these things, it will be more useful to me as long as it adds to the experience and not divert attention from what I want to focus on (those 3 things above).

Don't If I am browsing the list of products and each product has some animation on it, then it may get quite confusing. If the animation is on filters, it will make no sense. You can tell me while I am scrolling down what just went by (a product which I added to my wishlist once, etc) and what I can expect while coming down. But keep the focus on the fact that I am still analyzing the choices in front of me, don't take the focus away from it.

Do I am on the brand store (not the usual list), then this is your best chance to show me your brand experience via animation. You can keep the focus on three things that I care about most when I am on brand store

• features (obviously), show if there are improvements from last time via animation
• user feedback
• next sale date

Hope this helps.

Answer 5

Have you created/designed any moodboards for your brand? This could help figure out the style and character of the animations. Also knowing your target demographics, personalities etc. should help. (corporate vs. young professionals vs. geeks vs. women etc.)

Whatever the style you decide, don't forget that animation must contribute positively to the overall experience. So don't animate if there is absolutely no need or have no benefit to the user. Ask yourself 'why' do you need to animate a certain object (waiting to load, closing a modal, just because it looks nice?)

I find animations in apps entertaining at first but after few uses they get old pretty quickly (if not annoying) so make sure it is subtle and does not disrupts the flow (e.g. don't ever let user to wait for an animation to complete, like making a button clickable after finishing its beautiful spin for ten seconds - you know what I mean)

Probably does not answer your question but after working on few projects with people who want to make a cartoon movie not a web app, I have become a bit more cautious!

Answer 6

Shopify used bag mascot , since it is e commerce , bag mascots are popular in this e-commerce area, I strongly advice that you should look for similar mascot designs for your app.