April 03, 2018 by Hedgehog

Modular Architecture and Atomic Design: A Hedgehog Live Chat

Welcome to our Hedgehog live chat. The following transcript has been lightly edited.

Jackie (Jacqueline Baxter, Marketing Specialist): We're talking modular architecture and atomic design this round - the good, the bad and the ugly. So, let's start off easy: do you recommend modular architecture as an approach?

Donald (Donald May, Creative Director): Yes, 100%. It's more efficient and allows you to reuse atoms as building blocks for larger components

Mike (Mike Shaw, Lead Digital & Experience Strategist): Modular architecture is awesome. We can plan things out to the smallest detail and as is usually the case with things I work on - changes are faster. Changing a small factor is always easier than a large overhaul.

Justin (Justin Grall, Project Manager): From a project management perspective, modular architecture allows for more thorough project planning and detailed estimations, while also allowing for flexibility and future continuous improvements.

Donald: On the design side - applications like Sketch and Flinto were built to design for modular and atomic design. When using those apps we can increase our efficiency probably by more than 40%. There are a few design cons - the ideas behind small reusable pieces to build everything can make designs more formulaic. It also tends to have (less creative) designers try to force content into boxes where it doesn't naturally fit. When you look across the web you see a lot of template driven sites (Wordpress, Sitecore, Drupal) these all have templates as essential pieces and they are efficient but that's why everything looks the same.

Elena (Elena Mosoff, Senior Solutions Developer): There's no question. Modular architecture or what we sometimes refer to as component-driven architecture is the recommended approach. With Sitecore pushing forward the Helix principles for a couple of years already, it is now also considered best practice, so that leaves very little argument needed when we formulate recommendations. Donald, that’s interesting – you see improvements right from the beginning?

Donald: Yes. Sketch as a design tool has made it possible for us decrease design time of a larger project by about 40% to 50%.

Andy (Andy Busam, Digital Strategist): This is why Bootstrap and Foundation have been so popular, as well.

Donald: Most of the reason is that we can build reusable components in as a template or symbol and more easily change the styles to modify that symbol for other clients.

Justin: Due to design efficiency of the core site components and page build, it allows for design budget to be allocated toward more intensive and detailed brand work and a heavier focus on custom content throughout the website.

Jackie: I think the case can definitely be made that it's easier to control and style a site when modular architecture is used.

Andy: It sounds like a big issue with the approach is that it inhibits creativity or out-of-the-box thinking in favor of efficiency.

Elena: I think styling would be the trickiest piece, as front-end developers should realize that all styles for a component have to be self-contained. I've seen a lot of styles that sort of look at a page as a whole and introduce intra-component dependencies.

Donald: I guess my question is how do we make things efficient but keep them from being predictable and boring and the same as every other site? Where can we add innovation?

Elena: And I don't understand the restrictions on creativity either. Yes, you may be 'boxed' by the concept of a component, but on the other hand, that component could really be anything you want it to be.

Donald: Most of that has to do with a designer's experience. They think of these things as Lego blocks and although you could build anything with a bunch of Legos it will always look like it's built with a bunch of Legos.

Justin: I believe this is where some misconceptions of modular design begin to appear. If a brand team wanted a very unique experience, it could be created within the modular framework - just as a larger module. However, the ROI, use case, and brand value for this flashy piece really needs to be justified.

Mike: The beauty of modular for the situation is that you can have an ideal final product to strive for, prioritize each asset in the design, then go piece by piece testing for optimization. You can achieve a better end result this way.

Donald: I agree, the way to add innovation and the way to keep cost in perspective is to always apply a user experience centered approach to the design concepts and solutions.

Mike: Slow and steady wins the race.

John (John Beck, Senior Front-End Developer): Speaking from a front-end perspective, I certainly appreciate and want to see innovation and the drive to build fresh, new things for each client. HOWEVER. Generally speaking, most web content is going to be delivered to the user x number of ways. It simply isn't efficient to re-invent the wheel for every single thing you build and deliver.

Justin: When starting a modular approach, there is definitely a pretty substantial learning curve for the client about all of the nuances and impacts the approach will have on the project planning and execution. There definitely needs to be some educational sessions early on in the client engagement with all of the key business stakeholders to get buy in on the approach.

