Go deep enough but not more than needed
When you’re looking at a problem that repeats itself frequently, it makes sense to go deeper to understand it better. But there are limits to how deep you should go. A deeper solution might not always be the most appropriate one.
Level 1 - Quick fix
You’re looking at your product and you notice something is off. The button looks slightly bigger than it’s supposed to be. You ask the designer what is the problem and he says -
The button is 42px in height while it should’ve been 40px To solve this, you can simply ask for the height to be reduced. This is very actionable but** **this does not offer you insights into how to solve it once and for all.
Level 2 - Guidelines
Instead of simply fixing the problem, you ask why to hear this -
Paddings in the button component are more than they need to be To solve this, you fix paddings across all buttons and you could create guidelines to make sure this doesn’t happen in the future for any buttons.
Level 3 - Processes
You want to solve the problem more generally and you try to get to the bottom of this to realise
CSS styles for buttons can not be accurately mapped to the design specifications Now we know that the culprit might be the translation between the design system and CSS. You can create a process to ensure this doesn’t come up again. You can change how the design system clearly define things like padding. And you ensure that all implementation is reviewed for styling like padding before it makes its way into the product.
Level 4 - Tools
If you go even deeper into the cause, you might hear this –
Box models in CSS work behave differently than what design tools specify You can create small tools to help you solve this problem. You create an internal tool which takes your design system and creates perfectly rendered components. Your team is happy now because this means less work in future.
Level 5 - Products
Maybe you talked to some other friends about how you solved this problem internally and they are impressed. They are facing the same problem. You realise that the problem is deeper that you thought and you set out to find the cause –
CSS is based on different data models and abstractions than design tools and there is no clear translation layer This is when you wage war at solutions available in the market. You create your own product to solve this class of problems. This can be used not just by you, but by others as well.
Level 6 - Movements
Turns out a product alone can’t fix this for everyone. There are still many products who are facing this problem and they can’t adopt your product because of technology constraints. You come to a conclusion -
Designing should have a better correlation to development technologies This is not just about a product now. Your solution is an idea which tries to bring a change in thinking, a change in how the world works. Other products emerge to solve this problem.
Soon, you’re not even asking why. The solution is out of your hands and it takes a life of its own. The world accepts it, moulds it. It becomes commonplace. Soon, it is forgotten because the problem ceases to exist. It is still analysed and studied in books and research projects, to make way for new things.
Go as deep as you need to go, do not go deeper.