Design at Scale Techniques for great UX development across large organizations @DanHarrelson @GEDesign

What does scale measure? Weight Traffic Impact

What does scale measure? Weight Traffic Impact

GE is Big very, very, very, very, very....... BIG

121 years old $147B Revenue $13B Net Income 300,000 Employees

GE is Global Every continent. Well, maybe not Antarctica. Yet.

GE is Diverse Thousands of products, technologies and people

No content

No content

No content

No content

No content

No content

No content

No content

GE is Powered by Software Welcome to the Industrial Internet

GE is Splintered Resulting in diverse, low quality experiences

A Unified Experience Focus on design, focus on the user

Design Systems to the Rescue

A design system is a collection of visual and interaction elements that embodies the brand. The system is often expressed across many channels including web, mobile, desktop, and service so that a consistent user experience is produced.

A design system is a collection of visual and interaction elements that embodies the brand. The system is often expressed across many channels including web, mobile, desktop, and service so that a consistent user experience is produced. High quality

Design System Components Branding Visual design Interaction design Typography Iconography

Data Visualization Reporting Charting Interaction Insights

Collaboration Messaging Video Annotation Screen sharing

No content

Code Put the design system into the hands of developers

Platforms and Frameworks Great UX baked into code

Architecture Cloud Desktop Mobile Embedded Secure, fast, reliable

Front-end Technology HTML/CSS JavaScript Visualization Helpers

GE ❤ Bootstrap

// ------------------------- // GLOBAL IMPORTS // ------------------------- // Web Fonts @import "fonts/inspira.less"; // GE Inspira @import "fonts/meta-serif.less"; // Meta-Serif // ------------------------- // BOOTSTRAP IMPORTS // ------------------------- // // What's happening here? // // This file imports all the core components from Boo that the // core can be kept up-to-date without inadvertently theme CSS. // CSS Reset @import "../../../libs/bootstrap/less/reset.less"; // Variables and mixins @import "../../../libs/bootstrap/less/variables.less" @import "../../../libs/bootstrap/less/mixins.less"; HTML/CSS Bootstrap Modernizr Respond.js LESS

'use strict'; define([ 'jquery', 'bootstrap/bootstrap-collapse', 'bootstrap/bootstrap-tooltip', 'bootstrap/bootstrap-transition' ], function($) { /* NAVBAR PUBLIC CLASS DEFINITION * =============================== */ var Navbar = function(element, options) { this.init('navbar', element, options); }; Navbar.prototype = { constructor: Navbar, init: function(type, element, options) { this.type = type; this.$element = $(element); JavaScript JQuery RequireJS Knockout.js Grunt Node

function($, d3, bar, gauge, donut) { $(function() { $('div[data-visualization="bar"]').each(function( var el = $(domEl); d3.select(domEl) // configure the chart .datum([el.data('value')]) .call( bar() .width(el.width()) .height(el.height()) .rounded(0) .min(el.data('min')) .max(el.data('max')) .tick(el.data('threshold')) ); }); $('div[data-visualization="gauge"]').each(functio { Visualization Highcharts d3 DataTables JQueryUI

.navbar .ge-logo { !border:0; !font: 0/0 a; !text-shadow: none; !color: transparent; !width:36px; !height:37px; !display:inline-block; !float:left; !margin: 0 9px 0 0; !background-color: transparent; !background: url(../../../img/iids/vector/ge- monogram-athensgray.svg) no-repeat; !background-size:contain; /*The GE Monogram has slightly different width/height dimensions*/ Helpers Font Awesome GE Icon Toolchain Parsley.js Chosen Jasmine      .icon-signin { .ie7icon(''); } .icon-trophy { .ie7icon(''); } .icon-github-sign { .ie7icon(''); } .icon-upload-alt { .ie7icon(''); } .icon-lemon { .ie7icon(''); }

IIDS.zip

Back-end Technology Web app Framework Service connectivity

Play Framework Modern application framework Focused on Java & Scala Built-in support for LESS, RequireJS and more Modular and open source Fun!

API’s everywhere REST everywhere JSON everywhere HTTP and WebSockets Service Connectivity http://rest.ge.com/performance Play HTTP/JSON {

Experiments Phonegap Chromium Embedded Play

Developer Experience Adoption through winning the hearts and minds

14,000 Developers within GE supported by a team of 15 (yes, we get a lot of email)

Developer Experience Pillars Open source, open access Make programming fun! Encourage learning Powerful tools

Open Source, Open Access Share your roadmap Solicit contribution Share the source, show how it was done Be available

My roadmap JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC Visual Designer Preview TOOLS CORE Visual Designer Limited Release DSP 1.0 DSP 1.0.2 IIDS 0.8.5 IIDS 0.9.x IIDS 1.x IIDS 1.x IIDS 1.x IIDS 1.x IIDS 1.x IIDS 1.x IIDS 1.x IIDS 1.x IIDS 1.x DSP 1.5 DSP 2.0 Lifecycle Support JavaScript MVC Catalog Preview Studio Redesign 7 Widgets 3 Templates 15 Widgets 5 Templates Tutorials, Boilerplate Catalog 1.0 50 Widgets Custom Templates Data modeling HTML5 for mobile Graph DB Native for mobile Your feature here End user customization Your feature here Diagramming component Round tripping w/ IDE

Community Build a community Participate Listen Promote others

Bill Scott Sr. Director, User Interface Engineering at PayPal "If you could pick one thing to change an engineering organization it would be to bring Github in-house! It will democratize your code and if you use it right, it will make your code the centerpiece of all you do" "At PayPal, we used Github to de-centralize our centralized platform team, change the way we write our code (distributed and transparent), change the way we deploy our code, content, marketing pages & components. And finally, change the way we install and scaffold our applications."

Source available to all GE devs Pull requests Simple and transparent workflow Integrated into project flow Collaboration in Code

Encourage Learning

Encourage Learning

Powerful Tools Design tools Development tools Administration tools

var opt = require('./options'); module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: '', clean: { folder: 'www-release' }, requirejs: { Build scripts Grunt Maven Python { "name": "iids-example-multipage", "author": "General Electric", "version": "0.1.0", "private": true, "devDependencies": { "grunt-contrib-mincss": "0.3.x", "grunt-contrib-requirejs": "0.3.x", "grunt-contrib-clean": "0.3.x" } }

Design Templates

Studio

Studio

Design at Scale takes a crisp perspective on what makes great UX for your organization. Provide the best tools that empower your army of developers and designers. Happy developers make better and more engaging software. Focus on a developer experience that supports great user experience.

Thanks! @DanHarrelson @GEDesign [email protected]