John: Plus, one has to consider whether your innovative design really serves the needs of the client. Or the end user. There are plenty of sites out there in the wild and woolly web that I've visited and marveled over their innovative and inspired design. Once. Web design will continue to evolve and grow. But there are some tried and true methods of presentation that become common threads in the DNA of the web, often because they work best; And these common threads and themes are where we can use modular design to great effect.

Jackie: That's an excellent point. Let me ask: how can modular architecture walk that line between innovation and efficiency?

Justin: The innovation comes with content - and personalized content and marketing behind the scenes. Modular architecture is a great framework to allow for custom personalized website experiences to be put in place more easily.

Donald: The innovation can come with the experience too. A list can be a basic list and you could get a content writer to create a simple list, or it can be more if the experience dictates that it should be more.

Jackie: Can you expand on that a little? I'm not 100% sure what you mean there

Donald: My point is mostly in how we think of things. Getting beyond what everyone else is doing and find the innovation.

John: Indeed. And it's a bite sized chunk of innovation that adds interactivity and punch to a page.

Jackie: Efficiency and innovation are not mutually exclusive terms.

Donald: Couldn't agree more. Creating efficiency can sometimes and often does make you innovate more.

Jackie: We found our new corporate tagline! Circling back to modular architecture being a great framework for personalization - would you say that it's easier to personalize with a modular approach?
Or does it just (LOL just) give you more opportunities?

Andy: You're baiting Mike here.

Jackie: Me? Never. Just trying to keep the conversation lively.

Mike: I say it's…unwise to consider personalization without. Not that it's impossible, it’s just not a great choice. You'll eventually hit a spot where you want to change a small detail but can't because you didn't approach the site that way. Then the strategist is a Thanos-style ultimate villain.

Justin: Modular approach allows for easier communication during the planning stage both for setting up and getting business approvals. At a conceptual level, it is much easier to elaborate more detailed marketing plans when things are laid out in a modular framework.

Jackie: Because of the flexibility modular inherently allows for?

Justin: The flexibility; the interchangeability - the ability to do simple diagram overlays with components and assign those to detailed UX / Excel maps - which are tied to personalized marketing user journey maps.

Mike: A more formal way of saying "it's a bad idea to try personalization without modular."

Justin: And that's why we keep Mike in the backroom and allow our account teams to do the educational enlightenment.

John: I think part of it is that modular design, by its very nature, allows for conceptual compartmentalization. When working with a discrete chunk of presentation, you can focus how it morphs and changes more easily via personalization.

Donald: Can I bring up another potential downside (not really a downside but something to consider) for building websites that are modular?

Jackie: Absolutely you can, Donald

Donald: When designing components that could potentially be plugged into a page anywhere you kinda need a design eye so that the resulting page still looks good.

Mike: Agreed, beauty of a CMS is that if it doesn't look good it can be changed in real time.

Jackie: YUP

John: That is true to a reasonable extent. Sometimes, the nature of the content is such that it always belongs in an aside, or in a main content area, at the bottom of a page, or what have you. That will always be an issue. But yeah, like Mike said, if what a content editor built doesn’t work as intended, it can always be changed.

Jackie: Speaking as a content editor, that's where a good style guide is very important. But I'll own that we don't always care about the original intent - sometimes it's about what fits where.

Donald: When building a site, we should think about that more – how to build components for subtle variations that a content editor can modify easily. Options for backgrounds, as an example.

John: From a design and implementation perspective, that can sometimes be planned for - sometimes we can give the content editor options to help them out. You can't realistically plan for every contingency, though.

Jackie: One final question: what is the number one thing you tell people when they’re considering modular architecture as an approach?

Elena: YOU HAVE NO CHOICE.

Mike: Yes, agreed to a million.

Justin: The one thing to note when going modular: It helps more than it hurts, but it requires a level of investment and education on the business sponsor team to fully understand the nuances and impacts of business decisions.

Jackie: I would agree with that. The advantages outweigh the disadvantages, but it's well worth acknowledging that it's not all smooth sailing.

Elena: I say...modularly (is that a word) architected solutions are easier to develop, easier to maintain, easier to test, and this results in more stable solutions. Modules can also be discarded and stripped out of the code base without leaving "legacy" traces. And as everyone else pointed out, it makes for more efficient designs, reusable content structures, and as the icing on the cake, makes things like A/B testing and personalization actually work.

Keep in Touch and Stay Informed

Get updates, industry reports, white papers and more Hedgehog love.