Getting Your UI/UX to Oooze With Brand Yumminess

1,799 views

Published on

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

Published in: Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,799
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Interaction Design- Flow of users through the systemInformation Architecture - Wireframe - Categories of navigation -
  • Information Design - Layering -How are we going to say it - How are we going to present it
  • Getting Your UI/UX to Oooze With Brand Yumminess

    1. 1. Getting Your UI/UX to Ooooozewith Brand Yumminess<br />Kevin Skarritt<br />CEO/Owner<br />Flock Marketing<br />Grand Ledge, MI<br />@skarritt<br />#MiUPA<br />
    2. 2. Introduction to Brand<br /><ul><li>A 9 Second Test</li></li></ul><li>Introduction to Brand<br />Fast Food<br />McDonalds<br />Burger King<br />Wendy’s<br />Subway<br />Taco Bell<br />Hardees<br />KFC<br />Arby's<br />Dairy Queen<br />Chick-Fil-A<br />Del Taco<br />Sonic<br />In-and-Out<br />White Castle<br /><ul><li>Cola
    3. 3. Coke
    4. 4. Pepsi
    5. 5. RC Cola
    6. 6. Faygo
    7. 7. Red Bull Cola
    8. 8. Crown Cola
    9. 9. Sam’s Cola
    10. 10. Go Cola
    11. 11. Athletic Shoes
    12. 12. Nike
    13. 13. Addidas
    14. 14. Reebok
    15. 15. Puma
    16. 16. Converse
    17. 17. Rockport
    18. 18. Saucony
    19. 19. Airwalk
    20. 20. Avia
    21. 21. New Balance
    22. 22. Fila
    23. 23. Brooks
    24. 24. Osiris
    25. 25. Diadora</li></li></ul><li>Pieces of Brand<br />Products/Services<br />Customer<br />Company<br />
    26. 26. Pieces of Brand<br />
    27. 27. Pieces of Brand<br />
    28. 28. Archetype Connection<br />
    29. 29. Carl Jung & Archetypes<br /><ul><li>Why Archetypes?
    30. 30. 12 Archetypes:
    31. 31. The Mother
    32. 32. The Hero
    33. 33. The Jester
    34. 34. The Artist
    35. 35. The Ruler
    36. 36. The Angel
    37. 37. The Guru
    38. 38. The Lover
    39. 39. The Magician
    40. 40. The Outlaw
    41. 41. The Neighbor
    42. 42. The Explorer</li></li></ul><li>Archetype #1 — The Artist <br />Also known as:<br />Creator, inventor, innovator, musician, writer, dreamer<br />Strategy<br />Examples<br />Lego, Crayola, Sony, Swatch, 3M<br />
    43. 43. Archetype #2 — The Neighbor <br />Also known as:<br />Regular guy, everyman, realist, working stiff, solid citizen<br />Strategy<br />Examples<br />Maytag, Saturn, Wendy’s, Charles Schwab, Dodge<br />
    44. 44. Archetype #3 — The Lover <br />Also known as:<br />Partner, friend, intimate, enthusiast, spouse, romantic<br />Strategy<br />Examples<br />Hallmark, Chanel, Jaguar, Haagen Dazs<br />
    45. 45. Archetype #4 — The Jester <br />Also known as:<br />Trickster, fool, joker, comedian<br />Strategy<br />Examples<br />Pepsi, M&M, Ben & Jerrys, AFLAC<br />
    46. 46. Archetype #5 — The Mother <br />Also known as:<br />Caregiver, nurturer, saint, altruist, parent, helper, supporter, hand holder<br />Strategy<br />Examples<br />Campbells, Volvo, Allstate, GE<br />
    47. 47. Archetype #6 — The Guru <br />Also known as:<br />Sage, expert, scholar, thinker, academic, planner, mentor, teacher<br />Strategy<br />Examples<br />CNN, McKinsey, Barnes & Noble, Wall Street Journal<br />
    48. 48. Archetype #7 — The Angel <br />Also known as:<br />Innocent, utopian, mystic, dreamer<br />Strategy<br />Examples<br />Coke, McDonalds, Ivory Soap, Baskin Robbins<br />
    49. 49. Archetype #8 — The Explorer <br />Also known as:<br />Pioneer, seeker, wanderer, pilgrim, individualist<br />Strategy<br />Examples<br />Starbucks, Jeep, Bounty<br />
    50. 50. Archetype #9 — The Hero <br />Also known as:<br />Champion, warrior, rescuer, superhero, dragon slayer, winner<br />Leader, crusader, general, team player<br />Strategy<br />Examples<br />Nike, FedEx, The Marines<br />
    51. 51. Archetype #10 — The Rebel <br />Also known as:<br />Outlaw, misfit, revolutionary, wildman<br />Strategy<br />Examples<br />Harley Davidson, Napster, Apple<br />
    52. 52. Archetype #11 — The Magician <br />Also known as:<br />Visionary, alchemist, catalyst, shaman, healer, medicine man<br />Strategy<br />Examples<br />Calgon, MasterCard, Dupont, Lucent, Axe<br />
    53. 53. Archetype #12 — The Ruler <br />Also known as:<br />Boss, aristocrat, king/queen, politician<br />Strategy<br />Examples<br />IBM, Mercedes, Hilton, EF Hutton, Microsoft<br />
    54. 54. POP QUIZ!! <br />
    55. 55. Calvin Klein<br />“Between Love and<br />Madness Lies Obsession”<br />
    56. 56. Toyota<br />“Moving Forward”<br />
    57. 57. UI/UX<br />You might now be asking… <br /> “How does this affect UI/UX development?”<br />OR<br /> “How do I get my UI/UX to ooze<br /> with brand yumminess?” <br />
    58. 58. Elements of User Experience<br />Jesse James Garrett<br /> “Elements of User Experience”<br />
    59. 59. Fun With a Mock Case Study<br /><ul><li>Draw on Coupon-Chic
    60. 60. Local with plans for expansion
    61. 61. Established client-base
    62. 62. 72% Moms
    63. 63. Mother Archetype</li></li></ul><li>The Strategy Plane<br />From JJG…<br />User Needs: Externally derived goals for the site; identified through user research, ethno/techno/psycho-graphics, etc.<br />Site Objectives: Business, creative, or other internally derived goals for the site<br />
    64. 64. The Scope Plane<br />From JJG…<br />Functional Specs: “Feature Set” detailed descriptions of functionality the site must include in order to meet user’s needs<br />Content Requirements: Definition of content elements required in the site in order to meet user needs<br />
    65. 65. The Structure Plane<br />From JJG…<br />Interaction Design: Development of application flows to facilitate user tasks, defining how the user interacts with site functionality<br />Information Architecture: Structural design of the information space to facilitate intuitive access to content<br />
    66. 66. The Skeleton Plane<br />From JJG…<br />Interface Design: Design of elements to facilitate user interaction with functionality<br />Info. Design: Designing the presentation of information to facilitate understanding<br />Nav Design: Design of navigation elements to facilitate the user’s movement through the information architecture<br />
    67. 67. The Surface Plane<br />From JJG<br />Graphic treatment of interface elements (the “look and feel”)<br />Visual treatment of text, graphic page elements and navigational elements<br />
    68. 68. Group Exercise<br />Groups of 5 to 7<br />Review the interface provided<br />Discuss how things might change if they adopted the designated archetype<br />User Needs, Site Objectives<br />Functional Specs, Content Req’s<br />Interaction Design, Info. Architecture<br />Interface/Nav Design, Info. Design<br />Visual Design<br />Other Ideas?<br />
    69. 69. Wrap it up …<br />Brand evolves … it’s not created<br />Emotional connection & differentiation<br />Entire team needs to speak with one voice<br />Find (and empower) your brand evangelists <br />Questions?<br />
    70. 70. Connect With Me…<br />1-888-FLOCK-88<br />kevin@flockmarketing.com<br />@skarritt<br />facebook.com/skarritt<br />facebook.com/flockmarketing<br />linkedin.com/in/skarritt<br />Time for a door prize!!!<br />Try this … Text “fan flockmarketing” to 32665<br />

    ×