Dev conf 2018 DesOps - Prepare Today for Future of Design

1. Design OperationsDesOps DesignOps Design Operations DesignOpsDesOps Prepare Today for the Future of Design! SAMIR DASH Principal Software Engineer (UX), Red Hat 05 AUG 2018 v1.2

2. DESIGN is how it works. Most people make the mistake of thinking design is what it looks like. […] It’s not just what it looks like and feels like. DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

3. DESIGNis creative problem Solving. DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

4. Every roleis a DESIGNer role. DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

5. DESIGNis the common thread that binds all. BUSINESS UX &UI DEVELOPMENT Design DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

6. Every organizationis a DESIGN organization. Design DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru BUSINESS UX &UI DEVELOPMENT

7. PM AR UX EU PM MR AR QA M PM PM VD PM MR IA EU PM EU UI PM PM PM PM MR PM VD PM EU PM IX QA PM PM EU PR MR IA UI AR EU AR PM PM PM PM MR PM DV EU PM EU PM AR PM IX PM DV PM EU PM EU UR PM PM PM PM IA PM MR PM VD EU VD PM PM PM IX PM PR MR EU Organization operations are a fabric of feedback-loops. DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

8. PM AR UX EU PM MR AR QA M PM PM VD PM MR IA EU PM EU UI PM PM PM PM MR PM VD PM EU PM IX QA PM PM EU PR MR IA UI AR EU AR PM PM PM PM MR PM DV EU PM EU PM AR PM IX PM DV PM EU PM EU UR PM PM PM PM IA PM MR PM VD EU VD PM PM PM IX PM PR MR EU DesOps helps in ﬁnding & enabling shortest & most effective feedback-loop. DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

9. DesOps …and a belief-system to empower the enterprise with the culture, processes and eco-systems to support design-driven process and data- driven decision making with agility and speed to conceptualize and deliver great products. is a mindset. PROCESSCULTURE ECO-SYSTEMS DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

10. DesOpsis inspired from DevOps mindset. •  a mindset •  remove waste •  deﬁne repeatable, reliable process •  automate •  enable feedback-loops •  be lean DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

11. DesOps helps take next-steps for DevOps. •  no more limited to dev2deploy cycle •  connect vision to delivered value •  cover whole lifecycle •  End to End Feedback loops •  handle human aspects •  bring design-thinking as way of life •  prefer ‘outcome’ over ‘output’ DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

12. API-UI Functional Bugs Usability IssuesUI/Front-end Bug Cosmetic Issues User Testing Explorative Testing A/B or Split Testing Accessibility Issues Customer Validations Backend Issues API IssuesBackend Functional Issues Code Quality Checks Data Testing End-user FeedbackCode Optimization Checks Originally from: BetaStudio - Re-imagining UAT & Beta Testing sdash@redhat.com RedHat QE Camp X, Bangalore 7 DEC 2017 Images: Crea+ve Commons – No A1ribu+on Required (CC0), Pixabay EMOTIONAL Bug Reporting LOGICAL DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru Left-to-right brain analogy

13. DesOps=DevOps 2.0 DESIGN DEVELOPMENT DEPLOYMENT TESTINGVISION DesOps DevOps © 2018 – Samir Dash , All rights reserved. Creative Commons Attribution-Share Alike 4.0 International License DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

14. So Where to Start? DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

15. STEP1. PROCESS DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

16. First step in DesOpsis to discover touch-points. STEP1 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

17. To achieve this apply DesignThinking as the way of life. STEP1 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

18. Ontology of touch-points. Theory/Discipline – Theory/Discipline Role - Role Role – Theory/Discipline Theory/Discipline – Model/Framework Discipline - Method Method – Tool/Technique Tool /Technique– Instrument/System Role - Instrument/System h1p://desops.io/2018/06/07/paperback-the-desops-enterprise-re- invent-your-organiza+on-volume-1-the-overview-culture/ Read more STEP1 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

19. DBA ARC DEP QA MR PRM E PM ‘Petals Process Diagram’(PPD) is •  Easy Visualization •  Atomic Level •  Feedback-loops •  Touch Points •  Decision Pointsh1p://desops.io/2018/06/07/paperback-the-desops-enterprise-re- invent-your-organiza+on-volume-1-the-overview-culture/ Read more about Petals Process Diagram STEP1 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru about discovery of touch-points.

