interaction design a branding instrument for digital products

Ashutosh Kumar / Yahoo Design

Design-FE Meet-up ���Oct 2013 Bangalore

What is Brand

A brand is the set of expectations, memories, stories

and relationships that, taken together, account for a

consumer’s decision to choose one product or service

over another. Seth Godin author and digital marketer

“ ”

/*It is the creation of consistently positive, appealing presence

/*Symbols, slogans and promises are not enough

/*The ascent of interaction design is critical

/*Most important is

For Digital Brands

∞ where the brand works

with customers

how the brand works

with customers

brand interaction

brand interface

A successful Product/Service design should

* Optimize

Engage

Empower

Express

Connect

Disrupt

Making daily activities more efficient Capturing attention, creating delight and delivering meaning Enabling people to go beyond their limits Encouraging self expression and/or creativity Facilitating communication between people and communities Re-imagining by creating new behaviors, usages or markets

Opportunities for interaction design

Images: ebay.inc

40s

60s 90s

Now

Brand interaction is evolved with time

Images: ebay.inc

40s

60s 90s

Now

Brand interaction is evolved with time

Creativity

Proficiency

Usability

Reliability

Functionality

When is the right time to do it While other bases are covered;

products need to carry a

brand personality

If organization's brand attributes

are "high performance",

"forward-thinking" and "precise",

the digital presence or products

must reflect that. Derived from Maslow’ hierarchy of need

Create distinction thru Interaction

When the interaction is unique, users can begin to associate that

interaction with your product. If you can own an interaction, that’s a

very strong level of branding in today’s interface-filled world.

Matthew Moore (2013) Branded Interactions Matthew Moore author and designer

“ ”

Our responsibility = To create great interactions + To convince others to use

Brand distinction -Yahoo Weather

Credit: Yahoo images

Subtle animation and movements defining a distinct design language

Brand distinction -Tumblr , Vine , Dolphin

Credit: Yahoo images

Portraying one signature interaction as product differentiation instrument

Create your signature interaction

Credit: Dribble

Keep it simple, unique and just one

Credit: Dribble

/ custom hover effects

/ dynamic notifications

/ Actions

Credit: Tympanus

Apply it subtly to right areas of UI

Branded and personalized messaging /*Make error handling quirky

/*Use fun and creative approach to apologize 

/*Make it branded, informative and helpful

But how…draw from adjacent industries

Leveraging transition concepts uitransitions.com

SQUASH AND STRETCH ANTICIPATION STAGING

STRAIGHT-AHEAD FOLLOW-THROUGH SLOW IN AND OUT

Applying Motion Design Principles More info

Lets exploite contemporary technology

Cross pollinating CSS3 transitions and

motion design concepts Credit: youtube

Thank you!