Des ops101 : Overview - RH CoP UI/UX 9nov2018

SAMIR DASH
Principal Software Engineer (UXD), Red Hat
09 NOV 2018
PM
EU
PM
EU
PM
PM
PM PM PM PM UI MR
PM
PM AR P
PM EUPM UI
PM PM EU
PM
AR
PM PM
PM E
QA PM
AR AR
PM AR PM
PM EUR
AR QA
PM
IX
PM PM
VD PM EU
AR PR MR
PM DV PM IA VD
PM
PM
PM UI
PM
PM
AR QA
PM PM UI PM MR
PM VD PM EU IX
PM PM PM EU PM MR
PM UX DV EU EU
PM PM EU PM IA
PM MR PM VD VD
PM AR PR MR
101DesOps
OVERVIEW
Red Hat UI/UX Community of Practice
9 NOV 2018, Community call over BlueJeans

how many % of
workforce are
designers
in Red Hat?
LICENSE: A*ribu/on 4.0 Interna/onal (CC BY 4.0) Samir Dash @ Red Hat UI/UX Community of Prac/ce, 2018 – DesOps 101 : Overview.

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.

DESIGNis
creative
problem
Solving.

Understanding &
Communicating
Value
Creating Value
Capturing
& Delivering
Value
Design
•  Business Objectives
•  Market Strategy
•  Product Strategy
•  Market & User Research
•  Market & Users Segmentations
•  Product Vision
•  Ideation & Conceptualization
•  Product Design
•  Product MVP
•  Product Roadmap
•  Low Fidelity Prototyping
•  High Fidelity Prototyping
•  Delivery Planning
•  Development
•  Deployment
•  Product Testing & Fixing
•  Usability & User Testing
•  Marketing (Execution)
Each
Process
block has
overlaps
with each
other.
© 2018 – Samir Dash , All rights reserved. Creative Commons Attribution-Share Alike 4.0 International License

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

IDEATION
BUSINESS
RESEARCH
USER EXPERIENCE
DEVELOPMENT
VALIDATION
DESIGN ( )
There is
to every
aspect
of lifecycle.

Every roleis
a DESIGNer
role.

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
is about
applying
Service Design
on
Design.Service design is the ac/vity of planning and organizing people, infrastructure, communica/on and material components
of a service in order to improve its quality and the interac/on between the service provider and its customers.
- Wikipedia

Source & copyright : h*ps://www.nngroup.com/ar/cles/service-design-101/
Service Design mostly
focuses about
touch-points of the
user or customer with
• props
• people
• processes

PEOPLE
SAYS THINKS
FEELSDOES
USER
THINKS SAYS
DOESFEELS Touch-point of
feedback loop
All typical UX
maps focus on
touch-points
revolve around
user (PEOPLE)
in an ‘as-is’
PROPS
and
PROCESS
context.
USER
THINKS SAYS
feedback loop
PROCESSESUSER
THINKS SAYS
feedback loop
PROPS

PEOPLE
SAYS THINKS
FEELS DOES
PEOPLE
THINKS SAYS
DOES FEELS Touch-point of
feedback loop
PEOPLE
THINKS SAYS
feedback loop
PROCESSES
PEOPLE
THINKS SAYS
feedback loop
PROPS
In DesOps
the role of
touch-
points/
interactions
among
all three
becomes
equally
important.
PROCESSES
Touch-point of
feedback loop
PROPS
Touch-point of
feedback loop
PROPS
PROPS
PROCESSES
PROCESSES

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

design
operations
has been
inﬂuenced
by the
cross-domain
technologies and
philosophical
models…

…the automation,
and
cognitive computing
and mindsets
modelled on
DevOps is
inﬂuencing
design operations
and
practices
for future.

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 A*ribu/on Required (CC0), Pixabay
EMOTIONAL
Bug Reporting
LOGICAL
Left-to-right brain
analogy

DesOps=DevOps 2.0
DESIGN DEVELOPMENT DEPLOYMENT TESTINGVISION
DesOps
DevOps

DesOps
is NOT
about
deﬁning
a new
practice.

