<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Paul Love</title>
    <description>The latest articles on Forem by Paul Love (@anglepoised).</description>
    <link>https://forem.com/anglepoised</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1136099%2Faae47d9e-9a07-4482-a040-3a8a4a9e1c2a.jpeg</url>
      <title>Forem: Paul Love</title>
      <link>https://forem.com/anglepoised</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/anglepoised"/>
    <language>en</language>
    <item>
      <title>Design systems that scale: the case for composability</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Thu, 18 Dec 2025 12:27:16 +0000</pubDate>
      <link>https://forem.com/measuredco/design-systems-that-scale-the-case-for-composability-2npn</link>
      <guid>https://forem.com/measuredco/design-systems-that-scale-the-case-for-composability-2npn</guid>
      <description>&lt;p&gt;Many design systems eventually hit the same wall: By growing to accommodate every variation teams need, they become gruelling to maintain. &lt;/p&gt;

&lt;p&gt;A designer needs a button with an icon on the right, not the left, for example. Or an engineer needs a modal that can nest inside another modal. And so on.&lt;/p&gt;

&lt;p&gt;Soon enough, the system bends under the weight of prop after prop until it becomes harder to use than to work around. We see this pattern repeatedly on large-scale UI systems.&lt;/p&gt;

&lt;p&gt;There is a solution: composability — a principle by which design systems continue to work well as they scale.&lt;/p&gt;

&lt;p&gt;Composability should be a core principle when building UI, essential both for large systems and smaller systems with big ambition. But it’s poorly understood, and therefore often overlooked. &lt;/p&gt;

&lt;p&gt;Here’s how to apply composability as the foundation of a successful, large-scale design system.&lt;/p&gt;

&lt;h2&gt;
  
  
  Organisation by technology — the problem composability solves
&lt;/h2&gt;

&lt;p&gt;In early web development, the dominant approach was document-first. HTML, CSS and JavaScript were separated into distinct layers, each with its own concerns: structure, style and behaviour respectively. MarkoJS call this &lt;a href="https://markojs.com/docs/explanation/separation-of-concerns" rel="noopener noreferrer"&gt;separation of concerns by technology&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Many people still passionately believe in separation by technology, but this purity is unhelpful in modern contexts. Not least because both CSS and HTML have gained behavioural capabilities themselves.&lt;/p&gt;

&lt;p&gt;At scale, with large teams working on different parts of complex applications, separation by technology struggles. A CSS change to fix one page mysteriously breaks another. A JavaScript tweak cascades through unrelated features. &lt;/p&gt;

&lt;p&gt;The separation that should contain the complexity instead disperses it. When systems become overly dependent on each other across these boundaries, it's known as high coupling — the classic anti-pattern that keeps on giving.&lt;/p&gt;

&lt;h2&gt;
  
  
  The emergence of composability, or organisation by functionality
&lt;/h2&gt;

&lt;p&gt;Ironically, composability predates the web. It emerged as a principle in 1970s computer science and mid-20th century systems theory.&lt;sup id="fnref1"&gt;1&lt;/sup&gt; It involves building complex systems from smaller, self-contained parts with clear boundaries. It’s separation of concerns by functionality rather than technology.&lt;/p&gt;

&lt;p&gt;Composability in this context means defining what a component does, how it relates to other components, and crucially, how it protects itself from unintended interactions. When done properly, parts can be reused, recombined, and updated without unintended side effects rippling through the system.&lt;/p&gt;

&lt;p&gt;Modern JavaScript frameworks, particularly React, formalised this approach through component models. Each component keeps its own implementation close by, while staying small enough to be composed from and alongside others. &lt;/p&gt;

&lt;h2&gt;
  
  
  Why it’s powerful
&lt;/h2&gt;

&lt;p&gt;For large organisations, composability isn't just a nice-to-have. It's the difference between a system that enables teams and one that obstructs them.&lt;/p&gt;

&lt;p&gt;Composability reduces the need for cross-team coordination. Teams can work independently within well-defined boundaries, making parallel work possible without treading on each other’s toes. &lt;/p&gt;

&lt;p&gt;Instead of negotiating every change, teams can simply get on with their bit. No more &lt;code&gt;@here&lt;/code&gt; distraction bombs dropped into Slack.&lt;/p&gt;

&lt;p&gt;It also makes updates safer and easier to test. Changes are contained, reducing the blast radius of bugs.&lt;/p&gt;

&lt;p&gt;Conversely, when composability is overlooked, teams tend to work around the system. As a result, bad things happen:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Designers &lt;a href="https://help.figma.com/hc/en-us/articles/360038665754-Detach-an-instance-from-the-component" rel="noopener noreferrer"&gt;detach components&lt;/a&gt; from the system and retreat into Figma, widening the gap between design and implementation&lt;sup id="fnref2"&gt;2&lt;/sup&gt; &lt;/li&gt;
&lt;li&gt;Engineers fork components or rebuild from scratch, fragmenting the codebase&lt;/li&gt;
&lt;li&gt;Component APIs accumulate baroque collections of props (&lt;code&gt;showIconLeft&lt;/code&gt;, &lt;code&gt;showIconRight&lt;/code&gt;, &lt;code&gt;iconLeftSize&lt;/code&gt;, &lt;code&gt;iconRightSize&lt;/code&gt;, &lt;code&gt;iconLeftColor&lt;/code&gt;…)&lt;/li&gt;
&lt;li&gt;Styles and behaviours become context-dependent and unpredictable&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A composable system prevents these outcomes. Components can be assembled with confidence, and behaviour remains consistent regardless of context.&lt;/p&gt;

&lt;h2&gt;
  
  
  The composability–configuration continuum
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; This section contains contrived examples for purely illustrative purposes.&lt;/p&gt;

&lt;p&gt;Composability and configuration aren't mutually exclusive. They represent different points on a spectrum, each with distinct trade-offs.&lt;/p&gt;

&lt;p&gt;At the configuration end, teams extend functionality through props and toggles. A typical configuration-based button might look like:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&amp;lt;Button variant="primary" size="large" icon="arrow" iconPosition="right" /&amp;gt;&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;It's intuitive and requires minimal learning. But configuration doesn't scale gracefully. Each new requirement adds props. Each prop increases testing and maintenance overhead. Performance degrades. The API becomes harder to reason about. &lt;/p&gt;

&lt;p&gt;At the composability end, systems provide smaller, general-purpose building blocks that teams combine. Instead of a &lt;code&gt;Button&lt;/code&gt; component with an &lt;code&gt;icon&lt;/code&gt; prop, you might have:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight jsx"&gt;&lt;code&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;ButtonText&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;Continue&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;ButtonText&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;ButtonIcon&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Arrow&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;ButtonIcon&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The trade-off is that it requires more discipline up front. Teams must understand how components fit together. &lt;/p&gt;

&lt;p&gt;But it scales better: new requirements are handled through new combinations of existing parts rather than adding new props. The component stays simple and the API stays stable.&lt;/p&gt;

&lt;p&gt;Most systems land somewhere between these extremes. But composability serves as a useful north star. A well-designed composable system makes the right thing easy and the wrong thing difficult — not through restriction, but through sensible defaults and clear APIs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Designing composable systems
&lt;/h2&gt;

&lt;p&gt;Designing for composability demands intention. &lt;/p&gt;

&lt;p&gt;Key principles include:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Co-locate structure, style and logic:&lt;/strong&gt; Everything related to a component should live together.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Support internal composition:&lt;/strong&gt; Design components that accept children, use slot patterns, or provide sub-components that work together.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Create clear, documented prop APIs:&lt;/strong&gt; Every prop should have clear purpose, naming and type constraints. Avoid generic escape hatches like &lt;code&gt;className&lt;/code&gt; or &lt;code&gt;style&lt;/code&gt; props that allow arbitrary overrides.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Use explicit prop types and validation:&lt;/strong&gt; TypeScript interfaces or PropTypes that make correct usage obvious and incorrect usage difficult.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Choose sensible defaults:&lt;/strong&gt; Defaults that encourage correct usage without requiring configuration.&lt;/p&gt;

&lt;p&gt;Composability is less about building a perfect system and more about designing for change. It allows systems to evolve safely. Versioning makes it possible to release early, gather data from real-world use, and iteratively improve.&lt;/p&gt;

&lt;h2&gt;
  
  
  Learning from existing systems
&lt;/h2&gt;

&lt;p&gt;Existing design systems can provide useful reference points. It’s often said that teams need to build a bad design system before they can build a good one. Reviewing what’s already out there can accelerate that learning process.&lt;/p&gt;

&lt;p&gt;There are many well-documented public design systems available. Building small features with them is a good way to see how composable patterns behave, and how boundaries are defined and respected in actual use.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.radix-ui.com/" rel="noopener noreferrer"&gt;Radix UI&lt;/a&gt; provides unstyled, accessible components built on composition. &lt;a href="https://mui.com/material-ui/" rel="noopener noreferrer"&gt;Material UI&lt;/a&gt;, &lt;a href="https://ant.design/" rel="noopener noreferrer"&gt;Ant Design&lt;/a&gt; and &lt;a href="https://carbondesignsystem.com/" rel="noopener noreferrer"&gt;Carbon&lt;/a&gt; similarly show different approaches to balancing composition and configuration. &lt;a href="https://primer.style/" rel="noopener noreferrer"&gt;Primer&lt;/a&gt; demonstrates how composability works in a large, multi-platform system.&lt;/p&gt;

&lt;h2&gt;
  
  
  Adopting composability
&lt;/h2&gt;

&lt;p&gt;It’s possible to shift from a configuration-heavy system to a more composable one, but it’s rarely straightforward. You can't simply deprecate the old and ship the new.&lt;/p&gt;

&lt;p&gt;You often end up with two systems living side by side: one designed for configuration, the other for composition. This creates confusion and duplication. You carry the baggage of the old system for a long time — maybe forever.&lt;/p&gt;

&lt;p&gt;In cases where existing systems must remain in place — what we call heritage systems — pragmatic workarounds may be necessary. But where new systems can be introduced, composability should be the starting point.&lt;/p&gt;

&lt;p&gt;Strategies that help:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Version new components separately:&lt;/strong&gt; Make it clear which components represent the new approach, reducing confusion about which to use.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Document thoroughly:&lt;/strong&gt; Don't assume teams will figure things out. Provide concrete examples of translating old patterns to new ones.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Accept coexistence of systems:&lt;/strong&gt; Fighting the reality burns goodwill and slows adoption.&lt;/p&gt;

&lt;h2&gt;
  
  
  Start small
&lt;/h2&gt;

&lt;p&gt;If composability is new territory for your team, don’t rush into a big commitment. &lt;/p&gt;

