Dev conf 2018 DesOps - Prepare Today for Future of Design

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

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

DESIGNis
creative
problem
Solving.

Every roleis
a DESIGNer
role.

DESIGNis
the common
thread that
binds all.
BUSINESS UX &UI
DEVELOPMENT
Design

Every
organizationis
a DESIGN
organization.
Design
BUSINESS UX &UI
DEVELOPMENT

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.

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
…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

DesOpsis
inspired
from
DevOps
mindset.
•  a mindset
•  remove waste
•  deﬁne repeatable, reliable process
•  automate
•  enable feedback-loops
•  be lean

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’

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
Left-to-right brain
analogy

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

So
Where
to
Start?

STEP1.
PROCESS

First step in
DesOpsis
to discover
touch-points.
STEP1

To achieve this
apply
DesignThinking
as the
way of
life.
STEP1

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

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
about
discovery of
touch-points.

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
PPD.
STEP1

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
STEP1
PPD.

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.
STEP1
PPD.

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.
STEP1
PPD.
z
z
z
z
z
Market
Analysis
Used Path in
the Scenario
PotenFal Path in
the Scenario

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

Example#1
2 3 4 5 PLAN TEST DEV DEPLOY
+1 +1
INTERACTION
DESIGNER
VISUAL
DESIGNER
UX/TECH
REVIEWER
UI DEVELOPER
KNOW
Optimizing, Automating &
STEP1

STEP2.
ECO-SYSTEM

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

Next…
enable
touch-pointswith
more efﬁcient
bionic parts!
STEP2

Example#1Optimizing, Automating &
Version - 1x
Version - 2x
Version - 3x
PATTERNFLY
DITTO
Di1o Obj
(SINGLE SOURCE FILE)
Wireframe
Visual Design
HTML/CSS/JS
KNOW
Design System Proposed SoluFon
STEP2

Example#1Optimizing, Automating &
KNOW
STEP2

KNOW
DEMO.
Ditto
Example#1 Optimizing, Automating & Reducing Touch Points

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
Building Loop Between
Design with Testing

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
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/
Design with Testing

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.
Design with Testing

KNOW
MORE
DEMO.
Specstra
Example#2.1Building Loop Between Design and Testing

Example#2.2
KNOW
MORE
Design with Testing
BetaStudio - RedHat Idea-IncubaFon - 2017
h1ps://youtu.be/kItqD5wc4_4

KNOW
MORE
BetaStudio - RedHat Idea-IncubaFon - 2017
h1ps://youtu.be/kItqD5wc4_4
DEMO.
BetaStudio
Example#2.2 Building Loop Between Design and Testing

Is the
Organization
is culturally
ready? CULTURE

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

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/

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

So to prepare for the
future of design …
STEP0 STEP1 STEP2
PROCESSCULTURE
ECO-SYSTEMS

ThankU.Be in touch!
twitter: @mobilewish

Dev conf 2018 DesOps - Prepare Today for Future of Design

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Similar to Dev conf 2018 DesOps - Prepare Today for Future of Design

Similar to Dev conf 2018 DesOps - Prepare Today for Future of Design (20)

More from Samir Dash

More from Samir Dash (20)

Recently uploaded

Recently uploaded (20)

Dev conf 2018 DesOps - Prepare Today for Future of Design