Flexible Visual Systems
UX DESIGN
PROTOTYPE
SYSTEM DESIGN
“In a world of constant change, everything rigid will break. We need to unlearn static approaches and learn to see, understand and design flexible systems.” - Dr Martin Lorenz
Prototype, design and build of a ‘Flexible Visual Systems’ design tool.
Partners
Internal Research
Collaborators
Supermarket
Tech
React
Zustand
We came across the design manual ‘Flexible Visual Systems’ by Dr Martin Lorenz and were so inspired by his approach that we decided to build a tool using the concepts described in the book. We were very taken with the idea of a system that can be reused to generate work that can be applied flexibly across various outputs. We are very excited by this tool and the possibilities of what we can create for future projects with FVS thinking at its core.
Discovery
After many chats about the possibilities of a Flexible Visual System approach in Dr. Martin Lorenz’s book we choose a section to base our tool on. We then began visual exploration based on shape and form to start thinking about the potential outputs of the tool.
Make
Our partners Supermarket began prototyping exercises from the FVS book. This approach allowed the design team to get out of the static world of Figma into the mechanics of how the tool will work and feel to use.
The tool’s UI stayed functional and straight forward as it needed to, with a few slight iterations along the way. The updates included XY animation combinations, type controls and more colour control.
Our final iteration has been to integrate ChatGPT. We used the openAI playground to craft a prompt that could reliably return a js object based on a natural language prompt. The crafting of this prompt is going to take some time but we think it worth the exploration.
Future states
An exciting part of the process was imagining the future states of the FVS tool and how it could become an important part of our studios design process. We’re finding ourselves coming back to creating a tool for almost all the projects we begin. The real-world use internally and for clients is becoming evident. FVS FTW.