20. The Feedback-loop between the Product Manager and the Interaction Designer.PM IXD UR IA VD CW UI DV DBA ARC DEP QA MR PRM EUS SME STH PM IXD •  UI – Frontend Developer / HTML-CSS Expert / Flash-Ac>onScript Coder / Rich Media Developer / IOS, Android Studio Developers/ Na>ve Applica>on and Apps developer / Widget Creator/ Interac>ve Prototyper etc. •  DBA – Database Admin / Data Migra>on Specialist / Data Architect / Big Data, Hadoop Experts DV – Backend Developer/ API Developer/ Micro Services Coder etc. •  VD – Visual Designer / Visual Asset creator / Special Eﬀects Designer / Visual Story Board Designer/ Audio Visual Expert •  CW – Story writer / User narra>ve Maker / Content writer •  IXD – Interac>on Designer / Experience Designer •  IA -- Informa>on Architect / Customer experience designer / Usability Expert •  UR – User Research Expert / Usability Tester •  PM – Product Manager / Product Owner •  PRM – Project Manager / Scrum Master •  SME – Subject MaTer Expert •  STH – Stake Holders / Client/ Product Owner / Investor/ CEO / Program Manager •  MR – Market Researcher / Market Analyst / Business Analyst •  QA – Quality Assurance Member / Tester •  DEP – Deployment Expert / CI CD Expert / Infrastructure / Storage / Container Management / Server Management etc. •  ARC -- Architect , Technical Lead © 2018 – Samir Dash , All rights reserved. Creative Commons Attribution-Share Alike 4.0 International License PPD. STEP1 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

21. The follow up Feedback-loop between the Interaction Designer with a Technical Architect. PM IXD UR IA VD CW UI DV DBA ARC DEP QA MR PRM EUS SME STH IXD ARC UR IA VD CW UI DV DBA PM DEP QA MR PRM EUS SME STH IXD ARC •  UI – Frontend Developer / HTML-CSS Expert / Flash-Ac>onScript Coder / Rich Media Developer / IOS, Android Studio Developers/ Na>ve Applica>on and Apps developer / Widget Creator/ Interac>ve Prototyper etc. •  DBA – Database Admin / Data Migra>on Specialist / Data Architect / Big Data, Hadoop Experts DV – Backend Developer/ API Developer/ Micro Services Coder etc. •  VD – Visual Designer / Visual Asset creator / Special Eﬀects Designer / Visual Story Board Designer/ Audio Visual Expert •  CW – Story writer / User narra>ve Maker / Content writer •  IXD – Interac>on Designer / Experience Designer •  IA -- Informa>on Architect / Customer experience designer / Usability Expert •  UR – User Research Expert / Usability Tester •  PM – Product Manager / Product Owner •  PRM – Project Manager / Scrum Master •  SME – Subject MaTer Expert •  STH – Stake Holders / Client/ Product Owner / Investor/ CEO / Program Manager •  MR – Market Researcher / Market Analyst / Business Analyst •  QA – Quality Assurance Member / Tester •  DEP – Deployment Expert / CI CD Expert / Infrastructure / Storage / Container Management / Server Management etc. •  ARC -- Architect , Technical Lead © 2018 – Samir Dash , All rights reserved. Creative Commons Attribution-Share Alike 4.0 International License STEP1 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru PPD.

22. Category ADracFveness CompeFFve / CompeFtor Analysis Product PorLolio Analysis Customer Analysis Market Analysis Environmental Analysis SWOT Analysis Porter’s 5 Forces Model Product PosiFon Map (if extending exis+ng product line) z Market SegmentaFon Matrix (if already exists) z PEST Analysis Map z Market Research MA (Market Analyst) PM (Product Manager/ Owner) MR (Market Researcher) It makes us aware about the various options, at each touch-points between actors. The actors can be roles, disciplines, tools technologies, models, methodologies or even practices involved in that process. © 2018 – Samir Dash , All rights reserved. Creative Commons Attribution-Share Alike 4.0 International License STEP1 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru PPD.

23. Category ADracFveness CompeFFve / CompeFtor Analysis Product PorLolio Analysis Customer Analysis Environmental Analysis SWOT Analysis Porter’s 5 Forces Model Product PosiFon Map (if extending exis+ng product line) Market SegmentaFon Matrix (if already exists) z PEST Analysis Map Market Research MA (Market Analyst) PM (Product Manager/ Owner) MR (Market Researcher) Easier way to draw the PPD. © 2018 – Samir Dash , All rights reserved. Creative Commons Attribution-Share Alike 4.0 International License STEP1 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru PPD. z z z z z Market Analysis Used Path in the Scenario PotenFal Path in the Scenario

