Applying Soft Systems Methodology for Design Systems

“A beginning is a very delicate time”
― Frank Herbert

After introduction of a Systemic Design Approach in April 2021 the discussion about the ways to apply systems thinking in a design work has finally moved from a niche to a mainstream topic. This encouraged me to put myself together and share the story how I applied a Soft Systems Methodology back in 2017 to successfully launch our internal design system project.

The Story

My first major task as a product designer at F-Secure was to support developers to rebrand our main product — a cyber security management web application. It was September 2017 and our still very young design team only started to create unified design assets, that were limited to an Illustrator file with common components and a modified bootstrap HTML and CSS folder that could have been “launched” by opening index.html file in a browser. Nevertheless, the main challenge that we faced together with developers was not in the level of sophistication of our sharable common components, but in communicating which version of the UI design was the one developers should follow — an Illustrator UI Kit, a bootstrap code or a product designer’ PDF file. It became obvious quite quickly, that what we needed, was a single source of truth. Furthermore, we needed both designers and developer to be comfortable locating it. Challenge accepted!

a single source of truth

As a rookie, who had only been around for two months, I had some spare time and mind to approach the challenge scientifically. From my school years, I remembered a Soft Systems Methodology (SSM) that I was always curious to try in a real life, so I decided to go for it. SSM was among the first systems theories that suggested to explore humans’ worldviews when mapping social systems. It stated that for a researcher it is paramount to understand how different people within the system see and approach the same situation to be able to improve it. Well, this was a good starting point.

The Research

First step was to map the current state of affairs (Image 1), that started this story. In a nutshell, during a web portal’s rebranding, developers got confused when implementing user interface should they follow either Illustrator UI Kit based designs provided to them by product designers (we used to call them UX designers back then) or copy…