&lt;p&gt;Here are things you can do in the early stages:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Audit a problematic component:&lt;/strong&gt; This might be a button, card, or modal with dozens of props. Map which props are actually used, which conflict, and which are workarounds. This reveals where configuration has failed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Sketch a composable alternative:&lt;/strong&gt; How would you rebuild it using composition? You don't need to implement it. Just design the API. What becomes simpler? What becomes harder?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Build a pilot component:&lt;/strong&gt; Choose something new rather than a replacement for existing work. A feature that needs a component the system doesn't provide yet. Build it composably from the start.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Review an established system:&lt;/strong&gt; Pick an established public design system. Build a small feature with it. Notice what feels natural, what feels awkward, how the pieces fit together.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Share your learning:&lt;/strong&gt; Document what you've learned. Show examples. Build shared understanding before attempting larger changes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Worth the effort
&lt;/h2&gt;

&lt;p&gt;Composability is not a new idea. It’s a practical principle that supports maintainability, development speed, and consistency — particularly in complex environments.&lt;/p&gt;

&lt;p&gt;It requires clarity of intent, thoughtful design, and a willingness to change how teams work. But the investment is worth it to build more resilient systems that you can iterate faster, and which your teams can trust without working around.&lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;Inessential reading rabbit hole: Ludwig von Bertalanffy’s &lt;a href="https://www.goodreads.com/book/show/1096749.General_System_Theory" rel="noopener noreferrer"&gt;&lt;em&gt;General system theory: foundations, development, applications&lt;/em&gt;&lt;/a&gt; (1968), David Parnas’s &lt;a href="https://dl.acm.org/doi/10.1145/361598.361623" rel="noopener noreferrer"&gt;&lt;em&gt;On the criteria to be used in decomposing systems into modules&lt;/em&gt;&lt;/a&gt; (1972), John Backus’s &lt;a href="https://dl.acm.org/doi/10.1145/800223.806757" rel="noopener noreferrer"&gt;&lt;em&gt;Function level programs as mathematical objects&lt;/em&gt;&lt;/a&gt; (1981). ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn2"&gt;
&lt;p&gt;In &lt;a href="https://www.salesforce.com/blog/figma-component-health/" rel="noopener noreferrer"&gt;Don’t Detach: Why Figma Component Health Matters&lt;/a&gt;, Salesforce’s Lightning Design System team identifies detaching as a critical threat to design system health. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>webdev</category>
      <category>architecture</category>
      <category>design</category>
      <category>frontend</category>
    </item>
    <item>
      <title>UI components as Lego: an analogy too far, or not far enough?</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Tue, 09 Dec 2025 14:32:17 +0000</pubDate>
      <link>https://forem.com/measuredco/ui-components-as-lego-an-analogy-too-far-or-not-far-enough-50e9</link>
      <guid>https://forem.com/measuredco/ui-components-as-lego-an-analogy-too-far-or-not-far-enough-50e9</guid>
      <description>&lt;h1&gt;
  
  
  UI components as Lego: an analogy too far, or not far enough?
&lt;/h1&gt;

&lt;p&gt;The UI Lego analogy is always good for an eye-roll. Components are bricks. Product teams build things with them. An apple a day. Red sky at night.&lt;/p&gt;

&lt;p&gt;But if it wasn’t valid, it wouldn’t have persisted long enough to grow stale.&lt;/p&gt;

&lt;p&gt;Is it still useful? We say it is — if you extend it, that is. Because having a nice set of bricks is no longer enough.&lt;/p&gt;

&lt;h2&gt;
  
  
  An incomplete picture
&lt;/h2&gt;

&lt;p&gt;Here’s a common model for building complex things on the web: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;A central UI team builds the components&lt;/li&gt;
&lt;li&gt;Product teams assemble experiences from them&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This scenario can reduce the design system to a fixed library of components. &lt;/p&gt;

&lt;p&gt;Product teams choose from the box of pieces and fit them together. But it only includes pieces for the product needs you can see this side of the horizon.&lt;/p&gt;

&lt;p&gt;A Lego set is perfect for building one thing. But when you’re finished, someone’s going to want to turn it into something better. There comes a time when the product team will need something that doesn’t exist yet. What then?&lt;/p&gt;

&lt;h2&gt;
  
  
  Beyond the manual
&lt;/h2&gt;

&lt;p&gt;A good design system doesn’t only provide components. It enables teams to create new ones. &lt;/p&gt;

&lt;p&gt;This raises an obvious tension: if product teams can build their own things, how do you maintain quality and consistency? Who maintains it? Who prevents chaos?&lt;/p&gt;

&lt;p&gt;There's no one answer, but there is a &lt;a href="https://measured.co/blog/continuums-as-a-tool" rel="noopener noreferrer"&gt;continuum&lt;/a&gt; of options. At one end, you have complete lockdown: the UI team controls everything, making outside contributions difficult, if not impossible.  &lt;/p&gt;

&lt;p&gt;At the other, you have federation: anyone can add anything in the name of community ownership — which tends to mean no ownership. Quality becomes inconsistent and the system fragments.&lt;sup id="fnref1"&gt;1&lt;/sup&gt;)&lt;/p&gt;

&lt;p&gt;We find that successful systems start out with strict controls. Clear standards facilitate the rapid progress you need to show early on.&lt;/p&gt;

&lt;p&gt;But to grow well, they need to gradually open up as they mature. That doesn’t mean phasing out control. It means putting governance systems in place. Create documented processes and controls for ownership, contribution and deprecation. &lt;/p&gt;

&lt;p&gt;Maintaining over-rigid control indefinitely creates problems. Product teams build what they need anyway, outside the system. Shadow components proliferate. The design system becomes gradually less useful in enabling the work being done.&lt;/p&gt;

&lt;p&gt;When you add means of both enablement and governance to your collection of components, you elevate it to a full-fledged design system. That is, it becomes a system of systems.&lt;sup id="fnref2"&gt;2&lt;/sup&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  In the shadows
&lt;/h2&gt;

&lt;p&gt;Shadow components aren’t to be feared. They’re useful signals, not least that you have a motivated team that wants to get things done. &lt;/p&gt;

&lt;p&gt;But they also signal that the system isn’t meeting all needs. That could be because the contribution process is hard to understand, onerous to follow, or both.&lt;/p&gt;

&lt;p&gt;Ask what problem they were trying to solve and why the existing system didn’t work for them. The answer will reveal gaps to fill.&lt;/p&gt;

&lt;h2&gt;
  
  
  Making it work
&lt;/h2&gt;

&lt;p&gt;Your design tokens, icons, and foundational elements need to be available in every format the teams use, be that CSS custom properties, JSON, JavaScript, or any other. &lt;/p&gt;

&lt;p&gt;Documentation should cover both how to use and build components, structured around different user needs.&lt;sup id="fnref3"&gt;3&lt;/sup&gt;  &lt;/p&gt;

&lt;p&gt;Everything should live in one place rather than scattered across repos, wikis and Slack channels.&lt;/p&gt;

&lt;p&gt;The payoffs are substantial: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Teams stop wasting time rebuilding primitives.&lt;/li&gt;
&lt;li&gt;Consistency becomes the default rather than an aspiration. &lt;/li&gt;
&lt;li&gt;Brand identity holds together. &lt;/li&gt;
&lt;li&gt;Development speed increases because new problems are only new once — when they arise again, you’ve already solved them.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Building on the Lego analogy
&lt;/h2&gt;

&lt;p&gt;These benefits only materialise when you move beyond the component catalogue model. &lt;/p&gt;

&lt;p&gt;The Lego analogy holds – but only if your teams can tool up and make new bricks. The goal isn’t to provide every possible component. It's to provide foundational components plus the means to create more.&lt;/p&gt;

&lt;p&gt;In other words, you’ve built a beautiful Lego factory. Now it’s time to hand out the golden tickets.&lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;See Nathan Curtis’s &lt;a href="https://medium.com/@nathanacurtis/the-fallacy-of-federated-design-systems-23b9a9a05542" rel="noopener noreferrer"&gt;The fallacy of federated design systems&lt;/a&gt;, on the “damage and distress of glorifying the wrong model”. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn2"&gt;
&lt;p&gt;Brad Frost's &lt;a href="https://bradfrost.com/blog/post/the-design-system-ecosystem/" rel="noopener noreferrer"&gt;The design system ecosystem&lt;/a&gt; breaks down how design systems are ecosystems of interconnected parts all working together. The component library is just one piece. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn3"&gt;
&lt;p&gt;The &lt;a href="https://diataxis.fr/" rel="noopener noreferrer"&gt;Diataxis&lt;/a&gt; framework structures documentation around four distinct user needs: tutorials, how-to guides, explanations of concepts, and reference material. It’s a great starting point for planning documentation. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>ui</category>
      <category>designsystem</category>
      <category>webdev</category>
      <category>management</category>
    </item>
    <item>
      <title>Start with a slice: 7 steps to get your new design system moving</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Tue, 14 Oct 2025 11:46:17 +0000</pubDate>
      <link>https://forem.com/measuredco/start-with-a-slice-7-steps-to-get-your-new-design-system-moving-4951</link>
      <guid>https://forem.com/measuredco/start-with-a-slice-7-steps-to-get-your-new-design-system-moving-4951</guid>
      <description>&lt;p&gt;Getting a design system off the ground is hard. Teams often start too broadly. Without a concrete goal, it's easy to get stuck weighing up the options.&lt;/p&gt;

&lt;p&gt;In this post we share how to take a more focused approach by choosing a narrow slice to build to show value quickly.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Start with a visible, bounded slice
&lt;/h2&gt;

&lt;p&gt;Choose one or two target pages to begin with. These pages should be highly visible but clearly bounded. You want a manageable scope, but also show an immediate impact. &lt;/p&gt;

&lt;p&gt;A focused slice helps reveal the right problems early and demonstrates progress everyone can see. &lt;/p&gt;

&lt;p&gt;The homepage is often a strong choice. It’s rarely representative on its own, but it's often politically non-negotiable. People will inevitably ask, “… but what about the homepage?” Including it is a pragmatic way to avoid hassle.&lt;/p&gt;

&lt;p&gt;Pairing it with a second, more typical page helps make sure you're solving recurring problems. This could be a product listing or dashboard, for example.&lt;/p&gt;

&lt;p&gt;Avoid pages that make heavy use of overlays or modals. That’s too much complexity, too early.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Build a shadow world with Storybook
&lt;/h2&gt;

&lt;p&gt;Create a shadow world. Recreate your product in a low-stakes space your team owns. It’s not live. It’s not connected to real data. It doesn’t need to be perfect. It’s a place to explore and demonstrate what your design system can do.&lt;/p&gt;