24. Example#1 2 3 4 5 PLAN TEST DEV DEPLOY INTERACTION DESIGNER VISUAL DESIGNER UX/TECH REVIEWER UI DEVELOPER PF GUIDE/SPECS PF SAMPLE CODE DiDo – Design Life Cycle Management Concept h1p://desops.io/2018/05/12/slides-di1o-design-life-cycle-management-concept-for-desops-2016-17/ KNOW MORE h1p://desops.io/2018/05/12/transla+ng-value-at-diﬀerent-stages-of-design-with-minimal-waste/ TranslaFng Value at Diﬀerent Stages of Design with Minimal Waste Optimizing, Automating & Reducing Touch Points STEP1 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

25. Example#1 2 3 4 5 PLAN TEST DEV DEPLOY +1 +1 INTERACTION DESIGNER VISUAL DESIGNER UX/TECH REVIEWER UI DEVELOPER DiDo – Design Life Cycle Management Concept h1p://desops.io/2018/05/12/slides-di1o-design-life-cycle-management-concept-for-desops-2016-17/ KNOW MORE h1p://desops.io/2018/05/12/transla+ng-value-at-diﬀerent-stages-of-design-with-minimal-waste/ TranslaFng Value at Diﬀerent Stages of Design with Minimal Waste Optimizing, Automating & Reducing Touch Points STEP1 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

26. STEP2. ECO-SYSTEM DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

27. Enable through the acts of Optimize Automate Reduce what is happening around a touch-point. & remove manual / repeatable interventions across touch-point. the number of touch-points in a process, using process redesign and new work practices, and enabling through technology. STEP2 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

28. Next… enable touch-pointswith more efﬁcient bionic parts! STEP2 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

29. Example#1Optimizing, Automating & Reducing Touch Points Version - 1x Version - 2x Version - 3x PATTERNFLY DITTO Di1o Obj (SINGLE SOURCE FILE) DiDo – Design Life Cycle Management Concept Wireframe Visual Design HTML/CSS/JS h1p://desops.io/2018/05/12/slides-di1o-design-life-cycle-management-concept-for-desops-2016-17/ KNOW MORE h1p://desops.io/2018/05/12/transla+ng-value-at-diﬀerent-stages-of-design-with-minimal-waste/ TranslaFng Value at Diﬀerent Stages of Design with Minimal Waste Design System Proposed SoluFon STEP2 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

30. Example#1Optimizing, Automating & Reducing Touch Points DiDo – Design Life Cycle Management Concept h1p://desops.io/2018/05/12/slides-di1o-design-life-cycle-management-concept-for-desops-2016-17/ KNOW MORE h1p://desops.io/2018/05/12/transla+ng-value-at-diﬀerent-stages-of-design-with-minimal-waste/ TranslaFng Value at Diﬀerent Stages of Design with Minimal Waste STEP2 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

31. DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru DiDo – Design Life Cycle Management Concept h1p://desops.io/2018/05/12/slides-di1o-design-life-cycle-management-concept-for-desops-2016-17/ KNOW MORE h1p://desops.io/2018/05/12/transla+ng-value-at-diﬀerent-stages-of-design-with-minimal-waste/ TranslaFng Value at Diﬀerent Stages of Design with Minimal Waste DEMO. Ditto Example#1 Optimizing, Automating & Reducing Touch Points

32. Example#2 BetaStudio - RedHat Idea-IncubaFon - 2017 KNOW MORE h1ps://youtu.be/kItqD5wc4_4 Re-imagining beta tesFng in the ever-changing world of automaFon h1ps://opensource.com/ar+cle/18/1/beta-tes+ng-automa+on TESTING DEVELOPMENT DESIGN PLANNING MAINTAINANCE RELEASE CVNLP DEVELOPER UX DESIGNER VISUAL DESIGNER PRODUCT MANAGER PROJECT MANAGER TESTER END-USER COGNITI VE A.I. DESIGN BENCHMARKS END-USERDEVELOPER CVNLP CVNLP CVNLP CVNLP NLP CV INSIGHTS & RECOMMENDATION CUSTOMER CUSTOMER CUSTOMER CUSTOMER AUTOMATED TRACKING AUTOMATED TRACKING PRODUCT LIFE-CCLE MANAGEMENT STANDARDS & SPECIFICATIONS BETA / UAT TESTING BetaStudio - Re-imagining UAT & Beta Testing sdash@redhat.com RedHat QE Camp X, Bangalore 7 DEC 2017 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru Building Loop Between Design with Testing

