Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Systems: Enterprise UX Evolution

2,662 views

Published on

A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.

The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.

In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.

Published in: Technology

Design Systems: Enterprise UX Evolution

  1. 1. Hello.Let’s talk about Design Systems! DESIGN SYSTEMS: ENTERPRISE UX EVOLUTION
  2. 2. Anne Grundhoefer Senior UX Designer @annegrundhoefer Drew Loomer Badass @drewloomer
  3. 3. HOW CAN WE FIX THIS? DESIGN SYSTEMS
  4. 4. http://www.multiscreen-ux-design.com (Wolfram Nagel / SETU GmbH)
  5. 5. http://www.multiscreen-ux-design.com (Wolfram Nagel / SETU GmbH)
  6. 6. “But I build applications, not Legos…” I KNOW WHAT YOU’RE THINKING
  7. 7. • Need to look and behave similarly • Implement similar UI components • Duplicate low-level functionality • Must be white-labeled or themed • Are built on different tech stacks • Suffer from visual regression bugs A Design System will provide value if your products… D O I N E E D A D E S I G N S Y S T E M ?
  8. 8. • Provide a single source of truth for building UIs • Save time and money • Increase consistency • Decrease maintenance • UX teams focus on the experience; dev teams on implementation • Improve user experience through well-defined and learned behaviors BENEFITS OF A DESIGN SYSTEM
  9. 9. THE NEW STANDARD
  10. 10. Salesforce’s Lightning Design System is a leader in the space. It provides great accessibility guidelines.
  11. 11. U.S. Web Design Standards supplies assets and direction for maintaining consistent experiences across federal government websites.
  12. 12. IBM’s design language serves as an instructional tool to help communicate their brand’s user interface through many different kinds of products.
  13. 13. Duolingo creates a fun and consistent education experience across different platforms and across different continents.
  14. 14. Intuit Harmony has a great narrative of the reasoning behind their component designs.
  15. 15. Shopify’s Polaris has a well-documented public interface (API) for each component with guidelines and well-defined conventions.
  16. 16. BOOTSTRAP? WAIT… ISN’T THIS
  17. 17. WHY NOT? • Those are rapid prototyping tools, not design systems • Their components do not consider your unique context • Not detailed enough • You take power away from your developers • You are beholden to their timeline and community B O O T S T R A P O R F O U N D AT I O N
  18. 18. HOW TO GET STARTED
  19. 19. Pattern Library UI Components, Page Templates, Reference Files (.psd, .ai, .sketch) Code Coding Standards, Supported Browsers and Devices, Versioning,
 Pattern Implementation Brand Identity Fonts, Colors, Meaning, Visual Language, White Labeling Logo/marketing related Editorial Guidelines Voice and Tone, Word List, Capitalization and Punctuation Foundations and Principles Guiding Design Principles, Accessibility Targets, Animations, Scaling, Grids
  20. 20. “A Design System isn't a project. It is a product, serving products.” A design system is not simply a style guide. It is a living thing whose value is realized only when products successfully implement the patterns of the system. Nathan Curtis Design System Evangelist
  21. 21. BUILDING A PATTERN LIBRARY
  22. 22. • Check up to 25 components you feel are most important to include in the first version of the design system. • Cross out at least two sections you think are unnecessary or unimportant for your applications. • Add a star by up to five components that you should expect to spend extra effort getting right. Participants: Identify components with a checklist 1A simple checklist can quickly identify which components are essential to an organization.
  23. 23. The cut-up gives visibility on how you are doing things today, and the level of complexity a component needs to accommodate. 2Cut-up components from various interfaces • Organize and print out screenshots from the existing site and/or applications • Create categorized sections (forms/buttons/navigation/etc.) based on the component checklist • Participants cut up each page into components, separating components into their assigned category • This exercise generates momentum, brings clarity, and trims fat
  24. 24. Before you start designing components, you need to establish a base. • Establish low-level design principles • Start with color, typography, iconography, units of measure, grids, spacing • Align on what you are going to name each component 3Lay a solid foundation for your components
  25. 25. Rebuild each of your UI components, one at a time, from the ground up. • Identify the smallest pieces and build from there • Define which pieces inform others • Write down reasons why you made certain design decisions 4Design components from scratch
  26. 26. For a design system to thrive and survive, it needs a sufficient level of management and organization. • Create the order for when you are going to tackle each component • Schedule weekly reviews with stakeholders and developers • Establish long-term governance 5Work closely with your team
  27. 27. THINGS TO CONSIDER BUILDING A PATTERN LIBRARY 43
  28. 28. Your Software’s Context You cannot simply design whatever you want. Take into account all of the software you have today when designing, and frequently refer back to the results of the component cut up for reference. Your Users Who are you designing for? Are your users bank tellers, auto mechanics, grandparents? How are they accessing your software? For how many hours a day? Remember that designers and devs are also users of the design system.
  29. 29. • Modern vs. legacy web browsers • Native/web hybrid • Native desktop app for Mac/Windows • Native mobile app for iOS/Android Which devices/environments do you need to support? Device Support • Mobile • Tablet • Desktop • Large Screens • 4K/Retina • Watch What are your responsive breakpoints? How does that affect our component design? Responsive
  30. 30. • Create flexible systems that consider the experiences of people with disabilities from the start • Maintain reasonable contrast ratio between text and background colors • 4:5:1 for small text • 3:1 for large text • Use online tools • wave.webaim.org • colorsafe.co • hexnaw.com Do you need Section 508 and WCAG 2.0 compliance? Accessibility • Make your CSS highly configurable • Select smart defaults by making the contrast between colors as high as possible • Leverage color algorithms in your CSS preprocessor for dummy-proof color schemes • Consider providing a Light UI or Dark UI for different environments Does your experience need to be easily themed or rebranded? White-Label
  31. 31. • Nothing – the component exists but hasn’t started • Loading – waiting for the component to render • None – the component has initialized, but it’s empty • One – you have some data • Some – the ideal state for this component • Too Many – Too many results/characters/etc. • Incorrect/Correct – success/error • Done – correct input has been received Designing for all states • Active/Hover/Focus – elements that can be interacted with
  32. 32. BUILDING AN IMPLEMENTATION
  33. 33. YOUR GOAL: Enable faster and more consistent design and development
  34. 34. A Design System is not an application framework and should not be coupled to one. Build self-contained components • Create a prescriptive application template • Build on or for one particular framework DO NOT • Focus on building long-lasting vanilla HTML/CSS/JS • Keep your components “dumb” • Consider all your systems DO Enable faster and more consistent developmentYOUR GOAL:
  35. 35. Provide useful assets and comprehensive documentation of how and when to use each component in the system. Deliver obvious value Enable faster and more consistent developmentYOUR GOAL: • Define required HTML structure • Include production-ready CSS and JS • Be semantic and accessible • Make components configurable • Ensure consistency
  36. 36. CODE STRUCTURE: Small, configurable, and well-documented components
  37. 37. Small, configurable, and well-documented components STRUCTURE CODE
  38. 38. Small, configurable, and well-documented components STRUCTURE CODE
  39. 39. Small, configurable, and well-documented components STRUCTURE CODE
  40. 40. Small, configurable, and well-documented components STRUCTURE CODE
  41. 41. Small, configurable, and well-documented components STRUCTURE CODE
  42. 42. Small, configurable, and well-documented components STRUCTURE CODE
  43. 43. Small, configurable, and well-documented components STRUCTURE CODE
  44. 44. Central Repository ROLL IT OUT Ensure adoption by making your Design System easy to consume and update. Publish multiple ways Make it collaborative Update frequently Ensure reliability
  45. 45. A design system can be a large investment of time and money, but it pays clear dividends. SELLING DESIGN SYSTEMS
  46. 46. http://www.usability.gov/what-and-why/benefits-of-ucd.html *Benefits of User Centered Design $1,652,400 annual savings or 21.25%time saved Assumptions are in back up slides. (x hrs)*($4050.00)*(48 weeks) = annual savings 100 devs each save 2 hrs per week = $388,800 annual savings* 100 devs each save 30 min per week = $97,200 annual savings* 100 devs each save 5 hrs per week = $972,000 annual savings* 100 devs each save 1 hr per week = $194,400 annual savings* Time saved when art direction isn’t needed Time saved from rework Time saved when components are compatible Time saved when assets are available
  47. 47. adapted from an article written by Josh Clark at Big Medium BEFORE AFTER
  48. 48. • Less, more productive meetings • More alignment and collaboration • More formalized processes • Change in company culture to working smarter, not harder • Confidence that design will be implemented correctly the first time • Teams are less overwhelmed and not in perpetual fire fighting mode • Teams that are already stretched to capacity will increase speed and quality Dev UX Design Brand Strategy & Insights Digital Marketing Analytics Design System DIGITAL TEAMS DAY TO DAY IMPACT
  49. 49. Dev UX Design Brand Strategy & Insights Digital Marketing Analytics Design System • Provide a single source of truth for building UIs • Save time and money • Increase consistency • Decrease maintenance • UX teams focus on the experience, dev teams on implementation • Improve user experience through well- defined and learned behaviors DIGITAL TEAMS BUSINESS IMPACT
  50. 50. Thanks! Anne Grundhoefer @annegrundhoefer
  51. 51. http://www.usability.gov/what-and-why/benefits-of-ucd.html *Benefits of User Centered Design Hourly rate assumptions ratio = 2:1:1 (2 offshore :1 onshore employee : 1 onshore contractor) offshore rate = $18 x (50 devs) = $900.00 hrly onshore FTE rate = $48 x (25 devs) = $1200.00 hrly onshore contractor rate = $78 x (25 devs) = $1950.00 hrly Avg hrly rate = $40.50 x 100 developers = $4050.00 hrly Annual resource costs per 100 resources = $7,776,000 (x hrs)*($4050.00)*(48 weeks) = annual cost

×