&lt;p&gt;Set up a &lt;a href="https://storybook.js.org/" rel="noopener noreferrer"&gt;Storybook&lt;/a&gt; environment to develop and present components without delivery pressure. This removes risk by letting you experiment, validate decisions and get buy-in before touching production code. &lt;/p&gt;

&lt;p&gt;Storybook lets you test components in isolation, explore states and variants, and prototype static pages. This creates a shared frame of reference and enables fast iteration.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Categorise your components deliberately
&lt;/h2&gt;

&lt;p&gt;Next, analyse your target page. Divide what you see into three categories:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Potential design system components:&lt;/strong&gt; Reusable patterns like buttons, cards or form fields. &lt;br&gt;&lt;br&gt;
&lt;strong&gt;Site furniture:&lt;/strong&gt; Recurring structural elements like headers, footers, and navigation. &lt;br&gt;&lt;br&gt;
&lt;strong&gt;Custom components:&lt;/strong&gt; Unique, often complex, items.&lt;/p&gt;

&lt;p&gt;Design tokens tie all three together with consistent styling. This resists the trap of becoming the department responsible for all the things rather than a team that enables others.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Decide what to tackle and what to park
&lt;/h2&gt;

&lt;p&gt;Be strict about scope. Account for layout mechanics and logic underpinning visible components. Keep a list of future needs, but resist tackling them now. (This makes a great starting point for an &lt;a href="https://measured.co/blog/opportunity-roadmaps" rel="noopener noreferrer"&gt;opportunity roadmap&lt;/a&gt;.)&lt;/p&gt;

&lt;p&gt;Look out for what we call icebergy componenets: seemingly simple elements that hide complexity. For example, a bell icon might open a complex messaging panel. A text input requires validation states, complex accessibility features, and error handling.&lt;/p&gt;

&lt;p&gt;Start with the simplest version that works. You can always add complexity later, but you can't ship if you try to solve every edge case upfront.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. List components, then order your steps
&lt;/h2&gt;

&lt;p&gt;List the components needed for your target page. Group them by type. Start with something basic like a button. Jot down what it needs to get it working.&lt;/p&gt;

&lt;p&gt;This simple exercise reveals more than you'd expect. Particularly if you're new to design systems, or if your role isn’t hands on. it surfaces foundational work that wasn't on your radar. You'll discover you need to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Define and create a starter set of design tokens&lt;/li&gt;
&lt;li&gt;Set up tooling: code repositories, Storybook deployments, tests&lt;/li&gt;
&lt;li&gt;Figure out versioning and publishing&lt;/li&gt;
&lt;li&gt;Write basic getting started docs&lt;/li&gt;
&lt;li&gt;Factor in cross-cutting concerns like accessibility, security, and internationalisation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One by one, move to the next component, noting only new tasks. The net-new work shrinks rapidly as foundational elements fall into place.&lt;/p&gt;

&lt;p&gt;This approach reveals everything you need for an alpha release and exposes hidden complexity early so you can plan for it rather than scramble.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Create the right conditions
&lt;/h2&gt;

&lt;p&gt;This approach demands a collaborative, cross-functional team. It helps to have T-shaped people: developers who care about design and designers with technical empathy. &lt;/p&gt;

&lt;p&gt;You need a shared mindset embracing modern product development. Without it, teams fall back into old patterns. Design becomes a one-off handover rather than a collaboration, and the whole approach fails.&lt;/p&gt;

&lt;p&gt;Set expecations: progress and learning in tandem are key.&lt;/p&gt;

&lt;h2&gt;
  
  
  Clarity, momentum, and progress
&lt;/h2&gt;

&lt;p&gt;A narrow, visible slice gives your team a shared focus and a tangible goal. It helps you solve the right problems early, without overthinking.&lt;/p&gt;

&lt;p&gt;The trick isn't having all the answers upfront. It's building something real that teaches you what questions to ask next. Get your slice working, and momentum takes care of the rest.&lt;/p&gt;

</description>
      <category>designsystem</category>
      <category>webdev</category>
      <category>management</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Continuums as a tool for understanding</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Tue, 07 Oct 2025 15:37:51 +0000</pubDate>
      <link>https://forem.com/measuredco/continuums-as-a-tool-for-understanding-305k</link>
      <guid>https://forem.com/measuredco/continuums-as-a-tool-for-understanding-305k</guid>
      <description>&lt;p&gt;People are natural problem-solvers. We like to fix things. So when we’re faced with a complex problem, it’s not surprising that we want to solve it. Usually in the fastest and best way possible.&lt;/p&gt;

&lt;p&gt;But there’s risk in trying to fix the whole problem at once. For one, it can make it very difficult to know where to start, which often leads to a form of paralysis. People naturally bounce on to more readily-solvable problems instead.&lt;/p&gt;

&lt;p&gt;Almost always, it helps to step back to visualise the range of possibilities. This is where the idea of a continuum can be a powerful tool in understanding. It helps move from reflexive solutionising to a more considered approach.&lt;/p&gt;

&lt;h2&gt;
  
  
  DIY as a spectrum
&lt;/h2&gt;

&lt;p&gt;As an example, think of renovating a room at home.&lt;/p&gt;

&lt;p&gt;At one end of the spectrum, you could handle every aspect of the project yourself. It’s the most time-consuming option, but it will save a lot of money. It's also difficult, and might lead to a less good outcome. (No offence.)&lt;/p&gt;

&lt;p&gt;At the other end, you could pay to outsource the whole project to relevant trades. Expensive, but it does give you time back, and should lead to the best results.&lt;/p&gt;

&lt;p&gt;But, assuming you have some time and money, you might look at a sensible middle ground. You could get a professional in to handle the tricky job of plastering the walls, but take on the painting yourself.&lt;/p&gt;

&lt;p&gt;The mental model of the continuum helps to map out the interesting options between the extremes. In our experience, the ends of the spectrum rarely lead to a pot of gold.&lt;/p&gt;

&lt;h2&gt;
  
  
  Multi-brand design systems as a continuum
&lt;/h2&gt;

&lt;p&gt;In our world, multi-brand design systems are a great example of the usefulness of the continuum. When an organisation has more than one brand, what’s the best way to approach a new or evolving design system? Should you have one system or many?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; We’re talking about brands here, but the same goes for multiple products or product groups. (Contextual re-nouning is encouraged.)&lt;/p&gt;

&lt;p&gt;Instead of approaching this as a binary choice, you can plot a range of different approaches on an axis. &lt;/p&gt;

&lt;p&gt;At one end you have simple theming. This means one design system to rule them all, switching out logos and colour schemes for each brand. It’s a fast and efficient approach, but the trade-off is limited brand differentiation.&lt;/p&gt;

&lt;p&gt;At the other end, the organisation has multiple siloed design systems. Nothing is shared between them, be that code bases, components or anything else. Each brand has total independence, but at the expense of efficiency.&lt;/p&gt;

&lt;p&gt;Somewhere in the middle is a multi-brand approach built on one system. You have the benefits of shared architecture and flexibility in brand differentiation. The benefits and trade-offs are more balanced.&lt;/p&gt;

&lt;p&gt;Figuring out the best approach means arriving at how far along the continuum you want to land. How much flexibility do you need? How much time and effort do you want to commit to? Pinning the options to a continuum (real or imaginary) helps everyone understand the trade-offs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why continuums work
&lt;/h2&gt;

&lt;p&gt;Thinking about this continuum isn’t an abstract exercise. It’s a practical method with real benefits:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;It prevents hasty decisions:&lt;/strong&gt; It encourages teams to pause and consider a number of alternatives beyond those that first spring to mind.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;It helps you see the possibilities:&lt;/strong&gt; It simplifies complex problems by providing an objective framework for comparison.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;It fosters a considered consensus:&lt;/strong&gt; The continuum makes it clear that there's no single correct answer. Each option has its pros and cons, and the best choice depends on the specific circumstances. This opens up a more nuanced conversation about trade-offs and helps everyone buy into a way forward.&lt;/p&gt;

&lt;h2&gt;
  
  
  It’s all about trade-offs
&lt;/h2&gt;

&lt;p&gt;We often say that all decisions are trade offs. In fact, we probably should have written that post first. Continuums are a tool for understanding and talking about those trade offs.&lt;/p&gt;

&lt;p&gt;It’s much easier than thinking about stand-alone alternatives. Plus you get to make funny hand gestures when you explain things. 🫲 🫱&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>agile</category>
      <category>management</category>
      <category>designsystem</category>
    </item>
    <item>
      <title>In praise of opportunity roadmaps</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Thu, 12 Jun 2025 14:14:12 +0000</pubDate>
      <link>https://forem.com/measuredco/in-praise-of-opportunity-roadmaps-28fn</link>
      <guid>https://forem.com/measuredco/in-praise-of-opportunity-roadmaps-28fn</guid>
      <description>&lt;p&gt;Product roadmaps are a fact of life. They’re a good way to set strategy, and communicate progress.&lt;/p&gt;

&lt;p&gt;But without care, they can become an albatross, burdening teams under the weight of hard deadlines and sprawling interdependencies. &lt;/p&gt;

&lt;p&gt;But they don’t need to be. Sometimes you just need to know: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What’s happening now&lt;/li&gt;
&lt;li&gt;What you think will happen next&lt;/li&gt;
&lt;li&gt;What you’ve done&lt;/li&gt;
&lt;li&gt;What you might do later&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;We recommend opportunity roadmaps to stay lean and adaptable. Here’s why we like them, and how we use them.&lt;/p&gt;

&lt;h2&gt;
  
  
  What a roadmap is, and why you need one
&lt;/h2&gt;

&lt;p&gt;First, the basics. A product roadmap is a visual, strategic document that shows work that is happening now, and which might happen in future. &lt;/p&gt;

&lt;p&gt;A good roadmap does two things. It helps the team prioritise what to do next. And it acts as a tool for transparent communication: it helps teams and stakeholders understand the status of the project, and its direction of travel.&lt;/p&gt;

&lt;p&gt;There are many kinds of roadmap, which fall on a spectrum from lightweight to heavy-duty. At the latter end are the traditional roadmaps. These typically set out a linear plan, far into the future, mapping timelines and dependencies. They may also include KPIs. &lt;/p&gt;

&lt;p&gt;At the other end, the case is sometimes made that you don’t need a roadmap at all. The rationale tends to be that good ideas always come back round, and next priority will always be clear. &lt;/p&gt;

&lt;p&gt;Having no roadmap might work for single-product startups, it’s unlikely to fly in most organisations — with good reason. It’s perfectly reasonable that stakeholders in larger organisations keep tabs on what’s happening now and next — especially those ultimately responsible for the success of the project, who need to report on progress to higher-ups.&lt;/p&gt;

