As it appears in the dictionary, the definition of modular is the following: constructed with standardized units or dimensions for flexibility and variety
in use – so far so good.

When you’re designing a digital product for a long project, two questions probably come to mind when planning it: “How long will it last?” and “Is it scalable?”

The super fast advance of technology has (of course) a huge impact on the answer. What is conventional and up to date today, tomorrow is obsolete. You don’t see an app, website or even an operating system to have exactly the same UI or even user experience for more than a year or two.
However, there are interface patterns that remain untouched (… well, slightly).

But what’s the definition of modular design?

It’s been around for a long time now. It’s basically a design approach that creates things out of independent parts with standard interfaces that can be stacked, rearranged, customized, reused, and so on.

In other words, this method is about taking a design and breaking it down into small parts (these are the modules). Then these small parts are created independently which later will be combined into a larger system.

So the point is to be able to change or fit singular elements without replacing
the entire system.

Due to its reusability, modular design is very beneficial and sustainable.

Adopting modular design and reusable patterns into your design workflow
can improve the consistency and quality of your platform.

History time!

We could say that the modular design fever started off in the 1970s with Frank Ariss’s revolutionary newspaper design for Minneapolis Tribune that had this perfectly modularised structure.

It truly stood out of the crowd in the United States where at that time most daily newspapers still followed the ‘50s structure.

Modularity in product design

Modularity is very popular in the product industry. The use of units that can function individually eases manufacturing. It speeds up the assembling process
of an electronic or mechanical system.

Because they can transform based on changing needs of the consumer, these product sets were adapted by many industries, mostly for commercial needs like cars, furniture, computers, and the list goes on.

A well-known example is Lego toys but Ikea implements this method smoothly into their products.

As you can see the modularity of the design is not only in the shape of their storage furniture which allows it to be set in different directions, but also the parts that make up the piece itself, which are rectangles of different sizes repeating the same pattern.

This makes modular design very cost-efficient from a manufacturing perspective. Building small parts that can be put together later is much easier than building one complex piece.

In combination, the modules become increasingly complex and customizable, changing to fit the situation.

How to implement it digitally in UI and Development?

Modular web design: When it comes to web design, we refer to modules as elements you can re-use throughout your pages.

Good examples of modular UI design patterns consist of:

• Responsive grids
• Tile windows
• Card design

As you can see modules are used repeatedly in all of the examples to provide
a flexible design.

Responsive fluid grid by Xiu(Sue) Guo

Responsive Grids provide the structure to the web pages so the content can
easily adapt to different screen sizes.

It consists of rows and columns. Rows are set to take 100% of the width of the screen and are used to group columns vertically.

Columns fit into these rows and can be configured to a set of predefined values which determines the space they should take up on the screen. Most responsive grid sections don’t guide content but instead contain content. The modules reorganize depending on the screen size. The content in these modules adapt to the new size, and this makes the whole structure responsive.

Admin dashboard by Subash Chandra

The Tile UI pattern uses a grid as a basis as well it has more dynamic layouts due to the modules which are proportional to each other. It gives a more diverse layout to the rows and columns. Also in most cases users can configure the size, or the content.

Card design nowadays is a well-known trend. It consists of card containers in which are the modules. It can be displayed in different types of layouts
(masonry layout, stack layout) and still show scannable contents to the users. From this perspective card design is very adaptable, you can do many things
with them: turn them over, reveal more content, stack them and so on.

We have to keep in mind to standardize elements at the design stage.
Language is fundamental to collaboration. We need to use a common design language which makes developers understand why things are designed in a certain way and as designers, we need to know-how modules are built so we
can modify them without having to create a module from scratch.

It’s useful for both designers and developers to define the purpose of the elements they have to create. At this stage it is useful to ask many questions:
“Will this module always be full width? Why? Will it always include those buttons? Is the typography likely to change? Is the image background critical
to the design?

Developers use best practice techniques, such as Block, Element, Modifier (BEM) syntax, to create clean, maintainable code that can easily be handed off and taken over. Designers should consider specifying UI styles at the atomic level changes wouldn’t affect the module’s base.

What are the advantages of modular design?

• Easy communication: within the designer and developer due to standardised namings
• Simple changes across the design
• More organised content: clear boundaries within clean – looking elements
• Decreased production time
• Easier navigation: users find the information they want easier due to the clear separation between elements
• Highly responsive: it can be adapted to mobile devices easier

