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

Designing with Data

Designing with Data

Techniques for bringing clarity to designing with data for digital products.

Todd Zaki Warfel

May 18, 2012
Tweet

More Decks by Todd Zaki Warfel

Other Decks in Design

Transcript

  1. DESIGNING
    WITH
    DATA
    @zakiwarfel / inflection / #dwd

    View full-size slide

  2. Info graphics
    have been around
    for ages.

    View full-size slide

  3. http://bit.ly/JNHpiO
    Minard’s Napoleon’s March

    View full-size slide

  4. http://bit.ly/JPlMhe
    John Snow’s Cholera Outbreak Map

    View full-size slide

  5. http://bit.ly/L48JXA

    View full-size slide

  6. 3 guiding principles
    6 characteristics

    View full-size slide

  7. Everything is
    visual noise.
    I

    View full-size slide

  8. PRIORITY & SCALE
    Understand which
    data is most
    important.

    View full-size slide

  9. Emphasize
    everything and
    emphasize
    nothing.
    II

    View full-size slide

  10. Cognitive Overload

    View full-size slide

  11. designing with data
    =
    ff03d475c78d326f04478
    2464fbe9353

    View full-size slide

  12. designing with data
    =
    ff03d475c78d326f04478
    2464fbe9353

    View full-size slide

  13. designing with data
    =
    ff03d475c78d326f04478
    2464fbe9353

    View full-size slide

  14. designing with data
    =
    ff03d475c78d326f04478
    2464fbe9353

    View full-size slide


  15. Activities and Interest
    Knowledge Life Cycle
    Influencers
    TECHNOLOGY
    DOMAIN
    EXPERIENCE
    SALES SETUP DESIGN LAUNCH POST
    AUTOMATED PROCESSES
    SINGLE PREVIEW MODE
    INTUITIVE
    EFFECTIVE COMMUNICATION
    NAMING CONVENTION
    PRIORITIZING AND SORTING
    CLIENT USABLE
    Our job is to incorporate all the
    pieces that make the ad look like
    and function like an ad—usually on a
    tight deadline.
    Margaret just settled into her o ce and opened up an email detailing the nature
    of the campaign their team is to work on next. It’s a fairly substantial document
    containing a number of essential items, for instance: demo links for previewing
    creative campaigns, le paths to the relevant campaign assets, and instructions on
    how to assemble the creative to the client’s standards.
    She’ll work for the next week in a variety of tools including Flash, AdBuilder, and
    O erBuilder to assemble the creative according to the client’s vision. Keeping track
    of her progress is simple because she’s consistently updating a task that’s assigned to
    her.
    By assigning the creatives to placements and previewing them, Margaret is able to
    perform a bit of internal quality assurance. A er reviewing the campaign, Margaret
    is cleared to add in tracking code. For this campaign, she’ll need to divide the
    placements into speci c click regions to record users’ interactions with certain areas
    of the ads.
    Once she’s noti ed the team of the status of the creatives, she’ll be on to the next
    creative cycle.
    THE ARTISAN
    Margaret
    Current Pain Points: Has to spend two
    hours, per campaign, dealing with massive
    emails; has to add sequencing to campaigns,
    but this o en is inaccurate and fails; is
    required to create previews for the client,
    but has no e cient way of doing so; moving
    assets from the server to local machine is a
    multi-hour download.
    MANAGING BUSINESS RULES
    MANAGING TASKS
    LAUNCHING CAMPAIGNS
    COMMUNICATING WITH CLIENT
    ESTABLISHING CATEGORIES
    CREATING CLIENT DEMOS
    PREVIEWING ADS
    CAMPAIGN

    View full-size slide

  16. http://bit.ly/Jlac05

    View full-size slide

  17. http://bit.ly/ydFYsu

    View full-size slide

  18. Be selective and
    intentional.
    III

    View full-size slide

  19. http://bit.ly/JbOtaB

    View full-size slide

  20. DWD for small
    screens really
    forces you to
    prioritize.

    View full-size slide

  21. Bonus material...

    View full-size slide

  22. Chartwell Web Font

    View full-size slide

  23. Visual News
    http://bit.ly/A7z4Qi

    View full-size slide