&lt;p&gt;Much like our thinking behind &lt;a href="https://measured.co/blog/kanban-not-scrum" rel="noopener noreferrer"&gt;why we use Kanban, not Scrum&lt;/a&gt;, we advocate for lightweight roadmaps. They maintain flexibility, which avoids locking the team into the wrong priorities. But they still communicate the strategy, reassuring everyone that the team isn’t flying blind.&lt;/p&gt;

&lt;h2&gt;
  
  
  The opportunity roadmap
&lt;/h2&gt;

&lt;p&gt;We use something more adaptive — an opportunity roadmap. It sits somewhere between the just-in-time delivery of Kanban and the visibility of Scrum and waterfall roadmaps.&lt;/p&gt;

&lt;p&gt;This kind of roadmap doesn’t make hard commitments. It doesn’t claim to know everything up front. It’s there to show:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What we’re working on now&lt;/li&gt;
&lt;li&gt;What we could start work on next&lt;/li&gt;
&lt;li&gt;Everything we could attempt given sufficient time and resources&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s designed to evolve, not predict. We review it every couple of weeks. We might:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Reorder the upcoming milestones based on new information or changes to team capacity&lt;/li&gt;
&lt;li&gt;Start working towards new milestones — if they still look like the right opportunities&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Avoid artificial certainty
&lt;/h2&gt;

&lt;p&gt;A common pitfall in roadmapping happens when your roadmap instils a false sense of certainty rather than acting as a guide to strategic direction. &lt;/p&gt;

&lt;p&gt;Emil Kabisch’s &lt;a href="https://productcrunch.substack.com/p/escaping-the-roadmap-trap" rel="noopener noreferrer"&gt;Escaping the roadmap trap&lt;/a&gt; explains this well. Traditional roadmaps are often confused with project plans. They prioritise deliverables over discovery, create pressure to maintain arbitrary timelines, and encourage teams to treat strategic planning as a one-off activity. As a result, traditional roadmaps can be quite scary. Teams can feel set up to fail.&lt;/p&gt;

&lt;p&gt;They’re also prone to being misread. A linear roadmap suggests the path is fixed — that all the research and learning is already done. Reality is never that neat. Product discovery is continuous. Priorities shift. Plans change. And these are good things — they keep your project on course. An opportunity roadmap allows for this.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prioritise and communicate
&lt;/h2&gt;

&lt;p&gt;Per Kabisch, our approach is a blend of opportunity tree and Kanban roadmap.&lt;/p&gt;

&lt;p&gt;Like the opportunity tree, it encourages teams to regularly pause, reflect and choose the best next move rather than blindly following a fixed plan. Like Kanban, it separates the strategic priority we’re actively working (Now) from those we’re reasonably confident about (Next) and those we have tentatively in mind (Later).&lt;/p&gt;

&lt;p&gt;That separation matters. It avoids the common trap of compiling an organisational wish list and calling it a strategy. If something’s in the Later column, it needs a plausible chance of being picked up in future. It’s not a holding pen for all the things.&lt;/p&gt;

&lt;p&gt;Opportunity roadmaps don’t guarantee perfect prioritisation. But they make the conversation clearer and more honest for teams and stakeholders alike.&lt;/p&gt;

&lt;p&gt;They work particularly well as part of our &lt;a href="https://measured.co/blog/client-engagement-checkins" rel="noopener noreferrer"&gt;engagement check-ins&lt;/a&gt;. Kanban is optimised for delivery, but it can make it trickier for stakeholders to keep tabs on where things are heading. A shared roadmap closes this gap. It gives everyone a touchpoint to discuss priorities, risks and potential shifts in direction.&lt;/p&gt;

&lt;h2&gt;
  
  
  In summary, then
&lt;/h2&gt;

&lt;p&gt;The opportunity roadmap doesn’t try to do everything. But it does give you a clear, adaptable way to ask the right questions — and a platform to work through them to identify the best next move.&lt;/p&gt;

&lt;p&gt;They’re an example of the lightweight, flexible systems and processes that, in our experience, make it easier to get things done, done well, and almost entirely albatross-free.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>agile</category>
      <category>management</category>
      <category>productivity</category>
    </item>
    <item>
      <title>The value of the client engagement check-in</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Tue, 03 Jun 2025 14:28:18 +0000</pubDate>
      <link>https://forem.com/measuredco/the-value-of-the-client-engagement-check-in-28o6</link>
      <guid>https://forem.com/measuredco/the-value-of-the-client-engagement-check-in-28o6</guid>
      <description>&lt;p&gt;It sounds obvious to say that consultancies and clients should maintain good communication, but regular check-ins are often overlooked. It’s all too easy to focus on deadlines and deliverables, and assume everything’s fine unless a problem becomes obvious. But without regular check-ins, small issues can escalate, and momentum can stall.&lt;/p&gt;

&lt;p&gt;We call these engagement check-ins, and we see them as critical infrastructure. They help clients stay informed, help consultancies stay unblocked, and help both sides spot and solve problems early. They’re a simple but powerful tool for keeping projects on track and relationships strong.&lt;/p&gt;

&lt;p&gt;Here’s why we see them as crucial, and how we approach them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; We’re framing this around clients and consultancies, but this probably follows for any teams that work with external stakeholders. Feel free to substitute your preferred collective nouns.&lt;/p&gt;

&lt;h2&gt;
  
  
  What engagement check-ins are for
&lt;/h2&gt;

&lt;p&gt;Engagement check-ins aren’t about reviewing work-in-progress or managing delivery. They’re about maintaining the relationship between the people responsible for the engagement.&lt;/p&gt;

&lt;p&gt;We recently wrote about &lt;a href="https://measured.co/blog/kanban-not-scrum" rel="noopener noreferrer"&gt;why we prefer Kanban’s flexibility over Scrum’s ritualism&lt;/a&gt;. The benefits are many, but it does create the need to keep clients informed. Regular check-ins close that circle. They build client confidence when things are on track, and reassurance that issues will be addressed when they’re not.&lt;/p&gt;

&lt;p&gt;For clients, they offer a structured way to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Stay informed about what’s happening&lt;/li&gt;
&lt;li&gt;Flag changing priorities or emerging needs&lt;/li&gt;
&lt;li&gt;Raise concerns early&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For consultancies, they’re a chance to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Understand the corporate weather, i.e. shifts inside the client organisation that might affect the work&lt;/li&gt;
&lt;li&gt;Raise issues that can’t be solved through delivery alone, like strategic changes or sponsorship gaps&lt;/li&gt;
&lt;li&gt;Build trust by showing they want honest feedback&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Generally, check-ins create space for everyone to be human. This is so easy to overlook, but it’s absolutely crucial: engagements aren’t just contracts — they’re collaborations between real people, navigating real-world complexity and with their own unique priorities and contexts. &lt;/p&gt;

&lt;p&gt;Those priorities rarely compete, but if they’re not understood and synchronised, problems can arise.&lt;/p&gt;

&lt;h2&gt;
  
  
  Who should attend
&lt;/h2&gt;

&lt;p&gt;Keep check-ins as small as possible but no smaller. Start and end with who’s essential.&lt;/p&gt;

&lt;p&gt;You want people who have oversight, context, and the authority to act. Too large a group makes conversations unwieldy. Too small risks missing critical perspectives.&lt;/p&gt;

&lt;p&gt;You don’t need procurement or the whole delivery team. It’s about the leads on both sides who are directly responsible for success.&lt;/p&gt;

&lt;p&gt;One or two people from each side is about right.&lt;/p&gt;

&lt;h2&gt;
  
  
  How long and how often
&lt;/h2&gt;

&lt;p&gt;We recommend holding check-ins for one hour every two weeks.&lt;/p&gt;

&lt;p&gt;That’s often enough to catch issues early without overwhelming schedules.&lt;/p&gt;

&lt;p&gt;But adjust if needed. Move to weekly during fast-moving phases, or monthly if things are stable, or during holiday periods.&lt;/p&gt;

&lt;h2&gt;
  
  
  What you should cover
&lt;/h2&gt;

&lt;p&gt;Always have an agenda — even if it’s light.&lt;/p&gt;

&lt;p&gt;We suggest these core topics:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Current project status: A high-level alignment check — no need to go into delivery details&lt;/li&gt;
&lt;li&gt;Corporate weather: Organisational changes that could impact the work&lt;/li&gt;
&lt;li&gt;Process issues: Billing, timesheets, invoicing and other logistics&lt;/li&gt;
&lt;li&gt;Concerns: Make a safe space for unstructured conversation where people feel they can speak freely&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You don’t have to cover everything in depth every time, but a standing structure makes sure nothing important gets missed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Time well spent
&lt;/h2&gt;

&lt;p&gt;Regular check-ins aren’t overhead — they’re how good working relationships stay good. Talking regularly keeps people aligned, problems small and solvable, and projects moving.&lt;/p&gt;

</description>
      <category>workplace</category>
      <category>management</category>
      <category>productivity</category>
      <category>discuss</category>
    </item>
    <item>
      <title>The power of saying it three times</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Fri, 04 Apr 2025 12:47:55 +0000</pubDate>
      <link>https://forem.com/measuredco/the-power-of-saying-it-three-times-3ifm</link>
      <guid>https://forem.com/measuredco/the-power-of-saying-it-three-times-3ifm</guid>
      <description>&lt;p&gt;When it comes to making things memorable, the number three has a flawless track record. For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Veni, vidi, vici&lt;/li&gt;
&lt;li&gt;Government of the people, by the people, for the people&lt;/li&gt;
&lt;li&gt;Turn on, tune in, drop out&lt;sup id="fnref1"&gt;1&lt;/sup&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Beyond rhetoric, we’ve found that when communicating a complex idea, it helps to say it three times. That is, it generally takes three distinct explanations for a tricky idea to take hold.&lt;/p&gt;

&lt;p&gt;Occasionally, people get it first time. If that happens, great, but avoid making this your benchmark. That will only lead to disappointment. More often, they won’t. In that case, be patient. Remember that other people won’t have all the context that you do, and have their own priorities jostling for headspace.&lt;/p&gt;

&lt;p&gt;Don’t worry about whether people got it — that will become clear. It might be through a small piece of work, a comment in a meeting, or even a quizzical look. These are all useful datapoints that let you know you’ll need to say it three times.&lt;/p&gt;

&lt;p&gt;When these moments happen, there’s no need to react immediately. Instead, make a plan to say it again in the way that’s most likely to land. Put it another way, or in another format. If you can, show the idea working. &lt;/p&gt;

&lt;p&gt;But however you put it, make sure it’s clear, concise and, if possible, memorable. Do that, and they’ll get there eventually. And you’ll be able to tell when it lands in all the same ways you could tell that it didn’t.&lt;/p&gt;

