Chapter 03

Do you have a modular website?

Webstacks
Chapter 03

Do you have a modular website?

Traditional Web Design vs. Modular Web Design

A website isn’t modular if brands build, set, and forget it.

SaaS brands that don’t have a modular website implement a traditional web design approach instead of a modular approach, leaving their content editors out to dry. Let’s dive into the difference between traditional and modular web design.

Traditional web design requires teams to undergo constant website redesigns over some time. But that’s the problem. Brands undergo a design cycle every few years only to have a fresh new website every cycle to either look cool or stay on top of their competition. 

Similar to “John down the street has the lawnmower X2 so I’m going to purchase the X2 Turbo.” It sounds logical, but in today’s ever-changing market, SaaS brands need to understand complete redesigns or rebuilds are:

  • Unscalable websites that age over time

  • Expensive

  • Long website lifecycles

SaaS brands today need to consider how the ever-changing market should influence their web presence by constantly monitoring and improving the site based on short-term data.

On the contrary, modular web design allows teams to bite off a website project little by little which, from a marketing perspective, allows for constant website experimentation the traditional web design approach lacks.

The Benefits of Modular Web Design

Faster iterations and faster deployment

Page templates are limiting. For example, having five website page templates means you have nothing more and nothing less. Website and content teams are left frustrated with five templates that cannot be customized unless the templates are redesigned and developed.

On the other hand, a modular website that has five modules can have several page possibilities. The modules can be rearranged to build fresh new pages that aren’t templatized. The upside is that SaaS teams can quickly launch a website MVP with a bag of modules and continuously add with an iterative approach.

Need a new landing page for a seasonal campaign? Let’s see what’s in the bag of website components and define if we need to customize anything that exists. Need a podcast listing page for the company podcast? Let’s build the page using the homepage hero component and create card decks for the podcast listing page and a blog listing page in the future.

With modular web design, teams build the pages they want with existing parts. If they don’t exist, then build them. You can’t do that with templates.

Website teams have more control over the content

Teams require a content management system, preferably a headless CMS, that is flexible enough to empower content editors to build the pages they desire. Because the traditional approach to web design is for templated websites, development teams are expected to understand what marketing and content teams wish to accomplish with each page queued up for production.

Modular web design gives content teams more control of the website by bridging this gap between marketing and development teams. By starting with smaller parts of a site, content teams already know what’s available to build net new pages.

As a real-life example, let’s use LEGOs. In this case, the blocks are the website components available to content teams (LEGO builders). By having these blocks, content teams create several web pages without involving designers or developers. These two disciplines are only responsible for creating the website blocks at the very beginning and making any improvements as content teams see fit.

When content editors have more control over the website, they reap the following benefits: 

  • Improve speed to market of various campaigns and launch new promotional assets for product releases faster.

  • Quickly shift campaigns if needed based on the results and insights gathered from a customer’s website behavior.

  • Faster launches mean more pipeline for Sales teams to work with.

Seamless to maintain and alter

From the header navigation to the page footer, a modular website is easier to maintain than a template. With the help of the CMS, a content editor can rearrange the order of a page’s components whenever.

The image above shows how the components of a homepage can be rearranged using Contentful’s drag-and-drop feature. By having independent parts, content editors can build multiple homepage variations.

With traditional web design, SaaS teams enter cycles of six-month-long redesigns only for the site to sit for years until it’s time to do it all over again. Why not make gradual changes in six months as if the website were a product?

In modular web design, it’s faster to make any updates to the blocks rather than rebuilding an entire template. Make changes to the individual blocks on an ongoing basis to see what sticks with the respective audience.