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

Design at Scale - presented at BayChi

Dan Harrelson
January 14, 2014

Design at Scale - presented at BayChi

Focused on designers and design techniques

Dan Harrelson

January 14, 2014
Tweet

More Decks by Dan Harrelson

Other Decks in Design

Transcript

  1. Craft a re-usable design language Facilitate designing for the user

    Co-create with engineering Scaling UX Design
  2. 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.
  3. 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
  4. Code Put the design system into the hands of developers

    <link href="./css/themes/iids/iids.min.css" rel="stylesheet"> <!-- Include modernizr and respond first so they can shim any elements which are missing in older browsers. Other javascripts should be included at the end of the page to improve load time. --> <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>
  5. 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 Yeoman { "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" } }
  6. “...a discipline that uses the designer’s sensibility and methods to

    match people’s needs with what is technologically feasible and what a viable business strategy can convert into customer value and market opportunity” Tim Brown CEO, Founder of IDEO Design Thinking
  7. Business “How do we make money?” Technology “What can we

    build and deliver to market?” Design “What do people and organizations need and desire?” Breakthrough products and services come from alignment of and balanced execution upon these three concerns:
  8. What is UX? The practice of understanding user needs, defining

    a product based on these needs and working to ensure that the shipping product meets user needs effectively.
  9. What is UX? The practice of understanding user needs, defining

    a product based on these needs and working to ensure that the shipping product meets user needs effectively. While the interface of software is often a visible output of UX, we focus on the cohesive experience our customers have with GE.
  10. What is UX? The practice of understanding user needs, defining

    a product based on these needs and working to ensure that the shipping product meets user needs effectively. While the interface of software is often a visible output of UX, we focus on the cohesive experience our customers have with GE. UX UI =
  11. What is UX? The practice of understanding user needs, defining

    a product based on these needs and working to ensure that the shipping product meets user needs effectively. While the interface of software is often a visible output of UX, we focus on the cohesive experience our customers have with GE. UX UI =
  12. What is UX? The practice of understanding user needs, defining

    a product based on these needs and working to ensure that the shipping product meets user needs effectively. While the interface of software is often a visible output of UX, we focus on the cohesive experience our customers have with GE. UX UI = and business
  13. Agile Development Agile Design Customer Business “A great agile design

    process is complementary to a great agile development process.” Enough Design - Ian MacFarland
  14. Open Source, Open Access Share your roadmap Solicit contribution Share

    the source, show how it was done Be available
  15. My roadmap 14.1 Colors Dashboards & Reports Design Guidance Feedback

    Fonts Forms Search User Management & Sign-In 14.2 Dataviz High Viz & Accessibility Icons Mapping Mobile Web 14.3 10 Foot & Multi-S Controls Reader Work Flow
  16. 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."
  17. Source available to all GE devs Pull requests Simple and

    transparent workflow Integrated into project flow Collaboration in Code
  18. 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. Facilitate teams’ understanding of their users and market. Happy developers make better and more engaging software. Focus on a developer experience that supports great user experience.