&lt;p&gt;So we often say to each other: say it three times. It’s as much a reminder to be patient and intentional as it is a guide to making ideas stick.&lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;As attributed to Julius Caesar, Abraham Lincoln, and Timothy Leary. Caesar wrote it in a letter. Lincoln and Leary said it out loud. History does not record if they later emailed attendees their PowerPoint decks. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>management</category>
      <category>learning</category>
      <category>watercooler</category>
    </item>
    <item>
      <title>Why we use Kanban — not Scrum</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Wed, 26 Mar 2025 12:37:36 +0000</pubDate>
      <link>https://forem.com/measuredco/why-we-use-kanban-not-scrum-57d</link>
      <guid>https://forem.com/measuredco/why-we-use-kanban-not-scrum-57d</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;To produce only what is needed, when it is needed, and in the amount needed. &lt;/p&gt;

&lt;p&gt;— Taiichi Ōno, Toyota Motor Company&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;We use &lt;a href="https://agilemanifesto.org/" rel="noopener noreferrer"&gt;Agile&lt;/a&gt; development because it’s proven to be the best way to build good things quickly. But there are many flavours of agile. Two popular methodologies are the much-debated Scrum and Kanban.&lt;/p&gt;

&lt;p&gt;If an opinion is worth having, it’s worth putting on the internet, so here are the reasons we favour Kanban. This is not a definitive critique — it’s why it works better for us.&lt;/p&gt;

&lt;p&gt;Some would say they’re apples and oranges. But whether they’re tools, frameworks or whatever else, Scrum and Kanban are two ways digital teams get things done. So, we think they’re ripe for comparison.&lt;/p&gt;

&lt;p&gt;These are good recaps on Scrum and Kanban if you need them:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.scrum.org/resources/what-scrum-module" rel="noopener noreferrer"&gt;What is Scrum?&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="http://agilealliance.org/glossary/kanban/" rel="noopener noreferrer"&gt;What is Kanban?&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  When Scrum makes sense
&lt;/h2&gt;

&lt;p&gt;Scrum is an understandable choice when your organisation values rigidity in certain ways of working, such as:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Aligning team members from different disciplines and experience levels around a unit of work&lt;/li&gt;
&lt;li&gt;Demonstrating whole-product improvements at very frequent intervals&lt;/li&gt;
&lt;li&gt;Enabling routine forecasting and reporting in a work environment that demands them&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The reality of work culture means that some rigidity is almost always needed. When one or more of these elements exist, Scrum — or elements of it – make sense to use. &lt;/p&gt;

&lt;p&gt;But beyond that requirement, we advocate for working with as much flexibility as possible. &lt;/p&gt;

&lt;h2&gt;
  
  
  Why Scrum’s rigidity limits productivity
&lt;/h2&gt;

&lt;p&gt;Scrum is optimised for interdisciplinary teams of mixed experience. It’s a way to get the team pointing in roughly the right direction, then make incremental progress. &lt;/p&gt;

&lt;p&gt;The corollary is that it isn’t optimised for the productivity of individuals, and therefore the team as a whole. (We think about productivity in terms of greasing wheels, not cracking whips.)&lt;/p&gt;

&lt;p&gt;Scrum assumes that everyone on the team is a generalist — that everyone can contribute significantly to the next sprint’s block of work. But that isn’t always the case. &lt;/p&gt;

&lt;p&gt;The work demanded during a sprint can lean on some skills more than others. When deadlines loom, it’s often the most experienced people that crunch to meet goals.&lt;/p&gt;

&lt;p&gt;Scrum’s rituals, like sprint planning, daily stand-ups, and retrospectives are intended to keep teams aligned and moving forward. But that rigidity brings inefficiency. When they’re too frequent, rituals can feel like time spent talking about work rather than doing it. So although we’re firm &lt;a href="https://measured.co/blog/how-to-do-great-live-demos" rel="noopener noreferrer"&gt;advocates of product demonstrations&lt;/a&gt;, we do them as and when there’s something of real value to show.&lt;/p&gt;

&lt;p&gt;When your team is made up of specialists, you don’t need a planning meeting every sprint, or a stand-up every day, for people to know what to do. It’s enough to have open lines of communication and meetings when you actually need them.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Kanban works for us
&lt;/h2&gt;

&lt;p&gt;Unlike Scrum, Kanban is a continuous flow system. It’s inherently flexible, making it a better fit for teams that value adaptability and focus. &lt;/p&gt;

&lt;p&gt;It has its roots in lean manufacturing. It’s one of the 12 pillars of the &lt;a href="https://mag.toyota.co.uk/kanban-toyota-production-system/" rel="noopener noreferrer"&gt;Toyota Production System&lt;/a&gt;, designed to optimise workflow, reduce waste, and improve efficiency by visualising work and limiting work in progress.&lt;/p&gt;

&lt;p&gt;The result of its introduction at Toyota was to transform a loss-making company into a leading global brand.&lt;sup id="fnref1"&gt;1&lt;/sup&gt; When a methodology is proven in the trial by fire of real-world mass-production, it’s probably worth a try.&lt;/p&gt;

&lt;p&gt;Here’s how Kanban aligns with our approach to collaboration and project delivery.&lt;/p&gt;

&lt;h2&gt;
  
  
  Building teams around specialisms
&lt;/h2&gt;

&lt;p&gt;Our approach is to build the team around the specialisms the project needs. This allows everyone to use their full skill set and improves quality of work. In our experience, it also enhances work satisfaction.&lt;/p&gt;

&lt;p&gt;If a new specialist need arises on a project, we can map it to the right person. If that person doesn’t exist, we can bring a person in without disrupting everyone else.&lt;/p&gt;

&lt;h2&gt;
  
  
  Limiting work in progress
&lt;/h2&gt;

&lt;p&gt;One of Kanban’s core principles is limiting work in progress (WIP). This prevents overloading the team with more concurrent work than it can reasonably do. &lt;/p&gt;

&lt;p&gt;Too much WIP impairs the team’s output in the short term, and burns people out in the long term.&lt;/p&gt;

&lt;p&gt;We use Kanban to cap WIP, making sure that everyone can focus on completing tasks before starting new ones. This leads to higher-quality work and fewer bottlenecks.&lt;/p&gt;

&lt;h2&gt;
  
  
  Putting flexibility first
&lt;/h2&gt;

&lt;p&gt;Kanban doesn’t require rituals, but it doesn’t exclude them either. We still hold stand-ups and board walks to keep everyone aligned, but these happen when we need them rather than being dictated by a framework. &lt;/p&gt;

&lt;p&gt;For example, our board walks are an opportunity to discuss blockers, celebrate progress, and reprioritise tasks as needed — and without the pressure of a sprint deadline.&lt;/p&gt;

&lt;p&gt;Greater flexibility suits us in a number of ways:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Unbounded discovery work:&lt;/strong&gt; When we’re exploring new ideas or solving complex problems, Kanban’s flexibility allows us to adapt as we learn.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Motivated teams:&lt;/strong&gt; Our team is made up of experienced specialists who don’t need micromanagement. Kanban gives them the autonomy to manage their work effectively, helping them stay motivated and productive.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;High trust:&lt;/strong&gt; We cultivate a high-trust environment where the focus is on doing work rather than reporting on it. Kanban supports this by emphasising flow over formality.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Reprioritising:&lt;/strong&gt; Scrum’s fixed sprints can be too rigid for projects that require us to provide a service or other kinds of support to a client over a period of time. Kanban makes it easier to quickly adapt to changing client priorities.&lt;/p&gt;

&lt;h2&gt;
  
  
  Results before rituals
&lt;/h2&gt;

&lt;p&gt;We prefer to spend less time on process and more time on being productive. Kanban provides a lightweight, flexible framework that adapts to our needs rather than forcing us into a one-size-fits-all model. We can supplement it with elements of Scrum or, more likely, another framework&lt;sup id="fnref2"&gt;2&lt;/sup&gt; when it helps us — we think of Scrum as a toolkit and Kanban as a way.&lt;/p&gt;

&lt;p&gt;If you’re considering your own approach to Agile, we recommend not defaulting to a framework without consideration. Think about what your team needs, what your workflow looks like, and how you can create a process that supports your goals.&lt;/p&gt;

&lt;p&gt;By all means experiment, but be wary of clipping your team’s wings by enforcing a suboptimal way of working. Frameworks should bend to team needs rather than vice versa. That’s why Kanban is the right choice for us. &lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;This &lt;a href="https://kanbantool.com/kanban-guide/kanban-history" rel="noopener noreferrer"&gt;history of Kanban&lt;/a&gt; explores its creation and implementation at Toyota in pleasing detail. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn2"&gt;
&lt;p&gt;When we need more structure, we tend to use &lt;a href="https://basecamp.com/shapeup" rel="noopener noreferrer"&gt;Shape Up&lt;/a&gt; rather than Scrum. It follows a cycle of six weeks of building followed by a two-week cooldown to reflect, learn, and plan what’s next. We find this is a sweet spot between exhausting two-week sprints and inflexible quarterly plans, but we’ll talk more about this in a future article. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>agile</category>
      <category>scrum</category>
      <category>kanban</category>
      <category>webdev</category>
    </item>
    <item>
      <title>12 tips to make project handovers a success</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Tue, 05 Nov 2024 11:15:21 +0000</pubDate>
      <link>https://forem.com/measuredco/12-tips-to-make-project-handovers-a-success-1kkp</link>
      <guid>https://forem.com/measuredco/12-tips-to-make-project-handovers-a-success-1kkp</guid>
      <description>&lt;p&gt;When you work on a large web project, there will come a time to hand it over to another team. This could be a handover from an outside agency to an internal team, or from one internal team to another.&lt;/p&gt;

&lt;p&gt;Handovers are always tricky. They’re as much about people and culture as they are processes and technology.&lt;/p&gt;

&lt;p&gt;Here’s what we’ve learned over the years, distilled into 12 tips. Whether you’re a client organisation or a supplier, hopefully you can benefit from our experience. &lt;/p&gt;

&lt;h2&gt;
  
  
  1. Assume zero context
&lt;/h2&gt;

&lt;p&gt;Handovers involve two teams: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The incoming team picking things up&lt;/li&gt;
&lt;li&gt;The outgoing team putting things down&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The outgoing team might have made the thing. The new team might be coming in to maintain it. Those are very different contexts.&lt;/p&gt;

&lt;p&gt;Whatever the circumstances, it’s possible the incoming team has zero context. They might not know the goals of the project, or even what they’ve been brought in to do. The team might be comprised wholly of new hires.&lt;/p&gt;

&lt;p&gt;If people are moved from elsewhere in the organisation, it’s probably a gentler on-ramp. But whatever the circumstances, skew cautious. Don’t make assumptions about what the incoming team already knows.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Make a plan
&lt;/h2&gt;

