{"id":722,"date":"2026-04-17T08:00:00","date_gmt":"2026-04-17T13:00:00","guid":{"rendered":"https:\/\/harmonic-framework.com\/?p=722"},"modified":"2026-04-16T22:33:11","modified_gmt":"2026-04-17T03:33:11","slug":"why-i-built-harmonic-design","status":"publish","type":"post","link":"https:\/\/harmonic-framework.com\/es\/why-i-built-harmonic-design\/","title":{"rendered":"Why I Built Harmonic Design"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I have worked with agile teams, waterfall teams, hybrid teams, and teams that had simply embraced anarchy. Different processes, different ceremonies, different levels of documentation and discipline. Engineers, project managers, product owners, SMEs, architects &#8211; all present, all engaged, all doing their jobs. The methodology varied. The problem did not.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Every one of them was running the same invisible experiment: four structural frameworks operating simultaneously, none of them designed to talk to each other. A domain model for the backend. A component system for the frontend. A test coverage strategy. A planning model built on user stories, or milestones, or a whiteboard covered in sticky notes. Each framework was chosen deliberately. Each was individually sound. And the system was still a mess.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Not because the people were careless. Not because the frameworks were wrong. Because the frameworks were designed in isolation, and nobody &#8211; not the engineers, not the project managers, not the product owners &#8211; had been given a tool to design the seams between them. Agile did not fix it. Waterfall did not fix it. Anarchy, while occasionally entertaining, just removed the pretense that anyone had agreed on boundaries in the first place.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-disconnected.png\" alt=\"Four professionals each holding a large puzzle piece in a different color - green, blue, yellow, and red. The pieces do not connect to each other, and question marks float above each person's head. They look engaged but uncertain. The image illustrates competent people working with frameworks that were never designed to fit together.\" class=\"wp-image-720\" srcset=\"https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-disconnected.png 1536w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-disconnected-300x200.png 300w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-disconnected-1024x683.png 1024w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-disconnected-768x512.png 768w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-disconnected-18x12.png 18w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/>\n<figcaption class=\"wp-element-caption\">Four frameworks. Four teams. Nobody designed the seams.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The Seam Is Where the Damage Lives<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When a requirement moves from product to architecture to frontend to testing to planning, it crosses four framework boundaries. Each crossing is a translation. Each translation is imperfect. By the time a feature lands in a pull request, the structural relationships that seemed clear in the planning meeting have been quietly reinterpreted at every layer. Nobody is lying. Nobody is being careless. The frameworks just do not share a vocabulary, so each layer reads the same requirement through a different lens and draws different boundaries in response.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The damage is not visible as a single failure. It accumulates as friction: the backend team draws one boundary around &#8220;checkout,&#8221; the frontend team draws a different one, the test suite covers a third shape entirely, and the project plan tracks none of them. When something changes &#8211; and it always changes &#8211; nobody can predict the blast radius. The change touches the backend boundary, which does not correspond to the frontend boundary, which does not correspond to the test boundary. Three teams are affected by a change that looked like one team&#8217;s problem.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\" data-line=\"\">flowchart TB\n    CH([&quot;A change arrives&quot;])\n\n    BE[&quot;Backend \/ DDD&quot;]\n    FE[&quot;Frontend \/ Atomic Design&quot;]\n    TE[&quot;Testing \/ Coverage&quot;]\n    PL[&quot;Planning \/ Agile&quot;]\n\n    CH --&gt; BE\n    CH --&gt; FE\n    CH --&gt; TE\n    CH --&gt; PL<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>The most persistent coupling in a system often lives at the framework boundary, not inside any single framework.<\/p><\/blockquote><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Why &#8220;Use Better Frameworks&#8221; Doesn&#8217;t Fix It<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The instinct when a team is struggling structurally is to apply the existing frameworks more rigorously. Better DDD. Stricter atomic design. More disciplined testing. Tighter agile ceremonies. Clearer requirements from the product owner. More detailed specs from the SMEs. More frequent check-ins from the project manager. I have seen teams do all of this &#8211; everyone working harder, everyone communicating more &#8211; and still produce systems where nobody could confidently predict the impact of a change.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rigour within a framework does not buy you coherence across frameworks. You can have a perfectly modelled domain on the backend, a beautifully structured component library on the frontend, and comprehensive test coverage &#8211; and still have a planning model that cannot tell you which components are affected by a domain change, because the domain model and the component model were built on different axes and never agreed on where boundaries go.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The problem is not the quality of the frameworks. It is that the frameworks were designed to answer different questions. DDD asks: what are the bounded concepts in this business domain and how do they relate? Atomic design asks: what is the smallest reusable unit, and how do elements compose into larger structures? A coverage strategy asks: what execution paths need to be exercised, and at what granularity? An agile planning model asks: what value does this deliver to the user, and how do we sequence it? These are all legitimate questions. They are the right questions for the problems each framework was built to solve. None of them is the same question. And none of the boundaries they produce correspond to the others &#8211; because none of them asked what causes this unit to change.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1448\" height=\"1086\" src=\"https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-journey.png\" alt=\"A four-panel illustration showing the journey from disconnected frameworks to structural alignment. Top-left: four people holding mismatched puzzle pieces with question marks. Top-right: the team around a table trying to force the pieces together. Bottom-left: full confusion, pieces everywhere, tangled thought bubbles. Bottom-right: the same team studying a shared blueprint together.\" class=\"wp-image-724\" srcset=\"https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-journey.png 1448w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-journey-300x225.png 300w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-journey-1024x768.png 1024w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-journey-768x576.png 768w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-journey-16x12.png 16w\" sizes=\"auto, (max-width: 1448px) 100vw, 1448px\" \/><figcaption class=\"wp-element-caption\">Every methodology produces the same struggle &#8211; until the decomposition principle is shared.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The Question None of Them Ask<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There is one question that, if every layer answered it, would produce corresponding structure across all of them: <strong>what forces this to change?<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Not what does this do. Not what does this look like. Not what value does this deliver. What forces it to change &#8211; what external pressure, what business rule, what user behaviour, what integration dependency &#8211; makes this unit of code need to be different tomorrow than it is today?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the backend answers that question, it produces components with stable interfaces and isolated volatility. Business logic lives in one place. External dependencies live in another. Workflow coordination lives in a third. The boundary between them is not a naming convention &#8211; it is a change axis. Things that change for the same reason belong together. Things that change for different reasons belong apart.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the frontend answers the same question, it produces the same structure at the interface layer. The components that change when the design system changes are different from the components that change when the business flow changes, which are different from the components that change when the underlying data contract changes. Each tier is stable against a different category of change. The structure is not identical to the backend &#8211; the concerns are different &#8211; but it is <em>corresponding<\/em>. The same vocabulary applies. A change in one layer predicts the shape of the change in the others.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When testing answers the same question, test type follows naturally from component role. A component that encapsulates pure business logic &#8211; one that changes only when the business rules change &#8211; is tested in isolation, with no infrastructure, no integration, no external dependencies. A component that coordinates workflow is tested at integration points, because its value is the orchestration, not the logic. The test suite becomes a structural map of the system. Testing difficulty is not a testing problem. It is an architectural signal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When planning answers the same question, the work breakdown structure falls out of the architecture. Components with no upstream dependencies can begin on day one. Components that coordinate between others are integration milestones. The critical path is not estimated by intuition &#8211; it is read off the dependency graph. An estimate that cannot be grounded in a component boundary is a signal that the boundary is wrong, not that the estimator needs to try harder.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Harmonic Design Is<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Harmonic Design is the application of a single decomposition principle &#8211; volatility, the axis of anticipated change &#8211; across every layer of a software system. Four disciplines, one question.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Volatility-Based Decomposition<\/strong> applies it to backend services and systems. Components are classified by what forces them to change. Managers orchestrate &#8211; the stable What, sequencing workflow without embedding business rules. Engines execute &#8211; the volatile How, implementing the business rules that change most frequently. Resource Accessors translate &#8211; the Where, isolating external systems and environmental dependencies from the domain model. Utilities provide the With What &#8211; cross-cutting concerns like logging, security, and observability available to all roles without owning any domain logic. Non-functional volatility, such as performance and scalability, is not localized to a single role; it is addressed across the architecture. A change in pricing logic lands in the PricingEngine. A change in order placement flow lands in the PlaceOrderManager. Neither touches the other.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Experience-Based Decomposition<\/strong> applies the same volatility analysis to frontend interfaces. Three tiers, each absorbing a different kind of change. Experiences own the complete user journey &#8211; the full arc from initiation to fulfillment, accumulated state across all steps, and the only tier that communicates with the backend. Flows own goal-directed sequences within a journey &#8211; one Flow, one discrete outcome, no knowledge of sibling Flows. Interactions are atomic user actions, the surface users actually touch, with no awareness of the flow they live in. Utilities handle cross-cutting concerns &#8211; locale, theming, accessibility, observability. Functional changes ripple through all three tiers. Environmental changes &#8211; a new platform, a new runtime &#8211; are absorbed by Experiences. Cross-cutting changes are absorbed by Utilities.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Boundary-Driven Testing<\/strong> derives test strategy from architectural role. The boundaries that VBD and EBD place in the system are exactly the boundaries where tests belong. Engines mock their Resource Accessors &#8211; the boundary directly below them, nothing else. Managers mock their Engines and Resource Accessors &#8211; every dependency below them, nothing above. The rule is: mock at the boundary below the component under test, not inside it. The test suite is not a separate concern bolted onto the architecture &#8211; it is the architecture made executable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Project Design<\/strong> derives the project plan from the architecture. The component graph is the dependency graph is the project network. Work packages come from components. Schedule dependencies come from architectural dependencies. Float is computed from the longest chain, not estimated by feel. When a new requirement arrives, you can compute whether it extends the critical path before a single line is written.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\" data-line=\"\">flowchart TB\n    Q([&quot;What forces this to change?&quot;])\n\n    VBD[&quot;VBD\\nBackend&quot;]\n    EBD[&quot;EBD\\nFrontend&quot;]\n    BDT[&quot;BDT\\nTesting&quot;]\n    PD[&quot;Project Design\\nPlanning&quot;]\n\n    Q --&gt; VBD &amp; EBD &amp; BDT &amp; PD<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>One question. Four disciplines. The seams between them are not translation boundaries &#8211; they are the same structure, expressed at a different layer.<\/p><\/blockquote><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Why This Matters in Practice<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">When a team builds with Harmonic Design, a few things become possible that were not possible before. A product manager can describe a change and an architect can immediately identify which components it touches &#8211; not by memory or experience, but by structural reasoning. A developer can estimate a work package with confidence because the scope is defined by the component boundary, not by the story description. A test failure points to a specific layer of the architecture rather than somewhere in the system. A schedule slip on one work package tells you exactly which downstream packages are affected and which are not.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">None of this is magic. It is what falls out naturally when the same decomposition principle is applied consistently at every layer. The frameworks talk to each other because they are all asking the same question and using the answer to draw their boundaries.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That is what was missing. That is what Harmonic Design is.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each discipline has been covered in depth in this series. <a href=\"\/vbd-in-10-minutes-organizing-code-by-change\/\">VBD in 10 Minutes<\/a> shows what this looks like for backend services &#8211; the four component roles, the communication rules, the before-and-after. <a href=\"\/ebd-in-10-minutes-interface-architecture-that-scales\/\">EBD in 10 Minutes<\/a> applies the same analysis to frontend interfaces. <a href=\"\/bdt-in-10-minutes-testing-as-architectural-evidence\/\">BDT in 10 Minutes<\/a> derives test strategy from architectural role. <a href=\"\/project-design-in-10-minutes-plans-from-architecture\/\">Project Design in 10 Minutes<\/a> shows how the architecture becomes the project plan. Each post is self-contained. Read any one of them and you will see the same vocabulary, the same structural question, applied to a different layer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"1024\" src=\"https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-connected.png\" alt=\"Four professionals holding puzzle pieces that fit together to form a single blueprint - an architectural floor plan. The pieces interlock perfectly. The image shows the same team, now working from a shared structural model.\" class=\"wp-image-721\" srcset=\"https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-connected.png 1536w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-connected-300x200.png 300w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-connected-1024x683.png 1024w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-connected-768x512.png 768w, https:\/\/harmonic-framework.com\/wp-content\/uploads\/2026\/04\/hd-connected-18x12.png 18w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/>\n<figcaption class=\"wp-element-caption\">One decomposition principle. Every layer speaks the same language.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The whitepapers are available on the <a href=\"\/whitepapers\/\">whitepapers page<\/a>. If you want to apply the framework immediately, start with VBD &#8211; apply it to one component in your current system and let the friction tell you where your boundaries are misplaced.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have worked with agile teams, waterfall teams, hybrid teams, and teams that had simply embraced anarchy. Different processes, different ceremonies, different levels of documentation and discipline. Engineers, project managers, product owners, SMEs, architects &#8211; all present, all engaged, all doing their jobs. The methodology varied. The problem did not. Every one of them was &#8230; <a title=\"Why I Built Harmonic Design\" class=\"read-more\" href=\"https:\/\/harmonic-framework.com\/es\/why-i-built-harmonic-design\/\" aria-label=\"Read more about Why I Built Harmonic Design\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[16],"tags":[],"methodology":[],"class_list":["post-722","post","type-post","status-publish","format-standard","hentry","category-foundation"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false,"post-thumbnail":false,"hf-card":false,"hf-hero":false},"uagb_author_info":{"display_name":"William Christopher Anderson","author_link":"https:\/\/harmonic-framework.com\/es\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"I have worked with agile teams, waterfall teams, hybrid teams, and teams that had simply embraced anarchy. Different processes, different ceremonies, different levels of documentation and discipline. Engineers, project managers, product owners, SMEs, architects &#8211; all present, all engaged, all doing their jobs. The methodology varied. The problem did not. Every one of them was&hellip;","_links":{"self":[{"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/posts\/722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/comments?post=722"}],"version-history":[{"count":12,"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/posts\/722\/revisions"}],"predecessor-version":[{"id":735,"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/posts\/722\/revisions\/735"}],"wp:attachment":[{"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/media?parent=722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/categories?post=722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/tags?post=722"},{"taxonomy":"methodology","embeddable":true,"href":"https:\/\/harmonic-framework.com\/es\/wp-json\/wp\/v2\/methodology?post=722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}