Design at Scale: Techniques for great UX development across large organizations

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

What does scale measure? Weight Trafﬁc 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

GE is Powered by Software Welcome to the Industrial Internet

GE is Splintered Resulting in diverse, low quality experiences

A Uniﬁed 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

Code Put the design system into the hands of developers
<link href="./css/themes/iids/iids.min.css" rel="stylesheet">  <script src="./js/vendor/modernizr-respond.js"></script> </head> <body> <div class="navbar"> <div class="masthead navbar-inner"> <div class="container"> <a class="brand" href="#"><span class="ge-logo">General Electric</span> <button class="btn btn-collapse" data-toggle="collapse" data-target=".pr <i class="icon-bar"></i> <i class="icon-bar"></i> <i class="icon-bar"></i> </button>

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 <div data-visualization="gauge" class="chart1" data- value="73" data-threshold="50" data-max="100" data- label-min="0" data-label-max="16mm"></div>

.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 ﬁnally, change the way we install and scaffold our applications."

Source available to all GE devs Pull requests Simple and
transparent workﬂow Integrated into project ﬂow Collaboration in Code

Encourage Learning

Powerful Tools Design tools Development tools Administration tools

var opt = require('./options'); module.exports = function(grunt) { // Project
configuration. grunt.initConfig({ pkg: '<json:package.json>', 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

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]

Design at Scale: Techniques for great UX develo...

Design at Scale: Techniques for great UX development across large organizations

More Decks by Dan Harrelson

Other Decks in Technology

Featured

Transcript