Imagine this: You create a product for a client that works well …

…and when it is finished all the control you had on it is lost. This is a reality for most non-in-house designers.

Design culture is fortunately changing and a great deal of companies are now recruiting designers who keep their products up-to-date on the long run, but what about those who don’t? Your job is to make sure that even they are happy about their product for a long time coming.

When your product cannot handle more features

Recently we’ve worked on a project for a client called VCC. They are a cloud-based call center software that allows the managing of different types of channels, like audio calls, emails, sms’s or chats. Their focus was initially only on audio calls and their product was designed based on that. It was working pretty well until they needed to add more functions like, for example, the email channel. And that’s where the problem started.

Their product was not prepared to get that new feature. They still needed to add it, so it was “squeezed” into the program and – of course – it caused severe user experience problems. Inconsistent communication, the different naming of the same functionality and important areas with difficult access were some of the issues. Their own call center support was flooded daily with questions about the service.

Fortunately, they realized that to scale their product it was not enough to add more features; the whole product needed to be redesigned to fit their current
and future needs.

When our UX company started this project, we were already aware of the previously mentioned functions and we knew that in the near future they
are also going to implement new features, like social networking channels, according to their own client needs.

This is the type of project where a modular design system comes in handy

Moving away from designing web pages to designing systems is the foundation of a good and effective modular design in a digital product.

The atomic design methodology from Brad Frost was a base used to define the patterns we needed to follow through the project. It’s a system that promotes consistency and scalability and that is exactly what we were aiming for.

The project was divided into two major parts – Agents and Supervisors interfaces – and we started with the first one which was more simple to deal with (and yes, it turned out to be more complex than we initially thought).
This is the one I’m going to focus on here.

What started to be just a facelift of the current system turned out to be a complete website redesign. And that was the best thing that could have happened.

After the complete restructure of the content, navigation system, and tests over tests to make sure we fulfilled the basic needs of the Agents, we had to merge that same content to singular modules that fit different purposes and scenarios.

Once we defined the core elements and patterns we started to have a library. This made us think about design in terms of distinct reusable components.

Modular design approach on the new ticketing system

What previously was only composed of email threads is now constitutes every available channel, agents or participants’ components. On the right side of the screen the agent can access all the elements available on the current ticket or add some new ones. All of the elements were reused in different modules inside that page or through the whole program.

Does the team not deal with emails or chat, just with audio calls? No problem, simply remove those modules and use the ones you need.
Does a specific VCC client need a new feature implemented on their side?
I guess you know where I’m going with this… just add a module with those features.

A style guide is essential to a solid and functional design system

Brad Frost writes in his Atomic Design book: The cornerstones of a good design system are style guides, which document and organize design materials while providing guidelines, usage, and guardrails.

And that was what I delivered to the client. Although we were working on an Agile method with the development team I knew there would be a time I would have to let go of the project. This way I can assure it will ‘live long a prosper’.

This was just an example of a project we worked on with a modular approach to show you that it is possible to future proof your concept.

It’s not a simple process, but the end result makes the life of your clients a lot easier.

And that is what we are aiming for, right?

Some other examples we like

Reserved is still one of the all-time modular design users.

Reserved is an excellent example of how online stores can use grids to look organized, regardless of the size of their catalog.

Baubauhaus

Even regular grids don’t have to look boring, as this website proves.

There are different ways to apply a modular design principle

Here is a quick sum-up of our approach based on my experience:

• Create a consistent content structure and therefore a compatible, but flexible navigation.
• Make sure you’re using the right tone of voice throughout the whole product.
• Try to step away from designing pages! Design systems instead.
• Define patterns and collect them in a library in order to be able to use them again.
• Document your design materials in a style guide.

What solutions do you use to scale and persuade the healthy growth of a project you’re working on? Are you thinking about a modular approach? Please share your thoughts in the comments below 🙂

Take the next step to improve your website’s UX

As a top ui/ux design agency, we’ve successfully handled 250+ collaborations with the clients worldwide.

Is there anything we can do for you at this moment? Get in touch with us and let’s discuss your current challenges.

Our experts would be happy to assist with the UX strategy, product and user research, UX/UI design.