&lt;p&gt;Making a handover plan is essential. It should be an actual document. It doesn’t need to be long.&lt;/p&gt;

&lt;p&gt;Handovers are mostly about people, so the plan should be people-oriented, with input from everyone. &lt;/p&gt;

&lt;p&gt;A list is a good place to start. Lists help you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Align as a team&lt;/li&gt;
&lt;li&gt;Assign and prioritise activities&lt;/li&gt;
&lt;li&gt;Adapt to different project structures like now, next, later&lt;sup id="fnref1"&gt;1&lt;/sup&gt;
&lt;/li&gt;
&lt;li&gt;Report progress&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Include all possible duties, especially when it’s not clear how to do them. &lt;/p&gt;

&lt;p&gt;Talk through the list with everyone. You’ll land on things you’ve missed, and things you thought were clear but aren’t. Expand on these.&lt;/p&gt;

&lt;p&gt;Over time, you can flesh the plan out with useful, more detailed information.&lt;/p&gt;

&lt;p&gt;To start with, the plan will be mainly written by the outgoing team for the needs of the incoming team. Gradually, the incoming team will have more input.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Start with fundamentals
&lt;/h2&gt;

&lt;p&gt;The plan should contain whatever the incoming team needs to continue the project autonomously before the outgoing team pack their boxes.&lt;/p&gt;

&lt;p&gt;Helpful things to include are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Aims of the project&lt;/li&gt;
&lt;li&gt;A who’s who of stakeholders&lt;/li&gt;
&lt;li&gt;Where things are (e.g. project documents)&lt;/li&gt;
&lt;li&gt;Working processes (this saves lots of time)&lt;/li&gt;
&lt;li&gt;Project history and context&lt;/li&gt;
&lt;li&gt;Project architecture&lt;/li&gt;
&lt;li&gt;Unusual and unintuitive aspects&lt;/li&gt;
&lt;li&gt;Unresolved points of friction&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Remember that it’s a working document, not carved in stone. Add generously, then edit ruthlessly. Keep only useful things.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Work in phases
&lt;/h2&gt;

&lt;p&gt;Identify which list items you can start handing over straight away.&lt;/p&gt;

&lt;p&gt;Use paired working to gradually hand over trickier duties. Let the incoming team member take responsibility as soon as they can, but take as long as is needed.&lt;/p&gt;

&lt;p&gt;Not everything will go smoothly. Reassure the incoming team that points of friction are a chance to make the plan better. &lt;/p&gt;

&lt;h2&gt;
  
  
  5. Test, then iterate
&lt;/h2&gt;

&lt;p&gt;The plan should evolve alongside the handover process. &lt;/p&gt;

&lt;p&gt;As the incoming team ramps up, have them use the plan to find its gaps and weaknesses. Figure out who’s best placed to address them. Over time, it’s less likely this will be someone in the outgoing team.&lt;/p&gt;

&lt;p&gt;The plan could pan out in these stages:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Drafted by the outgoing team&lt;/li&gt;
&lt;li&gt;Iterated by the outgoing team based on feedback and observations&lt;/li&gt;
&lt;li&gt;Iterated by the incoming team based on their learnings and needs&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;But there are no handover police. Do what works.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Don’t prescribe
&lt;/h2&gt;

&lt;p&gt;A handover plan shouldn’t tell the incoming team how to run the project. It should help them reach the point where they can run it themselves.&lt;/p&gt;

&lt;p&gt;It shouldn’t be:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A knowledge repo&lt;/li&gt;
&lt;li&gt;A disciplinary guide&lt;/li&gt;
&lt;li&gt;A product roadmap or backlog&lt;sup id="fnref2"&gt;2&lt;/sup&gt;
&lt;/li&gt;
&lt;li&gt;A list of problems to fix&lt;/li&gt;
&lt;li&gt;The home of project documentation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Report what you’ve been doing to the incoming team, and how you’ve done it. The incoming team should have freedom to do things differently.&lt;/p&gt;

&lt;p&gt;Avoid directly mapping outgoing people to incoming people. It’s a form of telling the incoming team how to work, and skills don’t align this way. Hand over at team level.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Acknowledge feelings
&lt;/h2&gt;

&lt;p&gt;Letting go of something you’ve built is like sending a child to a new school. Anyone who cares about the work will have feelings about it.&lt;/p&gt;

&lt;p&gt;Sometimes the incoming team will have strong opinions, and that can be challenging. Remember, they don’t have the organisational context for the decisions you’ve made.&lt;/p&gt;

&lt;p&gt;Encourage frank discussion about why things were done the way they were. They may uncover organisational challenges that should be documented. &lt;/p&gt;

&lt;p&gt;But be prepared to let things go. You can’t make people understand past decisions. An opinionated team is better than an incoming team that just wants to be told what to do.&lt;/p&gt;

&lt;p&gt;It can be hard for the outgoing team members to not know how the story ends. Suggest ways to catch up in future, even if it’s just going for a coffee. This helps with closure and personal development.&lt;/p&gt;

&lt;p&gt;Ultimately, it’s essential to let go. If by the last day and the outgoing team are holding on to things: problems.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Manage time
&lt;/h2&gt;

&lt;p&gt;Don’t preempt a handover before it’s real. You’ll waste time on things that will change in future.&lt;/p&gt;

&lt;p&gt;Start planning as soon as you know a handover’s coming. A few months is usual, although it depends on the project’s scale and complexity, as well as the number of people involved.&lt;/p&gt;

&lt;p&gt;You’re handing over culture and relationships as well as systems and processes. Those aspects take time.&lt;/p&gt;

&lt;p&gt;If you weren’t given enough notice, share feedback to sow seeds for a rosier future.&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Tidy up
&lt;/h2&gt;

&lt;p&gt;A handover is a great excuse to tidy up the project. Leave the incoming team with forward momentum. If they have to unpick knotty problems from day 1, the project will grind to a halt.&lt;/p&gt;

&lt;p&gt;We like to think of it as parking the project nicely so someone else can get in and drive off.&lt;/p&gt;

&lt;p&gt;Resolve as many problems and fix as many broken things as you can before final handover. Prioritise issues that require contextual knowledge.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. Keep a friction log
&lt;/h2&gt;

&lt;p&gt;You won’t be able to fix everything, and not everything should be done by the outgoing team. &lt;/p&gt;

&lt;p&gt;Note outstanding issues in a friction log. This could be a section of your handover plan.&lt;/p&gt;

&lt;p&gt;For example, you might discover a process that was hindering progress. It’ll be down to the incoming team to find a better way.&lt;/p&gt;

&lt;p&gt;Any decisions that that will have a long-term effect should be left to the incoming team.&lt;sup id="fnref3"&gt;3&lt;/sup&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  11. Treat the handover as core work
&lt;/h2&gt;

&lt;p&gt;Don’t think that two teams means double capacity. There’s plenty to do to keep the project on track while also handing over.&lt;/p&gt;

&lt;p&gt;Project work and business-as-usual activities should continue. This prevents the handover plan being theory rather than practice. It shows how things work.&lt;/p&gt;

&lt;p&gt;Don’t worry about keeping the outgoing team busy. If, by the end, they have nothing to do, things have gone well. If they’re grafting on their last day, you’ll be lost when they go.&lt;/p&gt;

&lt;p&gt;Above all, don’t create urgency. It’s not the time to kick off a large or complex piece of work.&lt;/p&gt;

&lt;h2&gt;
  
  
  12. Make friends
&lt;/h2&gt;

&lt;p&gt;The outgoing team should make friends with the incoming team. The incoming team should make friends with everyone.&lt;/p&gt;

&lt;p&gt;If possible, get together in person at the beginning of the process. Be honest about the challenges the project and organisation has gone through. &lt;/p&gt;

&lt;p&gt;Be engaged but not obsessive. Doom and gloom isn’t the vibe — keep it positive. &lt;/p&gt;

&lt;h2&gt;
  
  
  Three things to remember
&lt;/h2&gt;

&lt;p&gt;Handovers are about people more than technology or logistics. So:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Make a plan around the needs of the people involved&lt;/li&gt;
&lt;li&gt;Include people’s feelings in your thinking&lt;/li&gt;
&lt;li&gt;Carve out time for the actual handover work&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Prioritise these, and you stand every chance of a successful handover.&lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;See &lt;a href="https://productcrunch.substack.com/p/escaping-the-roadmap-trap" rel="noopener noreferrer"&gt;Escaping the roadmap trap&lt;/a&gt; by Emil Kabisch for creating roadmaps which differentiate now, next and later. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn2"&gt;
&lt;p&gt;Although the plan shouldn’t be a roadmap, it should be easy for the incoming team to derive one from your list of duties.) ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn3"&gt;
&lt;p&gt;The friction log is another source the incoming team can use to create a roadmap. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>webdev</category>
      <category>productivity</category>
      <category>tutorial</category>
      <category>management</category>
    </item>
    <item>
      <title>Why design systems fail</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Tue, 08 Oct 2024 15:02:12 +0000</pubDate>
      <link>https://forem.com/measuredco/why-design-systems-fail-3ii</link>
      <guid>https://forem.com/measuredco/why-design-systems-fail-3ii</guid>
      <description>&lt;p&gt;Design systems fail for many reasons. Total disaster is rare. It’s more common that a project takes too long, or doesn’t serve the teams it’s meant to help. &lt;/p&gt;

&lt;p&gt;Here are 11 reasons we’ve encountered:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Scaling problems&lt;/li&gt;
&lt;li&gt;Bias for the boardroom&lt;/li&gt;
&lt;li&gt;Lack of consensus&lt;/li&gt;
&lt;li&gt;Unclear ownership&lt;/li&gt;
&lt;li&gt;Gaps in the technology stack&lt;/li&gt;
&lt;li&gt;Inflexibility&lt;/li&gt;
&lt;li&gt;Multi-brand complexity&lt;/li&gt;
&lt;li&gt;Short reach&lt;/li&gt;
&lt;li&gt;Pre-digital legacy&lt;/li&gt;
&lt;li&gt;No organising principle&lt;/li&gt;
&lt;li&gt;Unrealistic ambition&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Let’s take them one at a time, along with how we mitigate them.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Scaling problems
&lt;/h2&gt;

&lt;p&gt;Small organisations have different ways of working to larger ones. If they don’t adapt as you grow, problems can arise. &lt;/p&gt;

&lt;p&gt;If three teams use your design system, it’s easy to get feedback about a change. You can go and talk to them. If you have 30 teams, you need processes to make that work. &lt;/p&gt;

&lt;p&gt;As you grow, watch for communication breakdowns and address them quickly.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Bias for the boardroom
&lt;/h2&gt;

&lt;p&gt;External agencies sometimes build design systems for organisations, not with them. &lt;/p&gt;

