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.

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
    dane@ge.com
    

    View Slide