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

Designing the Industrial Internet

Dane Petersen
August 08, 2013

Designing the Industrial Internet

IxDA SF Design Doing Event
San Francisco, CA
August 8, 2013

At GE I am an interaction designer embedded on an agile development team, where I use a robust HTML/CSS/JavaScript framework to design and build software for jet engines. This talk explores my experience working as a designer who codes.

Dane Petersen

August 08, 2013
Tweet

More Decks by Dane Petersen

Other Decks in Design

Transcript

  1. Designing the Industrial Internet
    IxDA SF Design Doing
    August 8, 2013
    Dane Petersen
    @thegreatsunra
    @GEDesign

    View Slide

  2. View Slide

  3. View Slide

  4. GE is huge

    View Slide

  5. GE is huge
    121 years old

    View Slide

  6. GE is huge
    121 years old
    300,000 employees

    View Slide

  7. GE is huge
    121 years old
    300,000 employees
    14,000 developers

    View Slide

  8. GE is huge
    121 years old
    300,000 employees
    14,000 developers
    $147 billion revenue

    View Slide

  9. GE is huge
    121 years old
    300,000 employees
    14,000 developers
    $147 billion revenue
    $13 billion income

    View Slide

  10. GE is huge
    121 years old
    300,000 employees
    14,000 developers
    $147 billion revenue
    $13 billion income

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. All these industrial things run on software

    View Slide

  19. All these industrial things run on software
    Connected to the internet

    View Slide

  20. All these industrial things run on software
    Connected to the internet
    Generating gobs of data

    View Slide

  21. All these industrial things run on software
    Connected to the internet
    Generating gobs of data
    For their (benevolent) human operators

    View Slide

  22. machines

    View Slide

  23. machines
    analytics

    View Slide

  24. machines
    analytics
    people

    View Slide

  25. machines
    analytics
    people
    The Industrial Internet

    View Slide

  26. View Slide

  27. function(){
    };

    View Slide

  28. View Slide

  29. Design Systems

    View Slide

  30. View Slide

  31. The Industrial Internet Design System (IIDS)

    View Slide

  32. The Industrial Internet Design System (IIDS)
    A code-based design framework that
    establishes visual and interactive patterns for
    all of GE’s industrial internet software.

    View Slide

  33. When I prototype in IIDS, I am
    prototyping in the same code
    used by our software engineers.

    View Slide

  34. When I prototype in IIDS, I am
    prototyping in the same code
    used by our software engineers.
    It gets better.

    View Slide


  35. View Slide

  36. View Slide


  37. View Slide

  38. — Bootstrap

    View Slide


  39. View Slide


  40. View Slide


  41. View Slide

  42. — D3.js

    View Slide


  43. View Slide


  44. View Slide


  45. View Slide

  46. Bootstrap
    DataTables
    express
    {
    D3.js
    Font Awesome

    View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. How I Work

    View Slide

  54. How I Work
    I don’t start in code

    View Slide

  55. How I Work
    I don’t start in code
    Code is not always the best place to design

    View Slide

  56. How I Work
    I don’t start in code
    Code is not always the best place to design
    It is a single design medium among many

    View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. Gotchas

    View Slide

  65. Gotcha #1 — Production Code

    View Slide

  66. Gotcha #1 — Production Code
    Writing it is way harder than you think

    View Slide

  67. Gotcha #1 — Production Code
    Writing it is way harder than you think
    Unless you set expectations, your code
    will be implemented as-is, and you will be
    asked to support it

    View Slide

  68. Gotcha #1 — Production Code
    Writing it is way harder than you think
    Unless you set expectations, your code
    will be implemented as-is, and you will be
    asked to support it
    Are you the right person to code for IE8?

    View Slide

  69. Gotcha #2 — The Uncanny Valley

    View Slide

  70. Gotcha #2 — The Uncanny Valley
    Code can make it feel too real

    View Slide

  71. Gotcha #2 — The Uncanny Valley
    Code can make it feel too real
    The worst that can happen is that your
    prototype gets implemented as you built it

    View Slide

  72. Gotcha #2 — The Uncanny Valley
    Code can make it feel too real
    The worst that can happen is that your
    prototype gets implemented as you built it
    Idiosyncrasies and all

    View Slide

  73. Gotcha #3 — Whiplash

    View Slide

  74. Gotcha #3 — Whiplash
    As the designer, your job is to account for
    the strategy as well as the execution

    View Slide

  75. Gotcha #3 — Whiplash
    As the designer, your job is to account for
    the strategy as well as the execution
    You are responsible for the 10,000-foot
    view and the 10-inch view

    View Slide

  76. Gotcha #3 — Whiplash
    As the designer, your job is to account for
    the strategy as well as the execution
    You are responsible for the 10,000-foot
    view and the 10-inch view
    Switching between these contexts is hard,
    and you need to get good at it

    View Slide

  77. Set expectations

    View Slide

  78. Set expectations
    Establish clear boundaries

    View Slide

  79. Set expectations
    Establish clear boundaries
    Communicate early and often

    View Slide

  80. Remember

    View Slide

  81. Remember
    You are an advocate for the user

    View Slide

  82. View Slide

  83. Questions? Get in touch!
    @thegreatsunra
    @GEDesign
    [email protected]

    View Slide