33. Example#2 BetaStudio - RedHat Idea-IncubaFon - 2017 KNOW MORE h1ps://youtu.be/kItqD5wc4_4 Collect Benchmark data from design stage DESIGN BENCHMARKS STANDARDS & SPECIFICATIONS MODEL & MTERICSCOMPUTER VISION NLP AUTOMATED TRACKING Track & Collect data from product Collect Standards & Specifications Process Unstructured data to get inference. Model the data and Map against the Metrics. A.I. & COGNITIVE AI helps finding the outliers & generate Insights / recommendations. FEEDBACK & USER TESTING Data from User feedback & User Testing Web Content Accessibility Guideline (WCAG) Section 508 Web Accessibility Initiative Specs ARIA, Design Principles, W3C Compliance JS Standards CSS Standards & Grids Code Optimization Metrics Error codes & Specs Device Specific Guidelines (e.g. Apple Human Interface Guideline) etc. ? ? ? ? ? ? Auto Generate Design Specification from Any Design files Pattern-AI In-App Tracking ? ? ? POCPOC POC POC BetaStudio - Re-imagining UAT & Beta Testing sdash@redhat.com RedHat QE Camp X, Bangalore 7 DEC 2017 Re-imagining beta tesFng in the ever-changing world of automaFon h1ps://opensource.com/ar+cle/18/1/beta-tes+ng-automa+on Specstra 2.0 : My Experiments in Cloud Based Design Process AutomaFon h1p://desops.io/2018/05/07/specstra-2-0-my-experiments-in- cloud-based-design-process-automa+on/ DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru Building Loop Between Design with Testing

34. Example#2.1 KNOW MORE h1ps:// samirshomepage.ﬁles.wordpress.com/ 2016/08/sample-generated-style-guide- output1418308769-en.pdf SAMPLE GENERATED GUIDE helps in collect benchmark data from design stage. Specstra 2.0 : My Experiments in Cloud Based Design Process AutomaFon h1p://desops.io/2018/05/07/specstra-2-0-my-experiments-in- cloud-based-design-process-automa+on/ DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru Building Loop Between Design with Testing

35. DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru KNOW MORE Specstra 2.0 : My Experiments in Cloud Based Design Process AutomaFon h1p://desops.io/2018/05/07/specstra-2-0-my-experiments-in- cloud-based-design-process-automa+on/ DEMO. Specstra Example#2.1Building Loop Between Design and Testing

36. Example#2.2 KNOW MORE Building Loop Between Design with Testing Re-imagining beta tesFng in the ever-changing world of automaFon h1ps://opensource.com/ar+cle/18/1/beta-tes+ng-automa+on BetaStudio - RedHat Idea-IncubaFon - 2017 h1ps://youtu.be/kItqD5wc4_4 DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

37. DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru KNOW MORE Re-imagining beta tesFng in the ever-changing world of automaFon h1ps://opensource.com/ar+cle/18/1/beta-tes+ng-automa+on BetaStudio - RedHat Idea-IncubaFon - 2017 h1ps://youtu.be/kItqD5wc4_4 DEMO. BetaStudio Example#2.2 Building Loop Between Design and Testing

38. Is the Organization is culturally ready? CULTURE DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

39. DesOps Culture isabout … Adopting Diversity Freedom to explore, innovate take risk Fuelling innovation from grassroots Design Thinking as a way of life. Open to FeedbackZero biased mindsets Innovation parenting Collaborative decision making esOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

40. DesOps Organization is essentially Open Organization.KNOW MORE DesOps Culture is EssenFally a Culture of the Open OrganizaFon h1ps://www.linkedin.com/pulse/desops-culture-essen+ally-open- organiza+on-samir-dash/ h1ps://www.redhat.com/en/explore/ the-open-organiza+on-book The Open OrganizaFon by Jim Whitehurst h1p://desops.io/2018/06/07/paperback-the-desops- enterprise-re-invent-your-organiza+on-volume-1-the- overview-culture/ DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

41. Actually setting up the right culture is the STEP0.CULTURE h1p://desops.io/2018/06/07/paperback-the-desops-enterprise-re-invent-your-organiza+on-volume-1-the-overview-culture/ KNOW MORE The DesOps Enterprise : Volume1 - Overview & Culture by Samir Dash h1p://desops.io/desops-design-opera+ons/ DesOps – ( Design OperaFons ) ArFcles DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

42. So to prepare for the future of design … STEP0 STEP1 STEP2 PROCESSCULTURE ECO-SYSTEMS DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru

43. ThankU.Be in touch! twitter: @mobilewish DesOps:PrepareTodayfortheFutureofDesign!bySamirDash,RedHat,5thAugust2018,DevConf2018@ChristUniversity,Bengaluru