04 Aug What does Nature have to do with Design Process anyway?

TL:DR In nature as in the design process, the whole is greater than the sum of its parts. Integrating an Atomic (Modular) Design methodology into your design/dev process can improve team collaboration, create more efficient production cycles, and reduces design and development costs.

Carl Sagan may have said it best in his seminal PBS series Cosmos, “The beauty of a living thing is not the atoms that go into it, but the way those atoms are put together.”

Really think about that for a second. Our amazing planet with all the spectacular expressions of life can be distilled down to different systems that are created by arranging atoms in different ways. We as Experience and Product Designers, do the exact same thing.

Andy Clarke, Tim Berners-Lee, Nathan Curtis, and Dave Rupert, Dan Mall (let me know if I’ve left anyone out!) have all been preaching the benefits of a modular “start small” approach to the design and development process for a while now, and it is the foundation of Brad Frost’s forthcoming book, Atomic Design. However, the relatively recent formalization of this methodology (~ the last 5-10 years or so is still recent if you’re over 30) within Experience Strategy and Interface Design circles bely its deep philosophical and natural origins.

When we create systems that are built on an arrangement of the right elements in the proper order, we are creating a functional organism whose parts are all working together towards achieving a common goal… the whole ends up being greater that the sum of it’s parts. Much like the amazing results we find in nature, when the process is applied to experience strategy and interface design the yield is a beautiful positive… better communication between teams, more efficient design and development cycles, and more effective functional solutions.

Lets take a look at a few of the most impactful strategies that the Atomic Design Process borrows from nature’s playbook.

Nature designs for functionality.

While Experience Strategy really needs to come from the top down, UI functionality should be created from the bottom up. Together, it is a perfect marriage of vision and execution. The most successful executions of interface design are expressed in systems that enable: 1) a user to achieve their goals, and 2) a business to reach it’s objectives. By creating componentized systems, instead of trying to build full pages or sections from the outset, we can focus on the requirements of each component and build products more efficiently and cost effectively. Take a primary navigation as an example. What elements are required? Which navigation labels, social media icons, search functionality, and sub-elements need to be included to create the functional component? What happens to those elements on different devices? Do you collapse everything under a hamburger menu? Leave the most important elements visible?

The devil, as they say, is in the details…and this is just a small sample of the types of questions that need to be answered before design begins.

By taking a componentized approach like Atomic Design, two important things are achieved:

• All of the elements and components of a system can be identified prior to design or wire framing, allowing all stakeholders insight into the components that will be present in subsequent prototypes and designs.
• Each requirement that will guide the project (eg. responsiveness in a website, SaaS functionality, User Goals) can be worked out at the component level, enabling more efficient communication between design and development teams.

The more complex systems get, the more important identifying functional components up front becomes.

Nature designs for efficiency.

For the same reason that jellyfish may be the most efficient animal in the ocean, an Atomic Design approach to interface design is one of the most efficient and effective processes that I have employed when solving business problems with design. Whereas the majority of a fish’s energy input is used for movement, a jellyfish swims about 3.5x more efficiently than a fish, so it can take the remaining energy, and use it for more rapid growth and reproduction. Using the exact same inputs, the most efficient organisms maximize their output across multiple functions.

An Atomic Design Process does exceptionally well in the name of efficiency in that it maximizes its output compared to other methodologies:

Better collaboration – When the elements and components of design systems are identified even before wire framing begins, all team members gain valuable insight into the framework of the overall system. Content creators, development, engineering, business, design, and management can all contribute to the system without having to wait for the components to be laid out in design.

More efficient production – Once elements and components are identified and vetted against the business goals and user needs, design and development can occur concurrently. It doesn’t take wireframes for development to create the functionality of an intake form, it just takes the identification of the components (eg. required fields, labels, states, buttons, etc.) While design is creating the interface, the functionality can begin being outlined by development.

Less costly changes – Even though leading processes like atomic design, rapid prototyping, even user research are made to test ideas, validate assumptions, and create more functional products at lower costs, they still might not fit into large organization’s rigorously defined budget categories. Ultimately there needs to be a financial case made for deploying these “newer” practices in order to get buy-in from finance and business teams. When you front load the design/dev/build process by cataloging elements and components of the system, you are validating the system against all the results of an experience strategy before any commitment to design or development. Any changes or tweaks that need to be made to content direction, system elements, or component functionality can be identified and made at relatively low cost early in the process as opposed to when the project is deeper in the pipeline.

Nature designs for specialization.

Cheetahs are designed for speed, sharks are designed for efficient motion, and owls are designed for hunting at night.

Each of these animals has a specialized function that enables it to be competitive in it’s environment.

Just like in nature, a specialized design process can enable your organization to be more competitive in your environment.

In the end, you need to make sure the processes and systems you use work for your organization, and there are many legacy engineering and development methods that are already well entrenched.

However, if you can augment an existing way of operating with a more effective, efficient, and specialized process, wouldn’t that be a type of organizational evolution worth exploring?

This article also published on Medium.