Persona
Map
Empathy Map As-Is
Scenario
User
Pain-points
Feature Laundry
List
Prioritization
Grid
Persona
Hypothesis
Formation
MVP Roadmap Prototype User Stories Use Cases Scenarios
Neilsen’s
Heuristics Ethnography User Survey Ethnography
Field Studies/
User Observation
Expert Reviews
Focus Group
Kano Modeling Fears &
Expectations
Hypothesis
Statement
When/If – Then
Map Standards
QuestionnairesBehavioral dataExperimental
Research
Style Guides Stakeholders Map
Experience Based
Roadmap
Need Statement
Card Sorting To Do Mind Map Flow chart
Work-ﬂow
diagram
UMLSwim LanesMockupWireframe
DesOps
is about
best way to
identify and
choose the
right-ﬁt
practice.

Design Thinking
© 2018, "The Ten Practices of DesOps" by Samir Dash. Creative Commons Attribution-Share Alike 4.0 International License. Download from: http://desops.io
User-centered Design (UCD)
& Usability Design
Hypothesis-Driven Design/
Development (HDD)
& Data-driven Decisions
Making
Agile / Iterative Life Cycle
Lean UX Models &
Approaches
Fail-Fast Through Prototyping
Continuous Discovery
Continuous Integration (CI)
& Continuous Delivery (CD)
Integrated
& Incremental Testing
Service Design on an
Integrated Feedback-Loop Model
DesOps
(aka. DesignOps )
Practitioner
1
2
3
4
5 6
7
8
9
10
10 Practices( The ten practices that should drive the Design Operations in your organization )

feedback-driven
all these
practices have
something in
common…
encourage diversiﬁed views
bring cross-functional team together
outcome rather than output
reduce gaps between roles
iterative processfail-fast to evolve

Implementing DesOps is to follow service design
methodologies.
The feedback loop should cut across the product
life-cycle.
Empower stakeholders for better decision
making — Hypothesis and Data-driven decision
making for design and development.
Enable Design Thinking in the team.
Advocate Lean Methodologies and Agile
Philosophies.
Translate User-Centered Design into an actual
process that can be used on the ground.
Cohesive team play — designer, stakeholders
and developers into the team play.
Enable reviews based on data-driven
benchmarks.
The goal to lower the boundaries between
roles and bring automation to reduce waste,
must drive technology decisions.
Redesigning and re-engineering the Processes.
I
II
III
IV
V
VI
VII
VIII
IX
X
10 Commandments( The ten golden principles to guide the Design Operations in your organization )
© 2018, "The Ten Commandments of DesOps" by Samir Dash. Creative Commons Attribution-Share Alike 4.0 International License. Download from: http://desops.io

So
Where
to
Start?
LICENSE: A*ribu/on 4.0 Interna/onal (CC BY 4.0) Samir Dash @ Red Hat UI/UX Community of Prac/ce, 2018 – DesOps 101 : Ovrview.

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
h*p://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 Pointsh*p://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-AcGonScript Coder / Rich Media Developer / IOS, Android Studio Developers/ NaGve ApplicaGon and Apps
developer / Widget Creator/ InteracGve Prototyper etc.
•  DBA – Database Admin / Data MigraGon 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 narraGve Maker / Content writer
•  IXD – InteracGon Designer / Experience Designer
•  IA -- InformaGon Architect / Customer experience designer / Usability Expert
•  UR – User Research Expert / Usability Tester
•  PM – Product Manager / Product Owner
•  PRM – Project Manager / Scrum Master
•  SME – Subject MaWer 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-AcGonScript Coder / Rich Media Developer / IOS, Android Studio Developers/ NaGve ApplicaGon and Apps
developer / Widget Creator/ InteracGve Prototyper etc.
•  DBA – Database Admin / Data MigraGon 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 narraGve Maker / Content writer
•  IXD – InteracGon Designer / Experience Designer
•  IA -- InformaGon Architect / Customer experience designer / Usability Expert
•  UR – User Research Expert / Usability Tester
•  PM – Product Manager / Product Owner
•  PRM – Project Manager / Scrum Master
•  SME – Subject MaWer 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
ATracUveness
CompeUUve /
CompeUtor
Analysis
Product
PorYolio
Analysis
Customer
Analysis
Market
Analysis
Environmental
Analysis
SWOT Analysis
Porter’s
5 Forces Model
Product PosiUon
Map
(if extending
exis/ng
product line)
z
Market
SegmentaUon
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
ATracUveness
CompeUUve /
CompeUtor
Analysis
Product
PorYolio
Analysis
Customer
Analysis
Environmental
Analysis
SWOT Analysis
Porter’s
5 Forces Model
Product PosiUon
Map
(if extending
exis/ng
product line)
Market
SegmentaUon
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
PotenUal 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
DiTo – Design Life Cycle Management Concept
h*p://desops.io/2018/05/12/slides-di*o-design-life-cycle-management-concept-for-desops-2016-17/
KNOW
MORE h*p://desops.io/2018/05/12/transla/ng-value-at-diﬀerent-stages-of-design-with-minimal-waste/
TranslaUng 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
Di*o Obj
(SINGLE SOURCE FILE)
Wireframe
Visual Design
HTML/CSS/JS
KNOW
Design System Proposed SoluUon
STEP2

