RedUX : Design Systems and Fire Trucks
I’m trying to inspire the creation of a Design System at my corporation. The corporation is large. Like 150K people large. Daunting. So daunting that I am working and reworking my pitch deck, trying to get down to just the few golden nuggets of information, so that any VP in the company will immediately see the value and proclaim that a Design System will fix all our woes! Okay, maybe a little wishful thinking there, I got carried away.
So those of you who understand Design Systems and the value they bring, you don’t need further convincing. You get it. But what I need is an analogy so striking, that the understanding is fast…VP level fast.
The comparison between a Design System and the LEGO building system is not new to me. It’s a comparison I landed on a while back. LEGO are known to everyone, and I think I can build out an analogy that will work well, without being lengthy to explain. To do this I need to compare to different examples of creation. One without a Design System, and one with. Here is where I am at so far. I hope it resonates.
You want a toy Fire Truck, but none are available for purchase. You option is building one. Someone gives you a piece of wood, and says …”Here, you can build your toy fire truck from this!” And you could. You would probably spend some time on Google researching and then spend hours watching Youtube. After educating yourself on crafting with wood, you would most likely buy some tools, and screws, and some red paint. Then you start building. And you make some mistakes. And you remake some pieces…probably the wheels, because they do need to be round after all….and painted black…ugh..back to the store. Again.
Now make your Firetruck into an Ambulance!
It is possible, but it’s painful and lengthy and costly and time consuming and …sheesh.
On the other hand, you could buy the LEGO Fire Truck kit. You are still building it, but now there are red bricks ( no painting ), and round wheels (no sanding), and ready-made ladders, … and everything just fits together! It’s a snap! ( pun fully intended ) In probably less than an hour, your fire truck is built! There is no need for researching Google, no need for YouTube videos, no expensive tools to buy, or even paint.
This level of efficiency is what a Design System brings to the creation of User Interfaces. Even though there are hundreds of different styles of LEGO bricks, they all fit together. They all are immediately recognizable as a part of the LEGO brand. The entire system works together because there are standards for how the bricks connect.
But even with this level of standardization and consistency, creativity is not affected, in fact it is enhanced…you can use the LEGO system to build anything you can imagine. And this standardization and reuse means redesign and rebuilding is relatively painless. Taking your LEGO Fire Truck and making it into an ambulance is much less challenging. You can reuse the wheels and frame and maybe even the cab. Just disassemble a little and build it back up as an Ambulance!
So back to the analogy. Let’s drive home some points here….
One of the building blocks (again, pun intended ) of a Design System is the “Design Language”. This is the part where all of the individual pieces are defined. In “Atomic Design” these are the “Atoms”. These are your Buttons, and Input fields, the elements that make up a user interface, at their smallest level. In a design system…each element is standardized. Color, size, and behaviors are already figured out, tested, and ready to go. Just snap them into place in your project, and spend your time solving more interesting challenges.
Going up a level to “molecules”, you will find “Design Patterns”, another block in the Design System. Molecules are combinations of atoms. In the user interface, these would be common patterns of elements…like how a label, icon, and text field together, create a search form. Very common, but often different.
And this is where it gets interesting. There are numerous ways to implement a search dialog. Some have a label that says “search”, some have an icon of a magnifying glass and forego the label. Some use a button to start the search while others have no button and are instead triggered by the enter key. It’s upon the user to figure out how to interact with each different implementation. If we design it once, test it once, build it once, and then add it to our design system, everyone can use it and implement that much faster. Hooray Savings! Not to mention that every user that interacts with it, for every product we build, will have the exact same positive experience. They will know how to use it, and it will increase their trust of our brand.
There are many other building blocks in a Design System , but for the purposes of an analogy we don’t need to cover them here. I think it boils down to this….
If I ask you to build a toy fire truck quickly, and I offer you a piece of wood or a LEGO kit, which would you pick? I hope these VPs like Fire Trucks…
