Modular Web Design: Versatility, Usability and Serious Agility

by / Jan 27, 2020

Your website is one of your most powerful business tools. And if you’re like many B2B marketers, you know your company is in need of a new website — or a complete overhaul — but you’re hesitant to get started due to multiple concerns (cost and timing, complexity of your offerings, an overall fear of the unknown regarding today’s dig dev choices, and more!). My job is to allay these concerns and guide web design and development. The Mx Group’s digital development teams to create highly effective websites that meet serious B2B business goals. A major way we’ve been doing that lately is by creating websites with the modular design method.

As you know, web development spans a broad spectrum, from totally custom to cookie-cutter, with client needs and budgetary considerations driving the decision. Custom websites are completely unique, like a snowflake, but they represent the most expensive method, as everything must be created from scratch. This method is best suited to situations where radical individuality or brand identity is required. On the other end of the spectrum is the cookie-cutter site: lift-and-shift endeavors that cost less and go live quickly. A cookie-cutter site reuses assets from an existing site and looks similar to its predecessor.

For most of our B2B clients, their web development needs fall somewhere between snowflake and cookie-cutter, and that’s where the modular web design approach pays the biggest dividends.

What Is Modular Web Design?

Modular web design is taking “pieces” of a design and fitting them into blocks visually. Websites are created from templates, which are full-page layouts that provide the structure for individual webpage types — home, products, service pages, etc. These templates are used to create all additional pages of the same type throughout the website.

Each template contains different types of content blocks to achieve different goals — e.g., to drive a user action or to provide product specs. These are the modules, and they are the key to our approach. The conventional method of website development focuses on creating additional templates for each new goal or objective. The modular approach introduces another layer of granularity by focusing on the creation of client-specific module libraries that can be used across a variety of different templates.

The Opportunity for Endless Configurations

Modules are reusable and can be easily mixed and matched. And when we tie in a content management system such as WordPress on the back end of a site we develop, marketers or their site administrators can create new pages quickly and easily using drop-down menus and existing templates.

Usability on the back end is a major benefit of the modular approach. Configuration of the back end of a website is one of the most time-consuming and costly aspects of a build. When a modular approach is used, not only does it streamline the look and user experience on the front end, but it does the same on the back end for developers and admins as well. For developers, it establishes a development model, avoiding the need to custom-code and -configure each content type on a page-by-page basis. This in turn creates an organized modular system, making for a much more user-friendly admin experience, which means marketers will not become frustrated and quit updating the site. They can be easily trained to add content, assets and new pages using the logical, modular library.

And talk about versatile: A library of 30 modules represents the potential for 155 million different configurations! With our deep experience creating B2B websites, we can also offer clients valuable advice on which configurations drive the highest conversion rates for different objectives.

“Faster, Cheaper, Better”

Beyond allowing for endless configurations and continuous improvement, modular web design also delivers on all three aspects of one of the mantras of this digital world we’re living in: “Faster, cheaper, better.”

FASTER: New webpages, and even entire sites, can be built with existing templates and assets from the client’s module library using a drop-down menu. When utilizing the modular approach with a CMS like WordPress, speed really comes into play, because copywriters or clients themselves can go directly into a module and add or change the content whenever needed! And, because the modules have gone through the QA process when originally built, the QA step can be eliminated when changes are being made to a page. The net result is a significant increase in the site owner’s agility and ability to react to changing market conditions.

CHEAPER: The modular approach maximizes spend to provide a stronger ROI and lower total costs in the long run by minimizing the costs of coding, QA, and back-end work without sacrificing a high-quality outcome. You can use the savings to create new content and conversion paths, and efficiently optimize all your website assets.

BETTER: The emphasis on reusability leads to a more purposeful and consistent site with greater functionality for administrators. Users start to realize that when they see a particular piece of content, it usually leads to something else specific, such as a downloadable asset, a product page or a deeper piece of content. Consistent user experiences drive more conversions!

The evolution of your company’s website should be one of the most important pillars of your B2B marketing plans. If the prospect of utilizing a modular design approach for your web development project sounds appealing, let’s connect. Together, we’ll ensure that your website achieves both the individuality and the efficiency you desire, along with the business results you require!

Case Study
We used the modular design approach to develop eight websites in five months.

Miro Zugovic

Partner, Director of Front End Development & Video, The Mx Group

Miro joined The Mx Group in 2006 as a digital practitioner with a background in web development, graphic design, video, 3D and content management systems. He now leads teams of award-winning digital experts, ensuring high-quality results in both front end web development and video, often integrating both to create interactive experiences with impact. A content management system expert, he is devoted to architecting intuitive, highly functional user interfaces clients truly appreciate. Miro holds dual degrees in multimedia production and design and in interactive media.