Talk at Design and front-end Engineering professional meet-up Oct 2013 in Bangalore.

1. interaction design
a branding instrument for digital products
Ashutosh Kumar / Yahoo Design
Design-FE Meet-up
Oct 2013 Bangalore

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

3. /*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

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

5. Images: ebay.inc
40s
60s
90s
Now
Brand interaction is evolved with time

6. Images: ebay.inc
40s
60s
90s
Now
Brand interaction is evolved with time

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

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

9. Brand distinction -Yahoo Weather
Credit: Yahoo images
Subtle animation and movements defining a distinct design language

10. Brand distinction -Tumblr , Vine , Dolphin
Credit: Yahoo images
Portraying one signature interaction as product differentiation instrument

11. Create your signature interaction
Credit: Dribble

12. Keep it simple, unique and just one
Credit: Dribble

13. / custom hover effects
/ dynamic notifications
/ Actions
Credit: Tympanus
Apply it subtly to right areas of UI

14. Branded and personalized messaging
/*Make error handling quirky
/*Use fun and creative approach to apologize
/*Make it branded, informative and helpful

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

17. Lets exploite contemporary technology
Cross pollinating CSS3 transitions and
motion design concepts
Credit: youtube

18. Thank you!