Example#1Optimizing, Automating &
KNOW
STEP2

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

Example#2
BetaStudio - RedHat Idea-IncubaUon - 2017 KNOW
MORE h*ps://youtu.be/kItqD5wc4_4
Re-imagining beta tesUng in the ever-changing world of automaUon
h*ps://opensource.com/ar/cle/18/1/beta-tes/ng-automa/on
TESTING
PLANNING
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-IncubaUon - 2017 KNOW
MORE h*ps://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 AutomaUon
h*p://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
h*ps://
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-IncubaUon - 2017
h*ps://youtu.be/kItqD5wc4_4

KNOW
MORE
BetaStudio - RedHat Idea-IncubaUon - 2017
h*ps://youtu.be/kItqD5wc4_4
DEMO.
BetaStudio
Example#2.2 Building Loop Between Design and Testing

Is the
Organization
is culturally
ready? CULTURE

Culture
deals with the
human-to-human
feedback-loops

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

© 2018, "The Vicious Circle in Teams in DesOps" by Samir Dash. Creative Commons Attribution-Share Alike 4.0 International License. Download from: http://desops.io
The HiPPO Influence
When a HiPPO (highest paid person’s opinion) is in play, the
organization is most likely not relying on data to inform decision-
making, rather the HiPPO tends to win out, as the team's tendency to
attribute greater accuracy to someone how holds a higher position in
the organization.
The Band-Wagon Effect
The bandwagon effect is a psychological phenomenon in which people
do something primarily because other people are doing it, regardless of
their own beliefs, which they may ignore or override.
Herd mentality and mob mentality, also lesser known as gang
mentality, describes how people can be influenced by their peers to
adopt certain behaviors on a largely emotional, rather than rational,
basis.
The Herd Mentality
a sequence of reciprocal cause and effect
in which two or more elements intensify
and aggravate each other, leading
inexorably to a worsening of the
situation.
The Cognitive Bias
A cognitive bias is a mistake in reasoning, evaluating, remembering, or
other cognitive process, often occurring as a result of holding onto
one's preferences and beliefs regardless of contrary information.
Avoid.
The
Vicious
Circle

DesOps
culture
starts
with
each one
of us.
Respect.
Be Open.
Share.
Collaborate.

DesOps
Organization
is essentially
Open
Organization.KNOW
MORE
DesOps Culture is EssenUally a Culture of the Open OrganizaUon
h*ps://www.linkedin.com/pulse/desops-culture-essen/ally-open-
organiza/on-samir-dash/
h*ps://www.redhat.com/en/explore/
the-open-organiza/on-book
The Open OrganizaUon by Jim Whitehurst h*p://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
h*p://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
h*p://desops.io/desops-design-opera/ons/
DesOps – ( Design OperaUons ) ArUcles

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

PROCESSCULTURE ECO-SYSTEMS
Explore more at : http://desops.io

ThankU.Be in touch!
twitter: @mobilewish

Des ops101 : Overview - RH CoP UI/UX 9nov2018

More Related Content

What's hot

Similar to Des ops101 : Overview - RH CoP UI/UX 9nov2018

More from Samir Dash

Recently uploaded

Des ops101 : Overview - RH CoP UI/UX 9nov2018