&lt;p&gt;The person making that buying decision usually isn’t responsible for the project’s success. The work might impress leadership, but not work for the teams saddled with it. &lt;/p&gt;

&lt;p&gt;Instead, embed the agency into your organisation for as long as needed to understand teams’ needs and deliver the design system.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Lack of consensus
&lt;/h2&gt;

&lt;p&gt;Design system means different things to different people. It could encompass the brand, design elements and technology components. Or it might only cover typefaces and colours. &lt;/p&gt;

&lt;p&gt;There’s no right definition, but different perceptions create risk. Agree on what problems to solve, and set the scope and goals to solve them.&lt;sup id="fnref1"&gt;1&lt;/sup&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Governance challenges
&lt;/h2&gt;

&lt;p&gt;Design systems often germinate in one team. That’s fine for a start, but if ownership stays there, it will only ever solve one team’s problems.&lt;/p&gt;

&lt;p&gt;To succeed, the system must evolve from a team project to a shared infrastructure. The founding team shouldn’t dictate every detail, but they shouldn’t become a service desk either.&lt;/p&gt;

&lt;p&gt;Instead, facilitate collaboration. Give all teams the means to contribute. They’ll be more invested in the system’s success if they help build it.&lt;/p&gt;

&lt;p&gt;Support collaboration with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Version control&lt;/li&gt;
&lt;li&gt;Pull requests&lt;/li&gt;
&lt;li&gt;Documentation&lt;/li&gt;
&lt;li&gt;Automated testing&lt;/li&gt;
&lt;li&gt;Access control&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  5. Gaps in the technology stack
&lt;/h2&gt;

&lt;p&gt;It’s hard to make the design system work with all the technology used in the organisation. You may not have aligned around a technology stack, or decided not to. Maybe shadow IT is hiding in team workflows. &lt;/p&gt;

&lt;p&gt;The design system doesn’t have to integrate with everything, but if it’s disconnected from essential parts, it won’t flourish. &lt;/p&gt;

&lt;p&gt;Identify and agree necessary touchpoints to make sure all teams’ needs are met.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Inflexibility
&lt;/h2&gt;

&lt;p&gt;Design systems fail when they don’t allow for change. Rebrands&lt;sup id="fnref2"&gt;2&lt;/sup&gt;, acquisitions and new needs arise. You can’t plan for every change, but an adaptable system prevents headaches.&lt;/p&gt;

&lt;p&gt;If your organisation needs a design system, it’s likely to have different project teams working at different speeds. It’s not realistic for everyone to adopt the latest version of the design system on release.&lt;/p&gt;

&lt;p&gt;If you don’t use a monorepo, use robust versioning. This helps teams make the best decisions for their project. We recommend &lt;a href="https://semver.org/" rel="noopener noreferrer"&gt;Semantic Versioning&lt;/a&gt; to flag the implications of an update for different teams. It flags mission-critical updates that affect existing implementations. &lt;/p&gt;

&lt;h2&gt;
  
  
  7. Multi-brand complexity
&lt;/h2&gt;

&lt;p&gt;Managing several brands with one design system is complicated. You could be dealing with variations in theming or distinct identities. The design system must support each sub-brand’s uniqueness, and its cohesion with its siblings to the extent needed.&lt;/p&gt;

&lt;p&gt;Identify where your needs fall on this spectrum. It gives you a reference point for decisions about what the design system should do — and how.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Short reach
&lt;/h2&gt;

&lt;p&gt;Design systems aren’t only for the web. To make your UI consistent, identify everywhere users interact with your brand. Then decide what your design system should include. &lt;/p&gt;

&lt;p&gt;Consider:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Web (desktop and mobile)&lt;/li&gt;
&lt;li&gt;Native apps (desktop and mobile)&lt;/li&gt;
&lt;li&gt;Emails&lt;/li&gt;
&lt;li&gt;Social media&lt;/li&gt;
&lt;li&gt;Support documentation&lt;/li&gt;
&lt;li&gt;Digital advertising&lt;/li&gt;
&lt;li&gt;Print, physical media and merchandise&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You don’t have to include everything at once. Web and mobile are a good place to start.&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Pre-digital legacy
&lt;/h2&gt;

&lt;p&gt;Your starting point could be a brand guide developed for print, or other non-digital contexts. You might inherit an inaccessible colour scheme, a typeface that doesn’t support internationalisation, or a logo that doesn’t work in digital contexts.&lt;/p&gt;

&lt;p&gt;Some organisations overlook digital in their foundational strategy. This makes life hard for digital teams charged with implementing it. There’s also a risk of leaders underestimating the scale of moving to digital.&lt;/p&gt;

&lt;p&gt;But it’s also an opportunity to modernise. Make sure your design, technology and other brand-aware teams are in the room from the start.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. No organising principle
&lt;/h2&gt;

&lt;p&gt;To build a Lego castle, buy a set, not a tub of random bricks. Without an organising principle, your design system could become a collection of things that aren’t used, or used in disparate ways. &lt;/p&gt;

&lt;p&gt;The principle could be anything that helps you filter out ideas that won’t help you build what you need. For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Composability: will it work consistently in different contexts?&lt;/li&gt;
&lt;li&gt;Platform-specificity: e.g. should you build only with React?&lt;/li&gt;
&lt;li&gt;Scalability: will it still work in a multi-brand future?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Identify a logical organising principle for the aims of your project.&lt;/p&gt;

&lt;h2&gt;
  
  
  11. Unrealistic ambition
&lt;/h2&gt;

&lt;p&gt;Design systems fail when you try to do too much too soon.&lt;/p&gt;

&lt;p&gt;Don’t try to eat the whole horse. Start with foundational elements like fonts, icons, design tokens, or logos. Then pivot to the processes that get people to use them, talk about them, and share feedback.&lt;/p&gt;

&lt;p&gt;It’s tempting to fork old design-system work, but that’s like taking your carpets with you when you move house. It won't achieve the best results.&lt;/p&gt;

&lt;p&gt;Remember: anyone that has built a good design system had to build a bad one first.&lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;See &lt;a href="https://measured.co/blog/dont-build-a-design-system" rel="noopener noreferrer"&gt;Don’t build a design system — build what you actually need&lt;/a&gt;. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn2"&gt;
&lt;p&gt;See &lt;a href="https://measured.co/blog/scotts-law-of-rebrands" rel="noopener noreferrer"&gt;Scott’s Law of Rebrands&lt;/a&gt;, on the inevitability of rebrands happening, and how to plan for it. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>designsystem</category>
      <category>ui</category>
      <category>webdev</category>
      <category>management</category>
    </item>
    <item>
      <title>Don’t build a design system — build what you actually need</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Mon, 09 Sep 2024 14:49:47 +0000</pubDate>
      <link>https://forem.com/measuredco/dont-build-a-design-system-build-what-you-actually-need-2c0p</link>
      <guid>https://forem.com/measuredco/dont-build-a-design-system-build-what-you-actually-need-2c0p</guid>
      <description>&lt;p&gt;Saying you need a design system is like saying you need a vehicle. It might take you somewhere, but without a clear destination, you risk ending up lost. &lt;/p&gt;

&lt;p&gt;This post looks at why the term design system isn’t that useful, and how to arrive at the outcomes your organisation needs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where design systems come from
&lt;/h2&gt;

&lt;p&gt;Design systems evolved from the corporate identity manuals and style guides of the later 20th Century. &lt;/p&gt;

&lt;p&gt;The &lt;a href="https://www.nasa.gov/image-article/nasa-graphics-standards-manual/" rel="noopener noreferrer"&gt;NASA Graphics Standards Manual&lt;/a&gt; from 1976 is a notable example, prescribing everything from letterheads to spacecraft insignia in exacting detail.&lt;/p&gt;

&lt;p&gt;Later, these guides became digital and began to include pattern and component libraries. In some cases, they merged into a comprehensive library and were given the name design system. &lt;/p&gt;

&lt;p&gt;The Salesforce &lt;a href="https://www.lightningdesignsystem.com/" rel="noopener noreferrer"&gt;Lightning Design System&lt;/a&gt;, released in 2015, helped popularise the term. It’s a comprehensive tool to help teams design and build digital products and services as a whole.&lt;/p&gt;

&lt;p&gt;More detailed accounts of the origins of design systems are available&lt;sup id="fnref1"&gt;1&lt;/sup&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Siloed definitions
&lt;/h3&gt;

&lt;p&gt;Holistic design systems are powerful, but not well-suited to the siloed disciplines we see in big organisations today. (That’s without considering broader systems that cover content strategy, voice and tone guides, internal processes, dishwasher policy…)&lt;/p&gt;

&lt;p&gt;To be useful in their day to day work, individual disciplines have carved out their own versions. So design system has come to mean different things:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Brand identity systems.&lt;/strong&gt; E.g. &lt;a href="https://www.nasa.gov/nasa-brand-center/brand-guidelines/" rel="noopener noreferrer"&gt;NASA’s Brand Guidelines&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Component libraries.&lt;/strong&gt; E.g. The &lt;a href="https://design-system.service.gov.uk/" rel="noopener noreferrer"&gt;GOV.UK Design System&lt;/a&gt; is a well-considered case, but they can be more ad hoc.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Design components and standards.&lt;/strong&gt; E.g. Volkswagen’s system for VW and sub-brands, discussed in &lt;a href="https://www.youtube.com/watch?v=br3RGKY3Qgw" rel="noopener noreferrer"&gt;Into Design Systems&lt;/a&gt;, presented by Matthias Fritsch and Thorsten Jankowski. It could also be for a product or single brand identity.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Design assets.&lt;/strong&gt; E.g. &lt;a href="https://base.uber.com/6d2425e9f/p/294ab4-base-design-system" rel="noopener noreferrer"&gt;Uber’s Base&lt;/a&gt; is Figma-heavy (which is usual) and geared towards designer needs. These may be organised to in varying degrees. The distinction is that there’s no accompanying technology implementation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fully-integrated design systems.&lt;/strong&gt; E.g. &lt;a href="https://www.lightningdesignsystem.com/" rel="noopener noreferrer"&gt;Salesforce Lightning Design System&lt;/a&gt;, &lt;a href="https://m3.material.io/" rel="noopener noreferrer"&gt;Google’s Material Design&lt;/a&gt;, &lt;a href="https://carbondesignsystem.com/" rel="noopener noreferrer"&gt;IBM’s Carbon&lt;/a&gt; and &lt;a href="https://fluent2.microsoft.design/color" rel="noopener noreferrer"&gt;Microsoft’s Fluent&lt;/a&gt;. These include guidelines, components and technology.&lt;/p&gt;

&lt;p&gt;When a term means different things to different people, it’s risky to use in a general setting. Even the word design can imply ownership by one team. That sometimes makes sense, but it’s controversial as a universal rule. &lt;/p&gt;

