Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Funny Business: Using Comics in the Design Process

Jamie Thomson Pate
September 20, 2008

Funny Business: Using Comics in the Design Process

NOT my presentation - posted with permission for archiving/linking purposes. Workshop by Amy Cueva of Mad*Pow, from UPA Boston 2008. Originally posted at http://www.slideshare.net/AmyCueva/UsingComicsInTheDesignProcessUPABostonCueva (some strange font issues over there now)

Jamie Thomson Pate

September 20, 2008
Tweet

More Decks by Jamie Thomson Pate

Other Decks in Design

Transcript

  1. Prepared by:
    Amy Cueva – Founder & CXO
    Mad*Pow
    603.436.7177
    September 20, 2008
    Funny Business - Using Comics in the Design Process
    WORKSHOP FOR UPA BOSTON

    View full-size slide

  2. Introduction
    Hey, I`m Amy. I
    work at Mad*Pow,
    an Experience
    Design Firm.
    We`re really excited
    about the results, and
    I`m here to share
    some tips with you!
    We`ve been using
    comics in the design
    process to help us
    communicate…
    Integrating thinking
    from the work of
    McCloud, Cheng,
    Sadaca, and Hardee.

    View full-size slide

  3. Introduction
    First off, How
    many of you have
    used comics in the
    design process?
    What brings you here
    today?
    For those who have,
    how did it work out?
    For those who
    haven`t, what
    have you heard?

    View full-size slide

  4. Things we will cover…
    Introduction to Comics
    Why use Comics?
    When to use Comics?
    How to Introduce Comics
    Samples of Comics
    Different Methods
    An Exercise
    Q&A

    View full-size slide

  5. Introduction to Comics
    Com.ics (kom`iks) n. plural in form, used
    with a singular verb. 1. Juxtaposed pictorial
    and other images in deliberate sequence,
    intended to convey information and/or to
    produce an aesthetic response in the viewer.

    View full-size slide

  6. Introduction to Comics
    lComics were used by
    the ancient Egyptians
    to communicate
    history and concepts.

    View full-size slide

  7. Introduction to Comics
    Michael Eisner says comics are
    lSequential Artz

    View full-size slide

  8. Introduction to Comics
    Scott McCloud (who wrote
    great book to the right)
    says lComics and
    cartoons are different. One
    is an approach to picture
    making, the other is a
    medium which employs
    that approach. l

    View full-size slide

  9. Introduction to Comics
    Kevin Cheng calls comics the
    lUniversal Languagez.

    View full-size slide

  10. Introduction to Comics
    Ikea says comics make good directions.

    View full-size slide

  11. Introduction to Comics
    The 9/11 Committee thought comics would
    be a good way to communicate history.

    View full-size slide

  12. Introduction to Comics
    Google says comics are a great way to
    communicate the features of a new product.

    View full-size slide

  13. Comics & Experience Design – Some History
    Kevin Cheng has been presenting and
    promoting the idea since 2006, and many
    articles have been written about it.
    The concept has been tried by many and has
    gained momentum over the past few years.
    Google made a big splash communicating
    how users would experience benefits with
    their new product.

    View full-size slide

  14. Why Use Comics in the Design Process?
    Comics can help people understand:
    Persona: Emotion, Actions, Response
    Context: Environment, Conditions, Other Actors
    Time: Sequence, Process
    Channels: Print, Online, Phone, In Store
    Interaction: Dialogue, Flow
    Screen Design: Core Elements

    View full-size slide

  15. Why Use Comics in the Design Process?
    Comics can also help people understand:
    A concept
    A strategy
    A change
    Problems
    Opportunities
    Attitudes
    Dependencies
    What really goes on with users

    View full-size slide

  16. Comics may be a better way to tell a story.
    Comics can communicate:
    How your product will compete
    How it will function
    How it will coordinate with other sites or systems
    A current process or experience
    A brand new process or experience
    Points of frustration or ideas for improvement
    A multi-channel experience
    High level findings from research or testing

    View full-size slide

  17. When to Use Comics
    When your presentation matters
    When you have a great idea
    When you want feedback on a concept
    When something very new is being introduced
    When you want people to fully grasp a problem
    When you want to facilitate a brainstorm
    To communicate to a diverse team
    Prior to or during wireframing
    During and After research or testing
    When you want to insert the users voice
    When you need to get quick and dirty

    View full-size slide

  18. When to Use Comics
    Comics can be used as:
    A Concept Document
    Task Flows
    Use Cases
    Informal Walkthrough Materials
    Research Findings
    Usability Test Findings
    Personas lDay in the Lifez
    Training Documentation
    Marketing Materials

    View full-size slide

  19. Samples Comics: Promotion of eLearning Tools

    View full-size slide

  20. Samples Comics: Promotion of eLearning Tools

    View full-size slide

  21. Samples Comics for Design: Sedaka

    View full-size slide

  22. Samples Comics: Kevin Cheng

    View full-size slide

  23. Samples Comics: Mad*Pow for Client

    View full-size slide

  24. Samples Comics: Mad*Pow for Client

    View full-size slide

  25. Samples Comics: Mad*Pow for Client

    View full-size slide

  26. Samples Comics: Mad*Pow for Client

    View full-size slide

  27. Samples Comics: Martin Hardee

    View full-size slide

  28. Samples Comics: Google

    View full-size slide

  29. Samples Comics: Mad*Pow for Aetna

    View full-size slide

  30. Samples Comics: Mad*Pow for Aetna

    View full-size slide

  31. Methods for Creating Comics: Free Hand
    Comics are about
    expression not
    perfection.
    We all can hand
    draw comics.

    View full-size slide

  32. Methods for Creating Comics: Free Hand
    Emotion

    View full-size slide

  33. Methods for Creating Comics: Free Hand
    Position and Motion

    View full-size slide

  34. Methods for Creating Comics: Free Hand
    Setting & Props

    View full-size slide

  35. Methods for Creating Comics: Free Hand
    Speaking and Thought Bubbles

    View full-size slide

  36. Methods for Creating Comics: Free Hand

    View full-size slide

  37. Methods for Creating Comics: Free Hand
    Pencil
    Ink
    Digital

    View full-size slide

  38. An Exercise
    Describe yourself:
    Draw you as a stick figure experiencing an
    emotion.
    Place yourself in a setting and give yourself a
    speaking or thought bubble.
    Place in other people and props if you want.
    Start in pencil, and then ink it in.

    View full-size slide

  39. Methods for Creating Comics: Image Libraries
    Courtesy of Martin Hardee & Sun

    View full-size slide

  40. Methods for Creating Comics: Powerpoint
    Considerations:
    • Point 1
    Text.
    Considerations:
    • Point 1
    Considerations:
    • Point 1
    Text. Text.
    Text.

    View full-size slide

  41. Methods for Creating Comics: Visio

    View full-size slide

  42. Using Comics
    Comics can illustrate:
    Persona, Context, Environment, Behavior,
    Emotion, Time, Reaction, Thoughts, Words,
    Actions, Flow, Interaction, Screen Design,
    Multiple Channels, Other Actors, Technology
    Support, Operational Dependencies, Strategy,
    Governance, Design Considerations.

    View full-size slide

  43. Process for Creating Comics
    Who is the audience?
    What is the objective of the communication?
    What is the essence of the idea?
    Which personas will be involved?
    What is the high level flow or script?
    Are there any considerations we will point out?
    What medium will you use to illustrate?
    How will the comics be presented?

    View full-size slide