Topic: [TBD – On DesOps /DesignOps ]
Date: 30/31 May 2019
Venue: Manchester, England
Super excited to be part of DesignOps Global Conference (www.designops-conference.com) to share ideas with some great minds on hashtagdesignops hashtagdesops hashtagdesign and the future of hashtagdesign from the lens of hashtagopenorg culture and hashtagdesignthinking being applied as the way of life to improve and optimize the operations in the organizations to deliver the “wow” experience, through best utilizing the hashtagprocess and hashtagecosystems and hashtagtechnology in context. Thanks, Peter Fossick. Looking forward to a series of engaging sessions for every hashtagdesigner / hashtagleader.
About the Conference:
The DesignOps Global Conference is for design leaders, developers, practitioners, product managers, service innovators and business leaders that are defining the way we design and develop new products and services. Join us Manchester for the DesignOps Global Conference 2019 Agile and Beyond – New Frontiers in Design
30 + 31 May, 2019
The themes for this year’s DesignOps Global Conference are:
- DAY 1
- Theme 1: DesignOps and the impact of design
- Theme 2: Collaborating at speed and scale
- DAY 2
- Theme 3: Developing new cultures – developing new organisations
- Theme 4: DesignOps in the era of AI and cognitive computing
More details of the event and to get the pass visit https://designops-conference.com/
DesOps 101: Overview
The talk will focus on overview DesOps.
Three key takeaways:
- Background and overview of DesOps.
- The high-level overview of the different dimensions of Design operations
- DesOps from Service Design point of view
- Cultural dimension and Open Org aspect.
Date & Time: 12:AM – 1 PM on 10 Nov 2018 (IST)
Venue: Virtual Community call over BlueJeans.
When we talk about an open world, we inherently refer to an attempt towards making it possible so that all the entities in that eco-system can talk to each other. It would involve people, props and processes – the typical 3 components we use in a service design model (https://www.nngroup.com/articles/service-design-101/)
Any service design tool helps to find out the touch-points and what is happening around that with the user at the center through tools like Empathy Maps, User Journeys, Service Design Blueprints and so on.
However for a future world of automation and machine learning, it becomes critical to ensure that these touch points are also considered the other two i.e. props and processes at the center. The DesOps is practically all about finding out this and enabling those touch points through the act of optimzing, reducing or removing them, to improve the operation.
In the same context we look at the design systems in use, (e.g. in a visual design and UI design and development scenario – a branding guideline, widget library, collection sample code organized in someway) also are part of bigger eco-system, where the future automation of design with machine learning they need to talk to each other. Being a set of “prop” they need also to interact with “people” and “processes”. This means, a design eco-system of future should be open, where collaboration from “people” or the “designers” is made possible where design systems follow a common model to become part of the common language.
At the same time the design systems should semantic so that the machines can infer them and take logical decisions (read: https://www.linkedin.com/pulse/open-design-system-adding-semantics-part-3-heredity-samir-dash/)
Then how to achieve this?
One of the possible way, as I see is to build the open design “eco-system” with the two components in them.
The first one is a Content Delivery Network (CDN) that would allow different design systems to share their content for reusability and collaboration against some namespaces (or an identifier path )
Secondly, it should follow a model that is scalable, extensible and can align to semantic model. One such model as I was writing about earlier is the Nuclear Design Model. (read https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-2-nuclear-model-samir-dash/ )
So the Open Design (Eco)System would be combination of a CDN with a Nuclear Design Model.
To achieve this in design dimensions of different domains e.g. UI design, Visual Design, Branding, Voice based System Design, Business Process Design, Service design, Content Design, Learning or Instructional Design, System Design etc. etc. we need to use different technologies, framework and methodologies depending on the area it touches upon, and I think this would is a great opportunity for all service designer in today’s world to explore these and define.
In the UX India workshop I took an example case of UI design and development scenario targeting web technology, and attempted on a Proof -of – concept (POC) using HTML, CSS and JS.
I created a basic css representations of the Nuclear Model using CSS3 Variables, that allowed modification of properties which was an essential part of building an inheritance model of properties.
So I started with a basic bucketing of the entities at a conceptual level, with a namespace model and folder structure.
ODS-Global was the global namespace tagged to a folder that contained two set of entities i.e. Tokens and Primitives.
In Tokens (representing properties and attributes) I kept all the list of tokens without assigning them to any particular entities. Then under Primitives, 3 main primitives were defined (namely Shape, Image and Text), where each one defined which tokens belong to them.
Then each design system created by anyone would have a separate namespace folder under which there are buckets/folders for each entity type, namely :
Tokens – set of properties or attributes defined with default values
Primitives – applied a set of selective tokens
Derivatives – these are derivations from any primitive with modified values to the tokens they are associated with)
Patterns – combination of derivatives in an integrated way
Template – combination of patterns.
Views – combination of templates.
The above diagram shows the conceptual structure and how inheritance is happening based on the approach mentioned above. This conceptual structure now can be represented in CSS , HTML and JS as following
And the following image shows how the entities get their default properties and if needed over-ride them while maintaining the scope of their entities.
See how in a design system DS1 the properties change, keeping the same list of tokens intact, to provide one-to-one mapping among the design systems.
When I translated this into CSS and HTML and JS structure, I got the following structure of folders and files for the POC.
In the actual application, only referring to the namespace and type of entity is good enough to load the right pattern from any design-system part of the open design eco-system.
You can download and play around the code of the sample above from github:
Note: this is a prototype of the concept and is not optimal for any production usage. Ther are a lot scope to improve the implementation. For example usage of @import in CSS in real time may not be practical, but it might be good idea to write a preprocessor that would build the final CSS and JS from the namespace, like NPM.
Here are some screenshots from actual POC we ran in the workshop:
The following a example of pattern called “label” from a designsystem namespace “com-company1-ds1” . This is made with derivatives from 2 basic primitives i.e. “Shape” and “Text”.
The following a example of pattern called “button” from a designsystem namespace “com-company1-ds1” . This is made with derivatives from same 2 basic primitives i.e. “Shape” and “Text”.
The following a example of pattern called “editable-textbox” from a design-system namespace “com-company1-ds1” . This is made with derivatives from same 2 basic primitives i.e. “Shape” and “Text”.
The following a example of a template (not created a formal template class though ) of a login form from a design-system namespace “com-company1-ds1” . This is made with patterns from same namespace.
Hope you enjoyed this quick and dirty article written in 30 mins. If you get the concept from the article, my goals are met 🙂
Download the sample code to play around from here: https://github.com/OpenDesignSystem/ODS-CDN
View the part 2 of the workshop slides here that is related to this activity:
You can view the first part of the slides of this work shop here:
You can explore more here:
‘Semantic Design System : Redefining Design Systems for DesOps’ https://www.slideshare.net/MobileWish/semantic-design-system-redefining-design-systems-for-desops-v10-1sep-2018
Open Design System Ontology: https://www.linkedin.com/pulse/photo-essay-semantic-design-system-part-3-open-ontology-samir-dash/?
(c) Samir Dash, 2018. All rights reserved. This content including the images are licensed under a Creative Commons Attribution 4.0 International license
[This is the first part of the half-day workshop titled “Applying DesOps in Your Enterprise” I conducted at the “UX India Conference 2018” on 4th October, 2018, Bengaluru. This part focused on ‘Process’ aspect of DesOps, and tried to address the challenges of bringing the designers to the same page to that of diversified subject-matter experts (SMEs) during the ideation phase of an Design Thinking workshop, by collaborating on “Petal Process Diagram”(PPD) . PPD is a mind-mapping kind of activity with the focus to involve all the entities involved in and around a touch-point in a feedback-loop, and helps everyone in the room to be on the same page on the potential possibilities, feasibilities involving “props” and “process” components.
Continue to the next part of the workshop, in the next post.
Meanwhile, you can explore more here:
(c) Samir Dash, 2018. All rights reserved. This content including the images are licensed under a Creative Commons Attribution 4.0 International license
Applying DesOps in Your Enterprise
3 hrs Workshop | Category: Design Practice & Process | Target Audience: Anyone who is interested in optimizing the processes used in the enterprise or building solutions that focuses on process re-engineering is the most suitable audience for the first part of the workshop. Any User-Experience pro, Design Thinker, Service designer, and product-management professional can be benefitted. The second part of the workshop is helpful for the designers and UI developers who use the design system or would like to build a scalable design system for their organization or team. Basic understanding of HTML and CSS is good enough for the 2nd part of the workshop.
The workshop will focus on two aspects of DesOps, namely the process and eco-system. The process aspect will be identifying touch points in the enterprise, and try to optimize that with some solution using technology. The ‘eco-system’ part of the workshop will focus on building a sample design system using Nuclear Design Model to make it scalable and extensible.
Three key takeaways:
- Basics of DesOps from process and eco-System Angle.
- Learn about how to identify touch-points in the process /workflow that can be optimized to bring automation or technological solutions.
- Learn about the basics of Nuclear Design Model and applying to build open, scalable and extensible design systems.
Date & Time: 10:AM – 1 PM on 4 October 2018
Venue: 4, 5 & 6 October 2018, ITC Gardenia, Bangalore
Event: UX India International Conference, 2018, A day full of inspiration and learning for user experience designers, UX leaders, visual designers, user researchers, front-end developers, program managers, startup founders and design students. Grab an opportunity to grow and network with UX Design industry experts. It brings engaging industry leaders to present a combination of inspirational talks and personal experiences.
Sample code of the CDN based Design Eco-System POC using CSS Variables:
Two Parts Articles:
[Workshop Deck] PART-1: Applying DesOps in Your Enterprise
[Workshop Deck] PART-1: Applying DesOps in Your Enterprise
DesignOps is an approach to design inspired by the culture of DevOps. In this session, we will be touching upon the practical approaches on how to prepare for the next wave in design that compliments DevOps in the concepts of the cultural shift, collaboration, and automation. We will also see how to bringing the full circle of design in the context of software development lifecycle.
Topic: DesignOps – the Prepare Today for Future of Design!
Date & Time: 2:15PM – 2:45PM on 5 August 2018
Venue: Christ University – Bengaluru, India
Event: DevConf.in 2018 is the second free annual community conference sponsored by Red Hat for Developers, System admins, DevOps engineers, Testers, Documentation writers and other contributors to open source technologies. It is a platform for the local FOSS community participants to come together and engage in the knowledge sharing through technical talks, workshops, panel discussions, hackathons and such activities.
More info at: http://desops.io/2018/07/04/talk-at-devconf18-designops-prepare-today-for-future-of-design/
http://desops.io/2018/05/12/translating-value-at-different-stages-of-design-with-minimal-waste/Also associated video here :
In 1967 Ronald Barthe published Elements of Semiology, which stands as a temporal marker of post-structuralism, where he gave rise to the idea of “Meta Language”, which in fact “beyond language” or “Second-order language” which is used to describe, explain or interpret a “First order language”. Each order of language implicitly relies on a metalanguage by which it is explained. And it is obvious that the translations between the first order and the second order never loss-less and the true meaning of the first order language is lost or deteriorates when it is represented in “Second-order language”. Design process involving multiple intersections of information communication and sharing through translation of the value (e.g. vision, idea), loses its original meaning while being translated through different tools into various forms of expressions. Also, the different roles (e.g. Product stakeholder or product manager, information architect, interaction designer, visual designer, prototyper and developer etc. ) contribute to the infinite regression of “meaning” of the value.
That’s why one of the key factors that working with developers in terms of the realization of the design has always been a big pain and non-stop iterations, and this turning in favour of the term Full-stack Designer that shares the same spirits as that of the term Full-stack Developer.
(Download PDF from http://desops.io/2018/05/10/infographic-the-full-stack-roles-in-desops/ )
Typically the phrase “full-stack” (or full-stack developer) refers to someone who is someone comfortable and could single-handedly tackle every layer of software development. Typically DevOps engineers and full-stack developers share the same philosophical traits — they strive for greater agility and flexibility and hint at a trend towards greater generalization in the skillset of technical professionals. In case of the full-stack designer, he grows into a cross-disciplinary professional who can handle across Interaction Design, Visual Design as well as UI Development or prototyping. This helps to reduce the gaps between the outputs from these different and the effort that goes into the translation of concept flowing from one stage to another, where there are many roles assigned to more than one persons are involved (And remember that one of the key principles of DesOps is to remove waste by applying practices like Lean models).
So if we see that one of the major focus of DesOps in this aspect involving the work-culture is to reduce the gaps between the roles and wastage thereby. The translation from one role and discipline to another makes the meaning second-hand interpretation and such process is never loss-less. Something or the other gets lost in translation, as we progress towards the realization of the value or the product.
So by implementing Lean methodologies and by striving towards having minimally sized team members with as diversified expertized to help to minimize the intersections or touch points among disciplines and roles where the translation happens. In short less need to translate the value, the less information gets lost and less is the waste in terms of value, effort, cost and time.
Going “full-stack” is one approach to avoid the waste that happens in the process that Barthe has termed as indefinite regression or Aporia . This is mostly from the roles perspective. The other approach is through process or work practices redesign to reduce the number of intersections where the translation happens. In the context of DesOps, this is significant, as it involves the interactions at various levels between the primary two entities i.e. human (i.e.people or user ) and machine, namely — from human-to-human, human-to-machine, machine-to-human and machine-to-machine.
So one of the key factors involved while implementing the DesOps in the organization is to look for process re-design to “minimize the touch points of interaction” through the principle that advocates to minimize the gaps between the roles.
Sometime back, I was evaluating some of the design systems and tools available to study the pain-points while transitioning the design concept from one tool to another and moving from one role to the other. I got in touch with many of my friends who were designers by profession in different enterprises and were at different levels of comforts with existing design and wireframing toolsets, starting from Adobe Suite to the Sketch based eco-systems. Based on the discussions, the interesting thing that I found was many of the tools being used at different organizations, are selected based on the pricing and what the team is comfortable working with, rather than with a focus to have a seamless workflow. In many cases, the cost played a bigger role and due to licence cost, some had switched from most popular design tools to the cheaper replacements. However, the biggest struggle that was there was never solved i.e. the iterations in the design process remained challenging despite the change in tools. Every change in design aspect that was iterated was facing the overshoot of the effort, time and cost. The transitions of value from one set of tool to the other e.g. the quick wireframe created in Powerpoint during the stakeholder workshops were being translated into Photoshop was actually about relooking at the layout due to the constraint that popped up while working with the specific widgets in a specific resolution that never went well the wireframe concept. In one organization, the team replaced the Powerpoint with Sketch and tried to use that to complete the process, which turned into a nightmare as the sessions ended with the people struggling with the tool.
In search of a tool that can minimize the translations of values, I was toying with an idea of Ditto, a simplified version of the tool that can look familiar to the different roles involved in the process and at the same time it will align with a process that is about having the same source files at any of the stages of the process and can align with any design system with easy configuration mechanism.
(Figure : The common pain-points in typical Design-process )
(Figure : Typical Design process based on various touch-points where translation happens )
Ditto is a conceptual vision of a design tool that uses UI pattern Library (which is configurable ) and understands the relationships among the components of the design system configured to create and maintain its own objects that can be rendered on a super simple easy-to-follow and familiar looking interface with drag and drop kind interactions enabling the users of different role to focus on their goal rather than figuring out how to use the tool. Conceptually Ditto was capable of taking any type of inputs and exporting different types of outputs on demand e.g. the wireframes, visual comps and ready to deploy UI coded with HTML/ CSS/JS.
(Figure : The conceptual solution, Ditto is based on a “Single-Source” based process )
(Figure : The conceptual solution, Ditto is based on a “Seamless Workflow” based process )
Watch a video demo that elaborates the concept in context to these use-cases —
The benefit of such a tool would be to reduce the critical – dependency on any particular role in the team in order to carry out with the project. For example, assuming a startup is only having a visionary guy with a developer, he can go into the tool to drag-drop few shapes and objects in a traditional Powerpoint / Keynote kind of interface which he is familiar with and export that as a barebone interactive code/prototype that can be tested. He can continuously test and get feedback, based on which he can tweak the same source and iterate. His developer friend can use the same source to export the code in a click to use in the production. And interestingly if he makes any change, that would be updated back to the same source. Later if a visual designer’s help is taken to customize the look and feel, it would allow updating the same source that’s running in the production where the necessary changes to the code will be managed by Ditto in the background. And despite the fact that the visual designer modified the source, (which affects the internal code) he is doing that in a Photoshop kind of environment familiar to him.
If we look at this “Single Source Based Design Eco-System“, any role can enter and come out with a production-ready code, be it a product owner or CEO of the startup, or an interaction designer, visual designer or a UI developer.
The benefits of such a tool are many:
- Seamless work-flow for Design – Developer collaboration
- Saving on license cost as no longer it is required to use multiple design tools
- Single source makes it maintainable.
- The omini-change process ensures that any changes happening at any stage of design stage will automatically take effect on other stage deliverables. (i.e. assuming at if UI html code is tweaked, it will also reflect in wireframe and visual design stages without any extra manual work!)
- Zero learning-curve
- Single user – Single Tool: makes it easy for any of the roles can login and generate implementation ready UI output.
- Significantly reduces Cosmetic / UI compliance issues
- Significantly reduces the time to implementation of the design concepts
- Boon for Agile projects where the changes are common.
Some of the components of the conceptual design tool Ditto, you might have noticed are already available in some of the design tools. For example, similar in Sketch, you can create a custom pattern library theme and use drag and drop to add them while you are designing. But, its more about customizing themes based on existing ones and exporting shapes specific CSS at the end, which is at a very lower level of maturity from a design system standpoint. Similarly, exporting existing design to HTML feature from Adobe’s Creative Cloud Extract in some sense does not take account into how certain design systems of high maturity can be fit into it so that the output can have functional interactions as a part of business flow for the UI.
But certainly, Bootstrap Studio is much closer to the concept of Ditto. It can be improved around the areas configurations and there is a need to move away from the traditional Application type UI and interaction layer so that it can align to one of the core attributes i.e. to make each user role feel familiar with the interface or rather making it easy to follow. The UI widget based WordPress-page builder tools like Elementor are closer in this regard. While talking about Eco-Systems the tools and technologies, I will write about what are the tool-chains that we can combine for different levels of DesOps implementation looking at the maturity levels of Design Systems in play in the organizations.
Well, the thoughts presented above is a practical example of conceptualizing a value communication using improvements in processes and using technology to applying regression to the touch points where the translation happens, and thereby reducing waste and avoiding loss of meaning of value throughout the design process. We will explore the aspect of communication aspect of human-to-human, that is an important part of DesOps culture. Stay tuned.
(c)2018 , Samir Dash. All rights reserved.
(This article is originally published at on May 12, 2018 at https://www.linkedin.com/pulse/desops-next-wave-design-part-11-translating-value-different-dash/ )