Presentation first given to MiUPA.org at TechSmith in Lansing, MI - 05/19/2011

1. Getting Your UI/UX to Ooooozewith Brand Yumminess Kevin Skarritt CEO/Owner Flock Marketing Grand Ledge, MI @skarritt #MiUPA

3. Coke

4. Pepsi

5. RC Cola

6. Faygo

7. Red Bull Cola

8. Crown Cola

9. Sam’s Cola

10. Go Cola

11. Athletic Shoes

12. Nike

13. Addidas

14. Reebok

15. Puma

16. Converse

17. Rockport

18. Saucony

19. Airwalk

20. Avia

21. New Balance

22. Fila

23. Brooks

24. Osiris

26. Pieces of Brand

27. Pieces of Brand

28. Archetype Connection

30. 12 Archetypes:

31. The Mother

32. The Hero

33. The Jester

34. The Artist

35. The Ruler

36. The Angel

37. The Guru

38. The Lover

39. The Magician

40. The Outlaw

41. The Neighbor

43. Archetype #2 — The Neighbor Also known as: Regular guy, everyman, realist, working stiff, solid citizen Strategy Examples Maytag, Saturn, Wendy’s, Charles Schwab, Dodge

44. Archetype #3 — The Lover Also known as: Partner, friend, intimate, enthusiast, spouse, romantic Strategy Examples Hallmark, Chanel, Jaguar, Haagen Dazs

45. Archetype #4 — The Jester Also known as: Trickster, fool, joker, comedian Strategy Examples Pepsi, M&M, Ben & Jerrys, AFLAC

46. Archetype #5 — The Mother Also known as: Caregiver, nurturer, saint, altruist, parent, helper, supporter, hand holder Strategy Examples Campbells, Volvo, Allstate, GE

47. Archetype #6 — The Guru Also known as: Sage, expert, scholar, thinker, academic, planner, mentor, teacher Strategy Examples CNN, McKinsey, Barnes & Noble, Wall Street Journal

48. Archetype #7 — The Angel Also known as: Innocent, utopian, mystic, dreamer Strategy Examples Coke, McDonalds, Ivory Soap, Baskin Robbins

49. Archetype #8 — The Explorer Also known as: Pioneer, seeker, wanderer, pilgrim, individualist Strategy Examples Starbucks, Jeep, Bounty

50. Archetype #9 — The Hero Also known as: Champion, warrior, rescuer, superhero, dragon slayer, winner Leader, crusader, general, team player Strategy Examples Nike, FedEx, The Marines

51. Archetype #10 — The Rebel Also known as: Outlaw, misfit, revolutionary, wildman Strategy Examples Harley Davidson, Napster, Apple

52. Archetype #11 — The Magician Also known as: Visionary, alchemist, catalyst, shaman, healer, medicine man Strategy Examples Calgon, MasterCard, Dupont, Lucent, Axe

53. Archetype #12 — The Ruler Also known as: Boss, aristocrat, king/queen, politician Strategy Examples IBM, Mercedes, Hilton, EF Hutton, Microsoft

54. POP QUIZ!!

55. Calvin Klein “Between Love and Madness Lies Obsession”

56. Toyota “Moving Forward”

57. UI/UX You might now be asking… “How does this affect UI/UX development?” OR “How do I get my UI/UX to ooze with brand yumminess?”

58. Elements of User Experience Jesse James Garrett “Elements of User Experience”

60. Local with plans for expansion

61. Established client-base

62. 72% Moms

64. The Scope Plane From JJG… Functional Specs: “Feature Set” detailed descriptions of functionality the site must include in order to meet user’s needs Content Requirements: Definition of content elements required in the site in order to meet user needs

65. The Structure Plane From JJG… Interaction Design: Development of application flows to facilitate user tasks, defining how the user interacts with site functionality Information Architecture: Structural design of the information space to facilitate intuitive access to content

66. The Skeleton Plane From JJG… Interface Design: Design of elements to facilitate user interaction with functionality Info. Design: Designing the presentation of information to facilitate understanding Nav Design: Design of navigation elements to facilitate the user’s movement through the information architecture

67. The Surface Plane From JJG Graphic treatment of interface elements (the “look and feel”) Visual treatment of text, graphic page elements and navigational elements

68. Group Exercise Groups of 5 to 7 Review the interface provided Discuss how things might change if they adopted the designated archetype User Needs, Site Objectives Functional Specs, Content Req’s Interaction Design, Info. Architecture Interface/Nav Design, Info. Design Visual Design Other Ideas?

69. Wrap it up … Brand evolves … it’s not created Emotional connection & differentiation Entire team needs to speak with one voice Find (and empower) your brand evangelists Questions?

70. Connect With Me… 1-888-FLOCK-88 kevin@flockmarketing.com @skarritt facebook.com/skarritt facebook.com/flockmarketing linkedin.com/in/skarritt Time for a door prize!!! Try this … Text “fan flockmarketing” to 32665