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.

Politics of design systems

61 views

Published on

Rolling out a design system takes significant time and investment - one that many enterprises are reluctant to take on. What initially seems like the answer to achieving quality design at velocity quickly becomes a perceived bottleneck, as pieces of the system get rolled out slowly among the different products, and time and care needs to be spent making sure the codebase is stable, and the design elements can adapt to different use cases and design needs. How do you keep stakeholders from getting disgruntled? How do you keep the team motivated to keep working against the increasing pressures of executives, who can’t understand why things are taking so long?

In this session, you’ll learn how to:
* market and sell a design system into an organization
* make the case for continued investment
* set realistic expectations for stakeholders to avoid organizational panic

This session is for you if you’ve ever wondered how to start or sell a design system within an organization, but you’ve had trouble getting buy-in from your stakeholders.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Politics of design systems

  1. 1. The Politics of Design Systems Keeping stakeholders and team members invested through the process 1 February 2018 | Dani Nordin, Director of Digital UX
  2. 2. 2
  3. 3. Hey there. 3 I’m the Director of Digital UX at Pegasystems, where I lead a small but mighty team of UX professionals to provide insights and design to improve and create 6+ global digital properties. I also write things for O’Reilly Media, UXPA Magazine, and occasionally Medium. Powered by coffee, knitting, and two adorable badasses in training daughters. @danigrrl daninordin.com
  4. 4. 4
  5. 5. So what is a design system? (HINT: it’s not what you think) 5
  6. 6. The Structure of a Design System UI Patterns Templates Modules Components Elements Structure of a design system Building Blocks Color Palettes Typographic Standards Grid Definitions Icons & AssetsBuild Tools Rules & Documentation Design Principles Implementation Guidelines Voice and Tone Design Files
  7. 7. 7
  8. 8. 8
  9. 9. 9
  10. 10. A design system isn’t about design or code; it’s a fundamental shift in how the organization designs and builds products. WHAT NOBODY TELLS YOU
  11. 11. The emotional journey of a design system 11 … this was supposed to be fun, right? “We need a design system” “We got buy-in!” System/ release planning “Why haven’t we seen it yet?” First release Hooking up to product “The last change crashed the site!” First velocity gains
  12. 12. Kotter’s change framework 12 • Create a sense of urgency • Build a guiding coalition • Form a strategic vision and initiatives • Enlist a volunteer army • Enable action by removing barriers • Generate short-term wins • Sustain acceleration • Institute change CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity https://www.kotterinc.com/8-steps-process-for-leading-change/
  13. 13. 13 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Create a sense of urgency around a big opportunity. STEP ONE
  14. 14. 14
  15. 15. 15
  16. 16. Just by eliminating code redundancy, more than 20% of a developer’s time can be regained. For a team of 100 developers, this means around $2 million per year.” - projekt202 Managing Architect Drew Loomer
  17. 17. 17 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Build a guiding coalition STEP TWO
  18. 18. • Business lead: Provides governance for components and template needs. Serves as executive sponsor. • Technical lead: Governs front-end architecture and pattern development. Ensures scalability and performance. Collaborates with integrators. • UX lead: Oversees pattern design and works with Business and Tech leads. Ensures that patterns meet business needs and scale across use cases. Create a product triad 18 B T U B T U Business Lead Technical Lead UX Lead
  19. 19. 19 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Form a strategic vision and initiatives STEP THREE
  20. 20. A design system is a living product with a roadmap & backlog, serving an ecosystem. Source: A Design System isn’t a Project. It’s a Product, Serving Products. Nathan Curtis, 2016. Medium. bit.ly/8s-system-is-product WHAT IS A DESIGN SYSTEM?
  21. 21. 21
  22. 22. Tentative Roadmap 1 March 2018 Pega Digital Design System 22 Adoption Make it easier to get up to speed and productive with Bolt Scale Facilitate the relaunch of PDN & build up our library of components Scale + Stability Have a robust library of components and documentation to facilitate wider adoption Stability + Scale Increase productivity for devs & ensure adequate test coverage Q1 Q2 Q3 Q4 All: • Search DotCom: • Events • Customer Success • Press/Media • Content Hub • Industry • SEO Landing Pages PDN: • Articles • Landing Pages • Help system/guides • Communities • Exchange • Listing pages (video, tech talk, release notes, etc.) DotCom: • Careers • Pegaworld PDN • Support Saleshub • resource detail • search Saleshub? • resource detail • search
  23. 23. 23
  24. 24. 24 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Enlist a volunteer army STEP FOUR
  25. 25. Resources are hard to come by early on 25 WHAT YOU THINK YOU NEED WHAT YOU THINK YOU’LL GET WHAT YOU’LL ACTUALLY GET PRODUCT DEVELOPMENT DESIGN NOT ALLOCATED
  26. 26. “But, can’t I just get one of my staff designers or developers to do this on Friday afternoons?” …because there’s always a deadline that requires all day Friday. THE PARADOX OF PART-TIMERS Source: Scalable Design Systems workshop Nathan Curtis, UI22 Conference, 2017.
  27. 27. 27 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Enable action by removing barriers STEP FIVE
  28. 28. People get worried 28 • Designers: – Will the system limit my creativity? – How extensible are these components? • Developers: – How hard will this be to implement? – What if I need something custom? • Stakeholders: – How many resources will we actually need? – How long is this going to take? – Where’s the ROI?
  29. 29. 29
  30. 30. 30
  31. 31. 31 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Generate short- term wins STEP SIX
  32. 32. • Creation of roadmap • Plan for first releases • Release of first major milestone (colors, typography, etc.) • Launch of static documentation site • First successful integration with product • First successful instance of reusing components • Velocity improvements in design or deployment Early wins you can celebrate 32
  33. 33. Content hub: component mapping 1 March 2018 Pega Digital Design System 33 1. Teaser band 2. Quote 3. Subnav 4. X-Light band 5. Content body 6. Card 7. Light band 8. Dark Band 9. Teaser with logo and button 10. X-dark band 11. UI list with icons 1 2 3 4 65 7 10 11 8 Current Updated In design system as is “Built” from existing components
  34. 34. 34 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Sustain acceleration STEP SEVEN
  35. 35. The emotional journey of a design system 35 … this was supposed to be fun, right? “We need a design system” “We got buy-in!” System/ release planning “Why haven’t we seen it yet?” First release Hooking up to product “The last change crashed the site!” First velocity gains
  36. 36. “I thought this was supposed to save us time. Why is this so hard to use?” …Drupal developers forced to use our poorly documented system. AND THEN IT ALL FELL DOWN
  37. 37. Design system users are crucial to success 37 BUSINESS DESIGNERS SYSTEM INTEGRATORSSYSTEMS TEAM
  38. 38. 38
  39. 39. 39 CREATE BUILD FORM ENLIST ENABLE GENERAT E SUSTAIN INSTITUTE The Big Opportunity Institute change STEP EIGHT
  40. 40. We realize the system’s value when products ship features that use a system’s parts. MAKING THE VISION REALITY
  41. 41. Bolt components 1 March 2018 Pega Digital Design System 41 Designed or being designed Being built Published • Action bands • Index bands • Feature bands • Backgrounds • Cards • Buttons • Button groups • Action blocks • Subnav • UI List • Quote variations • Video player • Device viewer • Icons • Headlines • Teasers • Flags • Content body (paragraphs, lists, blockquote) • Chips/tags • Smooth scroll • Element stickiness • Visual language (colors, type, spacing, etc.) • Forms • Breadcrumbs • Tooltips • Share (DONE) • Search teasers (WIP) • Search facets (WIP) • New components for PDN articles (NEXT) • Side navigation for PDN articles (NEXT)
  42. 42. And Here We Are Now 1 March 2018 Pega Digital Design System 42 http://bradfrost.com/blog/post/managing-technology-agnostic-design-systems/
  43. 43. 43
  44. 44. • Design systems are an organizational change effort at their core. • Create a vision that aligns the design system to the needs of the team and to the larger corporate strategy. • Have a pitch deck ready to communicate the need and benefits of your system. Update and present frequently to maintain enthusiasm. • Expect to be under-resourced as you start. Enlist volunteers to help. • Bumps in the road are part of the process. Be prepared for them. • Treat your design system as a product, with its own roadmap and release plan. • Talk to your users, damnit. Key takeaways 44
  45. 45. The Structure of a Design System UI Patterns Templates Modules Components Elements Structure of a design system Building Blocks Color Palettes Typographic Standards Grid Definitions Icons & AssetsBuild Tools Rules & Documentation Design Principles Implementation Guidelines Voice and Tone Design Files
  46. 46. Where We Were 1 March 2018 Pega Digital Design System 47
  47. 47. 1. A design system can’t succeed without support from its users and sponsors 2. Establish standards for progress reporting 3. Publish updates regularly 4. Prepare for setbacks; don’t rest on your laurels Lessons learned 48
  48. 48. 1. Keep a steady pace of wins 2. Conduct regular demos and retrospectives 3. Stay optimistic, but realistic (don’t go overboard) Lessons learned 49
  49. 49. 1. Communicate constantly (almost too much) 2. Provide demos early and often 3. Provide clear and usable documentation Lessons learned 50
  50. 50. 1. Expect to be under-resourced in the early days 2. Enlist people to contribute to the system 3. Make it easy for people to help Lessons learned 51
  51. 51. 1. Help the team align on a vision 2. Connect the vision to the larger corporate strategy 3. Make the roadmap visible Lessons learned 52
  52. 52. 1. Establish a governance triad early 2. Engage your champions Lessons learned 53
  53. 53. 1. Find the organization’s pain 2. Have a pitch deck ready 3. Prepare to be persuasive Lessons learned 54

×