&lt;p&gt;Designers don’t want to worry about brand or engineering needs, just as engineering teams might overlook the needs of designers&lt;sup id="fnref2"&gt;2&lt;/sup&gt;. For a design system to succeed, it must meet cross-functional needs.&lt;/p&gt;

&lt;h2&gt;
  
  
  Build the right thing
&lt;/h2&gt;

&lt;p&gt;Instead of saying you need a design system, identify the problems you want to solve. Here’s how.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Set goals
&lt;/h3&gt;

&lt;p&gt;Set clear, outcome-oriented goals that align with your organisation’s objectives and teams’ needs. Make sure everyone buys into them to the extent possible.&lt;/p&gt;

&lt;p&gt;Identify non-goals too, like deprioritising internationalisation if you only serve UK users.&lt;/p&gt;

&lt;p&gt;Ask questions to agree goals:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What does the business do?&lt;/li&gt;
&lt;li&gt;What problem do you want to solve?&lt;/li&gt;
&lt;li&gt;What are the user needs, internally and externally?&lt;/li&gt;
&lt;li&gt;What results you want to see?&lt;/li&gt;
&lt;li&gt;What are the accessibility implications?&lt;/li&gt;
&lt;li&gt;What countries do you operate in?&lt;/li&gt;
&lt;li&gt;What is your technology stack?&lt;/li&gt;
&lt;li&gt;What are the brand implications?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When you set the right goals, it doesn’t matter if you call it a design system. Call it what you like. &lt;/p&gt;

&lt;h3&gt;
  
  
  2. Define terms
&lt;/h3&gt;

&lt;p&gt;Clearly define what your solution does, and what it includes.&lt;/p&gt;

&lt;p&gt;When we helped BT implement &lt;a href="https://ui.digital-ent-int.bt.com/latest/docs/intro" rel="noopener noreferrer"&gt;Arc&lt;/a&gt;, we called it a UI system&lt;sup id="fnref3"&gt;3&lt;/sup&gt;. And we defined this as:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;… a collection of tools and practices that help teams working on BT Enterprise digital products build high quality web user interfaces at scale.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Adding a definition beyond the term helped everyone understand what Arc was supposed to achieve.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Communicate openly
&lt;/h3&gt;

&lt;p&gt;Internal communication is vital. Everyone with a stake needs to know where they can see progress, and ask questions. &lt;/p&gt;

&lt;p&gt;Consider &lt;a href="https://doingweeknotes.com/" rel="noopener noreferrer"&gt;week notes&lt;/a&gt; and &lt;a href="https://measured.co/blog/how-to-do-great-live-demos" rel="noopener noreferrer"&gt;frequent demos&lt;/a&gt;. These help communicate changes, from small refinements to what you’re building up to revisiting the main goals.&lt;/p&gt;

&lt;p&gt;Having the project history in the open helps new joiners get up to speed. Sharing progress gives everyone the chance to flag issues at the first opportunity.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Expect change
&lt;/h3&gt;

&lt;p&gt;Design your system with change in mind. The project should adapt as your understanding develops. This is especially important for projects that cut across many disciplines and teams.&lt;/p&gt;

&lt;p&gt;Involve relevant people as early as possible, but understand that waiting for everyone can halt progress. Create processes that incorporate new information and perspectives as they emerge.&lt;/p&gt;

&lt;p&gt;We sometimes hear that discovery work and goal-setting slows down work being done. Make it a goal to support the progress of the teams you’re working with. Design iterative processes, and avoid blocking other teams.&lt;/p&gt;

&lt;h2&gt;
  
  
  The most important thing
&lt;/h2&gt;

&lt;p&gt;Unclear terminology shouldn’t stop you from doing good things. If you set goals, define terms and get the right people in the room, you stand every chance of building what your organisation actually needs.&lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;Brad Frost explores the origins of design systems in the opening of his talk, &lt;a href="https://www.youtube.com/watch?v=1JFp6kH5dFo" rel="noopener noreferrer"&gt;A Global Design System&lt;/a&gt;. Jay Hoffman’s &lt;a href="https://thehistoryoftheweb.com/from-designing-interfaces-to-designing-systems/" rel="noopener noreferrer"&gt;From designing interfaces to designing systems&lt;/a&gt; is worth a read. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn2"&gt;
&lt;p&gt;Tools like Figma and Storybook are powerful collaborative tools for designers and developers respectively, particularly in enabling feedback. But they can calcify design systems into something that solves the needs of one discipline while disenfranchising others. This isn’t an inherent weakness of these tools. They’re tailored to the needs of the relevant discipline, and not intended to house design systems for organisations. Yet, this is the reality of what happens in large organisations where siloed working is the norm. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;li id="fn3"&gt;
&lt;p&gt;If they’d been called UI systems to begin with, we might have avoided this confusion. We’re not the only ones saying this: See this &lt;a href="https://twitter.com/nathanacurtis/status/1460340178883694603" rel="noopener noreferrer"&gt;X thread&lt;/a&gt; with Nathan A. Curtis and Brad Frost. We tend to say UI system rather than design system. It’s a more accurate description of building systems to create web UI, and it helps set expectations. But if a client wants to call it a design system, we won’t argue. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>designsystem</category>
      <category>ui</category>
      <category>webdev</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Scott’s Law of Rebrands</title>
      <dc:creator>Paul Love</dc:creator>
      <pubDate>Tue, 25 Jun 2024 09:14:23 +0000</pubDate>
      <link>https://forem.com/measuredco/scotts-law-of-rebrands-d1d</link>
      <guid>https://forem.com/measuredco/scotts-law-of-rebrands-d1d</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Over time, the probability of a rebrand starting in the midst of a large web project approaches 1.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;— Scott Boyle, Measured Co-Founder&lt;/p&gt;

&lt;p&gt;Like any good axiom, Scott’s Law of Rebrands was borne of experience. We’ve seen it enough that we know it to be truthy. (We call it Scott’s Law with tongue lodged firmly in cheek, of course.)&lt;/p&gt;

&lt;p&gt;Rebrands happen for any number of reasons — repositioning in the market, new or evolving contexts, or to breathe new life into a brand. Brand identities tend to last 2 to 5 years, so the odds of a rebrand overlapping a major web project are high — and grow over time.&lt;/p&gt;

&lt;p&gt;For our purposes, let’s discuss a rebrand outside the scope of your project, but which will affect it in myriad ways.&lt;/p&gt;

&lt;p&gt;Such rebrands are always challenging. But approached the right way, they can bring long-term benefits to your project. Here’s how to go about it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Accept the cards you’re dealt
&lt;/h2&gt;

&lt;p&gt;A major rebrand will disrupt a large web project running in parallel. Expect questions from your digital teams:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What’s the scope?&lt;/li&gt;
&lt;li&gt;When’s it starting?&lt;/li&gt;
&lt;li&gt;How long will it take?&lt;/li&gt;
&lt;li&gt;What does it mean for my project?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No one has the answers when a rebrand kicks off. All you know is that it’s happening, you won’t have control over it, and it will take as long as it takes.&lt;/p&gt;

&lt;p&gt;Ongoing communication with brand and marketing teams is vital. They’re often siloed from the implementing teams, which adds complexity (although less so for digital brands.)&lt;/p&gt;

&lt;p&gt;Make friends. Create lasting feedback loops between brand, marketing and your implementing teams.&lt;/p&gt;

&lt;h2&gt;
  
  
  Get on the front foot
&lt;/h2&gt;

&lt;p&gt;When you’re surrounded by uncertainty, take it as an opportunity to build something better. Here are three ways to do that.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Systematise
&lt;/h3&gt;

&lt;p&gt;Look at what aspects of the existing brand can be systematised. For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Colour schemes and their contextual uses&lt;/li&gt;
&lt;li&gt;Typography (type sizes, typefaces, fallback font stacks)&lt;/li&gt;
&lt;li&gt;Icons (size, location, design descriptors)&lt;/li&gt;
&lt;li&gt;Spacing and alignment (margins, component spacing, vertical rhythm) &lt;/li&gt;
&lt;li&gt;Motion (timing, duration, motion descriptors)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Systematising the brand leads to a more consistent and polished UI. &lt;/p&gt;

&lt;p&gt;It also makes the brand easier to understand, which helps to assess the impact of change. You move from the mindset of “there’s so much to do” to “here’s what we’ll do”.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Encode the brand
&lt;/h3&gt;

&lt;p&gt;As far as possible, derive variables for what you’ve systematised.&lt;/p&gt;

&lt;p&gt;This doesn’t necessarily mean creating design tokens, although it may. The aim is to make it easy to change any aspect of the brand identity. We call this encoding the brand.&lt;/p&gt;

&lt;p&gt;Some might say otherwise, but you won’t be able to encode everything up front. New needs will emerge. And some things can’t be made into variables.&lt;/p&gt;

&lt;p&gt;Encoding the brand makes your implementation as rebrand-ready as possible, and it simplifies future tweaks.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Plan for flux
&lt;/h3&gt;

&lt;p&gt;Brand work, and the digital gubbins around it, is never finished.&lt;sup id="fnref1"&gt;1&lt;/sup&gt;&lt;/p&gt;

&lt;p&gt;With robust versioning and good communication, your organisation can safely manage changes to your system.&lt;/p&gt;

&lt;p&gt;Label and communicate versions clearly, so everyone can see what’s changed, and make informed decisions about when to adopt. (We recommend &lt;a href="https://semver.org/" rel="noopener noreferrer"&gt;Semantic Versioning&lt;/a&gt;.)&lt;/p&gt;

&lt;p&gt;Call out changes in a visible and timely way.&lt;/p&gt;

&lt;h2&gt;
  
  
  Be flexible above all
&lt;/h2&gt;

&lt;p&gt;Reality is messy and the future is unknowable. Systematising your brand and planning for change lay the foundations for success.&lt;/p&gt;

&lt;p&gt;Seeing rebrands as an opportunity to make your system adaptable saves time and money in the long run.&lt;/p&gt;




&lt;ol&gt;

&lt;li id="fn1"&gt;
&lt;p&gt;Even when there’s no rebrand happening, people will always tinker. Technology and humanity continually evolve — and so must brands. Duncan Nguyen’s Medium post on the &lt;a href="https://medium.com/macoclock/how-apples-design-language-has-evolved-see-it-on-apple-s-event-invitations-2003-2018-3c8943c57403" rel="noopener noreferrer"&gt;evolution of Apple’s design language&lt;/a&gt; captures this well. ↩&lt;/p&gt;
&lt;/li&gt;

&lt;/ol&gt;

</description>
      <category>design</category>
      <category>designsystem</category>
      <category>management</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
