Dumb and smart components

My name is Ilona and I am Senior Experience Designer at EPAM. Work for me coincides with a hobby – at EPAM I design interfaces for foreign customers, give lectures for employees and students of the lab, mentor designers. In my spare time I teach interface design at ITMO University Master’s program and lead Telegram channel about UX design…
In my work and teaching, I often face a problem: it is difficult to organize interface components so that it is always clear which component to use, so that similar components do not proliferate and do not confuse designers and developers.

I share an approach that helps me to conveniently organize components and make life easier for myself and the developers.

What are components in general

The graphical interface (GUI), as a rule, consists of buttons, fields, checkboxes, text blocks, etc. This is what we call “Components“- a kind of interactive (or not)” wrapper “of content: a button “Checkout“; checkbox “I accept the terms of the agreement“ etc.

For a UX designer, an interface is primarily a tool for solving user problems. The challenge always exists in the context: registration in the context of the airline’s website, purchase in the context of an online clothing store. Therefore, it is very important for the designer to use real headings, button names, list items. This is how we illustrate the solution to a specific problem in a specific context.

But attachment to context is fraught with potential danger, especially for large and long-term projects: contextualized components can be difficult to reuse.

Let’s look at a simple example

Let’s design a product card in the online store: picture, information, price and the “Buy” button.

And you also need a product card for the basket. There is no Buy button, but there is a Delete button and an item quantity selector. Sounds like a new component. We do it!

After some time, we will design a new feature – a personal account. The card is no longer required for the product, but for the user. A completely different component. We do it!

And now we have 3 components “Card”.

Now we want to show information about the order in the personal account. Would look good … Card!
Which of the three should you use? None of them really fit. It’s easier to make a new one.

Time passes, cards are developed and live in different places of the system.

One day we decide to modernize all the cards at once – to make the images round. Fashionable!
Changes in all cards become a challenge for a designer and a pain for developers, because there are many cards and they are different.

Three groups of edits in several places on layouts and in the system

It would take three times less changes if the card reused…

Why and how to reuse components

Reusing components helps:

make life easier for yourself and developers;
users to predict the behavior of the interface (I saw a component – I understood how it works – I know what to expect)

For the sake of reuse, following the example of React.js developers, we divide components into two types: Stupid and Smart.

The dumb component is not tied to business logic. Instead of content, it contains fish, the maximum number of states and elements. A universal building block for an interface designer.
If a “dumb” component is placed in context, on a certain page, equipped with specific content and functionality, it becomes “smart”.

The smart component is tied to business logic. It performs a specific function in a specific place. A smart component is an implementation of “dumb”.
You could say that a dumb component is a template and a smart component is an example of its use.

Card template and examples of its application

The example with cards is made in Figma. “Dumb” card – Figma-component using Auto Layout. Thanks to this, elements of the card can be deleted and changed, and its size will adjust to changes. Smart card – Figma-instance…

It is enough to make changes in the “dumb” component, and they will automatically appear in the “smart” ones. It also happens in development if the component code is reused.

Dumb UI kit

A simple and straightforward component library (UI kit), elements of which are easy to reuse and update – a turbo accelerator for design and development. And such a library consists of dumb components. I call it the “Dumb UI kit”.
If your project already has a UI kit, try making all the components in it dumb. Most likely, you will be surprised to find that many components can be unified: combine similar ones or remove duplicates. It can be difficult to “blunt” the UI kit, it will take time to revise the system and a strong design tool. Figma does great, but also Sketch does not lag behind.

A dumb UI kit will make design work easier by eliminating the need to produce components and reinvent the wheel. The developers will also thank you for the fact that they can reuse the component code.
A dumb UI kit can also be the basis for creating Storybook project.