<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Business on Smashing Magazine — For Web Designers And Developers</title><link>https://www.smashingmagazine.com/category/business/index.xml</link><description>Recent content in Business on Smashing Magazine — For Web Designers And Developers</description><generator>Hugo -- gohugo.io</generator><language>en-us</language><lastBuildDate>Mon, 09 Feb 2026 03:03:08 +0000</lastBuildDate><item><author>Vitaly Friedman</author><title>Six Key Components of UX Strategy</title><link>https://www.smashingmagazine.com/2025/11/practical-guide-ux-strategy/</link><pubDate>Wed, 05 Nov 2025 13:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/11/practical-guide-ux-strategy/</guid><description>Let’s dive into the building blocks of UX strategy and see how it speaks the language of product and business strategy to create user value while achieving company goals. Part of the &lt;a href="https://measure-ux.com/">Measure UX &amp;amp; Design Impact&lt;/a> (use the code 🎟 &lt;code>IMPACT&lt;/code> to save 20% off today).</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/11/practical-guide-ux-strategy/" />
              <title>Six Key Components of UX Strategy</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Six Key Components of UX Strategy</h1>
                  
                    
                    <address>Vitaly Friedman</address>
                  
                  <time datetime="2025-11-05T13:00:00&#43;00:00" class="op-published">2025-11-05T13:00:00+00:00</time>
                  <time datetime="2025-11-05T13:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>For years, “UX strategy” felt like a confusing, ambiguous, and overloaded term to me. To me, it was some sort of a roadmap or a “grand vision”, with a few business decisions attached to it. And looking back now, I realize that I was wrong all along.</p>

<p>UX Strategy isn’t a goal; it’s a <strong>journey towards that goal</strong>. A journey connecting where UX is today with a desired future state of UX. And as such, it guides our actions and decisions, things we do and don’t do. And its goal is very simple: to <strong>maximize our chances of success</strong> while considering risks, bottlenecks and anything that might endanger the project.</p>

<p>Let’s explore the <strong>components of UX strategy</strong>, and how it works with product strategy and business strategy to deliver user value and meet business goals.</p>

<h2 id="strategy-vs-goals-vs-plans">Strategy vs. Goals vs. Plans</h2>

<p>When we speak about strategy, we often speak about planning and goals &mdash; but they are actually quite different. While <em>strategy</em> answers <strong>“what” we’re doing and “why”</strong>, <em>planning</em> is about “how” and “when” we’ll get it done. And the <em>goal</em> is merely a desired outcome of that entire journey.</p>

<ul>
<li><strong>Goals</strong> establish a desired future outcome,</li>
<li>That outcome typically represents a problem to solve,</li>
<li><strong>Strategy</strong> shows a high-level solution for that problem,</li>
<li><strong>Plan</strong> is a detailed set of low-level steps for getting the solution done.</li>
</ul>














<figure class="
  
  
  ">
  
    <a href="https://www.linkedin.com/posts/alex-m-h-smith_please-tell-me-you-arent-making-this-mistake-activity-7364616097272143872-SKgz">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="800"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/1-strategy-vs-goal.jpeg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/key-components-ux-strategy/1-strategy-vs-goal.jpeg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/key-components-ux-strategy/1-strategy-vs-goal.jpeg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/key-components-ux-strategy/1-strategy-vs-goal.jpeg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/key-components-ux-strategy/1-strategy-vs-goal.jpeg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/1-strategy-vs-goal.jpeg"
			
			sizes="100vw"
			alt="A diagram showing that a goal is a destination, while a strategy is the path to get there."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Good strategy isn't a goal or a big objective; it's a solution to a problem posed by a goal. Via <a href='https://www.linkedin.com/posts/alex-m-h-smith_please-tell-me-you-arent-making-this-mistake-activity-7364616097272143872-SKgz'>Alex H Smith</a>. (<a href='https://files.smashing.media/articles/key-components-ux-strategy/1-strategy-vs-goal.jpeg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>A strong strategy requires making conscious, and oftentimes tough, decisions about what we will do &mdash; and just as importantly, <strong>what we will not do</strong>, and why.</p>

<h2 id="business-strategy">Business Strategy</h2>

<p>UX strategy doesn’t live in isolation. It must inform and support product strategy and be aligned with business strategy. All these terms are often slightly confusing and overloaded, so let&rsquo;s clear it up.</p>

<p>At the highest level, <strong>business strategy</strong> is about the distinct choices executives make to set the company apart from its competitors. They shape the company’s positioning, objectives, and (most importantly!) <strong>competitive advantage</strong>.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://www.strategyzer.com/library/the-business-model-canvas">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="579"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/2-business-model-canvas.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/key-components-ux-strategy/2-business-model-canvas.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/key-components-ux-strategy/2-business-model-canvas.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/key-components-ux-strategy/2-business-model-canvas.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/key-components-ux-strategy/2-business-model-canvas.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/2-business-model-canvas.jpg"
			
			sizes="100vw"
			alt="The Business Model Canvas representing key business considerations for a sustainable business."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      We shouldn’t underestimate our impact. UX affects many segments of the <a href='https://www.strategyzer.com/library/the-business-model-canvas'>Business Model Canvas</a>: user segments, relationships, channels, activities, revenue streams. (<a href='https://files.smashing.media/articles/key-components-ux-strategy/2-business-model-canvas.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Typically, this advantage is achieved in <strong>two ways</strong>: through lower prices (cost leadership) or through <strong>differentiation</strong>. The latter part isn&rsquo;t about being <em>different</em>, but rather <strong>being perceived differently</strong> by the target audience. And that’s exactly where UX impact steps in.</p>

<p>In short, business strategy is:</p>

<ul>
<li><strong>A top-line vision</strong>, basis for core offers,</li>
<li><strong>Shapes positioning</strong>, goals, competitive advantage,</li>
<li><strong>Must always adapt</strong> to the market to keep a competitive advantage.</li>
</ul>

<h2 id="product-strategy">Product Strategy</h2>

<p>Product strategy is how a high-level business direction is translated into a unique positioning of a product. It defines <strong>what the product is, who its users are</strong>, and how it will contribute to the business’s goals. It’s also how we bring a product to market, drive growth, and achieve product-market fit.</p>

<p>In short, product strategy is:</p>

<ul>
<li><strong>Unique positioning</strong> and value of a product,</li>
<li><strong>How to establish</strong> and keep a product in the marketplace,</li>
<li><strong>How to keep competitive advantage</strong> of the product.</li>
</ul>

<h2 id="ux-strategy">UX Strategy</h2>

<p>UX strategy is about <strong>shaping and delivering</strong> product value through UX. Good UX strategy always stems from UX research and answers to business needs. It established what to focus on, what our high-value actions are, how we’ll measure success, and &mdash; quite importantly &mdash; what <strong>risks</strong> we need to mitigate.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/key-components-ux-strategy/8-risks-ux-strategy.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="451"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/8-risks-ux-strategy.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/key-components-ux-strategy/8-risks-ux-strategy.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/key-components-ux-strategy/8-risks-ux-strategy.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/key-components-ux-strategy/8-risks-ux-strategy.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/key-components-ux-strategy/8-risks-ux-strategy.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/8-risks-ux-strategy.png"
			
			sizes="100vw"
			alt="Frequent risks"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Every project has plenty of risks that endanger it. Unknown dependencies are one of them. (<a href='https://files.smashing.media/articles/key-components-ux-strategy/8-risks-ux-strategy.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Most importantly, it’s <strong>not a fixed plan</strong> or a set of deliverables; it’s a guide that informs our actions, but also must be prepared to change when things change.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://www.nngroup.com/articles/ux-strategy/">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="564"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/3-components-ux-strategy.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/key-components-ux-strategy/3-components-ux-strategy.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/key-components-ux-strategy/3-components-ux-strategy.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/key-components-ux-strategy/3-components-ux-strategy.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/key-components-ux-strategy/3-components-ux-strategy.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/3-components-ux-strategy.png"
			
			sizes="100vw"
			alt="A diagram illustrating the components of a UX Strategy: Vision, Goals, and a Plan."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Components of UX Strategy are Vision, Goals, and a Plan. Tactical steps are part of the execution. (Image source: <a href='https://www.nngroup.com/articles/ux-strategy/'>nngroup.com</a>) (<a href='https://files.smashing.media/articles/key-components-ux-strategy/3-components-ux-strategy.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>In short, UX strategy is:</p>

<ul>
<li>How we shape and deliver <strong>product value</strong> through UX,</li>
<li><strong>Priorities</strong>, focus + why, actions, metrics, risks,</li>
<li><strong>Isn’t a roadmap</strong>, intention or deliverables.</li>
</ul>

<h2 id="six-key-components-of-ux-strategy">Six Key Components of UX Strategy</h2>

<p>The impact of good UX typically lives in <strong>differentiation</strong> mentioned above. Again, it’s not about how “different” our experience is, but the unique perceived value that users associate with it. And that value is a matter of a clear, frictionless, accessible, fast, and reliable experience wrapped into the product.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/key-components-ux-strategy/4-what-ux-strategy.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/4-what-ux-strategy.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/key-components-ux-strategy/4-what-ux-strategy.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/key-components-ux-strategy/4-what-ux-strategy.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/key-components-ux-strategy/4-what-ux-strategy.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/key-components-ux-strategy/4-what-ux-strategy.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/4-what-ux-strategy.jpg"
			
			sizes="100vw"
			alt="UX strategy covers a plan of action, priorities, when to start working on it, and what it looks like."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      UX strategy works best in discovery, and is useful when risk and uncertainty are high. (<a href='https://files.smashing.media/articles/key-components-ux-strategy/4-what-ux-strategy.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>I always try to include <strong>6 key components</strong> in any strategic UX work so we don’t end up following a wrong assumption that won’t bring any impact:</p>

<ol>
<li><strong>Target goal</strong><br />
The desired, improved future state of UX.</li>
<li><strong>User segments</strong><br />
Primary users that we are considering.</li>
<li><strong>Priorities</strong><br />
What we will and, crucially, what we will not do, and why.</li>
<li><strong>High-value actions</strong><br />
How we drive value and meet user and business needs.</li>
<li><strong>Feasibility</strong><br />
Realistic assessment of people, processes, and resources.</li>
<li><strong>Risks</strong><br />
Bottlenecks, blockers, legacy constraints, big unknowns.</li>
</ol>

<p>It’s worth noting that it’s always dangerous to be designing a product with <strong>everybody in mind</strong>. As Jamie Levy noted, by being very broad too early, we often reduce the impact of our design and messaging. It’s typically better to start with a specific, <strong>well-defined user segment</strong> and then expand, rather than the other way around.</p>

<h2 id="practical-example-by-alin-buda">Practical Example (by Alin Buda)</h2>

<p>UX strategy doesn’t have to be a big <strong>40-page long PDF report</strong> or a Keynote presentation. A while back, Alin Buda kindly <a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7313819542655299585-ya-L?utm_source=share&amp;utm_medium=member_desktop&amp;rcm=ACoAAACDcgQBa_vsk5breYKwZAgyIhsHtJaFbL8">left a comment</a> on one of my LinkedIn posts, giving a great example of what a <strong>concise UX strategy</strong> could look like:</p>

<blockquote><strong>UX Strategy (for Q4)</strong><br /><br />Our UX strategy is to focus on <strong>high-friction workflows</strong> for expert users, not casual usability improvements. Why? Because retention in this space is driven by power-user efficiency, and that aligns with our growth model.<br /><br />To succeed, we’ll design <strong>workflow accelerators</strong> and decision-support tools that will reduce time-on-task. As a part of it, we’ll need to redesign legacy flows in the Crux system. We <strong>won’t prioritize</strong> UI refinements or onboarding tours, because it doesn’t move the needle in this context.</blockquote>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/key-components-ux-strategy/5-ux-strategy-example.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="449"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/5-ux-strategy-example.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/key-components-ux-strategy/5-ux-strategy-example.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/key-components-ux-strategy/5-ux-strategy-example.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/key-components-ux-strategy/5-ux-strategy-example.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/key-components-ux-strategy/5-ux-strategy-example.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/5-ux-strategy-example.jpg"
			
			sizes="100vw"
			alt="UX Strategy example, highlighting individual key points to cover."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      An example of UX strategy. It doesn't have to be a long PDF report. (<a href='https://files.smashing.media/articles/key-components-ux-strategy/5-ux-strategy-example.jpg'>Large preview</a>)
    </figcaption>
  
</figure>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/key-components-ux-strategy/6-ux-strategy-example.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="448"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/6-ux-strategy-example.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/key-components-ux-strategy/6-ux-strategy-example.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/key-components-ux-strategy/6-ux-strategy-example.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/key-components-ux-strategy/6-ux-strategy-example.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/key-components-ux-strategy/6-ux-strategy-example.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/6-ux-strategy-example.jpg"
			
			sizes="100vw"
			alt="UX Strategy example, highlighting individual key points to cover."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      UX strategy works best in discovery, and is useful when risk and uncertainty are high. (<a href='https://files.smashing.media/articles/key-components-ux-strategy/6-ux-strategy-example.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>What I like most about this example is just how concise and clear it is. Getting to this level of clarity takes quite a bit of time, but it creates a very precise overview of what we do, what we don&rsquo;t do, what we focus on, and how we <strong>drive value</strong>.</p>

<h2 id="wrapping-up">Wrapping Up</h2>

<p>The best path to make a strong case with senior leadership is to frame your UX work as a direct <strong>contributor to differentiation</strong>. This isn’t just about making things look different; it’s about enhancing the perceived value.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://jamiemill.com/blog/elements-of-product-design/">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/7-elements-product-design.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/key-components-ux-strategy/7-elements-product-design.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/key-components-ux-strategy/7-elements-product-design.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/key-components-ux-strategy/7-elements-product-design.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/key-components-ux-strategy/7-elements-product-design.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/key-components-ux-strategy/7-elements-product-design.png"
			
			sizes="100vw"
			alt="A diagram showing the elements of product design, from abstract reality to the concrete surface."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      The Elements of Product Design, starting from mapping reality into the problem space. That's the critical part, and a cornerstone of UX Strategy. (Image source: <a href='https://jamiemill.com/blog/elements-of-product-design/'>Jamie Mill</a>) (<a href='https://files.smashing.media/articles/key-components-ux-strategy/7-elements-product-design.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>A good strategy ties UX improvements to <strong>measurable business outcomes</strong>. It doesn’t speak about design patterns, consistency, or neatly organized components. Instead, it speaks the language of product and business strategy: OKRs, costs, revenue, business metrics, and objectives.</p>

<p>Design <strong>can succeed without a strategy</strong>. In the wise words of Sun Tzu, strategy without tactics is the slowest route to victory. And tactics without strategy are the noise before defeat.</p>

<h2 id="meet-how-to-measure-ux-and-design-impact">Meet “How To Measure UX And Design Impact”</h2>

<p>You can find more details on <strong>UX Strategy</strong> in 🪴&nbsp;<a href="https://measure-ux.com/"><strong>Measure UX &amp; Design Impact</strong></a> (8h), a practical guide for designers and UX leads to measure and show your UX impact on business. Use the code 🎟 <code>IMPACT</code> to save 20% off today. <a href="https://measure-ux.com/">Jump to the details</a>.</p>

<figure style="margin-bottom:0;padding-bottom:0" class="article__image">
    <a href="https://measure-ux.com/" title="How To Measure UX and Design Impact, with Vitaly Friedman">
    <img width="900" height="466" style="border-radius: 11px" src="https://files.smashing.media/articles/ux-metrics-video-course-release/measure-ux-and-design-impact-course.png" alt="How to Measure UX and Design Impact, with Vitaly Friedman.">
    </a>
</figure>

<div class="book-cta__inverted"><div class="book-cta" data-handler="ContentTabs" data-mq="(max-width: 480px)"><nav class="content-tabs content-tabs--books"><ul><li class="content-tab"><a href="#"><button class="btn btn--small btn--white btn--white--bordered">
Video + UX Training</button></a></li><li class="content-tab"><a href="#"><button class="btn btn--small btn--white btn--white--bordered">Video only</button></a></li></ul></nav><div class="book-cta__col book-cta__hardcover content-tab--content"><h3 class="book-cta__title"><span>Video + UX Training</span></h3><span class="book-cta__price"><span><span class=""><span class="currency-sign">$</span>&nbsp;<span>495<span class="sup">.00</span></span></span> <span class="book-cta__price--old"><span class="currency-sign">$</span>&nbsp;<span>799<span class="sup">.00</span></span></span></span></span>
<a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3951439" class="btn btn--full btn--medium btn--text-shadow">
Get Video + UX Training<div></div></a><p class="book-cta__desc">25 video lessons (8h) + <a href="https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/">Live UX Training</a>.<br>100 days money-back-guarantee.</p></div><div class="book-cta__col book-cta__ebook content-tab--content"><h3 class="book-cta__title"><span>Video only</span></h3><div data-audience="anonymous free supporter" data-remove="true"><span class="book-cta__price" data-handler="PriceTag"><span><span class=""><span class="currency-sign">$</span>&nbsp;<span>250<span class="sup">.00</span></span></span><span class="book-cta__price--old"><span class="currency-sign">$</span>&nbsp;<span>395<span class="sup">.00</span></span></span></span></div>
<a href="https://smart-interface-design-patterns.thinkific.com/enroll/3081832?price_id=3950630" class="btn btn--full btn--medium btn--text-shadow">
Get the video course<div></div></a><p class="book-cta__desc" data-audience="anonymous free supporter" data-remove="true">25 video lessons (8h). Updated yearly.<br>Also available as a <a href="https://smart-interface-design-patterns.thinkific.com/enroll/3082557?price_id=3951421">UX Bundle with 2 video courses.</a></p></div><span></span></div></div>

<h2 id="useful-resources">Useful Resources</h2>

<ul>
<li>“<a href="https://www.nngroup.com/articles/ux-strategy/">UX Strategy: Definition and Components</a>”, Sarah Gibbons, Anna Kaley</li>
<li>“<a href="https://www.nngroup.com/articles/strategy-study-guide/">UX Strategy: Study Guide</a>”, Sarah Gibbons, Anna Kaley</li>
<li><a href="https://www.youtube.com/watch?v=-6rFBXVMBTs">What Goes Into a Proactive UX Strategy</a> (video), Jared Spool</li>
<li>“<a href="https://dovetail.com/ux/ux-strategy/">How To Develop An Effective UX Strategy</a>”, Chloé Garnham</li>
<li><a href="https://thewavingcat.com/publications/the-little-book-of-strategy/"><em>The Little Book Of Strategy</em></a> (free PDF), Peter Bihr</li>
<li>“<a href="https://www.uxmatters.com/mt/archives/2016/12/how-to-create-an-enterprise-ux-strategy.php">Enterprise UX Strategy</a>”, Cassandra Naji</li>
<li>“<a href="https://web.archive.org/web/20181128062801/https://www.invisionapp.com/inside-design/ux-strategy-guide/">UX Strategy Guide</a>” + <a href="https://web.archive.org/web/20220506065907/https://s3.amazonaws.com/blog.invisionapp.com/uploads/2018/01/UX-strategy-template.pdf">Blueprint (Template)</a>, Alex Souza</li>
<li><a href="https://learningloop.io/playbooks/">Product Strategy Playbooks</a></li>
<li><a href="https://jaimelevy.com/ux-strategy-book/"><em>UX Strategy</em></a>, Jaime Levy</li>
</ul>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Paul Boag</author><title>Building A Practical UX Strategy Framework</title><link>https://www.smashingmagazine.com/2025/05/building-practical-ux-strategy-framework/</link><pubDate>Fri, 16 May 2025 11:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/05/building-practical-ux-strategy-framework/</guid><description>Learn how to create and implement a UX strategy framework that shapes work and drives real business value.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/05/building-practical-ux-strategy-framework/" />
              <title>Building A Practical UX Strategy Framework</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Building A Practical UX Strategy Framework</h1>
                  
                    
                    <address>Paul Boag</address>
                  
                  <time datetime="2025-05-16T11:00:00&#43;00:00" class="op-published">2025-05-16T11:00:00+00:00</time>
                  <time datetime="2025-05-16T11:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>In my experience, most UX teams find themselves primarily implementing other people’s ideas rather than leading the conversation about user experience. This happens because stakeholders and decision-makers often lack a deep understanding of UX’s capabilities and potential. Without a clear UX strategy framework, professionals get relegated to a purely tactical role &mdash; wireframing and testing solutions conceived by others.</p>

<p>A well-crafted UX strategy framework changes this dynamic. It helps UX teams take control of their role and demonstrate real leadership in improving the user experience. Rather than just responding to requests, you can <strong>proactively identify opportunities</strong> that deliver genuine business value. <strong>A strategic approach</strong> also helps educate stakeholders about UX’s full potential while building credibility through measurable results.</p>

<h2 id="strategy-and-the-fat-smoker">Strategy And The Fat Smoker</h2>

<p><a href="https://boagworld.com/ux-strategy/">When I guide teams on creating a UX strategy</a>, I like to keep things simple. I borrow an approach from the book <a href="https://davidmaister.com/books/strategyfatsmoker/"><em>Strategy and the Fat Smoker</em></a> and break strategy into three clear parts:</p>

<ol>
<li>First, we diagnose where we are today.</li>
<li>Then, we set guiding policies to steer us.</li>
<li>Finally, we outline actions to get us where we want to go.</li>
</ol>

<p>Let me walk you through each part so you can shape a UX strategy that feels both <strong>practical</strong> and <strong>powerful</strong>.</p>

<h2 id="diagnosis-know-your-starting-point">Diagnosis: Know Your Starting Point</h2>

<p>Before we outline any plan, we need to assess our current situation. A clear diagnosis shows where you can make the biggest impact. It also highlights the gaps you must fill.</p>

<h3 id="identify-status-quo-failures">Identify Status Quo Failures</h3>

<p>Start by naming what isn’t working. You might find that your organization lacks a UX team. Or the team has a budget that is too small. Sometimes you uncover that user satisfaction scores are slipping. Frame these challenges in business terms. For example, a slow sign‑up flow may be costing you 20 percent of new registrations each month. That ties UX to revenue and grabs attention.</p>

<p>Once you have a list of failures, ask yourself:</p>

<blockquote>What outcome does each failure hurt?</blockquote>

<p>A slow checkout might reduce e‑commerce sales. Complicated navigation may dent customer retention. Linking UX issues to business metrics makes the case for change.</p>

<h3 id="map-the-aspirational-experience">Map The Aspirational Experience</h3>

<p>Next, visualize <a href="https://www.smashingmagazine.com/2015/01/all-about-customer-journey-mapping/">what an improved journey would look like</a>. A quick way is to create two simple journey maps. One shows the current experience. The other shows an ideal path. Highlight key steps like <strong>discovery</strong>, <strong>sign‑up</strong>, <strong>onboarding</strong>, and <strong>support</strong>. Then ask:</p>

<blockquote>How will this new journey help meet our business goals?</blockquote>

<p>Maybe faster onboarding can cut support costs. Or a streamlined checkout can boost average order value.</p>

<p>Let me share a real-world example. When working with <a href="https://www.samaritans.org/">the Samaritans</a>, a UK mental health charity, we first mapped their current support process. While their telephone support was excellent, they struggled with email and text support, and had no presence on social media platforms. This was largely because volunteers found it difficult to manage multiple communication systems.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/building-practical-ux-strategy-framework/1-mapping-current-experience-samaritan-users.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-practical-ux-strategy-framework/1-mapping-current-experience-samaritan-users.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/building-practical-ux-strategy-framework/1-mapping-current-experience-samaritan-users.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/building-practical-ux-strategy-framework/1-mapping-current-experience-samaritan-users.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/building-practical-ux-strategy-framework/1-mapping-current-experience-samaritan-users.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/building-practical-ux-strategy-framework/1-mapping-current-experience-samaritan-users.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-practical-ux-strategy-framework/1-mapping-current-experience-samaritan-users.png"
			
			sizes="100vw"
			alt="Mapping of the current experience of the Samaritan users"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      By mapping the current experience of the Samaritan users, we identified weaknesses that we could address in our UX strategy. (<a href='https://files.smashing.media/articles/building-practical-ux-strategy-framework/1-mapping-current-experience-samaritan-users.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>We then created an <strong>aspirational journey map</strong> showing a unified system where volunteers could manage all communication channels through a single interface. This clear vision gave the organization a concrete goal that would improve the experience for both users seeking help and the volunteers providing support.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/building-practical-ux-strategy-framework/2-mapping-aspirational-experience.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-practical-ux-strategy-framework/2-mapping-aspirational-experience.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/building-practical-ux-strategy-framework/2-mapping-aspirational-experience.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/building-practical-ux-strategy-framework/2-mapping-aspirational-experience.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/building-practical-ux-strategy-framework/2-mapping-aspirational-experience.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/building-practical-ux-strategy-framework/2-mapping-aspirational-experience.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-practical-ux-strategy-framework/2-mapping-aspirational-experience.png"
			
			sizes="100vw"
			alt="Mapping of an aspirational experience"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Mapping an aspirational experience provided a clear vision everybody could work towards. (<a href='https://files.smashing.media/articles/building-practical-ux-strategy-framework/2-mapping-aspirational-experience.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>This vision gives everyone something to rally around. It also guides your later actions by showing the <strong>target state</strong>.</p>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p>Meet <strong><a data-instant href="https://www.smashingconf.com/online-workshops/">Smashing Workshops</a></strong> on <strong>front-end, design &amp; UX</strong>, with practical takeaways, live sessions, <strong>video recordings</strong> and a friendly Q&amp;A. With Brad Frost, Stéph Walter and <a href="https://smashingconf.com/online-workshops/workshops">so many others</a>.</p>
<a data-instant href="smashing-workshops" class="btn btn--green btn--large" style="">Jump to the workshops&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="smashing-workshops" class="feature-panel-image-link">
<div class="feature-panel-image">
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="/images/smashing-cat/cat-scubadiving-panel.svg"
    alt="Feature Panel"
    width="257"
    height="355"
/>

</div>
</a>
</div>
</aside>
</div>

<h3 id="audit-resources-and-influence">Audit Resources And Influence</h3>

<p>Next, turn your attention to what you have to work with. List your UX team members and their skills. Note any budget set aside for research tools or software licenses. Then identify where you have influence across the organization. Which teams already seek your advice? Who trusts your guidance? That might be the product group or marketing. You’ll lean on these allies to spread UX best practices.</p>

<p>Finally, consider who else matters. Are there policy owners, process leads, or executives you need on board? Jot down names and roles so you can loop them in later.</p>

<h3 id="spot-your-constraints">Spot Your Constraints</h3>

<p>Every strategy must live within real‑world limits. Maybe there’s a headcount freeze. Or IT systems won’t support a major overhaul. List any technical, budget, or policy limits you face. Then accept them. You’ll design your strategy to deliver value without asking for impossible changes. Working within constraints <strong>boosts your credibility</strong>. It also <strong>forces creativity</strong>.</p>

<p>With the diagnosis complete, we know where we stand. Next, let’s look at how to steer our efforts.</p>

<h2 id="guiding-policies-set-the-north-star">Guiding Policies: Set the North Star</h2>

<p>Guiding policies give you guardrails. They help you decide which opportunities to chase and which to skip. These policies reflect your <strong>priorities</strong> and the best path forward.</p>

<h3 id="choose-a-tactical-or-strategic-approach">Choose A Tactical Or Strategic Approach</h3>

<p>Early on, you must pick how your UX team will operate. You have two broad options:</p>

<ul>
<li><strong>Tactical</strong><br />
You embed UX people on specific projects. They run tests and design interfaces hands‑on. This needs a bigger team. I like a ratio of one UX pro for every two developers.</li>
<li><strong>Strategic</strong><br />
You act as a <a href="https://en.wikipedia.org/wiki/Center_of_excellence">center of excellence</a>. You advise other teams. You build guidelines, run workshops, and offer tools. This needs fewer hands but a broader influence.</li>
</ul>

<p>Weigh your resources against your goals. If you need to move fast on many projects, go tactical. If you want to shift mindsets, work strategically. Choose the approach with the best chance of success.</p>

<h3 id="define-a-prioritization-method">Define A Prioritization Method</h3>

<p>You’ll face many requests for UX work. A clear way to sort them saves headaches. Over the years, I’ve used a simple <a href="https://boagworld.com/audio/introducing-digital-triage/">digital triage</a>. You score each request based on <strong>impact</strong>, <strong>effort</strong>, and <strong>risk</strong>. Then, you work on the highest‑scoring items first. You can adapt this model however you like. The point is to have a repeatable, fair way to say yes or no.</p>

<h3 id="create-a-playbook-of-principles">Create A Playbook Of Principles</h3>

<p><a href="https://www.smashingmagazine.com/2025/01/digital-playbook-crucial-counterpart-design-system/">A playbook</a> holds your core design principles, standard operating procedures, and templates. It might include:</p>

<ul>
<li>A design system for UI patterns;</li>
<li>Standards around accessibility or user research;</li>
<li>Guides for key tasks such as writing for the web;</li>
<li>Templates for common activities like user interviews.</li>
</ul>

<p>This playbook becomes your team’s shared reference. It helps others repeat your process. It also captures the know‑how you need as your team grows.</p>














<figure class="
  
  
  ">
  
    <a href="https://files.smashing.media/articles/building-practical-ux-strategy-framework/3-playbook-design-principles.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="732"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-practical-ux-strategy-framework/3-playbook-design-principles.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/building-practical-ux-strategy-framework/3-playbook-design-principles.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/building-practical-ux-strategy-framework/3-playbook-design-principles.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/building-practical-ux-strategy-framework/3-playbook-design-principles.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/building-practical-ux-strategy-framework/3-playbook-design-principles.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-practical-ux-strategy-framework/3-playbook-design-principles.png"
			
			sizes="100vw"
			alt="A playbook containing your strategies, policies, principles, and standard operating procedures."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      A playbook helps you document your strategies, policies, principles, and standard operating procedures. (<a href='https://files.smashing.media/articles/building-practical-ux-strategy-framework/3-playbook-design-principles.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="plan-your-communication">Plan Your Communication</h3>

<p>Strategy fails when people don’t know about it. You need a plan to engage stakeholders. I find it helpful to use a <a href="https://www.forbes.com/advisor/business/raci-chart/">RACI chart</a> &mdash; who is <strong>Responsible</strong>, <strong>Accountable</strong>, <strong>Consulted</strong>, and <strong>Informed</strong>. Then decide:</p>

<ul>
<li>How often will you send updates?</li>
<li>Which channels should you use (email, Slack, weekly demos)?</li>
<li>Who leads each conversation?</li>
</ul>

<p>Clear, regular communication keeps everyone looped in. It also surfaces concerns early so you can address them.</p>

<p>With guiding policies in place, you have a clear way to decide what to work on. Now, let’s turn to making things happen.</p>

<div class="partners__lead-place"></div>

<h2 id="action-plan-bring-strategy-to-life">Action Plan: Bring Strategy To Life</h2>

<p>Actions are the concrete steps you take to deliver on your guiding policies. They cover the projects you run, the support you give, and the risks you manage.</p>

<h3 id="outline-key-projects-and-services">Outline Key Projects And Services</h3>

<p>Start by listing the projects you’ll tackle. These might be:</p>

<ul>
<li>Running a discovery phase for a new product.</li>
<li>Building a design system for your marketing team.</li>
<li>Conducting user tests on your main flow.</li>
</ul>

<p>For each project, note <em>what</em> you will deliver and <em>when</em>. You can use your digital triage scores to pick the highest priorities. Keep each project scope small enough to finish in a few sprints. That way, you prove value quickly.</p>

<h3 id="offer-training-and-tools">Offer Training And Tools</h3>

<p>If you choose a strategic approach, you need to empower others. Plan workshops on core UX topics. Record short videos on testing best practices. Build quick reference guides. Curate a list of tools:</p>

<ul>
<li>Prototyping apps,</li>
<li>Research platforms,</li>
<li>Analytics dashboards.</li>
</ul>

<p>Make these resources easy to find in your playbook.</p>

<h3 id="assign-stakeholder-roles">Assign Stakeholder Roles</h3>

<p>Your strategy needs executive backing. Identify a senior sponsor who can break through roadblocks. Outline what you need them to do. Maybe it’s championing a new budget line or approving key hires. Also, pin down other collaborators. Who on the product side will help you scope new features? Who on the IT team will support user research tooling? Getting clear roles avoids confusion.</p>

<h3 id="manage-risks-and-barriers">Manage Risks and Barriers</h3>

<p>No plan goes off without a hitch. List your biggest risks, such as:</p>

<ul>
<li>A hiring freeze delays tactical hires;</li>
<li>Key stakeholders lose interest;</li>
<li>Technical debt slows down new releases.</li>
</ul>

<p>For each risk, jot down how you’ll handle it. Maybe you should shift to a fully strategic approach if hiring stalls. Or you can send a weekly one‑page update to reengage sponsors. Having a fallback keeps you calm when things go sideways.</p>

<p>Before we wrap up, let’s talk about making strategy stick.</p>

<h2 id="embedding-ux-into-the-culture">Embedding UX Into The Culture</h2>

<p>A strategy shines only if you deeply embed it into your organization’s culture. Here’s how to make that happen:</p>

<ul>
<li><strong>Build awareness and enthusiasm</strong>

<ul>
<li>Run regular “lunch and learn” sessions to showcase UX wins.</li>
<li>Host an annual UX day or mini-conference to boost visibility.</li>
<li>Create a monthly UX salon where teams share challenges and victories.</li>
</ul></li>
<li><strong>Make UX visible and tangible</strong>

<ul>
<li>Display personas and journey maps in office spaces.</li>
<li>Add design principles to everyday items like mousepads and mugs.</li>
<li>Share success metrics and improvements in company communications.</li>
</ul></li>
<li><strong>Embed UX into processes</strong>

<ul>
<li>Establish clear UX policies and best practices.</li>
<li>Review and update procedures that might hinder a good user experience.</li>
<li>Create a healthy competition between teams through UX metrics.</li>
</ul></li>
</ul>

<p>These tactics transform your strategy from a document into an organizational movement. They foster a culture where everyone thinks about user experience, not just the UX team. Remember, cultural change takes time &mdash; but consistent, visible efforts will gradually shift mindsets across the organization.</p>

<div class="partners__lead-place"></div>

<h2 id="implementing-your-ux-strategy-from-plan-to-practice">Implementing Your UX Strategy: From Plan To Practice</h2>

<p>We started by diagnosing your current state. Then we set policies to guide your efforts. Finally, we laid out an action plan to deliver results. This three-part framework keeps your UX work tied to real business needs. It also gives you clarity, focus, and credibility.</p>

<p>However, creating a strategy is the easy part &mdash; implementing it is where the real challenge lies. This is precisely why the book <em>Strategy and the Fat Smoker</em> carries its distinctive title. Just as someone who is overweight or smokes knows exactly what they need to do, we often know what our UX strategy should be. The difficult part is following through and making it a reality.</p>

<p>Success requires <strong>consistent engagement</strong> and <strong>persistence</strong> in the face of setbacks. As Winston Churchill wisely noted,</p>

<blockquote>“Success is going from failure to failure with no loss of enthusiasm.”</blockquote>

<p>This perfectly captures the mindset needed to implement a successful UX strategy &mdash; staying committed to your vision even when faced with obstacles and setbacks.</p>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Talke Hoppmann-Walton</author><title>“Product Kondo”: A Guide To Evaluating Your Organizational Product Portfolio</title><link>https://www.smashingmagazine.com/2025/04/product-kondo-guide-evaluating-organizational-product-portfolio/</link><pubDate>Fri, 25 Apr 2025 13:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/04/product-kondo-guide-evaluating-organizational-product-portfolio/</guid><description>It starts with good intentions — a quick fix here, a shiny feature there — and suddenly, your product portfolio’s bursting at the seams. In this guide, Talke Hoppmann-Walton walks you through a “Product Kondo” exercise to declutter, realign, and spark some serious product joy for both your business and your customers.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/04/product-kondo-guide-evaluating-organizational-product-portfolio/" />
              <title>“Product Kondo”: A Guide To Evaluating Your Organizational Product Portfolio</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>“Product Kondo”: A Guide To Evaluating Your Organizational Product Portfolio</h1>
                  
                    
                    <address>Talke Hoppmann-Walton</address>
                  
                  <time datetime="2025-04-25T13:00:00&#43;00:00" class="op-published">2025-04-25T13:00:00+00:00</time>
                  <time datetime="2025-04-25T13:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>When building digital products, thinking in terms of single features and urgent client needs can lead to a large portfolio of products with <strong>high maintenance costs</strong>. At first, this approach makes sense, as you’re offering new value to customers and keeping important clients happy. But, over time, you often end up with a collection of highly bespoke solutions that ignore two key principles:</p>

<ol>
<li>Your product portfolio should cater to your core customer segments and meet their needs.</li>
<li>Your product portfolio should balance the short-term benefits of bespoke solutions against long-term maintenance costs while aligning with your business strategy.</li>
</ol>

<p>So the reality often looks like this: large legacy product portfolios have grown over time, and the effort required to clean up is hard to prioritize against other seemingly more pressing topics.</p>

<p>This article highlights the <strong>benefits of going through a clean-up exercise</strong> and explains how to conduct a <strong>“Product Kondo” exercise</strong> on your product portfolio. Like Marie Kondo, the Japanese master of cleaning up closets and houses to keep what brings you joy, discard what you no longer need, and organize what you keep into a workable order, this exercise seeks to identify the most valuable items for both your business and your customers. This article discusses the issues with large legacy portfolios and explains <em>how</em> to simplify and organize them into <strong>customer-centric portfolios</strong>, with stakeholder buy-in throughout the process.</p>

<h2 id="overflowing-product-cupboards">Overflowing Product Cupboards</h2>

<p>There are many reasons why an organization might end up with a large legacy product portfolio, which, similar to the cupboards organized by Marie Kondo, is in dire need of a good clean-up. Whether your portfolio is overgrown from crafting bespoke solutions for important enterprise clients (a common B2B scenario), from testing new features with a B2C customer segment, or various other possible reasons, incentive structures chiefly among them &mdash; overgrown portfolios are very common. And the problem is they need to not just be developed in the first place, they <strong>need to be maintained</strong>, and that gets ever more <strong>costly</strong> and <strong>complex</strong> over time.</p>

<p>While this might be oversimplified, the general logic holds true: the more bespoke your product portfolio, the harder it is to keep clean and tidy. Or as Marie Kondo would say, <em>“In a messy cupboard, it’s impossible to find the pieces that truly bring you joy.”</em> In this context, joy translates into:</p>

<ol>
<li>Value for the customer,</li>
<li>Revenue for the business.</li>
</ol>

<p>If you want to work out how to find that joy in your product portfolio again, this article outlines the practical steps taken for such a “Product Kondo” exercise in a global not-for-profit organization with a large legacy portfolio, including the moment when theory met reality, and the learnings from this effort.</p>

<p>We conducted this clean-up in a globally distributed organization undergoing a wider transformation. For more than 20 years, the organization had been gathering and distributing data in various formats: from raw to modelled data, scores, and advanced data products. However, it had not been focused on customer centricity nor regarded products as strategic differentiators. This meant that key indicators of success for product organizations had never been tracked. So the challenge was to map out and simplify the portfolio with very few indicators available to track product performance (e.g., user analytics data).</p>

<blockquote>So, how do you start understanding where the value lies in your portfolio and what factors are driving this portfolio clean-up in the first place?</blockquote>

<p>As part of the wider organizational transformation, one consideration was to <strong>simplify the product portfolio</strong> in order to reduce maintenance costs and the technical effort required for a planned migration to a new platform. Another important concern was to <strong>align future development with the newly developed business strategy</strong>. Therefore, reducing costs and planning for the future were the key drivers.</p>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p><p>Meet <a data-instant href="/the-smashing-newsletter/"><strong>Smashing Email Newsletter</strong></a> with useful tips on front-end, design &amp; UX. Subscribe and <strong>get “Smart Interface Design Checklists”</strong> &mdash; a <strong>free PDF deck</strong> with 150+ questions to ask yourself when designing and building almost <em>anything</em>.</p><div><section class="nlbf"><form action="//smashingmagazine.us1.list-manage.com/subscribe/post?u=16b832d9ad4b28edf261f34df&amp;id=a1666656e0" method="post"><div class="nlbwrapper"><label for="mce-EMAIL-hp" class="sr-only">Your (smashing) email</label><div class="nlbgroup"><input type="email" name="EMAIL" class="nlbf-email" id="mce-EMAIL-hp" placeholder="Your email">
<input type="submit" value="Meow!" name="subscribe" class="nlbf-button"></div></div></form><style>.c-garfield-the-cat .nlbwrapper{margin-bottom: 0;}.nlbf{display:flex;padding-bottom:.25em;padding-top:.5em;text-align:center;letter-spacing:-.5px;color:#fff;font-size:1.15em}.nlbgroup:hover{box-shadow:0 1px 7px -5px rgba(50,50,93,.25),0 3px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025)}.nlbf .nlbf-button,.nlbf .nlbf-email{flex-grow:1;flex-shrink:0;width:auto;margin:0;padding:.75em 1em;border:0;border-radius:11px;background:#fff;font-size:1em;box-shadow:none}.promo-box .nlbf-button:focus,.promo-box input.nlbf-email:active,.promo-box input.nlbf-email:focus{box-shadow:none}.nlbf-button:-ms-input-placeholder,.nlbf-email:-ms-input-placeholder{color:#777;font-style:italic}.nlbf-button::-webkit-input-placeholder,.nlbf-email::-webkit-input-placeholder{color:#777;font-style:italic}.nlbf-button:-ms-input-placeholder,.nlbf-button::-moz-placeholder,.nlbf-button::placeholder,.nlbf-email:-ms-input-placeholder,.nlbf-email::-moz-placeholder,.nlbf-email::placeholder{color:#777;font-style:italic}.nlbf .nlbf-button{transition:all .2s ease-in-out;color:#fff;background-color:#0168b8;font-weight:700;box-shadow:0 1px 1px rgba(0,0,0,.3);width:100%;border:0;border-left:1px solid #ddd;flex:2;border-top-left-radius:0;border-bottom-left-radius:0}.nlbf .nlbf-email{border-top-right-radius:0;border-bottom-right-radius:0;width:100%;flex:4;min-width:150px}@media all and (max-width:650px){.nlbf .nlbgroup{flex-wrap:wrap;box-shadow:none}.nlbf .nlbf-button,.nlbf .nlbf-email{border-radius:11px;border-left:none}.nlbf .nlbf-email{box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);min-width:100%}.nlbf .nlbf-button{margin-top:1em;box-shadow:0 1px 1px rgba(0,0,0,.5)}}.nlbf .nlbf-button:active,.nlbf .nlbf-button:focus,.nlbf .nlbf-button:hover{cursor:pointer;color:#fff;background-color:#0168b8;border-color:#dadada;box-shadow:0 1px 1px rgba(0,0,0,.3)}.nlbf .nlbf-button:active,.nlbf .nlbf-button:focus{outline:0!important;text-shadow:1px 1px 1px rgba(0,0,0,.3);box-shadow:inset 0 3px 3px rgba(0,0,0,.3)}.nlbgroup{display:flex;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);border-radius:11px;transition:box-shadow .2s ease-in-out}.nlbwrapper{display:flex;flex-direction:column;justify-content:center}.nlbf form{width:100%}.nlbf .nlbgroup{margin:0}.nlbcaption{font-size:.9em;line-height:1.5em;color:#fff;border-radius:11px;padding:.5em 1em;display:inline-block;background-color:#0067b859;text-shadow:1px 1px 1px rgba(0,0,0,.3)}.wf-loaded-stage2 .nlbf .nlbf-button{font-family:Mija}.mts{margin-top: 5px !important;}.mbn{margin-bottom: 0 !important;}</style></section><p class="mts mbn"><small class="promo-box__footer mtm block grey"><em>Once a week. Useful tips on <a href="https://www.smashingmagazine.com/the-smashing-newsletter/">front-end &amp; UX</a>. Trusted by 207.000 friendly folks.</em></small></p></div></p>
</div>
</div>
<div class="feature-panel-right-col">
<div class="feature-panel-image">
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="/images/smashing-cat/cat-firechat.svg"
    alt="Feature Panel"
    width="310"
    height="400"
/>

</div>

<p></div>
</aside>
</div></p>

<h2 id="the-product-kondo-portfolio-clean-up">The “Product Kondo” Portfolio Clean-up</h2>

<p>So if you find yourself in a similar situation, where you have a complex legacy portfolio, and where across many years features have been added, but hardly anything has ever been sunset, a “Product Kondo” clean-up, i.e., a cleaning out of your product cupboards, might be what’s needed.</p>

<p>To do that, it’s useful to go in with two ideas:</p>

<ul>
<li>Transparency about the need to simplify;</li>
<li>Transparency about how decisions will be made, so teams are on board and able to contribute.</li>
</ul>

<p>Getting buy-in and building a narrative everyone understands and sees as relevant is crucial when trying to clean up &mdash; especially in large companies, where you’ll always find someone who thinks “we need everything,” and the relative importance of different customer segments is unclear, with no accurate portfolio overview in place.</p>

<blockquote>If you’re unclear about the state of your current portfolio, how do you know where to focus next strategically?</blockquote>

<p>Not knowing where the highest value lies in your portfolio and how it all maps out as a whole has another implication: If you don’t know your current status quo, it’s hard to plan ahead and it’s equally hard to get out of the delivery mode many product organizations find themselves in, where you simply build what gets requested, but can’t act as a driver of future growth.</p>

<p>To organize a portfolio in order to define how to handle it going forward, while not having much information to base decisions on, the high-level approach was this:</p>

<ol>
<li>Define the <strong>FOR WHOM</strong> (By building a user segmentation matrix).</li>
<li>Establish the <strong>STATUS QUO</strong> (By auditing previous attempts to map the portfolio).</li>
<li>Agree the <strong>HOW</strong> (By defining evaluation criteria &amp; prioritisation).</li>
<li>Ensuring <strong>BUY-IN</strong> (through deep dives with key stakeholders and experts).</li>
</ol>

<p><strong>Note</strong>: <em>Every company is different, especially regarding the information that’s available. So this is not an attempt at building the next framework or providing a one-size-fits-all approach to portfolio organization. Instead, it is a proposed solution for how to approach mapping out your current portfolio to start from a cleaner slate, with your customer segments in mind. These four areas of work should be considered as necessary when attempting a “product kondo” exercise in your own organization.</em></p>

<h3 id="1-for-whom-building-a-user-segmentation-matrix">1. For Whom? Building A User Segmentation Matrix</h3>

<p>First things first, if you’re not clear about your <strong>primary and secondary customer segments</strong>, then this is where to start. If you want teams to be able to focus, it’s crucial to define priorities. Identifying key external user groups/segments, understanding their differences, and assessing their importance to the organization’s overall business success is a great start. Building a user segmentation matrix is a great foundation for prioritizing efforts and aligning services/products around user needs.</p>

<p>Apart from establishing the key jobs-to-be-done, goals, and pain points for each customer segment, it fosters transparency around the following factors:</p>

<ul>
<li>Thinking from a customer perspective.</li>
<li>Considering measurable data like user numbers, size of accounts, and revenue.</li>
<li>The fact that some user groups are more valuable to an organization than others, hence should be ranked higher in a prioritization effort.</li>
</ul>

<p>How to define user segments, with different levels of relevance to the organization and its future strategy, <a href="https://www.smashingmagazine.com/2024/05/building-user-segmentation-matrix-foster-cross-org-alignment/">is described in more detail here</a>. It was the initial mental model shared across teams prior to starting this portfolio simplification effort.</p>

<p>Next up: Understanding the current status quo and building a “source of truth” of everything considered under the remit of the product organization. Because you need a clear reference point to get started.</p>

<h3 id="2-status-quo-auditing-and-defining-what-to-measure">2. Status Quo: Auditing And Defining What To Measure</h3>

<p>To determine the best approach and size the task ahead, understanding what had been done before was crucial, so as not to reinvent the wheel. It was clear that the organization had a sprawling product catalogue that contained a varied mix of different items, lacking clear definitions and categorization.</p>

<p>The initial audit was about updating the product catalog that had been assembled three years earlier and adding information that would be relevant for assessing relative value. As revenue, user numbers, or development effort had never been tracked, this is where we gathered additional insights on each item from the product owners (POs) responsible.</p>

<p>The assessment criteria were partly taken from the previous effort (criteria 1-9), and further criteria were added to obtain a more holistic picture (criteria 10-15). See the table below.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/1-portfolio-evaluation-criteria.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="468"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/1-portfolio-evaluation-criteria.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/1-portfolio-evaluation-criteria.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/1-portfolio-evaluation-criteria.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/1-portfolio-evaluation-criteria.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/1-portfolio-evaluation-criteria.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/1-portfolio-evaluation-criteria.png"
			
			sizes="100vw"
			alt="Evaluation criteria and agreed relevance"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Evaluation criteria and agreed relevance. (<a href='https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/1-portfolio-evaluation-criteria.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="3-how-doing-the-audit">3. How? Doing The Audit</h3>

<p>In order to be transparent about decision-making, it was important to agree on the <strong>evaluation criteria and scoring</strong> with key stakeholders upfront and ensure every contributor understood that a lack of data would lead to low scores. To that end, we asked all 36 product owners (POs) to submit data for each product under their remit. As the organization had not previously tracked this information, the initial responses were often quite vague, and many cells were left blank.</p>

<p>To increase data quality and make data-based decisions, 1:1 interviews with POs allowed us to answer questions and build out “best guess” assumptions together in cases of missing data.</p>

<p><strong>Note</strong>: <em>While not technically perfect, we decided that moving forward with assumptions grounded in subject matter expertise, rather than completely missing data, would be preferable.</em></p>

<p class="c-pre-sidenote--left">Lastly, some inputs like “automation potential” were hard to assess for less technical POs. Our approach here followed the product mindset that while it is important to make data-informed decisions, “done is better than perfect.” So once we had enough confidence in the picture that emerged, we proceeded with scoring in the interest of time.</p>
<p class="c-sidenote c-sidenote--right">As a side note regarding data quality: 1. Manually cleaning inputs throughout (e.g., removing duplicates) and 2. following up until clear inputs were provided, helped increase input quality. In addition, predefined ranges led to higher data quality than inputs requiring hard-to-quantify data, like, e.g., expected impact.</p>

<h4 id="3-1-scoring">3.1. Scoring</h4>

<p>Defining the scoring methodology upfront and getting stakeholders to align on the relevance of different criteria transparently was crucial for this work. Particularly keeping in mind that simplifying (in other words, reducing) the portfolio has an immediate impact on various teams, communicating openly about what is being done, how, and why is important, so everyone understands the longer-term goal: <strong>to reduce cost, maintenance, and prepare for future growth</strong>.</p>

<p>The image below illustrates the three stages that led to the prioritized list and score for each item.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/2-overview-scoring-methodology.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/2-overview-scoring-methodology.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/2-overview-scoring-methodology.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/2-overview-scoring-methodology.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/2-overview-scoring-methodology.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/2-overview-scoring-methodology.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/2-overview-scoring-methodology.png"
			
			sizes="100vw"
			alt="Overview of the Scoring methodology"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Image 2: Overview of the Scoring methodology. (<a href='https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/2-overview-scoring-methodology.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>The outcome of this stage now ranked the business and user value for each data product, and the initial expectation was that this was the end of the portfolio cleanup. A list of all items ranked by their value to the business, so that, e.g., the bottom half could be cut and the rest migrated to the new technical platform in order of priority.</p>

<p>At least that was the theory, and this is where it met reality.</p>

<h4 id="dealing-with-change-reality">Dealing With <del>Change</del> Reality</h4>

<p>Once the weighted list was ready and the whole portfolio was ranked, it became clear that what was considered the “Product portfolio” in fact consisted of 12 different types of items, and roughly 70% of them could not be considered actual products.</p>

<p>While inside the organization, everything was called a PRODUCT, it became clear that the types of items referred to as “products” were in fact a mixed bag of trackers, tables, graphs, extracts, data sets, dashboards, reports, tools, scoring, and so on. And many low-ranking internal-facing tools enabled highly relevant customer-facing products.</p>

<p>The list was essentially comparing “apples to oranges,” and that meant that simply cutting the bottom half of lower-scoring items would lead to the whole “house of cards” tumbling down, especially as a lot of items had dependencies on each other.</p>

<h4 id="what-to-do">What To Do?</h4>

<p>First and foremost, we worked with leadership to explain the issue of missing categorization in the portfolio and the risks that cutting the lower-scoring half of the list would entail, especially due to the time pressures of the wider ongoing transformation effort.</p>

<p>Next, we proposed to work with key product owners and leaders to help <strong>categorize the portfolio correctly</strong>, in order to determine how best to handle each item going forward.</p>

<p>We used the following five buckets to enable sorting, with the intention of keeping the “other” category as small as possible.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/3-categorization-data-products.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="456"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/3-categorization-data-products.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/3-categorization-data-products.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/3-categorization-data-products.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/3-categorization-data-products.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/3-categorization-data-products.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/3-categorization-data-products.png"
			
			sizes="100vw"
			alt="“Buckets” used for categorization"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      “Buckets” used for categorization. (<a href='https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/3-categorization-data-products.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Aside from simplifying the terminology used, this categorization meant that each category could be handled differently in terms of future work.</p>

<p>For example, all raw data items would be automated, while the process around “low effort” data items didn’t have to be changed going forward, once it was clear how low the manual effort actually was. Notably, the categorization included a “Sunset/Stop” category to allow stakeholders to already move items there during the deep dives of their own volition, rather than through top-down decision making.</p>

<h3 id="4-getting-buy-in-building-product-trees">4. Getting Buy-in: Building Product Trees</h3>

<p>To get buy-in and allow for active contributions from subject matter experts, we planned <strong>workshops per customer segment</strong> (as defined by the user segmentation matrix &mdash; the initial starting point). Aside from organizing the portfolio items, these workshops allowed key people to be actively involved and thereby act as advocates for the future success of this work.</p>

<p>Using Miro boards to share all audit findings, goals, and the purpose of the clean-up, we conducted seven workshops overall. With 4&ndash;6 participants, we spent 3 hours categorizing all items per customer segment. In order to avoid groupthink, all participants were asked to cluster their part of the portfolio as part of the preparation.</p>

<p><strong>The “product tree” concept</strong>, developed as an innovation game called “prune the product tree” by <a href="https://www.lukehohmann.com/innovation-games/prune-the-product-tree">Luke Hohmann</a> to organize features around customer needs, helped create a shared mental model among participants. In contrast to Hohmann, we applied the product tree concept here to organize the current portfolio logically and actively reduce it, rather than imagine new products.</p>

<p>In this context, the roots of the tree signified raw data, the tree trunk equated to modeled or derived data, with the crown of the tree signifying data products, and the outer branches were left for “other” items &mdash; to capture what could not be easily grouped but had to be included.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/4-product-tree-metaphor.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="455"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/4-product-tree-metaphor.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/4-product-tree-metaphor.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/4-product-tree-metaphor.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/4-product-tree-metaphor.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/4-product-tree-metaphor.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/4-product-tree-metaphor.png"
			
			sizes="100vw"
			alt="Product tree metaphor for categorization"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Product tree metaphor for categorization. (<a href='https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/4-product-tree-metaphor.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Grouping items in this way served a second purpose: to guide how to handle them in the future transformation effort. The plan was to automate raw data first, based on priority. While modeled or derived data would have to be checked for complexity to determine future handling. The actual data products identified would be crucial for the company’s future strategy and were to be reimagined with a product mindset going forward.</p>

<p>The tree metaphor worked well here, despite being used in a different way from its original context, as it provided <strong>a mental model for categorization</strong>. By clustering items, it was possible to better determine their value for each customer segment in the portfolio. According to the feedback gathered after each workshop, the joint mapping and visualization helped teams trust the process and feel actively involved.</p>

<h2 id="findings">Findings</h2>

<p>Analyzing the findings from the workshops revealed the complexity of this effort, with many different factors playing into the prioritization. To visualize this complexity, we used the following approach:</p>

<ul>
<li>Mapping out the product tree by swimlanes (as introduced in the workshops).</li>
<li>Layering in usage across multiple segments (through color-coding).</li>
<li>Adding the level of dependencies (through the type of frame around each item).</li>
<li>Then, add the quantitative assessment and ranking through numbering and color-coding.</li>
</ul>

<p>For each workshop, we cleaned up the boards, making sure to include crucial comments, especially those about future treatment, such as when a legal obligation to deliver would end.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/5-product-tree-example.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/5-product-tree-example.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/5-product-tree-example.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/5-product-tree-example.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/5-product-tree-example.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/5-product-tree-example.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/5-product-tree-example.png"
			
			sizes="100vw"
			alt="Product tree example"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Organizing data items into swimlanes, following the product tree metaphor. (<a href='https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/5-product-tree-example.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Using swimlanes helped participants organize data items, while the tree metaphor clarified the interconnectedness and dependencies between items. Especially in the context of data products, this makes a lot of sense, e.g., with raw data being at the root of all other possible versions of “products” derived from them, whether these might be scores, modelled data, automated reports, or more advanced products.</p>

<blockquote>Doing this Product Kondo exercise also helped the teams and all stakeholders gain a shared understanding of how the portfolio was structured for each customer segment. The visualization in swimlanes and with colour-coding and various different frames provided a way to illustrate the complex reality that the initial ranked list format wasn’t able to clarify.</blockquote>

<p>Only once this portfolio mapping was in place, and once quantitative as well as qualitative insights were combined, was it possible to make good decisions about how to handle each item going forward.</p>

<p>For example, all items in the “raw data” category would be automated as part of the wider transformation effort, while all items in the “sunset” category would definitely not be considered for migrating over to the new tech platform. Moreover, the items grouped under “low effort” would continue to be handled manually, while all items grouped under “derived &amp; modelled” would have to be assessed further by a team of tech leads to determine whether or not they might be automated in the future. The items most relevant for the future business strategy of this organization were those grouped under “data products”, i.e., those products that would have to be re-imagined with clear customer needs in mind, based on the user segmentation matrix.</p>

<div class="partners__lead-place"></div>

<h2 id="learnings">Learnings</h2>

<p>In total, we achieved a portfolio reduction of 67.8% from 198 items initially to 118 post clean-up. However, what matters here is not simply the reduction but the <strong>categorization</strong>, i.e., separating and organizing the portfolio into different swimlanes and introducing the product tree metaphor. <strong>The product tree visualisation</strong> helped all stakeholders understand the interconnectedness of the portfolio, where the roots signify the core product and the branches different, more advanced products or features built on top of that core.</p>

<p>Similarly, <strong>the categorization into swimlanes</strong> helped to organize and cluster similar items, getting away from comparing apples and oranges in the initial big portfolio audit table. It illustrated very clearly that not all items are alike and can’t be judged and rated in the same way.</p>

<p>It is worth mentioning that there is no one best way to label your swimlanes, but a good starting point is to think of naming different clusters, e.g., from basic to most complex, and to always include a “sunset/stop” cluster and potentially one that covers “redesign/tech upgrade” items. Having these two buckets allows contributors to actively shape the decision-making around the quick-win items, usually the most obviously outdated or clunky parts of the portfolio.</p>

<p>Whether or not you categorize your products in order to determine how to handle them in an organizational transformation, e.g., to assess automation potential, will largely depend on <em>why</em> and <em>when</em> you’re cleaning up your product portfolio. Even outside of a transformation effort, clustering your portfolio into different categories, understanding interconnectedness, and whether or not each customer segment has a well-rounded product tree, with solid roots and future-looking branches, is a useful exercise in sense-making and keeping your organization lean.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/6-product-kondo-categorisation.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/6-product-kondo-categorisation.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/6-product-kondo-categorisation.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/6-product-kondo-categorisation.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/6-product-kondo-categorisation.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/6-product-kondo-categorisation.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/6-product-kondo-categorisation.png"
			
			sizes="100vw"
			alt="Product Kondo outcomes"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Product Kondo outcomes. (<a href='https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/6-product-kondo-categorisation.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="shared-terminology-matters">Shared Terminology Matters</h3>

<p>In all this, our biggest learning was that</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aTerminology%20matters%20because%20simply%20referring%20to%20things%20as%20%e2%80%9cproducts%e2%80%9d%20doesn%e2%80%99t%20make%20them%20so.%20Comparing%20like%20for%20like%20is%20a%20key%20factor%20when%20assessing%20a%20product%20portfolio.%0a&url=https://smashingmagazine.com%2f2025%2f04%2fproduct-kondo-guide-evaluating-organizational-product-portfolio%2f">
      
Terminology matters because simply referring to things as “products” doesn’t make them so. Comparing like for like is a key factor when assessing a product portfolio.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>Correct categorization was the biggest challenge that had to be dealt with first, to enable the organization to iterate and focus on where to play and re-imagine products to match the future business strategy.</p>

<h3 id="when-theory-meets-reality">When Theory Meets Reality</h3>

<p>This portfolio clean-up had to pivot and expand to include a mapping exercise because we hadn’t factored in the unclear terminology used across the organization, and that, instead of simply gathering and ranking, the biggest task was to correctly categorize and structure. And this is likely to be different from organization to organization. So I would always recommend checking which categories of items you’re comparing in your portfolio. If you’re not entirely sure, you should always include <strong>a clustering or mapping exercise</strong> right from the start.</p>

<h2 id="product-kondo-the-groundwork-for-transformation">Product Kondo: The Groundwork For Transformation</h2>

<p>If you’re struggling with a large legacy portfolio and no longer confident that everything in it serves a purpose and brings joy to users and the business, it’s time to clean up.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aIt%e2%80%99s%20often%20necessary%20and%20needed%20to%20focus%20on%20the%20next%20shiny%20thing,%20but%20if%20you%20don%e2%80%99t%20balance%20that%20with%20cleaning%20up%20your%20existing%20portfolio,%20your%20organization%20will%20eventually%20become%20slow.%20Overgrown%20product%20portfolios%20can%e2%80%99t%20be%20sustained%20forever.%0a&url=https://smashingmagazine.com%2f2025%2f04%2fproduct-kondo-guide-evaluating-organizational-product-portfolio%2f">
      
It’s often necessary and needed to focus on the next shiny thing, but if you don’t balance that with cleaning up your existing portfolio, your organization will eventually become slow. Overgrown product portfolios can’t be sustained forever.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>Particularly in organizations bound by various contractual obligations, this is the groundwork that enables product teams to iterate.</p>

<p>Moreover, doing this clean-up and clearing out effort across teams is a highly transparent way to include teams in change. And it is a useful way for getting teams to contribute and actively shape a transformation effort. Business decisions have to be taken, but taking them with <strong>transparency</strong> and in <strong>an evidence-guided way</strong> ensures that you are bringing people along.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/7-product-kondo-benefits.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/7-product-kondo-benefits.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/7-product-kondo-benefits.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/7-product-kondo-benefits.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/7-product-kondo-benefits.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/7-product-kondo-benefits.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/7-product-kondo-benefits.png"
			
			sizes="100vw"
			alt="Product Kondo benefits include the following: Focus, Impact, Decision making, Clean slate, Consistency, End-to-end"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Benefits of cleaning up your portfolio. (<a href='https://files.smashing.media/articles/product-kondo-guide-evaluating-organizational-product-portfolio/7-product-kondo-benefits.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Last but not least &mdash; if you don’t have the capacity to do the full portfolio clean-up (which took us about 4 months, with a core team of roughly 4 people) &mdash; start smaller. And start with including these considerations in your day-to-day, for example, by always checking if products or features should be stopped or sunset every time you’re launching new products. Or start by mapping out the different categories of items in your portfolio &mdash; with swimlanes and the product tree metaphor in mind. What is core, and what is the future state of play?</p>

<p><strong>Upside</strong>: Once you’ve got that big picture overview and worked out what to sunset or where to slim down, you have more capacity to focus on current and future priorities strategically.</p>

<p><strong>Reality check</strong>: Of course, the work doesn’t stop there. The next step is to align it all back to your user segments and check how your portfolio serves each of these, particularly the primary segments.</p>

<h3 id="further-reading">Further Reading</h3>

<ul>
<li>“<a href="https://medium.com/@userpilot/product-led-growth-the-ultimate-guide-for-software-companies-b9fa0779ef8f">Product-Led Growth: The Ultimate Guide for Software Companies</a>,” Userpilot</li>
<li>“<a href="https://itamargilad.com/book-evidence-guided/">Evidence-Guided: Creating High-Impact Products in the Face of Uncertainty</a>,” Itamar Gilad</li>
<li>“<a href="https://beyondthebacklog.com/2025/01/07/innovation-games/">Innovation Games: Exploring Luke Hohmann’s Game-Changing Approach</a>,” Matt Hicks</li>
<li>“<a href="https://www.smashingmagazine.com/2024/05/building-user-segmentation-matrix-foster-cross-org-alignment/">Building A User Segmentation Matrix To Foster Cross-Org Alignment</a>,” Talke Hoppmann-Walton</li>
<li>“<a href="https://www.savio.io/blog/how-to-create-a-product-portfolio-roadmap/">What Is A Product Portfolio Roadmap?</a>,” Kareem Mayan</li>
</ul>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Gloria Diaz Alonso</author><title>How To Build A Business Case To Promote Accessibility In Your B2B Products</title><link>https://www.smashingmagazine.com/2025/04/how-build-business-case-promote-accessibility-b2b-products/</link><pubDate>Fri, 04 Apr 2025 12:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/04/how-build-business-case-promote-accessibility-b2b-products/</guid><description>When passion for accessibility meets business indifference, what bridges the gap? Gloria Diaz Alonso shares how she turned frustration into strategy — by learning to speak the language of business.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/04/how-build-business-case-promote-accessibility-b2b-products/" />
              <title>How To Build A Business Case To Promote Accessibility In Your B2B Products</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>How To Build A Business Case To Promote Accessibility In Your B2B Products</h1>
                  
                    
                    <address>Gloria Diaz Alonso</address>
                  
                  <time datetime="2025-04-04T12:00:00&#43;00:00" class="op-published">2025-04-04T12:00:00+00:00</time>
                  <time datetime="2025-04-04T12:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>When I started working on promoting accessibility, I was fully convinced of its value and was determined to bring it to the business stakeholders. I thought that the moment I started pushing for it inside the company, my key stakeholders would be convinced, committed, and enlightened, and everyone would start working to make it possible.</p>

<p>I prepared a lovely presentation about the benefits of accessibility. I made sure my presentation reflected that accessibility is the right thing to do: it is good for everyone, including those who don’t have a disability; it <strong>improves usability</strong>, makes the code more robust, and, of course, <strong>promotes inclusivity</strong>. I confidently shared it with my stakeholders. I was so excited. Aaaaaand BOOM… I hit a wall. They didn’t show much interest. I repetitively got comments, such as:</p>

<ul>
<li>It doesn’t bring much value to us.</li>
<li>It doesn’t impact the revenue.</li>
<li>The regulation doesn’t apply to us, so there is no reason.</li>
<li>Accessibility is just for a few people with disabilities.</li>
<li>It would cost too much.</li>
</ul>

<p><em>“People don’t manage to understand the real value. How can they say it has no impact?”</em> I thought. After some time of processing my frustration and thinking about it, I realized that maybe <strong>I was not communicating the value correctly</strong>. I was not speaking the same language, and I was just approaching it from my perspective. It was just a presentation, not a business case.</p>

<p>If there is something I had to learn when working that I didn’t in university, it is that if you want to move things forward in a company, you have to have <strong>a business case</strong>. I never thought that being a UX Designer would imply building so many of them. The thing with business cases, and that I neglected on my first attempts, is that they put the focus on, well, “the business”.</p>

<blockquote>The ultimate goal is to build a powerful response to the question “Why should WE spend money and resources on this and not on something else?” not “Why is it good?” in general.</blockquote>

<p>After some trial and error, I understood a bit better how to tackle the main comments and answer this question to move the conversation forward. Of course, the business case and strategy you build will depend a lot on the specific situation of your company and your product, but here is my contribution, hoping it can help.</p>

<p>In this article, I will focus on two of the most common situations: pushing for accessibility in a new product or feature and starting to bring accessibility to existing products that didn’t consider it before.</p>

<p>Implementing accessibility has a cost. Everything in a project has a cost. If developers are solving accessibility issues, they are not working on new features, so at the very least, you have to consider the opportunity cost. You have to make sure that you <strong>transform that cost into an investment</strong> and that that investment provides good results. You need to provide some more details on <em>how</em> you do it, so here are the key questions that help me to build my case:</p>

<ul>
<li>Why should we spend money and resources on this and not on something else?</li>
<li>What exactly do we want to do?</li>
<li>What are the expected results?</li>
<li>How much would it cost?</li>
<li>How can I make a decision?

<br /></li>
</ul>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p><strong>Web forms</strong> are at the center of every meaningful interaction. Meet Adam Silver&rsquo;s <strong><a href="https://www.smashingmagazine.com/printed-books/form-design-patterns/">Form Design Patterns</a></strong>, a practical guide to <strong>designing and building forms</strong> for the web.</p>
<a data-instant href="https://www.smashingmagazine.com/printed-books/form-design-patterns/" class="btn btn--green btn--large" style="">Jump to table of contents&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="https://www.smashingmagazine.com/printed-books/form-design-patterns/" class="feature-panel-image-link">
<div class="feature-panel-image"><picture><source type="image/avif" srcSet="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e57b41-b7f1-4ae3-886a-806cce580ef9/form-design-patterns-shop-image-1-1.avif" />
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51e0f837-d85d-4b28-bfab-1c9a47f0ce33/form-design-patterns-shop-image.png"
    alt="Feature Panel"
    width="481"
    height="698"
/>
</picture>
</div>
</a>
</div>
</aside>
</div>

<h2 id="why-should-we-spend-money-and-resources-on-this-and-not-on-something-else">Why Should We Spend Money And Resources On This And Not On Something Else?</h2>

<h3 id="risk-prevention">Risk Prevention</h3>

<p>There is a good chance that your stakeholders have heard about accessibility due to the regulations. In the past years, accessibility has become a hot topic, mainly motivated by the European Accessibility Act (EAA), the Web Accessibility Directive (WAD) in Europe or the Americans with Disabilities Act (ADA), and the Section 508 of the Rehabilitation Act in the US and equivalent regulations on other countries. They should definitely be aware of them. However, unless they are from the legal department, they may not need to know every detail; just having an overview should be enough to understand the landscape. You can simplify it a bit, so no one panics.</p>

<p>One of the most useful slides I use is a summary table of the regulations with some key information:</p>

<ul>
<li>What is the goal of the regulation?</li>
<li>Who is it targeting?</li>
<li>Relevant deadlines.</li>
<li>How does it affect us?<br />
This is essential information that you have to adapt to your business context. If you have some B2C or supply to the government, you may be affected. Even if you are pure private B2B, you will be partly affected, as more and more clients may include accessibility as a requirement for all the software they purchase.</li>
<li>If your company operates only in one country, it would be a good idea to include a summary of your country-specific regulations.</li>
</ul>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/1-accessibiloty-regulations.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="664"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/1-accessibiloty-regulations.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/1-accessibiloty-regulations.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/1-accessibiloty-regulations.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/1-accessibiloty-regulations.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/1-accessibiloty-regulations.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/1-accessibiloty-regulations.png"
			
			sizes="100vw"
			alt="Two summary tables with the European and American regulations. For each regulation, it is included the goal, the target, the deadlines, and how it affects the company."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      A simplified version of the regulation helps stakeholders to feel more comfortable and understand better how they are impacted by it. (<a href='https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/1-accessibiloty-regulations.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>In addition, explain how the WCAG relates to the regulation. In the end, it is a third-party international standard used as the baseline for most official laws and directives and comes up in conversations quite often.</p>

<p>Keep in mind that using the regulation to motivate your case can work, but only to some point. We are aware that the regulation about accessibility is getting stronger and the requirements are affecting a good number of companies, especially big companies, but still not everyone. If you only base your case on it, the easy answer is, <em>“Yeah, well, but we are not required to do it”.</em></p>

<p>If we start working now we will have time to prepare. If we consider accessibility for all the new features and projects, the cost won’t be affected much, and we will be prepared for the future.</p>

<p>However, many companies still don’t see the urgency of working on it if they are not directly required to do so by the regulation yet, and it is not certain that they will need to do it in the future. They prefer not to focus on it until that moment arrives. It is not necessarily a problem to be prioritized now, and there may be more urgent matters.</p>

<p>They should be aware of the regulations and the situation. We should show them how they could be affected, but if we don’t show <strong>the real value</strong> that accessibility brings to the products and the company, the conversation may end there.</p>

<h3 id="explore-if-it-can-be-a-competitive-advantage">Explore If It Can Be A Competitive Advantage</h3>

<p>Big companies are starting to consider accessibility as part of their procurement process, which means that it is a hard requirement to become a provider, a checkbox in the selection process. You can try reaching out to your sales department to see if any clients are asking about your plans regarding accessibility compliance. If so, make sure you document them in the business case. Include some rough background research about those clients:</p>

<ul>
<li>Are they strategic clients?</li>
<li>Are they clients who already have one of our products and want to expand?</li>
<li>How much revenue can they potentially bring?</li>
<li>Are they important companies in the industry that others may use as a reference?</li>
<li>Was it a one-time question?</li>
<li>Did they try to push for it?</li>
</ul>

<p>The potential revenue and interest from important clients can be a good motivation.</p>

<p>In addition, try to find out if your competitors care about accessibility or are compliant. You can go to their website and see if they have an accessibility statement, if they have any certification by external parties (normally on the footer), if they include their accessibility level on their sales materials, or just try basic keyboard navigation and run an automatic checker to see what their situation is. If none of them are compliant or their accessibility level is really low, becoming compliant or implementing accessibility may be <strong>a competitive advantage</strong> for you, a differentiator. On the other hand, if they are compliant and you are not, you may lose some deals because of it.</p>

<p>To sum up, check clients’ interest in the topic, compare the situation of different competitors, and see if accessibility could be <strong>a potential revenue generator</strong>.</p>

<h3 id="showcase-the-value-it-brings-to-your-users">Showcase The Value It Brings To Your Users</h3>

<p>Depending on the industries your product focuses on, the assumption may be that you don’t have a big user base of people with disabilities, and therefore, your users won’t benefit much from accessibility.</p>

<p>Accessibility helps everyone, and if you are reading this article, it is probably because you agree with it. But that statement sounds too generic and a bit theoretical, so it is important to provide <strong>specific and accurate examples</strong> around your users, in particular, that help people visualize it.</p>

<p>Think of your user base. What characteristics do they have? In which situations do they use your software? Maybe most of your users don’t have a disability, or you don’t even have the data about it, but they are office workers who use your software a lot, and having good keyboard navigation would help them to be more efficient. Maybe most of them are over fifty years old and can benefit from adapting the font size. They might have to use the software in the open air and are affected by sun glare, so they need high contrast between elements, or they have to wear gloves and prefer larger target sizes.</p>

<p>And I would say you always have to <strong>account for neurodiversity</strong>. The idea is to identify in which everyday situations your users face they can benefit from accessibility, even if they don’t have a disability.</p>

<p>Another key thing is to look for <strong>specific feedback from your users and customers</strong> on accessibility. If you are lucky enough to have an insight repository, look for anything related. Keep in mind that people can be asking about accessibility without knowing that they are asking for accessibility, so don’t expect to find all the insights directly with an “accessibility” tag, but rather search for related keywords in the “user’s vocabulary” (colors, hard to click, mobile devices, zoom, keyboard, error, and so on).</p>

<p>If you don’t have access to a repository, you can contact customer service and try to find out help requests or feedback about it with them. Anything you find is evidence that your users, your specific users, benefit from accessibility.</p>

<h3 id="highlight-the-overlap-with-good-practices">Highlight The Overlap With Good Practices</h3>

<p>Accessibility overlaps heavily with best practices for usability, design, and development. Working on it helps us improve the overall product quality without, in some cases, adding extra effort.</p>

<p>In terms of design, the overlap between accessibility improvements and usability improvements is really huge. Things like writing precise error messages, having a clear page structure, relying on consistency, including clear labels and instructions, or keeping the user in control are some examples of the intersection. To visualize it, I like taking the <a href="https://www.nngroup.com/articles/ten-usability-heuristics/">10 usability heuristics of Nielsen Norman</a> and relating them to <strong>design-related success criteria from the WCAG</strong>.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/2-usability-heuristics-accessibility-success-criteria.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="606"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/2-usability-heuristics-accessibility-success-criteria.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/2-usability-heuristics-accessibility-success-criteria.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/2-usability-heuristics-accessibility-success-criteria.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/2-usability-heuristics-accessibility-success-criteria.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/2-usability-heuristics-accessibility-success-criteria.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/2-usability-heuristics-accessibility-success-criteria.jpg"
			
			sizes="100vw"
			alt="Table that relates the usability heuristics by Nielsen Norman and WCAG 2.2 Success criteria. Each heuristic has at least two success criteria related."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      There is a big overlap between the usability heuristics and the accessibility success criteria that highlights the positive impact of accessibility on general usability. (<a href='https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/2-usability-heuristics-accessibility-success-criteria.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>For the developers, the work on accessibility creates <strong>a more structured code</strong> that is easier to understand. Some of the key aspects are the use of markup and the proper order of the code. In addition, the use of landmarks is key for managing responsive interfaces and, of course, choosing the most adequate component for the specific functionality needed and identifying it correctly with unique labels prevents the product from having unexpected behaviors.</p>

<p>As for the QA team, the test that they perform can vary a lot based on the product, but testing the responsiveness is normally a must, as well as keyboard navigation since it increases the efficiency of repetitive tasks.</p>

<p>Considering accessibility implies having clear guidelines that help you to work in the correct direction and overlap with things that we should already be doing.</p>

<div class="partners__lead-place"></div>

<h2 id="what-exactly-do-we-want-to-do">What Exactly Do We Want To Do?</h2>

<p>As we said, we are going to focus on two of the most common situations: pushing for accessibility in a new product or feature and starting to incorporate accessibility into existing products that didn’t consider it before.</p>

<h3 id="new-products-or-features">New Products Or Features</h3>

<p>If you are about to build a product from scratch, you have a wonderful opportunity to apply <strong>an accessibility-first approach</strong> and consider accessibility by default from the very beginning. This approach allows you to minimize the number of accessibility issues that end up reaching the user and reduces the cost of rework when trying to fix them or when looking for compliance.</p>

<p>One of the key things you need to successfully apply this approach is considering accessibility as <strong>a shared responsibility</strong>. The opposite of an accessibility-first approach is the retroactive consideration of accessibility. When you only care for accessibility after the implementation and run an audit on the released product, you will find all the issues that accumulated. Plenty of them could have been easily solvable if you knew them when you were designing or coding, but solving them afterward becomes complicated.</p>

<p>For example, if you only considered drag and drop for rearranging a list of items, now you have to rethink the interaction process and make sure it works in all the cases, devices, and so on. If single-point interactions were a requirement from the beginning, you would just implement them naturally and save time.</p>

<p>Applying an accessibility-first approach means that everyone has to contribute.</p>

<ul>
<li>The POs have to make sure that <strong>accessibility is included as a requirement</strong> and that people have the time and resources to cover it.</li>
<li>Designers have to follow <strong>best practices and guidelines</strong> to make sure the design itself is accessible.</li>
<li>The devs should do the same, <strong>include markup and proper semantics</strong>, and follow the guidelines for accessible code.</li>
<li>QAs are the final filter before the product reaches the user. They should try to pick as much as possible so it can get fixed.</li>
</ul>

<p>If everyone shares the ownership and spends a bit more time on including accessibility in their task, the overall result will have a good base. Of course, you may still need to tackle some specific issues with an expert, and when auditing the final product, you will probably still find some issues that escaped the process, but the number will be drastically lower.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/3-accessibility-first-approach.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="401"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/3-accessibility-first-approach.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/3-accessibility-first-approach.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/3-accessibility-first-approach.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/3-accessibility-first-approach.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/3-accessibility-first-approach.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/3-accessibility-first-approach.jpg"
			
			sizes="100vw"
			alt="Product cycle with accessibility-first approach in which accessibility is included in all the steps, leading to a reduced number of issues in the final accessibility audit."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Sharing the ownership of accessibility helps to make the topic more approachable. (<a href='https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/3-accessibility-first-approach.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>In addition, the process of auditing your product can get much lighter. Running an accessibility audit means first defining who will do it: is it internal or external? If it is external, which providers? How long would it take to negotiate the contract?</p>

<p>Afterward, you have to set the scope of the audit. It is impossible to check the full product, so you start by checking the most important workflows and key pages. Then, you will do the analysis. The result is normally a list of issues prioritized based on the user impact and some recommendations for remediating it.</p>

<p>Once you have the issues, you have to <strong>plan the remediation</strong> and figure out how much <strong>capacity</strong> from the teams we have to allocate to it based on when we want to have the fixes ready. You also have to <strong>group similar issues together</strong> to prevent the change of context during remediation, increase efficiency, and eliminate all duplicated issues (the auditors may not know the architecture of the product, so you may find several issues documented that, in reality, are just one because you are using the same component).</p>

<p>Considering this full process, for a large product, you can easily spend three months just before you start the actual remediation of the issues. Applying an accessibility-first approach means that the number of issues that reach the audit of the released product is much lower, so the process of auditing and fixing goes much faster.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/4-retrofitting-accessibility.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="366"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/4-retrofitting-accessibility.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/4-retrofitting-accessibility.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/4-retrofitting-accessibility.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/4-retrofitting-accessibility.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/4-retrofitting-accessibility.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/4-retrofitting-accessibility.jpg"
			
			sizes="100vw"
			alt="Comparison of the product cycle with retrofitting accessibility approach in which the attention to accessibility happens after releasing and accessibility first approach, in which the attention is implemented in every step."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Identifying and solving possible issues along the product cycle prevents them from accumulating and minimizes the rework. (<a href='https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/4-retrofitting-accessibility.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>If you can apply this approach, you should definitely consider the need for <strong>educational resources</strong> and their impact. You don’t want people just to work on accessibility but to <strong>understand the value</strong> they are creating when doing it (I am preparing another article that focuses on this). You want them to feel comfortable with the topic and understand what their responsibilities are and which things they have to pay attention to. Check if you already have accessibility resources inside the company that you can use. The important thing for the business is that those resources are going to contribute to reducing the effort.</p>

<p>The implementation of an accessibility-first approach has a very clear learning curve. In the beginning, people will take a bit of extra time to consider accessibility as part of their task, but after they have done it for several tasks, it comes naturally, and the effort needed to implement it really drops.</p>

<p>Think of <em>“not relying on color only for conveying information”,</em> as a designer, the first two times you have to figure something out instead of just changing the color of a text or icon to convey a status, you spend some time looking for solutions, afterward, you already have in mind a bunch of strategies that allow you to directly chose a valid option almost automatically.</p>

<p>Using an accessibility-first approach for new products is a clear strategy, but it is also valid for new features in an existing product. If you include it by default in anything new you create, you are preventing new issues from accumulating.</p>

<p>To sum up, applying an accessibility-first approach is really beneficial.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aConsidering%20accessibility%20from%20the%20beginning%20can%20help%20you%20to%20largely%20reduce%20the%20number%20of%20issues%20that%20may%20appear%20in%20audits%20after%20the%20release%20since%20it%20prevents%20the%20issues%20from%20accumulating,%20distributes%20the%20effort%20across%20the%20full%20product%20team,%20and%20substantially%20reduces%20the%20cost,%20as%20there%20will%20be%20less%20need%20for%20retroactive%20remediation%20of%20the%20issues%20that%20appear.%0a&url=https://smashingmagazine.com%2f2025%2f04%2fhow-build-business-case-promote-accessibility-b2b-products%2f">
      
Considering accessibility from the beginning can help you to largely reduce the number of issues that may appear in audits after the release since it prevents the issues from accumulating, distributes the effort across the full product team, and substantially reduces the cost, as there will be less need for retroactive remediation of the issues that appear.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>If you can implement an accessibility-first approach, do it.</p>

<h3 id="existing-products-or-features">Existing Products Or Features</h3>

<p>If you try to bring accessibility to legacy products that have been running for many years, an accessibility-first approach may not be enough. In these cases, there are a million topics competing for priority and resources. Accessibility may be perceived as <strong>a massive effort that brings reduced value</strong>.</p>

<p>You may face a product that can have a big technical debt, that may not have a big user base of people with disabilities, or in which the number of existing accessibility issues is so overwhelming that you would need five years to solve them. You won´t be able to move forward if you try to solve all the problems at once. Here are some of the strategies that have worked for me to kick off the work on accessibility.</p>

<p>Start by checking the <strong>Design System</strong>. If the Design System has accessibility issues, they are going to be inherited by all the products that use them, so it is better to solve them at a higher level than to have each product team solving the exact same issue in all their products. You can begin by taking a quick look at it:</p>

<ul>
<li>Does it consider color contrast?</li>
<li>And target size?</li>
<li>Does the documentation include any accessibility considerations or guidelines?</li>
<li>Are there color-dependent components?</li>
</ul>

<p>If you have a dedicated team for the Design System, you can also reach out to them. You can find out what is their level of awareness on the topic. If they don’t have much knowledge, you can give them an introduction or help them identify and fix the knowledge gaps they have.</p>

<p>If you notice some issues, you can organize a proper <strong>audit of the design system from the design and development perspective</strong> and pair up with them to fix as much as you can. It is a good way of getting some extra hands to help you while tackling strategic issues.</p>

<p>When working on the Design System, you can also spot which components or areas are more complex and create guidelines and documentation together with them to help the teams reuse those components and patterns, leveraging accessibility.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/5-guideline-error-messages.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="362"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/5-guideline-error-messages.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/5-guideline-error-messages.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/5-guideline-error-messages.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/5-guideline-error-messages.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/5-guideline-error-messages.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/5-guideline-error-messages.jpg"
			
			sizes="100vw"
			alt="Guideline to write error messages that describe the error accurately and suggest how to fix it. It includes recommendations around copywriting, a realistic example of a bad and improved error message, and an explanation of the issue and the remmediation."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Error messages are a typical example in which you can prevent accessibility issues from appearing with a simple guideline while promoting consistency and usability across the products. (<a href='https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/5-guideline-error-messages.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>If the Design System is in good shape, you don’t have one, or you prefer to focus only on the product, you need to start by analyzing and fixing the most relevant part. You have to set <strong>a manageable scope</strong>. I recommend taking the most relevant workflows and the ones the users use the most. Two or three of them could be a good start. Inside the workflows, try picking the pages that have different structures so you can have <strong>a representative sample</strong>, for instance, one with a form, a table, plain text, lots of images, and so on. In many cases, the pages that share the same structure share the same problems, so having more variety in the sample helps you to pick more critical issues.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/6-different-page-structures.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="173"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/6-different-page-structures.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/6-different-page-structures.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/6-different-page-structures.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/6-different-page-structures.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/6-different-page-structures.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/6-different-page-structures.jpg"
			
			sizes="100vw"
			alt="List of four different page structures in a schematic way: text-based page, form, table, and gallery."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Picking pages with different structures can help you to identify a more representative sample of critical issues and blockers. (<a href='https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/6-different-page-structures.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Once you have chosen the workflows and screens, you can audit them, but with a reduced scope. If your product has never considered accessibility, it is likely to have way too many issues. When doing an audit, you normally test compliance with all the success criteria (59 if we consider levels A and AA) and do manual testing with different browsers, screen readers, and devices. Then, document each of the issues, prioritize them, and include the remediation in the planning.</p>

<p>It takes a lot of time, and you may get hundreds of issues, or even thousands, which makes you feel like <em>“I will never get this done”</em> and if you even get there like <em>“I am finally done with this I don’t want to hear about it for a long time”.</em> If this is the situation you are forecasting for the business, most likely, you will not get the green light for the project. It is too much of an investment. So unless they have hard requirements for compliance coming from some really strategic customers, you are going to get stuck.</p>

<p>As we said, ideally, we would do a complete audit and fix everything, but delivering some value is better than delivering nothing, so instead, you can propose <strong>a reduced first audit</strong> to get you on the move. Rather than doing a detailed audit of all 59 criteria, I normally focus on these three things:</p>

<ul>
<li><strong>Running an automatic check.</strong> It is very fast and prepares the report by itself. Though it is only capable of finding around 30% of the issues, it is a good start.</li>
<li><strong>Doing basic manual keyboard testing</strong>, checking that all the interactive elements are focusable, in the logical order, and following the expected keyboard command interactions.</li>
<li><strong>Doing a quick responsive test.</strong> Basically, what breaks when I change the viewport? Do I have information on top of each other when I zoom in? Can I still use the functionalities?</li>
</ul>

<p>With these three tests, you will already have a large number of critical issues and blockers to solve while staying close to the overlapping area between accessibility and good design and development practices and not taking too much time.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/7-basic-accessibility-testing.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="264"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/7-basic-accessibility-testing.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/7-basic-accessibility-testing.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/7-basic-accessibility-testing.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/7-basic-accessibility-testing.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/7-basic-accessibility-testing.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/7-basic-accessibility-testing.jpg"
			
			sizes="100vw"
			alt="Diagram of three focus points for basic accessibility testing: automatic accessibility scanner, simplified manual testing, and responsiveness test."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Running a simplified audit helps you find many critical issues to kick off the project in a reduced time. (<a href='https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/7-basic-accessibility-testing.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p class="c-pre-sidenote--left">Remember, the goal of this first audit is to get easy-to-identify critical issues to have a starting point, not to solve all the problems. In this way, you can start delivering value while building the idea that <strong>accessibility is not a one-time fix but a continuous process</strong>. In addition, it gives you a lot of insights into the aspects in which the teams need guidelines and training, as well as defining the minimum things that the different roles have to consider when working to reduce the number of future accessibility issues. You want to take it as a learning opportunity.</p>
<p class="c-sidenote c-sidenote--right">Note: <a href="https://accessibilityinsights.io/">Accessibility insights</a> is a good tool for auditing by yourself as it includes explanations and visual helpers and guides you through the process.<br />Screen reader testing should be added to the audit scope if you can, but it can be hard to do it if you have never done it before, and some of the issues will already be highlighted during the automatic check and the keyboard testing.</p>

<div class="partners__lead-place"></div>

<h2 id="what-are-the-expected-results">What Are The Expected Results?</h2>

<p>The results you want to achieve are going to have a huge impact on the strategy.</p>

<blockquote>Are you aiming for compliance or bringing value to the users and preparing for the future?</blockquote>

<p>This is a key question you have to ask yourself.</p>

<p>Compliance with the regulation is pretty much <strong>a binary option</strong>. To be compliant with the WCAG at a certain level, let’s say AA, you should pass all the success criteria for that level and the previous ones. Each success criterion intends to help people with a specific disability. If you try to be compliant only with some of them, you would be leaving people out. Of course, in reality, there are always going to be some minor issues and violations of a success criterion that reach the user. But the idea is that you are either compliant or not. With this in mind, you have to make sure that you consider several audits, ideally by a certified external party that can reassure your compliance.</p>

<p>Trying to become compliant with a product that has never considered accessibility can become quite a large task, so it may not be the best first step. But, in general, if you are aiming for full compliance, it may be because you have strong motivations coming from the <strong>risk reduction</strong> and <strong>competitive advantage categories</strong>.</p>

<p>On the other hand, if your goal is to start including accessibility in the product to prepare for the future and help users, you will probably target a lighter result. Rather than looking for perfection, you want to start to have a level that is good enough as soon as possible.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aCompliance%20is%20binary,%20but%20accessibility%20is%20a%20spectrum.%20You%20can%20have%20a%20pretty%20good%20level%20of%20accessibility%20even%20if%20you%20are%20not%20fully%20compliant.%0a&url=https://smashingmagazine.com%2f2025%2f04%2fhow-build-business-case-promote-accessibility-b2b-products%2f">
      
Compliance is binary, but accessibility is a spectrum. You can have a pretty good level of accessibility even if you are not fully compliant.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>You can focus on identifying and solving the most critical issues for the users and on applying an accessibility-first approach to new developments. The result is probably not compliant and not perfect, but it eliminates critical barriers without a huge effort. It will have basic accessibility to help users, and you can apply an iterative approach to improve the level.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/8-accessibility-spectrum.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="384"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/8-accessibility-spectrum.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/8-accessibility-spectrum.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/8-accessibility-spectrum.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/8-accessibility-spectrum.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/8-accessibility-spectrum.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/8-accessibility-spectrum.png"
			
			sizes="100vw"
			alt="Comparison of accessibility as a continuous spectrum that goes from poor to good accessibility and a compliance-based approach in which a big part of the ‘good accessibility’ in the spectrum approach falls under ‘not compliance’."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      While accessibility compliance has a binary result, accessibility is a spectrum, and there is great value in working on accessibility even if you don’t reach compliance. (<a href='https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/8-accessibility-spectrum.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Keep in mind that it is impossible to have a 100% accessible product. As the product evolves, there are always going to be some issues that escape the test and reach the user. The important thing is to work to ensure that these issues are minor ones and not blockers or critical ones. If you can get the resources to fix the most important problems, you are already bringing value, even if you don’t reach compliance.</p>

<h2 id="how-much-would-it-cost">How Much Would It Cost?</h2>

<p>An accessibility-first approach typically means you have to assign <strong>5 to 10%</strong> of the product capacity to apply it (the number goes down to 5% due to the learning curve). The underlying risk, though, is that the business still considers these percentages to be too high. To prevent this from happening, you have to highlight strongly <strong>the side value of accessibility</strong> and the huge overlap it has with the design and development best practices we mentioned above.</p>

<p>In addition, to help justify the cost, you can look for examples inside your company that allow you to compare it with the cost of retroactive fitting accessibility. If there are not any, you can look for some basic issue, such as the lack of structure of a page, and use it to illustrate that in order to add the structure afterward, once the product is released you would need to do a substantial rework or ask a developer to help you to estimate the effort of adding a heading structure to 40 different pages after released.</p>

<p>As for introducing accessibility in existing products, the cost can be quite hard to estimate. Having a rough audit can help you understand how many critical issues you have at the start, and you can ask developers to help you estimate some of the changes to get a rough idea.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aThe%20most%20interesting%20approach%20that%20helps%20you%20to%20reduce%20the%20%e2%80%9ccost%20of%20accessibility%e2%80%9d%20is%20exploiting%20the%20overlap%20between%20accessibility%20and%20usability%20or%20product%20features.%0a&url=https://smashingmagazine.com%2f2025%2f04%2fhow-build-business-case-promote-accessibility-b2b-products%2f">
      
The most interesting approach that helps you to reduce the “cost of accessibility” is exploiting the overlap between accessibility and usability or product features.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>If you attach accessibility improvements to usability or UX ones, then it doesn’t really need dedicated capacity. For example, if some of the inputs are lacking labels or instructions and your users get confused, it is a usability problem that overlaps with accessibility. Normally, accessibility issues related to the Reflow criteria are quite time-consuming, as they rely on a proper responsive design. But isn’t it just good design?</p>

<p>I recommend checking the list of features in the product backlog and the feedback from the users to find out which accessibility improvements can you combine with them, especially with features that have priority according to the product strategy (such us, enabling the product on mobile devices, or improving efficiency by promoting keyboard navigation).</p>

<p>The bigger the overlap, the more you can reduce the effort. This said, I would say it is better not to make it too ambitious when you are starting. It is better to start moving, even if it is slowly, than to hit a wall. When you manage to start with it, you will spark curiosity in other people, gain allies, and have results that can help you to expand the project and the scope.</p>

<p>You can also consider an alternative approach, define an affordable capacity that you could dedicate based on your product situation (maybe 10 or 15%), and set the scope to match it.</p>

<p>Finally, it is also important to <strong>gather the existing resources you have access to</strong>, internal or external. If there are guidelines, if the Design System is accessible, if there are related company goals, educational sessions… Whatever is there already is something you can use, and that doesn’t add to the total cost of the project. If the Design System is accessible, it would be a waste if we don’t leverage it and make sure we implement the components in an accessible way. You can put together an overview to show the support you have.</p>

<h2 id="how-can-i-make-a-decision">How Can I Make A Decision?</h2>

<p>Business stakeholders are short on time and have many things in mind. If you want them to make a decision and consider all the factors when making it, you have to help them visualize them together in <strong>an executive summary</strong>.</p>

<p>If there is a single direction that you are trying to promote, for example, implementing an accessibility-first approach for new products and features, you can put on a slide the three key questions we mentioned above and the answers to those questions:</p>

<ul>
<li>What exactly do we want to do?</li>
<li>What are the expected results?</li>
<li>How much would it cost?</li>
</ul>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/9-executive-summary-accessibility.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="218"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/9-executive-summary-accessibility.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/9-executive-summary-accessibility.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/9-executive-summary-accessibility.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/9-executive-summary-accessibility.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/9-executive-summary-accessibility.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/9-executive-summary-accessibility.jpg"
			
			sizes="100vw"
			alt="Executive summary with three key sections: What, expected results, and cost. Each of them has a summary statement and three to four bullet points that summarise the business case."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      The executive summary shall contain all the key information on what you are trying to achieve. In addition to answers to three main questions, you can include metrics, an expected timeline, or other relevant information. (<a href='https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/9-executive-summary-accessibility.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>If there are different directions you can take, for example, you want to start to incorporate accessibility into products that meet certain conditions, or you can afford different capacities dedicated to accessibility for different products, you can use <strong>a decision-making diagram</strong> or <strong>a decision-making matrix</strong>. The idea is to visualize the different criteria that can affect the strategy and the adapted result for each of them.</p>

<p>For example,</p>

<ul>
<li>Do I have clients inquiring about accessibility?</li>
<li>Is the product already using an accessible design system?</li>
<li>Are we considering opening part of the product to B2C?</li>
<li>Is the product going to take responsiveness and mobile interactions as a priority?</li>
<li>Do we want to expand the product target market to governmental institutions?</li>
</ul>

<p>Mapping out the factors and possible directions can help you and decision-makers understand which products can be a better starting point for accessibility, where it makes sense to allocate more capacity, and which possibilities are open. This becomes especially relevant when you are trying to bring accessibility to several products at the same time.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/10-decision-making-diagram.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="451"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/10-decision-making-diagram.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/10-decision-making-diagram.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/10-decision-making-diagram.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/10-decision-making-diagram.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/10-decision-making-diagram.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/10-decision-making-diagram.png"
			
			sizes="100vw"
			alt="Flow diagram with decision-making process. It presents questions sequentially leading to a different conclusion depending on the answers."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      The decision-making diagram provides a good overview of the different options in the strategy while illustrating the reasoning. (<a href='https://files.smashing.media/articles/how-build-business-case-promote-accessibility-b2b-products/10-decision-making-diagram.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Whatever representation you choose for your conditions, make sure it visualizes the answers to those questions to facilitate the decision-making process and get approval. I generally include it at the end of the presentation, or even at the beginning and the end.</p>

<h2 id="keep-it-up">Keep It Up!</h2>

<p>Even if your business case is really good, sometimes you don’t get to have a big impact due to circumstances. It may be that there is a big shift in priorities, that the stakeholders change, that your contract ends (if you are a consultant), or that the company just doesn’t have the resources to work on it at that moment, and it gets postponed.</p>

<p>I know it can be very frustrating, but don´t lose the motivation. Change can move quite slowly, especially in big companies, but if you have put the topic into people’s minds, it will be back on the table. In the meantime, you can try organizing evangelization sessions for the teams to find new allies and share your passion. You may need to wait a bit more, but there will be more opportunities to push the topic again, and since people already know about it, you will probably get more support. You have initiated the change, and your effort will not be lost.</p>

<h2 id="key-points">Key Points</h2>

<ul>
<li>Highlight the specific impact of accessibility on your specific products and users.</li>
<li>Check if accessibility could be a competitive differentiator.</li>
<li>Leverage the overlap between accessibility and good practices or product features to reduce the effort.</li>
<li>Include the existing resources and how you can benefit from them.</li>
<li>Clarify the expected result based on the effort.</li>
<li>Visualize the key points of the strategy to help the decision-making and approval process.</li>
<li>It is better to start with a small scope and iterate than not start at all.</li>
</ul>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Alvaro Saburido</author><title>Navigating The Challenges Of Modern Open-Source Authoring: Lessons Learned</title><link>https://www.smashingmagazine.com/2025/01/navigating-challenges-modern-open-source-authoring/</link><pubDate>Tue, 21 Jan 2025 08:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/01/navigating-challenges-modern-open-source-authoring/</guid><description>Alvaro Saburido delves into the current state and challenges of Open-Source authoring, sharing lessons learned from both community- and company-driven initiatives.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/01/navigating-challenges-modern-open-source-authoring/" />
              <title>Navigating The Challenges Of Modern Open-Source Authoring: Lessons Learned</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Navigating The Challenges Of Modern Open-Source Authoring: Lessons Learned</h1>
                  
                    
                    <address>Alvaro Saburido</address>
                  
                  <time datetime="2025-01-21T08:00:00&#43;00:00" class="op-published">2025-01-21T08:00:00+00:00</time>
                  <time datetime="2025-01-21T08:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                <p>This article is sponsored by <b>Storyblok</b></p>
                

<p>Open source is the backbone of modern software development. As someone deeply involved in both community-driven and company-driven open source, I’ve had the privilege of experiencing its diverse approaches firsthand. This article dives into what modern OSS (Open Source) authoring looks like, focusing on front-end JavaScript libraries such as <a href="https://tresjs.org/">TresJS</a> and tools I’ve contributed to at <a href="https://github.com/storyblok">Storyblok</a>.</p>

<p>But let me be clear:</p>

<blockquote>There’s no universal playbook for OSS. Every language, framework, and project has its own workflows, rules, and culture &mdash; and that’s okay. These variations are what make open source so adaptable and diverse.</blockquote>

<h3 id="the-art-of-oss-authoring">The Art Of OSS Authoring</h3>

<p>Authoring an open-source project often begins with scratching your own itch &mdash; solving a problem you face as a developer. But as your “experiment” gains traction, the challenge shifts to addressing diverse use cases while maintaining the simplicity and focus of the original idea.</p>

<p>Take TresJS as an example. All I wanted was to add 3D to my personal Nuxt portfolio, but at that time, there wasn’t a maintained, feature-rich alternative to React Three Fiber in VueJS. So, I decided to create one. Funny enough, after two years after the library’s launch, my portfolio remains unfinished.</p>

<h3 id="community-driven-oss-authoring-lessons-from-tresjs">Community-driven OSS Authoring: Lessons From TresJS</h3>

<p>Continuing with TresJS as an example of a community-driven OSS project, the community has been an integral part of its growth, offering ideas, filing issues (around 531 in total), and submitting pull requests (around 936 PRs) of which 90% eventually made it to production. As an author, this is the best thing that can happen &mdash; it’s probably one of the biggest reasons I fell in love with open source. The continuous collaboration creates an environment where new ideas can evolve into meaningful contributions.</p>

<p>However, it also comes with its own challenges. The more ideas come in, the harder it becomes to maintain the project’s focus on its original purpose.</p>

<blockquote>As authors, it’s our responsibility to keep the vision of the library clear &mdash; even if that means saying no to great ideas from the community.</blockquote>

<p>Over time, some of the most consistent collaborators became part of a core team, helping to share the responsibility of maintaining the library and ensuring it stays aligned with its original goals.</p>

<p>Another crucial aspect of scaling a project, especially one like TresJS, which has grown into an ecosystem of packages, is the <strong>ability to delegate</strong>. The more the project expands, the more essential it becomes to distribute responsibilities among contributors. Delegation helps in reducing the burden of the massive workload and empowers contributors to <strong>take ownership</strong> of specific areas. As a core author, it’s equally important to provide the necessary tools, CI workflows, and clear conventions to make the process of contributing as simple and efficient as possible. A well-prepared foundation ensures that new and existing collaborators can focus on what truly matters &mdash; pushing the project forward.</p>

<h3 id="company-driven-oss-authoring-the-storyblok-perspective">Company-driven OSS Authoring: The Storyblok Perspective</h3>

<p>Now that we’ve explored the bright spots and challenges of community-driven OSS let’s jump into a different realm: company-driven OSS.</p>

<p>I had experience with inner-source and open-source in previous companies, so I already had a grasp of how OSS works in the context of a company environment. However, my most meaningful experience would come later, specifically earlier this year, when I switched my role from DevRel to a full-time Developer Experience Engineer, and I say “full-time” because before taking the role, I was already contributing to Storyblok’s SDK ecosystem.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/navigating-challenges-modern-open-source-authoring/storyblok-to-smashing-magazine-surviving-modern-open-source-authoring-inline-image.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="518"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/navigating-challenges-modern-open-source-authoring/storyblok-to-smashing-magazine-surviving-modern-open-source-authoring-inline-image.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/navigating-challenges-modern-open-source-authoring/storyblok-to-smashing-magazine-surviving-modern-open-source-authoring-inline-image.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/navigating-challenges-modern-open-source-authoring/storyblok-to-smashing-magazine-surviving-modern-open-source-authoring-inline-image.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/navigating-challenges-modern-open-source-authoring/storyblok-to-smashing-magazine-surviving-modern-open-source-authoring-inline-image.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/navigating-challenges-modern-open-source-authoring/storyblok-to-smashing-magazine-surviving-modern-open-source-authoring-inline-image.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/navigating-challenges-modern-open-source-authoring/storyblok-to-smashing-magazine-surviving-modern-open-source-authoring-inline-image.png"
			
			sizes="100vw"
			alt="Visualisation for open source authoring"
		/>
    
    </a>
  

  
</figure>

<p>At <a href="https://www.storyblok.com/lp/developers?utm_source=smashing&amp;utm_medium=sponsor&amp;utm_campaign=DGM_DEV_SMA_TRA&amp;utm_content=smashing-OSS">Storyblok</a>, open source plays a crucial role in how we engage with developers and how they seamlessly use our product with their favorite framework. Our goal is to provide the same developer experience regardless of the flavor, making the experience of using Storyblok as simple, effective, and enjoyable as possible.</p>

<p>To achieve this, it’s crucial to <strong>balance the needs</strong> of the developer community &mdash; which often reflect the needs of the clients they work for &mdash; with the company’s broader goals. One of the things I find more challenging is <strong>managing expectations</strong>. For instance, while the community may want feature requests and bug fixes to be implemented quickly, the company’s priorities might dictate focusing on stability, scalability, and often strategic integrations. <strong>Clear communication</strong> and <strong>prioritization</strong> are key to maintaining healthy alignment and trust between both sides.</p>

<p>One of the unique advantages of company-driven open source is the <strong>availability of resources</strong>:</p>

<ul>
<li>Dedicated engineering time,</li>
<li>Infrastructure (which many OSS authors often cannot afford),</li>
<li>Access to knowledge from internal teams like design, QA, and product management.</li>
</ul>

<p>However, this setup often comes with the challenge of dealing with legacy codebases &mdash; typically written by developers who may not be familiar with OSS principles. This can lead to inconsistencies in structure, testing, and documentation that require significant refactoring before the project can align with open-source best practices.</p>

<h3 id="navigating-the-spectrum-community-vs-company">Navigating The Spectrum: Community vs. Company</h3>

<p>I like to think of community-driven OSS as being like jazz music—freeform, improvised, and deeply collaborative. In contrast, company-driven OSS resembles an orchestra, with a conductor guiding the performance and ensuring all the pieces fit together seamlessly.</p>

<p>The truth is that most OSS projects &mdash; if not the vast majority &mdash; exist somewhere along this spectrum. For example, TresJS began as a purely community-driven project, but as it matured and gained traction, elements of structured decision-making &mdash; more typical of company-driven projects &mdash; became necessary to maintain focus and scalability. Together with the core team, we defined a vision and goals for the project to ensure it continued to grow without losing sight of its original purpose.</p>

<p>Interestingly, the reverse is also true: Company-driven OSS can benefit significantly from the fast-paced innovation seen in community-driven projects.</p>

<p>Many of the improvements I’ve introduced to the <a href="https://www.storyblok.com/lp/developers?utm_source=smashing&amp;utm_medium=sponsor&amp;utm_campaign=DGM_DEV_SMA_TRA&amp;utm_content=smashing-OSS">Storyblok ecosystem</a> since joining were inspired by ideas first explored in TresJS. For instance, migrating the TresJS ecosystem to <strong><code>pnpm workspaces</code></strong> demonstrated how streamlined dependency management could improve development workflows like playgrounds and e2e &mdash; an approach we gradually adapted later for Storyblok’s ecosystem.</p>

<p>Similarly, transitioning Storyblok testing from Jest to Vitest, with its improved performance and developer experience, was influenced by how testing is approached in community-driven projects. Likewise, our switch from Prettier to ESLint’s v9 flat configuration with auto-fix helped consolidate linting and formatting into a single workflow, streamlining developer productivity.</p>

<p>Even more granular processes, such as modernizing CI workflows, found their way into Storyblok. TresJS’s evolution from a single monolithic release action to granular steps for linting, testing, and building provided a blueprint for enhancing our pipelines at Storyblok. We also adopted continuous release practices inspired by <strong><code>pkg.pr.new</code></strong>, enabling faster delivery of incremental changes and testing package releases in real client projects to gather immediate feedback before merging the PRs.</p>

<p>That said, TresJS also benefited from my experiences at Storyblok, which had a more mature and battle-tested ecosystem, particularly in adopting automated processes. For example, we integrated Dependabot to keep dependencies up to date and used auto-merge to reduce manual intervention for minor updates, freeing up contributors’ time for more meaningful work. We also implemented an automatic release pipeline using GitHub Actions, inspired by Storyblok’s workflows, ensuring smoother and more reliable releases for the TresJS ecosystem.</p>

<h3 id="the-challenges-of-modern-oss-authoring">The Challenges of Modern OSS Authoring</h3>

<p>Throughout this article, we’ve touched on several modern OSS challenges, but if one deserves the crown, it’s <strong>managing breaking changes and maintaining compatibility</strong>. We know how fast the pace of technology is, especially on the web, and users expect libraries and tools to keep up with the latest trends. I’m not the first person to say that hype-driven development can be fun, but it is inherently risky and not your best ally when building reliable, high-performance software &mdash; especially in enterprise contexts.</p>

<p>Breaking changes exist. That’s why semantic versioning comes into play to make our lives easier. However, it is equally important to <strong>balance innovation with stability</strong>. This becomes more crucial when introducing new features or refactoring for better performance, breaking existing APIs. One key lesson I’ve learned &mdash; particularly during my time at Storyblok &mdash; is the importance of <strong>clear communication</strong>. Changelogs, migration guides, and deprecation warnings are invaluable tools to smoothen the transition for users.</p>

<blockquote><strong>A practical example:</strong><br /><br />My first project as a Developer Experience Engineer was introducing <code>@storyblok/richtext</code>, a library for rich-text processing that (at the time of writing) sees around 172k downloads per month. The library was crafted during my time as a DevRel, but transitioning users to it from the previous rich-text implementation across the ecosystem required careful planning. Since the library would become a dependency of the fundamental JS SDK &mdash; and from there propagate to all the framework SDKs &mdash; together with my manager, we planned a multi-month transition with a retro-compatible period before the major release. This included communication campaigns, thorough documentation, and gradual adoption to minimize disruption.<br /><br />Despite these efforts, mistakes happened &mdash; and that’s okay. During the rich-text transition, there were instances where updates didn’t arrive on time or where communication and documentation were temporarily out of sync. This led to confusion within the community, which we addressed by providing timely support on GitHub issues and Discord. These moments served as reminders that <strong>even with semantic versioning, modular architectures, and meticulous planning, OSS authoring is never perfect</strong>. Mistakes are part of the process.</blockquote>

<p>And that takes us to the following point.</p>

<h3 id="conclusion">Conclusion</h3>

<p>Open-source authoring is a journey of continuous learning. Each misstep offers a chance to improve, and each success reinforces the value of collaboration and experimentation.</p>

<p>There’s no “perfect” way to do OSS, and that’s the beauty of it. Every project has its own set of workflows, challenges, and quirks shaped by the community and its contributors. These differences make open source adaptable, dynamic, fun, and, above all, impactful. No matter if you’re building something entirely new or contributing to an existing project, remember that progress, not perfection, is the goal.</p>

<p>So, keep contributing, experimenting, and sharing your work. Every pull request, issue, and idea you put forward brings value &amp;mdashp not just to your project but to the broader ecosystem.</p>

<p>Happy coding!</p>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Joana Cerejo</author><title>Why Anticipatory Design Isn’t Working For Businesses</title><link>https://www.smashingmagazine.com/2024/09/why-anticipatory-design-not-working-businesses/</link><pubDate>Tue, 10 Sep 2024 10:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2024/09/why-anticipatory-design-not-working-businesses/</guid><description>Anticipatory design, powered by Artificial Intelligence (AI), Machine learning (ML), and Big Data (BD), promises to transform user experiences by predicting and fulfilling needs before users even express them. While this proactive approach seems revolutionary, many businesses struggle to meet the high expectations it sets. Joana Cerejo delves into the challenges of anticipatory design, highlights key failures, and offers a framework to help designers and businesses succeed in this complex landscape.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2024/09/why-anticipatory-design-not-working-businesses/" />
              <title>Why Anticipatory Design Isn’t Working For Businesses</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Why Anticipatory Design Isn’t Working For Businesses</h1>
                  
                    
                    <address>Joana Cerejo</address>
                  
                  <time datetime="2024-09-10T10:00:00&#43;00:00" class="op-published">2024-09-10T10:00:00+00:00</time>
                  <time datetime="2024-09-10T10:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>Consider the early days of the internet, when websites like NBC News and Amazon cluttered their pages with flashing banners and labyrinthine menus. In the early 2000s, Steve Krug’s book <em>Don’t Make Me Think</em> arrived like a lighthouse in a storm, advocating for simplicity and user-centric design.</p>














<figure class="
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/1-nbc-amazon-2000s.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="514"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/1-nbc-amazon-2000s.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/1-nbc-amazon-2000s.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/1-nbc-amazon-2000s.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/1-nbc-amazon-2000s.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/1-nbc-amazon-2000s.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/1-nbc-amazon-2000s.png"
			
			sizes="100vw"
			alt="A comparison of early 2000s website designs: NBC News’s website with flashing banners on the left and Amazon’s late 1990s website with confusing navigation on the right."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      <strong>On the left</strong>: NBC News’s early 2000’s website with flashing banners. <strong>On the right</strong>: Amazon’s late 1990s website with confusing navigation. (Image source: <a href='https://www.webdesignmuseum.org/'>Web Design Museum</a>) (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/1-nbc-amazon-2000s.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Today’s digital world is flooded with choices, information, and data, which is both exciting and overwhelming. Unlike Krug’s time,</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aToday,%20the%20problem%20isn%e2%80%99t%20interaction%20complexity%20but%20opacity.%20AI-powered%20solutions%20often%20lack%20transparency%20and%20explainability,%20raising%20concerns%20about%20user%20trust%20and%20accountability.%0a&url=https://smashingmagazine.com%2f2024%2f09%2fwhy-anticipatory-design-not-working-businesses%2f">
      
Today, the problem isn’t interaction complexity but opacity. AI-powered solutions often lack transparency and explainability, raising concerns about user trust and accountability.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>The era of click-and-command is fading, giving way to a more seamless and intelligent relationship between humans and machines.</p>

<h3 id="expanding-on-krug-s-call-for-clarity-the-pillars-of-anticipatory-design">Expanding on Krug’s Call for Clarity: The Pillars of Anticipatory Design</h3>

<p>Krug’s emphasis on clarity in design is more relevant than ever. In anticipatory design, clarity is not just about simplicity or ease of use &mdash; it’s about transparency and accountability. These two pillars are crucial but often missing as businesses navigate this new paradigm. Users today find themselves in a digital landscape that is not only confusing but increasingly intrusive. AI predicts their desires based on past behavior but rarely explains how these predictions are made, leading to growing mistrust.</p>

<p><strong>Transparency</strong> is the foundation of clarity. It involves openly communicating how AI-driven decisions are made, what data is being collected, and how it is being used to anticipate needs. By demystifying these processes, designers can alleviate user concerns about privacy and control, thereby building trust.</p>

<p><strong>Accountability</strong> complements transparency by ensuring that anticipatory systems are designed with ethical considerations in mind. This means creating mechanisms for users to understand, question, and override automated decisions if needed. When users feel that the system is accountable to them, their trust in the technology &mdash; and the brand &mdash; deepens.</p>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p>Meet <strong><a data-instant href="/printed-books/touch-design-for-mobile-interfaces/">Touch Design for Mobile Interfaces</a></strong>, Steven Hoober’s brand-new guide on <strong>designing for mobile</strong> with proven, universal, human-centric guidelines. <strong>400 pages</strong>, jam-packed with in-depth user research and <strong>best practices</strong>.</p>
<a data-instant href="https://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/" class="btn btn--green btn--large" style="">Jump to table of contents&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="https://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/" class="feature-panel-image-link">
<div class="feature-panel-image"><picture><source type="image/avif" srcSet="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/14bcab88-b622-47f6-a51d-76b0aa003597/touch-design-book-shop-opt.avif" />
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/b14658fc-bb2d-41a6-8d1a-70eaaf1b8ec8/touch-design-book-shop-opt.png"
    alt="Feature Panel"
    width="480"
    height="697"
/>
</picture>
</div>
</a>
</div>
</aside>
</div>

<h2 id="what-makes-a-service-anticipatory">What Makes a Service Anticipatory?</h2>

<p>Image AI like a waiter at a restaurant. Without AI, they wait for you to interact with them and place your order. But with anticipatory design powered by AI and ML, the waiter can analyze your past orders (historical data) and current behavior (contextual data) &mdash; perhaps, by noticing you always start with a glass of sparkling water.</p>

<p>This proactive approach has evolved since the late 1990s, with early examples like Amazon’s recommendation engine and TiVo’s predictive recording. These pioneering services demonstrated the potential of predictive analytics and ML to create personalized, seamless user experiences.</p>

<h3 id="amazon-s-recommendation-engine-late-1990s">Amazon’s Recommendation Engine (Late 1990s)</h3>

<p>Amazon was a pioneer in using data to predict and suggest products to customers, setting the standard for personalized experiences in e-commerce.</p>

<h3 id="tivo-1999">TiVo (1999)</h3>

<p>TiVo’s ability to learn users’ viewing habits and automatically record shows marked an early step toward predictive, personalized entertainment.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/2-1999s-tivo.jpeg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="601"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/2-1999s-tivo.jpeg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/2-1999s-tivo.jpeg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/2-1999s-tivo.jpeg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/2-1999s-tivo.jpeg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/2-1999s-tivo.jpeg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/2-1999s-tivo.jpeg"
			
			sizes="100vw"
			alt="A photo of a TiVO device from 1999."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      1999’s TiVO. (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/2-1999s-tivo.jpeg'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="netflix-s-recommendation-system-2006">Netflix’s Recommendation System (2006)</h3>

<p>Netflix began offering personalized movie recommendations based on user ratings and viewing history in 2006. It helped popularize the idea of anticipatory design in the digital entertainment space.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/3-netflix-2006.jpeg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="650"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/3-netflix-2006.jpeg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/3-netflix-2006.jpeg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/3-netflix-2006.jpeg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/3-netflix-2006.jpeg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/3-netflix-2006.jpeg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/3-netflix-2006.jpeg"
			
			sizes="100vw"
			alt="A screenshot of Netflix’s website from 2006."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Netflix in 2006. (Image source: <a href='https://www.webdesignmuseum.org/gallery/netflix-in-2006'>Web Design Museum</a>) (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/3-netflix-2006.jpeg'>Large preview</a>)
    </figcaption>
  
</figure>

<h2 id="how-businesses-can-achieve-anticipatory-design">How Businesses Can Achieve Anticipatory Design</h2>

<p>Designing for anticipation is designing for a future that is not here yet but has already started moving toward us.</p>

<p>Designing for anticipation involves more than reacting to current trends; it requires businesses to plan strategically for future user needs. Two critical concepts in this process are <strong>forecasting</strong> and <strong>backcasting</strong>.</p>

<ul>
<li><strong>Forecasting</strong> analyzes past trends and data to predict future outcomes, helping businesses anticipate user needs.</li>
<li><strong>Backcasting</strong> starts with a desired future outcome and works backward to identify the steps needed to achieve that goal.</li>
</ul>

<p>Think of it like planning a dream vacation. Forecasting would involve looking at your past trips to guess where you might go next. But backcasting lets you pick your ideal destination first, then plan the perfect itinerary to get you there.</p>

<h3 id="forecasting-a-core-concept-for-future-oriented-design">Forecasting: A Core Concept for Future-Oriented Design</h3>

<p>This method helps in planning and decision-making based on probable future scenarios. Consider Netflix, which uses forecasting to analyze viewers’ past viewing habits and predict what they might want to watch next. By leveraging data from millions of users, Netflix can anticipate individual preferences and serve personalized recommendations that keep users engaged and satisfied.</p>

<h3 id="backcasting-planning-from-the-desired-future">Backcasting: Planning From the Desired Future</h3>

<p>Backcasting takes a different approach. Instead of using data to predict the future, it starts with defining a desired future outcome &mdash; a clear user intent. The process then works backward to identify the steps needed to achieve that goal. This goal-oriented approach crafts an experience that actively guides users toward their desired future state.</p>

<p>For instance, a financial planning app might start with a user’s long-term financial goal, such as saving for retirement, and then design an experience that guides the user through each step necessary to reach that goal, from budgeting tips to investment recommendations.</p>

<h3 id="integrating-forecasting-and-backcasting-in-anticipatory-design">Integrating Forecasting and Backcasting In Anticipatory Design</h3>

<p>The true power of anticipatory design emerges when businesses efficiently integrate both forecasting and backcasting into their design processes.</p>

<p>For example, Tesla’s approach to electric vehicles exemplifies this integration. By forecasting market trends and user preferences, Tesla can introduce features that appeal to users today. Simultaneously, by backcasting from a vision of a sustainable future, Tesla designs its vehicles and infrastructure to guide society toward a world where electric cars are the norm and carbon emissions are significantly reduced.</p>

<h2 id="over-promising-and-under-delivering-the-pitfalls-of-anticipatory-design">Over-Promising and Under-Delivering: The Pitfalls of Anticipatory Design</h2>

<p>As businesses increasingly adopt anticipatory design, the integration of forecasting and backcasting becomes essential. Forecasting allows businesses to predict and respond to immediate user needs, while backcasting ensures these responses align with long-term goals. Despite its potential, anticipatory design often fails in execution, leaving few examples of success.</p>

<p>Over the past decade, I’ve observed and documented the rise and fall of several ambitious anticipatory design ventures. Among them, three &mdash; <strong>Digit</strong>, <strong>LifeBEAM Vi</strong> Sense Headphones, and <strong>Mint</strong> &mdash; highlight the challenges of this approach.</p>

<h3 id="digit-struggling-with-contextual-understanding">Digit: Struggling with Contextual Understanding</h3>

<p><strong>Digit</strong> aimed to simplify personal finance with algorithms that automatically saved money based on user spending. However, the service often missed the mark, lacking the contextual awareness necessary to accurately assess users’ real-time financial situations. This led to unexpected withdrawals, frustrating users, especially those living paycheck to paycheck. The result was a breakdown in trust, with the service feeling more intrusive than supportive.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/4-digit-app-website-2020.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="404"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/4-digit-app-website-2020.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/4-digit-app-website-2020.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/4-digit-app-website-2020.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/4-digit-app-website-2020.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/4-digit-app-website-2020.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/4-digit-app-website-2020.jpg"
			
			sizes="100vw"
			alt="A screenshot of the Digit app website from 2020."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Digit app website in 2020. (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/4-digit-app-website-2020.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="lifebeam-vi-sense-headphones-complexity-and-user-experience-challenges">LifeBEAM Vi Sense Headphones: Complexity and User Experience Challenges</h3>

<p><strong>LifeBEAM Vi</strong> Sense Headphones was marketed as an AI-driven fitness coach, promising personalized guidance during workouts. In practice, the AI struggled to deliver tailored coaching, offering generic and unresponsive advice. As a result, users found the experience difficult to navigate, ultimately limiting the product’s appeal and effectiveness. This disconnection between the promised personalized experience and the actual user experience left many disappointed.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/5-vi-headphones-application.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="363"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/5-vi-headphones-application.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/5-vi-headphones-application.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/5-vi-headphones-application.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/5-vi-headphones-application.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/5-vi-headphones-application.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/5-vi-headphones-application.png"
			
			sizes="100vw"
			alt="A photo of Vi’s headphones and application."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Vi’s headphones and application. (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/5-vi-headphones-application.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="mint-misalignment-with-user-goals">Mint: Misalignment with User Goals</h3>

<p><strong>Mint</strong> aimed to empower users to manage their finances by providing automated budgeting tools and financial advice. While the service had the potential to anticipate user needs, users often found that the suggestions were not tailored to their unique financial situations, resulting in generic advice that did not align with their personal goals.</p>

<p>The lack of personalized, actionable steps led to a mismatch between user expectations and service delivery. This misalignment caused some users to disengage, feeling that <strong>Mint</strong> was not fully attuned to their unique financial journeys.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/6-mint-app-website-2021.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="435"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/6-mint-app-website-2021.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/6-mint-app-website-2021.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/6-mint-app-website-2021.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/6-mint-app-website-2021.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/6-mint-app-website-2021.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/6-mint-app-website-2021.png"
			
			sizes="100vw"
			alt="A screenshot of the Mint app website from 2021."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Mint app website in 2021. (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/6-mint-app-website-2021.png'>Large preview</a>)
    </figcaption>
  
</figure>

<div class="partners__lead-place"></div>

<h2 id="the-risks-of-over-promising-and-under-delivering">The Risks of Over-promising and Under-Delivering</h2>

<p>The stories of <strong>Digit</strong>, <strong>LifeBEAM Vi</strong> Sense, and <strong>Mint</strong> underscore a common pitfall: over-promising and under-delivering. These services focused too much on predictive power and not enough on user experience. When anticipatory systems fail to consider individual nuances, they breed frustration rather than satisfaction, highlighting the importance of aligning design with human experience.</p>

<p><strong>Digit</strong>’s approach to automated savings, for instance, became problematic when users found its decisions opaque and unpredictable. Similarly, <strong>LifeBEAM’s Vi</strong> Sense headphones struggled to meet diverse user needs, while <strong>Mint</strong>’s rigid tools failed to offer the personalized insights users expected. These examples illustrate the delicate balance anticipatory design must strike between proactive assistance and user control.</p>

<h3 id="failure-to-evolve-with-user-needs">Failure to Evolve with User Needs</h3>

<p>Many anticipatory services rely heavily on data-driven forecasting, but predictions can fall short without understanding the broader user context. <strong>Mint</strong> initially provided value with basic budgeting tools but failed to evolve with users’ growing needs for more sophisticated financial advice. <strong>Digit</strong>, too, struggled to adapt to different financial habits, leading to dissatisfaction and limited success.</p>

<h3 id="complexity-and-usability-issues">Complexity and Usability Issues</h3>

<blockquote>Balancing the complexity of predictive systems with usability and transparency is a key challenge in anticipatory design.</blockquote>

<p>When systems become overly complex, as seen with <strong>LifeBEAM Vi</strong> Sense headphones, users may find them difficult to navigate or control, compromising trust and engagement. <strong>Mint</strong>’s generic recommendations, born from a failure to align immediate user needs with long-term goals, further illustrate the risks of complexity without clarity.</p>

<h3 id="privacy-and-trust-issues">Privacy and Trust Issues</h3>

<p>Trust is critical in anticipatory design, particularly in services handling sensitive data like finance or health. <strong>Digit</strong> and <strong>Mint</strong> both encountered trust issues as users grew skeptical of how decisions were made and whether these services truly had their best interests in mind. Without clear communication and control, even the most sophisticated systems risk alienating users.</p>

<h3 id="inadequate-handling-of-edge-cases-and-unpredictable-scenarios">Inadequate Handling of Edge Cases and Unpredictable Scenarios</h3>

<p>While forecasting and backcasting work well for common scenarios, they can struggle with edge cases or unpredictable user behaviors. If an anticipatory service can’t handle these effectively, it risks providing a poor user experience and, in the worst-case scenario, harming the user. Anticipatory systems must be prepared to handle edge cases and unpredictable scenarios.</p>

<p><strong>LifeBEAM Vi</strong> Sense headphones struggled when users deviated from expected fitness routines, offering a one-size-fits-all experience that failed to adapt to individual needs. This highlights the importance of allowing users control, even when a system proactively assists them.</p>

<h2 id="designing-for-anticipatory-experiences">Designing for Anticipatory Experiences</h2>

<blockquote>Anticipatory design should empower users to achieve their goals, not just automate tasks.</blockquote>

<p>We can follow a layered approach to plan a service that can evolve according to user actions and explicit ever-evolving intent.</p>

<p>But how do we design for intent without misaligning anticipation and user control or mismatching user expectations and service delivery?</p>














<figure class="
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/7-core-user-intent-anticipation-design.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="628"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/7-core-user-intent-anticipation-design.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/7-core-user-intent-anticipation-design.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/7-core-user-intent-anticipation-design.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/7-core-user-intent-anticipation-design.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/7-core-user-intent-anticipation-design.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/7-core-user-intent-anticipation-design.png"
			
			sizes="100vw"
			alt="A diagram illustrating the core of user intent in anticipation design."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      The core of user intent in anticipatory design. (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/7-core-user-intent-anticipation-design.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>At the core of this approach is <strong>intent</strong> &mdash; the primary purpose or goal that the design must achieve. Surrounding this are <strong>workflows</strong>, which represent the structured tasks to achieve the intent. Finally, <strong>algorithms</strong> analyze user data and optimize these workflows.</p>

<p>For instance, <strong>Thrive</strong> (see the image below), a digital wellness platform, aligns algorithms and workflows with the core intent of improving well-being. By anticipating user needs and offering personalized programs, <strong>Thrive</strong> helps users achieve sustained behavior change.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/8-thrive-personalized-well-being-platform.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="409"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/8-thrive-personalized-well-being-platform.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/8-thrive-personalized-well-being-platform.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/8-thrive-personalized-well-being-platform.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/8-thrive-personalized-well-being-platform.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/8-thrive-personalized-well-being-platform.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/8-thrive-personalized-well-being-platform.png"
			
			sizes="100vw"
			alt="A diagram representing Thrive, a personalized well-being platform utilizing layered anticipatory design."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Thrive: A personalized well-being platform utilizing a layered anticipatory design. (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/8-thrive-personalized-well-being-platform.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>It perfectly exemplifies the three-layered concentric representation for achieving behavior change through anticipatory design:</p>

<p><strong>1. Innermost layer: Intent</strong></p>

<p><strong>Improve overall well-being</strong>: Thrive’s core intent is to help users achieve a healthier and more fulfilling life. This encompasses aspects like managing stress, improving sleep quality, and boosting energy levels.</p>

<p><strong>2. Middle layer: Workflows</strong></p>

<p><strong>Personalized programs and support</strong>: Thrive uses user data (sleep patterns, activity levels, mood) to create programs tailored to their specific needs and goals. These programs involve various workflows, such as:</p>

<ul>
<li><strong>Guided meditations and breathing exercises</strong> to manage stress and anxiety.</li>
<li><strong>Personalized sleep routines</strong> aimed at improving sleep quality.</li>
<li><strong>Educational content and coaching tips</strong> to promote healthy habits and lifestyle changes.</li>
</ul>

<p><strong>3. Outermost layer: Algorithms</strong></p>

<p><strong>Data analysis and personalized recommendations</strong>: Thrive utilizes algorithms to analyze user data and generate actionable insights. These algorithms perform tasks like the following:</p>

<ul>
<li><strong>Identify patterns</strong> in sleep, activity, and mood to understand user challenges.</li>
<li><strong>Predict user behavior</strong> to recommend interventions that address potential issues.</li>
<li><strong>Optimize program recommendations</strong> based on user progress and data analysis.</li>
</ul>

<p>By aligning algorithms and workflows with the core intent of improving well-being, Thrive provides a personalized and proactive approach to behavior change. Here’s how it benefits users:</p>

<ul>
<li><strong>Sustained behavior change</strong>: Personalized programs and ongoing support empower users to develop healthy habits for the long term.</li>
<li><strong>Data-driven insights</strong>: User data analysis helps users gain valuable insights into their well-being and identify areas for improvement.</li>
<li><strong>Proactive support</strong>: Anticipates potential issues and recommends interventions before problems arise.</li>
</ul>

<h2 id="the-future-of-anticipatory-design-combining-anticipation-with-foresight">The Future of Anticipatory Design: Combining Anticipation with Foresight</h2>

<p>Anticipatory design is inherently future-oriented, making it both appealing and challenging. To succeed, businesses must combine <strong>anticipation</strong> &mdash; predicting future needs &mdash; with <strong>foresight</strong>, a systematic approach to analyzing and preparing for future changes.</p>

<p><strong>Foresight</strong> involves considering alternative future scenarios and making informed decisions to navigate toward desired outcomes. For example, <strong>Digit</strong> and <strong>Mint</strong> struggled because they didn’t adequately handle edge cases or unpredictable scenarios, a failure in their foresight strategy (see an image below).</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/9-expanding-concept-intent.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="409"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/9-expanding-concept-intent.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/9-expanding-concept-intent.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/9-expanding-concept-intent.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/9-expanding-concept-intent.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/9-expanding-concept-intent.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/9-expanding-concept-intent.jpg"
			
			sizes="100vw"
			alt="A diagram expanding on the concept of intent by illustrating two key components of anticipatory design: anticipation and foresight."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Expanding on the concept of intent by illustrating two key components of anticipatory design: anticipation and foresight. (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/9-expanding-concept-intent.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>As mentioned, while forecasting and backcasting work well for common scenarios, they can struggle with edge cases or unpredictable user behaviors. Under anticipatory design, if we demote foresight for a second plan, the business will fail to account for and prepare for emerging trends and disruptive changes. Strategic foresight helps companies to prepare for the future and develop strategies to address possible challenges and opportunities.</p>

<p>The Foresight process generally involves interrelated activities, including data research, trend analysis, planning scenarios, and impact assessment. The ultimate goal is to gain a broader and deeper understanding of the future to make more informed and strategic decisions in the design process and foresee possible frictions and pitfalls in the user experience.</p>

<h3 id="actionable-insights-for-designer">Actionable Insights for Designer</h3>

<ul>
<li><strong>Enhance contextual awareness</strong><br />
Help data scientists or engineers to ensure that the anticipatory systems can understand and respond to the full context of user needs, not just historical data. Plan for pitfalls so you can design safety measures where the user can control the system.</li>
<li><strong>Maintain user control</strong><br />
Provide users with options to customize or override automated decisions, ensuring they feel in control of their experiences.</li>
<li><strong>Align short-term predictions with long-term goals</strong><br />
Use forecasting and backcasting to create a balanced approach that meets immediate needs while guiding users toward their long-term objectives.</li>
</ul>

<div class="partners__lead-place"></div>

<h2 id="proposing-an-anticipatory-design-framework">Proposing an Anticipatory Design Framework</h2>

<p>Predicting the future is no easy task. However, design can borrow foresight techniques to imagine, anticipate, and shape a future where technology seamlessly integrates with users evolving needs. To effectively implement anticipatory design, it’s essential to <strong>balance human control with AI automation</strong>. Here’s a 3-step approach to integrate future thinking into your workflow:</p>

<ol>
<li><strong>Anticipate Directions of Change</strong><br />
Identify major trends shaping the future.</li>
<li><strong>Imagine Alternative Scenarios</strong><br />
Explore potential futures to guide impactful design decisions.</li>
<li><strong>Shape Our Choices</strong><br />
Leverage these scenarios to align design with user needs and long-term goals.</li>
</ol>

<p>This proposed framework (see an image above) aims to integrate forecasting and backcasting while emphasizing user intent, transparency, and continuous improvement, ensuring that businesses create experiences that are both predictive and deeply aligned with user needs.</p>

<h3 id="step-1-anticipate-directions-of-change">Step 1: Anticipate Directions of Change</h3>

<p><strong>Objective:</strong> Identify the major trends and forces shaping the future landscape.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/10-representation-anticipatory-design-decision-making-process.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/10-representation-anticipatory-design-decision-making-process.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/10-representation-anticipatory-design-decision-making-process.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/10-representation-anticipatory-design-decision-making-process.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/10-representation-anticipatory-design-decision-making-process.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/10-representation-anticipatory-design-decision-making-process.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/10-representation-anticipatory-design-decision-making-process.jpg"
			
			sizes="100vw"
			alt="A diagram representing the anticipatory design decision-making process."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Representation of anticipatory design decision-making process. (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/10-representation-anticipatory-design-decision-making-process.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Components:</strong></p>

<p><strong>1. Understand the User’s Intent</strong></p>

<ul>
<li><strong>User Research</strong>: Conduct in-depth user research through interviews, surveys, and observations to uncover user goals, motivations, pain points, and long-term aspirations or Jobs-to-be-Done (JTBD). This foundational step helps clearly define the user’s intent.</li>
<li><strong>Persona Development</strong>: Develop detailed user personas that represent the target audience, including their long-term goals and desired outcomes. Prioritize understanding how the service can adapt in real-time to changing user needs, offering recommendations, or taking actions aligned with the persona’s current context.</li>
</ul>

<p><strong>2. Forecasting: Predicting Near-Term User Needs</strong></p>

<ul>
<li><strong>Data Collection and Analysis</strong>: Collaborate closely with data scientists and data engineers to analyze historical data (past interactions), user behavior, and external factors. This collaboration ensures that predictive analytics enhance overall user experience, allowing designers to better understand the implications of data on user behaviors.</li>
<li><strong>Predictive Modeling</strong>: Implement continuous learning algorithms that refine predictions over time. Regularly assess how these models evolve, adapting to users’ changing needs and circumstances.</li>
<li><strong>Explore the Delphi Method</strong>: This is a structured communication technique that gathers expert opinions to reach a consensus on future developments. It’s particularly useful for exploring complex issues with uncertain outcomes. Use the Delphi Method to gather insights from industry experts, user researchers, and stakeholders about future user needs and the best strategies to meet those needs. The consensus achieved can help in clearly defining the long-term goals and desired outcomes.</li>
</ul>

<p><strong>Activities:</strong></p>

<ul>
<li>Conduct interviews and workshops with experts using the Delphi Method to validate key trends.</li>
<li>Analyze data and trends to forecast future directions.</li>
</ul>

<h3 id="step-2-imagine-alternative-scenarios">Step 2: Imagine Alternative Scenarios</h3>

<p><strong>Objective:</strong> Explore a range of potential futures based on these changing directions.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/11-hcd-process-accommodate-alternative-scenarios-decision-making.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/11-hcd-process-accommodate-alternative-scenarios-decision-making.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/11-hcd-process-accommodate-alternative-scenarios-decision-making.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/11-hcd-process-accommodate-alternative-scenarios-decision-making.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/11-hcd-process-accommodate-alternative-scenarios-decision-making.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/11-hcd-process-accommodate-alternative-scenarios-decision-making.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/11-hcd-process-accommodate-alternative-scenarios-decision-making.jpg"
			
			sizes="100vw"
			alt="A diagram illustrating the Human-centered design process to accommodate alternative scenarios in the decision-making."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      The HCD process to accommodate alternative scenarios in the decision-making. (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/11-hcd-process-accommodate-alternative-scenarios-decision-making.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Components:</strong></p>

<p><strong>1. Scenario Planning</strong></p>

<ul>
<li><strong>Scenario Development</strong>: It involves creating detailed, plausible future scenarios based on various external factors, such as technological advancements, social trends, and economic changes. Develop multiple future scenarios that represent different possible user contexts and their impact on their needs.</li>
<li><strong>Scenario Analysis</strong>: From these scenarios, you can outline the long-term goals that users might have in each scenario and design services that anticipate and address these needs. Assess how these scenarios impact user needs and experiences.</li>
</ul>

<p><strong>2. Backcasting: Designing from the Desired Future</strong></p>

<ul>
<li><strong>Define Desired Outcomes</strong>: Clearly outline the long-term goals or future states that users aim to achieve. Use backcasting to reduce cognitive load by designing a service that anticipates future needs, streamlining user interactions, and minimizing decision-making efforts.

<ul>
<li><strong>Use Visioning Planning</strong>: This is a creative process that involves imagining the ideal future state you want to achieve. It helps in setting clear, long-term goals by focusing on the desired outcomes rather than current constraints. Facilitate workshops or brainstorming sessions with stakeholders to co-create a vision of the future. Define what success looks like from the user’s perspective and use this vision to guide the backcasting process.</li>
</ul></li>
<li><strong>Identify Steps to Reach Goals</strong>: Reverse-engineer the user journey by starting from the desired future state and working backward. Identify the necessary steps and milestones and ensure these are communicated transparently to users, allowing them control over their experience.</li>
<li><strong>Create Roadmaps</strong>: Develop detailed roadmaps that outline the sequence of actions needed to transition from the current state to the desired future state. These roadmaps should anticipate obstacles, respect privacy, and avoid manipulative behaviors, empowering users rather than overwhelming them.</li>
</ul>

<p><strong>Activities:</strong></p>

<ul>
<li>Develop and analyze alternative scenarios to explore various potential futures.</li>
<li>Use backcasting to create actionable roadmaps from these scenarios, ensuring they align with long-term goals.</li>
</ul>

<h3 id="step-3-shape-our-choices">Step 3: Shape Our Choices</h3>

<p><strong>Objective:</strong> Leverage these scenarios to spark new ideas and guide impactful design decisions.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/12-representation-final-step.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/12-representation-final-step.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/12-representation-final-step.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/12-representation-final-step.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/12-representation-final-step.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/12-representation-final-step.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/12-representation-final-step.jpg"
			
			sizes="100vw"
			alt="A diagram representing the final step of the anticipatory design process."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Representation of the final step. (<a href='https://files.smashing.media/articles/why-anticipatory-design-not-working-businesses/12-representation-final-step.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Components:</strong></p>

<p><strong>1. Integrate into the Human-Centered Design Process</strong></p>

<ul>
<li><strong>Iterative Design with Forecasting and Backcasting</strong>: Embed insights from forecasting and backcasting into every stage of the design process. Use these insights to inform user research, prototype development, and usability testing, ensuring that solutions address both predicted future needs and desired outcomes. Continuously refine designs based on user feedback.</li>
<li><strong>Agile Methodologies</strong>: Adopt agile development practices to remain flexible and responsive. Ensure that the service continuously learns from user interactions and feedback, refining its predictions and improving its ability to anticipate needs.</li>
</ul>

<p><strong>2. Implement and Monitor: Ensuring Ongoing Relevance</strong></p>

<ul>
<li><strong>User Feedback Loops</strong>: Establish continuous feedback mechanisms to refine predictive models and workflows. Use this feedback to adjust forecasts and backcasted plans as necessary, keeping the design aligned with evolving user expectations.</li>
<li><strong>Automation Tools</strong>: Collaborate with data scientists and engineers to deploy automation tools that execute workflows and monitor progress toward goals. These tools should adapt based on new data, evolving alongside user behavior and emerging trends.</li>
<li><strong>Performance Metrics</strong>: Define key performance indicators (KPIs) to measure the effectiveness, accuracy, and quality of the anticipatory experience. Regularly review these metrics to ensure that the system remains aligned with intended outcomes.</li>
<li><strong>Continuous Improvement</strong>: Maintain a cycle of continuous improvement where the system learns from each interaction, refining its predictions and recommendations over time to stay relevant and useful.

<ul>
<li><strong>Use Trend Analysis</strong>: This involves identifying and analyzing patterns in data over time to predict future developments. This method helps you understand the direction in which user behaviors, technologies, and market conditions are heading. Use trend analysis to identify emerging trends that could influence user needs in the future. This will inform the desired outcomes by highlighting what users might require or expect from a service as these trends evolve.</li>
</ul></li>
</ul>

<p><strong>Activities:</strong></p>

<ul>
<li>Implement design solutions based on scenario insights and iterate based on user feedback.</li>
<li>Regularly review and adjust designs using performance metrics and continuous improvement practices.</li>
</ul>

<h2 id="conclusion-navigating-the-future-of-anticipatory-design">Conclusion: Navigating the Future of Anticipatory Design</h2>

<p>Anticipatory design holds immense potential to revolutionize user experiences by predicting and fulfilling needs before they are even articulated. However, as seen in the examples discussed, the gap between expectation and execution can lead to user dissatisfaction and erode trust.</p>

<p>To navigate the future of anticipatory design successfully, businesses must prioritize <strong>transparency</strong>, <strong>accountability</strong>, and <strong>user empowerment</strong>. By enhancing contextual awareness, maintaining user control, and aligning short-term predictions with long-term goals, companies can create experiences that are not only innovative but also deeply resonant with their users’ needs.</p>

<p>Moreover, combining anticipation with foresight allows businesses to prepare for a range of future scenarios, ensuring that their designs remain relevant and effective even as circumstances change. The proposed 3-step framework &mdash; anticipating directions of change, imagining alternative scenarios, and shaping our choices &mdash; provides a practical roadmap for integrating these principles into the design process.</p>

<p>As we move forward, the challenge will be to balance the power of AI with the human need for clarity, control, and trust. By doing so, businesses can fulfill the promise of anticipatory design, creating products and services that are not only efficient and personalized but also ethical and user-centric.</p>

<p>In the end,</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aThe%20success%20of%20anticipatory%20design%20will%20depend%20on%20its%20ability%20to%20enhance,%20rather%20than%20replace,%20the%20human%20experience.%0a&url=https://smashingmagazine.com%2f2024%2f09%2fwhy-anticipatory-design-not-working-businesses%2f">
      
The success of anticipatory design will depend on its ability to enhance, rather than replace, the human experience.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>It is a tool to empower users, not to dictate their choices. When done right, anticipatory design can lead to a future where technology seamlessly integrates with our lives, making everyday experiences simpler, more intuitive, and ultimately more satisfying.</p>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Paul Boag</author><title>Pricing Projects As A Freelancer Or Agency Owner</title><link>https://www.smashingmagazine.com/2024/08/pricing-projects-freelancer-agency-owner/</link><pubDate>Fri, 16 Aug 2024 13:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2024/08/pricing-projects-freelancer-agency-owner/</guid><description>Discover effective pricing strategies for digital projects. Learn how to balance fixed pricing, time and materials, and value-based approaches while managing client expectations and scope creep.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2024/08/pricing-projects-freelancer-agency-owner/" />
              <title>Pricing Projects As A Freelancer Or Agency Owner</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Pricing Projects As A Freelancer Or Agency Owner</h1>
                  
                    
                    <address>Paul Boag</address>
                  
                  <time datetime="2024-08-16T13:00:00&#43;00:00" class="op-published">2024-08-16T13:00:00+00:00</time>
                  <time datetime="2024-08-16T13:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>Pricing projects can be one of the most challenging aspects of running a digital agency or working as a freelance web designer. It’s a topic that comes up frequently in discussions with fellow professionals in my <a href="https://boagworld.com/agency-academy/">Agency Academy</a>.</p>

<h2 id="three-approaches-to-pricing">Three Approaches to Pricing</h2>

<p>Over my years in the industry, I’ve found that there are essentially three main approaches to pricing:</p>

<ul>
<li>Fixed price,</li>
<li>Time and materials,</li>
<li>And value-based pricing.</li>
</ul>

<p>Each has its merits and drawbacks, and understanding these can help you make better decisions for your business. Let’s explore each of these in detail and then dive into what I believe is the most effective strategy.</p>

<h2 id="fixed-price">Fixed Price</h2>

<p>Fixed pricing is often favored by clients because it reduces their risk and allows for easier comparison between competing proposals. On the surface, it seems straightforward: you quote a price, the client agrees, and you deliver the project for that amount. However, this approach comes with significant drawbacks for agencies and freelancers:</p>

<ul>
<li><strong>Estimating accurately is incredibly challenging.</strong><br />
In the early stages of a project, we often don’t have enough information to provide a precise quote. Clients may not have a clear idea of their requirements, or there might be technical complexities that only become apparent once work begins. This lack of clarity can lead to underquoting, which eats into your profits, or overquoting, which might cost you the job.</li>
<li><strong>There’s no room for adaptation based on testing or insights gained during the project.</strong><br />
Web design and development is an iterative process. As we build and test, we often discover better ways to implement features or uncover user needs that weren’t initially apparent. With a fixed price model, these improvements are often seen as “scope creep” and can lead to difficult conversations with clients about additional costs.</li>
<li><strong>The focus shifts from delivering the best possible product to sticking within the agreed-upon scope.</strong><br />
This can result in missed opportunities for innovation and improvement, ultimately leading to a less satisfactory end product for the client.</li>
</ul>

<p>While fixed pricing might seem straightforward, it’s not without its complications. The rigidity of this model can stifle creativity and adaptability, two crucial elements in successful web projects. So, let’s look at an alternative approach that offers more flexibility.</p>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p>Meet <strong><a data-instant href="/printed-books/image-optimization/">Image Optimization</a></strong>, Addy Osmani’s new practical guide to optimizing and delivering <strong>high-quality images</strong> on the web. Everything in one single <strong>528-pages</strong> book.</p>
<a data-instant href="https://www.smashingmagazine.com/printed-books/image-optimization/" class="btn btn--green btn--large" style="">Jump to table of contents&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="https://www.smashingmagazine.com/printed-books/image-optimization/" class="feature-panel-image-link">
<div class="feature-panel-image"><picture><source type="image/avif" srcSet="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c669cf1-c6ef-4c87-9901-018b04f7871f/image-optimization-shop-cover-opt.avif" />
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/87fd0cfa-692e-459c-b2f3-15209a1f6aa7/image-optimization-shop-cover-opt.png"
    alt="Feature Panel"
    width="480"
    height="697"
/>
</picture>
</div>
</a>
</div>
</aside>
</div>

<h2 id="time-and-materials">Time and Materials</h2>

<p><strong>Time and materials (T&amp;M) pricing</strong> offers a fairer system where the client only pays for the hours actually worked. This approach has several advantages:</p>

<ul>
<li>Allows for <strong>greater adaptability</strong> as the project progresses. If new requirements emerge or if certain tasks take longer than expected, you can simply bill for the additional time. This flexibility can lead to better outcomes as you’re not constrained by an initial estimate.</li>
<li>Encourages <strong>transparency</strong> and <strong>open communication</strong>. Clients can see exactly what they’re paying for, which can foster trust and understanding of the work involved.</li>
<li><strong>Reduces the risk of underquoting.</strong> You don’t have to worry about eating into your profits if a task takes longer than expected.</li>
</ul>

<p>However, T&amp;M pricing isn’t without its drawbacks:</p>

<ul>
<li>It carries <strong>a higher perceived risk for the client</strong>, as the final cost isn’t determined upfront. This can make budgeting difficult for clients and may cause anxiety about runaway costs.</li>
<li>It <strong>requires careful tracking and regular communication</strong> about hours spent. Without this, clients may be surprised by the final bill, leading to disputes.</li>
<li>Some clients may feel <strong>it incentivizes inefficiency</strong>, as taking longer on tasks results in higher bills.</li>
</ul>

<p>T&amp;M pricing can work well in many scenarios, especially for long-term or complex projects where requirements may evolve. However, it’s not always the perfect solution, particularly for clients with strict budgets or those who prefer more certainty. There’s one more pricing model that’s often discussed in the industry, which attempts to tie pricing directly to results.</p>

<h2 id="value-based-pricing">Value-Based Pricing</h2>

<p>Value-based pricing is often touted as the holy grail of pricing strategies. The idea is to base your price on the value your work will generate for the client rather than on the time it takes or a fixed estimate. While this sounds great in theory, it’s rarely a realistic approach in our industry. Here’s why:</p>

<ul>
<li>It’s only suitable for projects where you can tie your efforts directly to ROI (Return on Investment). For example, if you’re redesigning an e-commerce site, you might be able to link your work to increased sales. However, for many web projects, the value is more intangible or indirect.</li>
<li>Accurately calculating ROI is often difficult or impossible in web design and development. Many factors contribute to a website’s success, and isolating the impact of design or development work can be challenging.</li>
<li>It requires a deep understanding of the client’s business and industry. Without this, it’s hard to accurately assess the potential value of your work.</li>
<li>Clients may be reluctant to share the financial information necessary to make value-based pricing work. They might see it as sensitive data or simply may not have accurate projections.</li>
<li>It can lead to difficult conversations if the projected value isn’t realized. Was it due to your work or other factors beyond your control?</li>
</ul>

<p>While these three approaches form the foundation of most pricing strategies, the reality of pricing projects is often more nuanced and complex. In fact, as I point out in my article “<a href="https://www.smashingmagazine.com/2017/08/what-to-charge-clients/">How To Work Out What To Charge Clients: The Honest Version</a>”, pricing often involves a mix of educated guesswork, personal interest in the project, and an assessment of what the market will bear.</p>

<p>Given the challenges with each of these pricing models, you might be wondering if there’s a better way. In fact, there is, and it starts with a different approach to the initial client conversation.</p>

<div class="partners__lead-place"></div>

<h2 id="start-by-discussing-appetite">Start by Discussing Appetite</h2>

<p>Instead of jumping straight into deliverables or hourly rates, I’ve found it more effective to start by discussing <a href="https://basecamp.com/shapeup/1.2-chapter-03#setting-the-appetite">what 37signals calls “appetite” in their book Shaping Up</a>. Appetite is how much the product owner is willing to invest based on the expected return for their business. This concept shifts the conversation from <em>“What will this cost?”</em> to <em>“What is this worth to you?”</em></p>

<p>This approach is beneficial for several reasons:</p>

<ul>
<li><strong>Focuses on the budget rather than trying to nail down every deliverable upfront.</strong> This allows for more flexibility in how that budget is allocated as the project progresses.</li>
<li><strong>Allows you to tailor your proposal to what the client can actually afford.</strong> There’s no point in proposing a $100,000 solution if the client only has $20,000 to spend.</li>
<li>Helps set <strong>realistic expectations</strong> from the start. If a client’s appetite doesn’t align with what’s required to meet their goals, you can have that conversation early before investing time in detailed proposals.</li>
<li><strong>Shifts the conversation from price comparison to value delivery.</strong> Instead of competing solely on price, you’re discussing how to maximize the value of the client’s investment.</li>
<li>Mirrors how real estate agents work &mdash; they ask for your budget to determine what kind of properties to show you. This analogy can help clients understand why discussing budgets early is crucial.</li>
</ul>

<p>To introduce this concept to clients, I often use the real estate analogy. I explain that even if you describe your ideal house (e.g., 3 bedrooms, specific location), a real estate agent still cannot give you a price because it depends on many other factors, including the state of repair and nearby facilities that may impact value. Similarly, in web design and development, many factors beyond the basic requirements affect the final cost and value of a project.</p>

<p>Once you’ve established the client’s appetite, you’re in a much better position to structure your pricing. But how exactly should you do that? Let me share a strategy that’s worked well for me and many others in my <a href="https://boagworld.com/agency-academy/">Agency Academy</a>.</p>

<h2 id="improve-your-estimates-with-sub-projects">Improve Your Estimates With Sub-Projects</h2>

<p>Here’s an approach I’ve found highly effective:</p>

<ol>
<li>Take approximately 10% of the total budget for a discovery phase. This can be a separate contract with a fixed price. During this phase, you dig deep into the client’s needs, goals, and constraints. You might conduct user research, analyze competitors, and start mapping out the project’s architecture.</li>
<li>Use the discovery phase to define what needs to be prototyped, allowing you to produce a fixed price for the prototyping sub-project. This phase might involve creating wireframes, mockups, or even a basic working prototype of key features.</li>
<li>Test and evolve the prototype, using it as a functional specification for the build. This detailed specification allows you to quote the build accurately. By this point, you have a much clearer picture of what needs to be built, reducing the risk of unexpected complications.</li>
</ol>

<p>This approach combines elements of fixed pricing (for each sub-project) with the flexibility to adapt between phases. It allows you to provide more accurate estimates while still maintaining the ability to pivot based on what you learn along the way.</p>

<h2 id="advantages-of-the-sub-project-approach">Advantages of the Sub-Project Approach</h2>

<p>This method offers several key benefits:</p>

<ul>
<li>Clients appreciate <strong>the sense of control over the budget</strong>. They can decide after each phase whether to continue, giving them clear exit points if needed.</li>
<li>It <strong>reduces the perceived risk for clients</strong>, as they could theoretically change suppliers between sub-projects. This makes you a less risky option compared to agencies asking for a commitment to the entire project upfront.</li>
<li><strong>Each sub-project is easier to price accurately.</strong> As you progress, you gain more information, allowing for increasingly precise estimates.</li>
<li>It allows for <strong>adaptability between sub-projects</strong>, eliminating the problem of scope creep. If new requirements emerge during one phase, they can be incorporated into the planning and pricing of the next phase.</li>
<li>It <strong>encourages ongoing communication and collaboration with the client</strong>. Regular check-ins and approvals are built into the process.</li>
<li>It <strong>aligns with agile methodologies</strong>, allowing for iterative development and continuous improvement.</li>
</ul>

<p>This sub-project approach not only helps with more accurate pricing but also addresses one of the most common challenges in project management: scope creep. By breaking the project into phases, you create natural points for reassessment and adjustment. For a more detailed look at how this approach can help manage scope creep, check out my article “<a href="https://www.smashingmagazine.com/2021/12/how-price-projects-manage-scope-screep/">How To Price Projects And Manage Scope Creep</a>.”</p>

<p>This approach sounds great in theory, but you might be wondering how clients typically react to it. Let’s address some common objections and how to handle them.</p>

<div class="partners__lead-place"></div>

<h2 id="dealing-with-client-objections">Dealing with Client Objections</h2>

<p>You may encounter resistance to this approach, especially in formal bid processes where clients are used to receiving comprehensive fixed-price quotes. Here’s how to handle common objections:</p>

<blockquote>“We need a fixed price for the entire project.”</blockquote>

<p>Provide an overall estimate based on their initial scope, but emphasize that this is a rough figure. Use your sub-project process as a selling point, explaining how it actually provides more accurate pricing and better results. Highlight how inaccurate other agency quotes are likely to be and warn about potential scope discussions later.</p>

<blockquote>“This seems more complicated than other proposals we've received.”</blockquote>

<p>Acknowledge that it may seem more complex initially, but explain how this approach actually simplifies the process in the long run. Emphasize that it reduces risk and increases the likelihood of a successful outcome.</p>

<blockquote>“We don't have time for all these phases.”</blockquote>

<p>Explain that while it may seem like more steps, this approach often leads to faster overall delivery because it reduces rework and ensures everyone is aligned at each stage.</p>

<blockquote>“How do we compare your proposal to others if you’re not giving us a fixed price?”</blockquote>

<p>Emphasize that the quality and implementation of what agencies quote for can vary wildly. Your approach ensures they get exactly what they need, not just what they think they want at the outset. Encourage them to consider the long-term value and reduced risk, not just the initial price tag.</p>

<blockquote>“We’re not comfortable discussing our budget upfront.”</blockquote>

<p>Use the real estate analogy to explain why discussing the budget upfront is crucial. Just as a real estate agent needs to know your budget to show you appropriate properties, you need to understand their investment appetite to propose suitable solutions.</p>

<p>By adopting this approach to pricing, you can create a more collaborative relationship with your clients, reduce the risk for both parties, and ultimately deliver better results.</p>

<p>Remember,</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aPricing%20isn%e2%80%99t%20just%20about%20numbers%20%e2%80%94%20it%e2%80%99s%20about%20setting%20the%20foundation%20for%20a%20successful%20project%20and%20a%20positive%20client%20relationship.%0a&url=https://smashingmagazine.com%2f2024%2f08%2fpricing-projects-freelancer-agency-owner%2f">
      
Pricing isn’t just about numbers — it’s about setting the foundation for a successful project and a positive client relationship.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>By being transparent about your process and focusing on delivering value within the client’s budget, you’ll set yourself apart in a crowded market.</p>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Anna Rátkai</author><title>When Friction Is A Good Thing: Designing Sustainable E-Commerce Experiences</title><link>https://www.smashingmagazine.com/2024/07/designing-sustainable-e-commerce-experiences/</link><pubDate>Wed, 10 Jul 2024 13:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2024/07/designing-sustainable-e-commerce-experiences/</guid><description>Today, UX design contributes to the problem of encouraging and facilitating excessive consumption through persuasive e-commerce practices and designing for companies with linear and exploitative business models. Anna Rátkai explores practical steps we can take to reduce material consumption and the massive environmental impact that comes along with it by designing mindful shopping experiences.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2024/07/designing-sustainable-e-commerce-experiences/" />
              <title>When Friction Is A Good Thing: Designing Sustainable E-Commerce Experiences</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>When Friction Is A Good Thing: Designing Sustainable E-Commerce Experiences</h1>
                  
                    
                    <address>Anna Rátkai</address>
                  
                  <time datetime="2024-07-10T13:00:00&#43;00:00" class="op-published">2024-07-10T13:00:00+00:00</time>
                  <time datetime="2024-07-10T13:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>As lavish influencer lifestyles, wealth flaunting, and hauls dominate social media feeds, we shouldn’t be surprised that excessive consumption has become the default way of living. We see closets filled to the brim with cheap, throw-away items and having the latest gadget arsenal as signifiers of an aspirational life.</p>

<p>Consumerism, however, is more than a cultural trend; it’s the backbone of our economic system. Companies eagerly drive excessive consumption as an increase in sales is directly connected to an increase in profit.</p>

<p>While we learned to accept this level of material consumption as normal, we need to be reminded of the <strong>massive environmental impact</strong> that comes along with it. As Yvon Chouinard, founder of Patagonia, writes in a <a href="https://www.nytimes.com/2023/11/23/opinion/patagonia-environnment-fast-fashion.html?searchResultPosition=9">New York Times article</a>:</p>

<blockquote>“Obsession with the latest tech gadgets drives open pit mining for <a href="https://www.cnet.com/tech/mobile/the-metals-inside-your-iphone-are-more-precious-than-you-thought-heres-why/">precious minerals</a>. Demand for rubber continues to <a href="https://www.bbc.com/future/article/20210308-rubber-the-wonder-material-we-are-running-out-of">decimate rainforests</a>. Turning these and other raw materials into final products releases <a href="https://www.weforum.org/impact/carbon-footprint-manufacturing-industry/">one-fifth</a> of all carbon emissions.”<br /><br />&mdash; Yvon Chouinard</blockquote>

<p>In the paper, <a href="https://www.researchgate.net/publication/342311078_Scientists'_warning_on_affluence">Scientists’ Warning on Affluence</a>, a group of researchers concluded that reducing material consumption today is <em>essential</em> to avoid the worst of the looming climate change in the coming years. This need for lowering consumption is also reflected in the UN’s Sustainability goals, specifically Goal 17, <a href="https://www.un.org/sustainabledevelopment/sustainable-consumption-production/">“Ensuring sustainable consumption and production patterns”</a>.</p>

<p>For a long time, design has been a tool for <a href="https://medium.com/impactology1/consumer-engineering-the-origins-of-buying-more-than-we-need-2650573f28db">consumer engineering</a> by for example, designing products with artificially limited useful life (<a href="https://en.wikipedia.org/wiki/Planned_obsolescence">planned obsolescence</a>) to ensure continuous consumption. And if we want to understand specifically UX design’s role in influencing how much and what people buy, we have to take a deeper look at pushy online shopping experiences.</p>

<h2 id="design-shaping-shopping-habits-the-problem-with-current-e-commerce-design">Design Shaping Shopping Habits: The Problem With Current E-commerce Design</h2>

<p>Today, most online shopping experiences are designed with <a href="https://uxdesign.cc/the-negative-impact-of-persuasive-design-dd57eb88834b">persuasion</a>, <a href="https://www.bbc.com/worklife/article/20240426-temu-gamification-marketing">gamification</a>, nudging and even <a href="https://www.deceptive.design/types/fake-scarcity">deception</a> to get unsuspecting users to add more things to their basket.</p>

<p>There are “Hurry, only one item left in stock” type messages and countdown clocks that exploit well-known cognitive biases to nudge users to make impulse purchase decisions. As <a href="https://www.shopify.com/blog/using-scarcity-urgency-increase-sales">Michael Keenan explains</a>,</p>

<blockquote>“The scarcity bias says that humans place a higher value on items they believe to be rare and a lower value on things that seem abundant. Scarcity marketing harnesses this bias to make brands more desirable and increase product sales. Online stores use limited releases, flash sales, and countdown timers to induce FOMO &mdash; the fear of missing out &mdash; among shoppers.”<br /><br />&mdash; Michael Keenan</blockquote>

<p>To make buying things quick and effortless, we remove friction from the checkout process, for example, with the one-click-buy button. As practitioners of user-centered design, we might implement the button and say: thanks to this frictionless and easy checkout process, we <a href="https://www.business.com/articles/one-click-purchasing-how-click-to-buy-is-revolutionizing-ecommerce/">improved the customer experience</a>. Or did we just do a huge disservice to our users?</p>

<p>Gliding through the checkout process in seconds leaves no time for the user to ask, “Do I actually want this?” or “Do I have the money for this?”. Indeed, <strong>putting users on autopilot</strong> to make thoughtless decisions is the goal.</p>

<p>As a <a href="http://business.com">business.com article</a> says: “Click to buy helps customers complete shopping within seconds and <em>reduces the amount of time they have to reconsider their purchase</em>.”</p>

<p>Amanda Mull <a href="https://www.theatlantic.com/technology/archive/2024/04/americans-peak-stuff-shopping-temu-shein/678224/">writes from a user perspective</a> about how it has become “too easy to buy stuff you don’t want”:</p>

<blockquote>“The order took maybe 15 seconds. I selected my size and put the shoes in my cart, and my phone automatically filled in my login credentials and added my new credit card number. You can always return them, I thought to myself as I tapped the “Buy” button. [...] I had completed some version of the online checkout process a million times before, but I never could remember it being quite so <strong>spontaneous and thoughtless</strong>. If it’s going to be that easy all the time, I thought to myself, <strong>I’m cooked</strong>.”<br /><br />&mdash; Amanda Mull</blockquote>

<p>This quote also highlights that this thoughtless consumption is not only harmful to the environment but also to the very same user we say we center our design process around. The rising popularity of <a href="https://www.nytimes.com/2022/12/29/your-money/buy-now-pay-later-loans.html">buy-now-pay-later services</a>, <a href="https://www.fool.com/the-ascent/research/credit-card-debt-statistics/">credit card debt</a>, and personal finance gurus to help “<a href="https://overcomingoverspending.com/">Overcoming Overspending</a>” are indicators that people are spending more than they can afford, a huge source of stress for many.</p>

<p>The one-click-buy button is not about improving user experience but building an environment where users are “<a href="https://www.business.com/articles/one-click-purchasing-how-click-to-buy-is-revolutionizing-ecommerce/">more likely to buy more and buy often</a>.” If we care to put this bluntly, <strong>frictionless and persuasive e-commerce design is not user-centered but business-centered design</strong>.</p>

<p>While it is not unusual for design to be a tool to <a href="https://www.smashingmagazine.com/2009/04/design-to-sell-12-tips-to-help-your-website-convert/">achieve business goals</a>, we, designers, should be clear about <strong>who we are serving and at what cost</strong> with the power of design. To reckon with our impact, first, we have to understand the source of power we yield &mdash; the power asymmetry between the designer and the user.</p>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p><strong>Web forms</strong> are at the center of every meaningful interaction. Meet Adam Silver&rsquo;s <strong><a href="https://www.smashingmagazine.com/printed-books/form-design-patterns/">Form Design Patterns</a></strong>, a practical guide to <strong>designing and building forms</strong> for the web.</p>
<a data-instant href="https://www.smashingmagazine.com/printed-books/form-design-patterns/" class="btn btn--green btn--large" style="">Jump to table of contents&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="https://www.smashingmagazine.com/printed-books/form-design-patterns/" class="feature-panel-image-link">
<div class="feature-panel-image"><picture><source type="image/avif" srcSet="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e57b41-b7f1-4ae3-886a-806cce580ef9/form-design-patterns-shop-image-1-1.avif" />
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51e0f837-d85d-4b28-bfab-1c9a47f0ce33/form-design-patterns-shop-image.png"
    alt="Feature Panel"
    width="481"
    height="698"
/>
</picture>
</div>
</a>
</div>
</aside>
</div>

<h2 id="power-asymmetry-between-user-and-designer">Power Asymmetry Between User And Designer</h2>

<p>Imagine a scale: on one end sits the designer and the user on the other. Now, let’s take an inventory of the sources of power each party has in their hands in an online shopping situation and see how the scale balances.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/1-scale-user-designer-balance.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="358"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/1-scale-user-designer-balance.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/1-scale-user-designer-balance.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/1-scale-user-designer-balance.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/1-scale-user-designer-balance.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/1-scale-user-designer-balance.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/1-scale-user-designer-balance.png"
			
			sizes="100vw"
			alt="A scale in balance: on one end sits the designer, and on the other, the user"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/1-scale-user-designer-balance.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="designers">Designers</h3>

<p>Designers are equipped with knowledge about psychology, biases, nudging, and persuasion techniques. If we don’t have the time to learn all that, we can reach for an out-of-the-box solution that uses those exact psychological and behavioral insights. For example, <a href="https://www.nudgify.com/woocommerce-social-proof-plugin/">Nudgify</a>, a Woocommerce integration, promises to help “you get more sales and reduce shopping cart abandonment by creating Urgency and removing Friction.”</p>

<p><a href="https://conffab.com/presentation/the-business-model-is-the-grid/?gl=3tzzxxHLYaqb">Erika Hall</a> puts it this way: “When you are designing, you are making choices on behalf of other people.” We even have a word for this: <a href="https://thedecisionlab.com/reference-guide/psychology/choice-architecture">choice architecture</a>. Choice architecture refers to the deliberate crafting of decision-making environments. By subtly shaping how options are presented, choice architecture influences individual decision-making, often without their explicit awareness.</p>

<p>On top of this, we also collect funnel metrics, behavioral data, and A/B test things to make sure our designs work as intended. In other words, we <strong>control the environment</strong> where the user is going to make decisions, and we are knowledgeable about how to tweak it in a way to encourage the decisions <em>we</em> want the user to make. Or, as Vitaly Friedman says in <a href="https://www.smashingmagazine.com/2022/04/boosting-ux-with-design-kpis/">one of his articles</a>:</p>

<blockquote>“We’ve learned how to craft truly beautiful interfaces and well-orchestrated interactions. And we’ve also learned how to encourage action to meet the project’s requirements and drive business metrics. In fact, we can make pretty much anything work, really.”<br /><br />&mdash; Vitaly Friedman</blockquote>

<h3 id="user">User</h3>

<p>On the other end of the scale, we have the user who is usually unaware of our persuasion efforts, oblivious about their own biases, let alone understanding when and how those are triggered.</p>

<p>Luckily, regulation around <a href="https://www.deceptive.design/laws">Deceptive Design</a> on e-commerce is increasing. For example, companies are <a href="https://europa.eu/youreurope/citizens/consumers/unfair-treatment/unfair-commercial-practices/index_en.htm">not allowed to use fake countdown timers</a>. However, these regulations are not universal, and enforcement is lax, so often users are still not protected by law against pushy shopping experiences.</p>

<p>After this overview, let’s see how the scale balances:</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/2-scale-asymmetry-between-designer-user.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="357"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/2-scale-asymmetry-between-designer-user.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/2-scale-asymmetry-between-designer-user.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/2-scale-asymmetry-between-designer-user.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/2-scale-asymmetry-between-designer-user.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/2-scale-asymmetry-between-designer-user.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/2-scale-asymmetry-between-designer-user.png"
			
			sizes="100vw"
			alt="A scale where the designer is heavier than a user with such things as behavior science, usability test, and so on"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/2-scale-asymmetry-between-designer-user.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>When we understand this power asymmetry between designer and user, we need to ask ourselves:</p>

<ul>
<li>What do I use my power for?</li>
<li>What kind of “real life” user behavior am I designing for?</li>
<li>What is the impact of the users’ behavior resulting from my design?</li>
</ul>

<p>If we look at e-commerce design today, more often than not, the unfortunate answer is mindless and excessive consumption.</p>

<p>This needs to change. We need to use the power of design to encourage sustainable user behavior and thus move us toward a sustainable future.</p>

<h2 id="what-is-sustainable-e-commerce">What Is Sustainable E-commerce?</h2>

<p>The discussion about <a href="https://www.bigcommerce.com/articles/ecommerce/sustainable-ecommerce/">sustainable e-commerce</a> usually revolves around recyclable packaging, green delivery, and making the site energy-efficient with <a href="https://www.smashingmagazine.com/2023/07/sustainable-design-toolkits-and-resources/">sustainable UX</a>. All these actions and angles are important and should be part of our design process, but <strong>can we build a truly sustainable e-commerce if we are still encouraging unsustainable user behavior by design?</strong></p>

<p>To achieve truly sustainable e-commerce, designers must shift from encouraging impulse purchases to supporting thoughtful decisions. Instead of using persuasion, gamification, and deception to boost sales, we should use our design skills to provide users with the time, space, and information they need to make mindful purchase decisions. I call this approach <a href="https://www.bekindcommerce.com/">Kind Commerce</a>.</p>

<div class="partners__lead-place"></div>

<h2 id="but-the-business">But The Business?!</h2>

<p>While the intent of designing Kind Commerce is noble, we have a bitter reality to deal with: we live and work in an economic system based on perpetual growth. We are often measured on achieving KPIs like “increased conversion” or “<a href="https://www.smashingmagazine.com/2014/10/reducing-abandoned-shopping-carts/">reduced cart abandonment rate</a>”. We are expected to use UX to achieve aggressive sales goals, and often, we are not in a position to change that.</p>

<p>It is a frustrating situation to be in because we can argue that the system needs to change, so it is possible for UXers to move away from persuasive e-commerce design. However, system change won’t happen unless we push for it. A catch-22 situation. So, what are the things we could do today?</p>

<ul>
<li>Pitch Kind Commerce as a way to build strong customer relationships that will have <strong>higher lifetime value</strong> than the quick buck we would make with persuasive tricks.</li>
<li><strong>Highlight reduced costs.</strong> As <a href="https://www.smashingmagazine.com/2022/04/boosting-ux-with-design-kpis/">Vitaly writes</a>, using deceptive design can be costly for the company:</li>
</ul>

<blockquote>“Add to basket” is beautifully highlighted in green, indicating a way forward, with insurance added in automatically. That’s <strong>a clear dark pattern</strong>, of course. The design, however, is likely to drive business KPIs, i.e., increase a spend per customer. But it will also <strong>generate a wrong purchase</strong>. The implications of it for businesses might be severe and irreversible &mdash; with plenty of complaints, customer support inquiries, and high costs of processing returns.”<br /><br />&mdash; Vitaly Friedman</blockquote>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/03-design-kpis-shoes.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="634"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/03-design-kpis-shoes.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/03-design-kpis-shoes.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/03-design-kpis-shoes.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/03-design-kpis-shoes.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/03-design-kpis-shoes.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/03-design-kpis-shoes.jpg"
			
			sizes="100vw"
			alt="Mock-up page for sneakers with hidden costs in the “Add to basket” button"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/03-design-kpis-shoes.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Helping users find the right products and make decisions they won’t regret can help the company save all the resources they would need to spend on dealing with complaints and returns. On top of this, the company can save millions of dollars by avoiding lawsuits for unfair commercial practices.</p>

<ul>
<li>Highlight the increasing customer demand for sustainable companies.</li>
<li>If you feel that your company is not open to change practices and you are frustrated about the dissonance between your day job and values, consider looking for a position where you can support a company or a cause that aligns with your values.</li>
</ul>

<h2 id="a-few-principles-to-design-mindful-e-commerce">A Few Principles To Design Mindful E-commerce</h2>

<h3 id="add-friction">Add Friction</h3>

<p>I know, I know, it sounds like an insane proposition in a profession obsessed with eliminating friction, but hear me out. Instead of “helping” users glide through the checkout process with one-click buy buttons, adding a step to review their order and give them a pause could help reduce unnecessary purchases. A positive reframing for this technique could be helpful to express our true intentions.</p>

<p>Instead of saying “adding friction,” we could say “adding a protective step”. Another example of “adding a protective step” could be getting rid of the “Quick Add” buttons and making users go to the product page to take a look at what they are going to buy. For example, <a href="https://organicbasics.com/">Organic Basics</a> doesn’t have a “Quick Add” button; users can only add things to their cart from the product page.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/4-fashion-nova-vs-organic-basics.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="554"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/4-fashion-nova-vs-organic-basics.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/4-fashion-nova-vs-organic-basics.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/4-fashion-nova-vs-organic-basics.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/4-fashion-nova-vs-organic-basics.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/4-fashion-nova-vs-organic-basics.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/4-fashion-nova-vs-organic-basics.png"
			
			sizes="100vw"
			alt="Two examples of checkout process: one with a “Quick Add” button, and another one without"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/4-fashion-nova-vs-organic-basics.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="inform">Inform</h3>

<p>Once we make sure users will visit product pages, we can help them make more informed decisions. We can be transparent about the social and environmental impact of an item or provide guidelines on how to care for the product to last a long time.</p>

<p>For example, <a href="https://www.asket.com/us">Asket</a> has a section called “Lifecycle” where they highlight how to care for, repair and recycle their products. There is also a “Full Transparency” section to inform about the cost and impact of the garment.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/5-asket-informed-decisions.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="407"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/5-asket-informed-decisions.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/5-asket-informed-decisions.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/5-asket-informed-decisions.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/5-asket-informed-decisions.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/5-asket-informed-decisions.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/5-asket-informed-decisions.png"
			
			sizes="100vw"
			alt="Asket product page with a “Full Transparency” and “Lifecycle” sections"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/5-asket-informed-decisions.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="design-calm-pages">Design Calm Pages</h3>

<p>Aggressive <a href="https://medium.com/user-experience-design-1/the-psychology-of-deceptive-discounting-when-h-m-is-the-example-of-responsible-design-we-put-60873b3b9eb4">landing pages</a> where everything is moving, blinking, modals popping up, 10 different discounts are presented are overwhelming, confusing and distracting, a fertile environment for impulse decisions.</p>

<p>Respect your user’s attention by designing pages that don’t raise their blood pressure to 180 the second they open them. No modals automatically popping up, no flashing carousels, and no discount dumping. Aim for static banners and display offers in a clear and transparent way. For example, H&amp;M shows only one banner highlighting a discount on their landing page, and that’s it. If a fast fashion brand like H&amp;M can design calm pages, there is no excuse why others couldn’t.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/6-busy-landing-page.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="355"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/6-busy-landing-page.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/6-busy-landing-page.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/6-busy-landing-page.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/6-busy-landing-page.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/6-busy-landing-page.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/6-busy-landing-page.png"
			
			sizes="100vw"
			alt="An example of an overwhelming landing page."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      An overwhelming landing page. (<a href='https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/6-busy-landing-page.png'>Large preview</a>)
    </figcaption>
  
</figure>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/7-hm-landing-page.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="338"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/7-hm-landing-page.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/7-hm-landing-page.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/7-hm-landing-page.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/7-hm-landing-page.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/7-hm-landing-page.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/7-hm-landing-page.png"
			
			sizes="100vw"
			alt="H&amp;M landing page"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      A calm landing page. (<a href='https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/7-hm-landing-page.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="be-honest-in-your-messaging">Be Honest In Your Messaging</h3>

<p>Fake urgency and social proof can not only <a href="https://www.washingtonpost.com/business/2023/11/21/fake-sale-deceptive-pricing/">get you fined for millions of dollars</a> but also <a href="https://www.nudgify.com/fake-social-proof/">can turn users away</a>. So simply do not add urgency messages and countdown clocks where there is no real deadline behind an offer. Don’t use fake social proof messages. Don’t say something has a limited supply when it doesn’t.</p>

<p>I would even take this a step further and recommend using persuasion sparingly, even if they are honest. Instead of overloading the product page with every possible persuasion method (urgency, social proof, incentive, assuming they are all honest), choose one yet impactful persuasion point.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/8-persuasive-dessign-page.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="447"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/8-persuasive-dessign-page.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/8-persuasive-dessign-page.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/8-persuasive-dessign-page.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/8-persuasive-dessign-page.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/8-persuasive-dessign-page.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/8-persuasive-dessign-page.png"
			
			sizes="100vw"
			alt="An example of a persuasive design page"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      <strong>Don’t do</strong>: Overfill the page with persuasion. (<a href='https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/8-persuasive-dessign-page.png'>Large preview</a>)
    </figcaption>
  
</figure>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/9-bare-hands.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="621"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/9-bare-hands.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/9-bare-hands.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/9-bare-hands.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/9-bare-hands.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/9-bare-hands.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/9-bare-hands.png"
			
			sizes="100vw"
			alt="Bare hands product page"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      <strong>Do</strong>: Bare Hands choose to focus on social proof. (<a href='https://files.smashing.media/articles/designing-sustainable-e-commerce-experiences/9-bare-hands.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h2 id="disclaimer">Disclaimer</h2>

<p>To make it clear, I’m not advocating for designing bad or cumbersome user experiences to obstruct customers from buying things. Of course, I want a delightful and easy way to buy things we <em>need</em>.</p>

<p>I’m also well aware that <strong>design is never neutral</strong>. We need to present options and arrange user flows, and whichever way we choose to do that will influence user decisions and actions.</p>

<p>What I’m advocating for is at least <strong>putting the user back in the center of our design process</strong>. We read earlier that users think it is “too easy to buy things you don’t need” and feel that the current state of e-commerce design is contributing to their excessive spending. Understanding this and calling ourselves user-centered, we ought to change our approach significantly.</p>

<p>On top of this, I’m advocating for expanding our perspective to consider the wider environmental and social impact of our designs and align our work with the move toward a sustainable future.</p>

<div class="partners__lead-place"></div>

<h2 id="mindful-consumption-beyond-e-commerce-design">Mindful Consumption Beyond E-commerce Design</h2>

<p>E-commerce design is a practical example of how design is a part of encouraging excessive, unnecessary consumption today. In this article, we looked at what we can do on this practical level to help our users shop more mindfully. However, transforming online shopping experiences is only a part of a bigger mission: moving away from a culture where excessive consumption is the aspiration for customers and the ultimate goal of companies.</p>

<p>As Cliff Kuang says in <a href="https://www.fastcompany.com/91087520/designers-helped-get-us-into-the-climate-crisis-can-they-help-get-us-out">his article</a>,</p>

<blockquote>“The designers of the coming era need to think of themselves as inventing a new way of living that doesn’t privilege consumption as the only expression of cultural value. At the very least, we need to start framing consumption differently.”<br /><br />&mdash; Cliff Kuang</blockquote>

<p>Or, as Manuel Lima puts in his book, <a href="https://mitpress.mit.edu/9780262047630/the-new-designer/"><em>The New Designer</em></a>,</p>

<blockquote>“We need the design to refocus its attention where it is needed &mdash; not in creating things that harm the environment for hundreds of years or in selling things we don’t need in a continuous push down the sales funnel but, instead, in helping people and the planet solve real problems. [...] Designs’s ultimate project is to reimagine how we produce, deliver, consume products, physical or digital, to rethink the existing business models.”<br /><br />&mdash; Manuel Lima</blockquote>

<p>So buckle up, designers, we have work to do!</p>

<h2 id="to-sum-it-up">To Sum It Up</h2>

<p>Today, design is part of the problem of encouraging and facilitating excessive consumption through persuasive e-commerce design and through designing for companies with linear and exploitative business models. For a liveable future, we need to change this. On a tactical level, we need to start <strong>advocating and designing mindful shopping experiences</strong>, and on a strategic level, we need to use our knowledge and skills to <strong>elevate sustainable businesses</strong>.</p>

<p>I’m not saying that it is going to be an easy or quick transition, but the best time to start is now. In a dire state of need for sustainable transformation, designers with power and agency can’t stay silent or continue proliferating the problem.</p>

<blockquote>“As designers, we need to see ourselves as gatekeepers of what we are bringing into the world and what we choose not to bring into the world. Design is a craft with responsibility. The responsibility to help create a better world for all.”<br /><br />&mdash; Mike Monteiro</blockquote>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Talke Hoppmann-Walton</author><title>Building A User Segmentation Matrix To Foster Cross-Org Alignment</title><link>https://www.smashingmagazine.com/2024/05/building-user-segmentation-matrix-foster-cross-org-alignment/</link><pubDate>Fri, 17 May 2024 17:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2024/05/building-user-segmentation-matrix-foster-cross-org-alignment/</guid><description>Many organizations prioritize internal structures and services over customer-centricity, hindering effective decision-making. Through a case study, Talke Hoppmann-Walton advocates for a shift towards an outside-in perspective and proposes the use of a user segmentation matrix to foster alignment across departments and prioritize customer needs. If you are an experienced product or UX professional or a team leader dealing with stakeholder management to drive the organization as a whole forward, this article provides you with a canvas for better decision-making and focus.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2024/05/building-user-segmentation-matrix-foster-cross-org-alignment/" />
              <title>Building A User Segmentation Matrix To Foster Cross-Org Alignment</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Building A User Segmentation Matrix To Foster Cross-Org Alignment</h1>
                  
                    
                    <address>Talke Hoppmann-Walton</address>
                  
                  <time datetime="2024-05-17T17:00:00&#43;00:00" class="op-published">2024-05-17T17:00:00+00:00</time>
                  <time datetime="2024-05-17T17:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>Do you recognize this situation? The marketing and business teams talk about their customers, and each team thinks they have the same understanding of the problem and what needs to be done. Then, they’re including the Product and UX team in the conversation around how to best serve a particular customer group and where to invest in development and marketing efforts. They’ve done their initial ideation and are trying to prioritize, but this turns into a long discussion with the <strong>different teams favoring different areas to focus on</strong>. Suddenly, an executive highlights that instead of this customer segment, there should be a much higher focus on an entirely different segment &mdash; and the whole discussion starts again.</p>

<p>This situation often arises when there is no joint-up understanding of the different customer segments a company is serving historically and strategically. And there is no shared understanding beyond using the same high-level terms. To reach this understanding, you need to dig deeper into segment definitions, goals, pain points, and jobs-to-be-done (JTBD) so as to enable the organization to make <strong>evidence-based decisions</strong> instead of having to rely on top-down prioritization.</p>

<p>The hardest part about doing the right thing for your user or customers (please note I’m aware these terms aren’t technically the same, but I’m using them interchangeably in this article so as to be useful to a wider audience) often starts inside your own company and getting different teams with diverging goals and priorities to agree on <em>where</em> to focus and <em>why</em>.</p>

<p>But how do you get there &mdash; thinking user-first AND ensuring teams are aligned and have a shared mental model of primary and secondary customer segments?</p>

<h2 id="personas-vs-segments">Personas vs Segments</h2>

<p>To explore that further, let’s take a brief look at the most commonly applied techniques to better understand customers and communicate this knowledge within organizations.</p>

<p>Two frequently employed tools are <em>user personas</em> and <em>user segmentation</em>.</p>

<p><strong>Product/UX (or non-demographic) personas</strong> aim to represent the characteristics and needs of a certain type of customer, as well as their motivations and experience. The aim is to illustrate an ideal customer and allow teams to empathize and solve different use cases. <strong>Marketing (or demographic) personas</strong>, on the other hand, traditionally focus on age, socio-demographics, education, and geography but usually don’t include needs, motivations, or other contexts. So they’re good for targeting but not great for identifying new potential solutions or helping teams prioritize.</p>

<p>In contrast to personas, user segments illustrate groups of customers with shared needs, characteristics, and actions. They are relatively high-level classifications, deliberately looking at a whole group of needs without telling a detailed story. The aim is to gain a broader overview of the wider market’s wants and needs.</p>

<p>Tony Ulwick, creator of the “jobs-to-be-done” framework, for example, creates <a href="https://strategyn.com/outcome-driven-innovation-process/market-segmentation-process/">outcome-based segmentations</a>, which are quite similar to what this article is proposing. Other types of segmentations include geographic, psychographic, demographic, or needs-based segmentations. What all segmentations, including the user segmentation matrix, have in common is that the <strong>segments are different from each other but don‘t need to be mutually exclusive</strong>.</p>

<p>As Simon Penny points out, <strong>personas and segments are tools for different purposes</strong>. While customer segments help us understand a marketplace or customer base, personas help us to understand more about the lived experience of a particular group of customers within that marketplace.</p>

<p>Both personas and segmentations have their applications, but this article argues that <strong>using a matrix will help you prioritize between the different segments</strong>. In addition, the key aspect here is the <strong>co-creation process</strong> that fosters understanding across departments and allows for more transparent decision-making. Instead of focusing only on the outcome, the process of getting there is what matters for alignment and collaboration across teams. Let’s dig deeper into how to achieve that.</p>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p>Meet <strong><a data-instant href="https://www.smashingconf.com/online-workshops/">Smashing Workshops</a></strong> on <strong>front-end, design &amp; UX</strong>, with practical takeaways, live sessions, <strong>video recordings</strong> and a friendly Q&amp;A. With Brad Frost, Stéph Walter and <a href="https://smashingconf.com/online-workshops/workshops">so many others</a>.</p>
<a data-instant href="smashing-workshops" class="btn btn--green btn--large" style="">Jump to the workshops&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="smashing-workshops" class="feature-panel-image-link">
<div class="feature-panel-image">
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="/images/smashing-cat/cat-scubadiving-panel.svg"
    alt="Feature Panel"
    width="257"
    height="355"
/>

</div>
</a>
</div>
</aside>
</div>

<h2 id="user-segmentation-matrix-101">User Segmentation Matrix: 101</h2>

<blockquote>At its core, the idea of the user segmentation matrix is meant to create a shared mental model across teams and departments of an organization to enable better decision-making and collaboration.</blockquote>

<p>And it does that by visualizing the relevance and differences between a company’s customer segments. Crucially, input into the matrix comes from across teams as the process of co-creation plays an essential part in getting to a shared understanding of the different segments and their relevance to the overall business challenge.</p>

<p>Additionally, this kind of matrix follows the principle of “just enough, not too much” to create meaning without going too deep into details or leading to confusion. It is about pulling together key elements from existing tools and methods, such as User Journeys or Jobs-to-be-done, and visualizing them in one place.</p>

<p>For a high-level first overview, see the matrix scaffolding below.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/1-matrix-scaffolding.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="600"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/1-matrix-scaffolding.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/1-matrix-scaffolding.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/1-matrix-scaffolding.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/1-matrix-scaffolding.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/1-matrix-scaffolding.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/1-matrix-scaffolding.png"
			
			sizes="100vw"
			alt="Visualization of the user segmentation matrix scaffolding"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Visualization of the user segmentation matrix scaffolding. (<a href='https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/1-matrix-scaffolding.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h2 id="case-study-getting-to-a-shared-mental-model-across-teams">Case Study: Getting To A Shared Mental Model Across Teams</h2>

<p>Let’s look at the problem through a case study and see how building a user segmentation matrix helped a global data products organization gain a much clearer view of its customers and priorities.</p>

<p>Here is some context. The organization was partly driven by NGO principles like societal impact and partly by economic concerns like revenue and efficiencies. Its primary source of revenue was raw data and data products, and it was operating in a B2B setting. Despite operating for several decades already, its maturity level in terms of user experience and product knowledge was low, while the amount of different data outputs and services was high, with a whole bouquet of bespoke solutions for individual clients. The level of bespoke solutions that had to be maintained and had grown organically over time had surpassed the “featuritis” stage and turned utterly unsustainable.</p>

<p>And you probably guessed it: The business focus had traditionally been “What can we offer and sell?” instead of “What are our customers trying to solve?”</p>

<p>That means there were essentially two problems to figure out:</p>

<ol>
<li>Help executives and department leaders from Marketing through Sales, Business, and Data Science <strong>see the value of customer-first product thinking</strong>.</li>
<li><strong>Establish a shared mental model of the key customer segments</strong> to start prioritizing with focus and reduce the completely overgrown service offering.</li>
</ol>

<p>For full disclosure, here’s a bit about my role in this context: I was there in a fractional product leader role at first, after running a discovery workshop, which then developed into product strategy work and eventually a full evaluation of the product portfolio according to user &amp; business value.</p>

<h2 id="approach">Approach</h2>

<p>So how did we get to that outcome? Basically, we spent an afternoon filling out a table with different customer segments, presented it to a couple of stakeholders, and everyone was happy &mdash; THE END. You can stop reading…</p>

<p>Or not, because from just a few initial conversations and trying to find out if there were any existing personas, user insights, or other customer data, it became clear that there was no shared mental model of the organization’s customer segments.</p>

<p>At the same time, the Business and Account management teams, especially, had a lot of contact with new and existing customers and knew the market and competition well. And the Marketing department had started on personas. However, they were not widely used and weren’t able to act as that shared mental model across different departments.</p>

<p>So, instead of thinking customer-first the organization was operating “inside-out first,” based on the services they offered. With the user segmentation matrix, we wanted to change this perspective and <strong>align all teams around one shared canvas to create transparency around user and business priorities</strong>.</p>

<div class="partners__lead-place"></div>

<h2 id="but-how-to-proceed-quickly-while-taking-people-along-on-the-journey">But How To Proceed Quickly While Taking People Along On The Journey?</h2>

<p>Here’s the approach we took:</p>

<h4 id="1-gather-all-existing-research">1. Gather All Existing Research</h4>

<p>First, we gathered all user insights, customer feedback, and data from different parts of the organization and mapped them out on a big board (see below). Initially, we really tried to map out all existing documentation, including links to in-house documents and all previous attempts at separating different user groups, analytics data, revenue figures, and so on.</p>

<p>The key here was to speak to people in different departments to understand how they were currently thinking about their customers and to include the terms and documentation they thought most relevant without giving them a predefined framework. We used the dimensions of the matrix as a conversation guide, e.g., asking about their definitions for key user groups and what makes them distinctly different from others.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/2-discovery-board.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="388"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/2-discovery-board.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/2-discovery-board.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/2-discovery-board.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/2-discovery-board.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/2-discovery-board.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/2-discovery-board.png"
			
			sizes="100vw"
			alt="Discovery Board feeding into the User segmentation"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Discovery Board feeding into the User segmentation. (<a href='https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/2-discovery-board.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h4 id="2-start-the-draft-scaffolding">2. Start The Draft Scaffolding</h4>

<p>Secondly, we created the draft matrix with assumed segments and some core elements that have proven useful in different UX techniques.</p>

<p>In this step, we started to make sense of all the information we had collected and gave the segments “draft labels” and “draft definitions” based on input from the teams, but creating this first draft version within the small working group. The aim was to <strong>reduce complexity</strong>, <strong>settle on simple labels</strong>, and <strong>introduce primary vs secondary groups</strong> based on the input we received.</p>

<p>We then made sure to run this summarized draft version past the stakeholders for feedback and amends, always calling out the DRAFT status to ensure we had buy-in across teams before removing that label. In addition to interviews, we also provided direct access to the workboard for stakeholders to contribute asynchronously and in their own time and to give them the option to discuss with their own teams.</p>

<h4 id="3-refine">3. Refine</h4>

<p>In the next step, we went through several rounds of “joint sense-making” with stakeholders from across different departments. At this stage, we started coloring in the scaffolding version of the matrix with more and more detail. We also asked stakeholders to review the matrix as a whole and comment on it to make sure the different business areas were on board and to see the different priorities between, e.g., primary and secondary user groups due to segment size, pain points, or revenue numbers.</p>

<h4 id="4-prompt">4. Prompt</h4>

<p>We then promoted specifically for insights around segment definitions, pain points, goals, jobs to be done, and defining differences to other segments. Once the different labels and the sorting into primary versus secondary groups were clear, we tried to make sure that we had similar types of information per segment so that it would be easy to compare different aspects across the matrix.</p>

<h4 id="5-communicate">5. Communicate</h4>

<p>Finally, we made sure the core structure reached different levels of leadership. While we made sure to include senior stakeholders in the process throughout, this step was essential prior to circulating the matrix widely across the organization.</p>

<p>However, due to the previous steps, we had gone through, at this point, we were able to assure senior leadership that their teams had contributed and reviewed several times, so getting that final alignment was easy.</p>

<p>We did this in a team of two external consultants and three in-house colleagues, who conducted the interviews and information gathering exercises in tandem with us. Due to the size and global nature of the organization and various different time zones to manage, it took around 3 weeks of effort, but 3 months in time due to summer holidays and alignment activities. So we did this next to other work, which allowed us to be deeply plugged into the organization and avoid blind spots due to having both internal and external perspectives.</p>

<p>Building on in-house advocates with deep organizational knowledge and subject-matter expertise was a key factor and helped bring the organization along much better than purely external consultants could have done.</p>

<h2 id="user-segmentation-matrix-key-ingredients">User Segmentation Matrix: Key Ingredients</h2>

<p>So, what are the dimensions we included in this mapping out of primary and secondary user segments?</p>

<p>The dimensions we used were the following:</p>

<ol>
<li><strong>Segment definition</strong><br />
<em>Who is this group?</em><br />
Define it in a simple, straightforward way so everyone understands &mdash; NO acronyms or abbreviations. Further information to include that’s useful if you have it: the size of the segment and associated revenue.</li>
<li><strong>Their main goals</strong><br />
<em>What are their main goals?</em><br />
Thinking outside-in and from this user groups perspective these would be at a higher level than the specific JTBD field, big picture and longer term.</li>
<li><strong>What are their “<a href="https://jobs-to-be-done.com/the-jobs-to-be-done-canvas-f3f784ad6270">Jobs-to-be-done</a>”?</strong><br />
Define the key things this group needs in order to get their own work done (whether that’s currently available in your service or not; if you don’t know this, it’s time for some discovery). Please note this is not a full JTBD mapping, but instead seeks to call out exemplary practical tasks.</li>
<li><strong>How are they different from other segments?</strong><br />
Segments should be clearly different in their needs. If they’re too similar, they might not be a separate group.</li>
<li><strong>Main pain points</strong><br />
<em>What are the pain points for each segment? What issues are they currently experiencing with your service/product?</em> Note the recurring themes.</li>
<li><strong>Key contacts in the organization</strong><br />
<em>Who are the best people holding knowledge about this user segment?</em><br />
Usually, these would be the interview partners who contributed to the matrix, and it helps to not worry too much about ownership or levels here; it could be from any department, and often, the Business or Product org are good starting points.</li>
</ol>

<p>This is an example of a user segmentation matrix:</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/3-user-segmentation-matrix.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="514"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/3-user-segmentation-matrix.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/3-user-segmentation-matrix.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/3-user-segmentation-matrix.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/3-user-segmentation-matrix.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/3-user-segmentation-matrix.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/3-user-segmentation-matrix.png"
			
			sizes="100vw"
			alt="An example of a user segmentation matrix"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Separating out primary & secondary user segments and providing key information in one space to share across the organization. (<a href='https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/3-user-segmentation-matrix.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h2 id="outcomes-learning">Outcomes &amp; Learning</h2>

<p>What we found in this work is that <strong>seeing all user segments mapped out next to each other helped focus the conversation and create a shared mental model that switched the organization’s perspective to outside-in and customer-first</strong>.</p>

<p>Establishing the different user segment names and defining primary versus secondary segments created transparency, focus, and a shared understanding of priorities.</p>

<p>Building this matrix based on stakeholder interviews and existing user insights while keeping the labeling in DRAFT mode, we encouraged feedback and amends and helped everyone feel part of the process. So, rather than being a one-time set visualization, the key to creating value with this matrix is to <strong>encourage conversation and feedback loops</strong> between teams and departments.</p>

<p>In our case, we made sure that every stakeholder (at different levels within the organization, including several people from the executive team) had seen this matrix at least twice and had the chance to input. Once we then got to the final version, we were sure that we had an agreement on the terminology, issues, and priorities.</p>

<p>Below is the real case study example (with anonymized inputs):</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/4-user-segmentation-matrix-final-version.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="533"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/4-user-segmentation-matrix-final-version.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/4-user-segmentation-matrix-final-version.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/4-user-segmentation-matrix-final-version.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/4-user-segmentation-matrix-final-version.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/4-user-segmentation-matrix-final-version.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/4-user-segmentation-matrix-final-version.png"
			
			sizes="100vw"
			alt="A final version of a user segmentation matrix with anonymized inputs"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Final version with anonymized inputs. (<a href='https://files.smashing.media/articles/building-user-segmentation-matrix-foster-cross-org-alignment/4-user-segmentation-matrix-final-version.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h2 id="takeaways-and-what-to-watch-out-for">Takeaways And What To Watch Out For</h2>

<p>So what did this approach help us achieve?</p>

<ol>
<li>It created <strong>transparency</strong> and helped the Sales and Business teams understand how their asks would roughly be prioritized &mdash; seeing the other customer segments in comparison (especially knowing the difference between primary vs secondary segments).</li>
<li>It shifted the thinking to <strong>customer-first</strong> by providing an overview for the executive team (and everyone else) to start thinking about customers rather than business units and see new opportunities more clearly.</li>
<li>It highlighted the need to <strong>gather more customer insights and better performance data</strong>, such as revenue per segment, more detailed user tracking, and so on.</li>
</ol>

<p>In terms of the challenges we faced when conducting and planning this work, there are a few things to watch out for:</p>

<p>We found that due to the size and global nature of the organization, it took several rounds of feedback to align with all stakeholders on the draft versions. So, <strong>the larger the size of your organization, the more buffer time to include</strong> (or the ability to change interview partners at short notice).</p>

<p>If you’re planning to do this in a startup or mid-sized organization, especially if they’ve got the relevant information available, you might need far less time, although it will still make sense to carefully select the contributors.</p>

<p>Having in-house advocates who actively contributed to the work and conducted interviews was a real benefit for alignment and getting buy-in across the organization, especially when things started getting political.</p>

<p>Gathering information from Marketing, Product, Business, Sales and Leadership and sticking with their terms and definitions initially was crucial, so everyone felt their inputs were heard and saw it reflected, even if amended, in the overall matrix.</p>

<p>And finally, <strong>a challenge that’s not to be underestimated is the selection of those asked to input</strong> &mdash; where it’s a tightrope walk between speed and inclusion.</p>

<p>We found that a “snowball system” worked well, where we initially worked with the C-level sponsor to define the crucial counterparts at the leadership level and have them name 3-4 leads in their organization, looking after different parts of the organization. These leaders were asked for their input and their team’s input in interviews and through asynchronous access to the joint workboard.</p>

<div class="partners__lead-place"></div>

<h2 id="what-s-in-it-for-you">What’s In It For You?</h2>

<p>To summarize, the key benefits of creating a user segmentation matrix in your organization are the following:</p>

<ul>
<li><strong>Thinking outside-in and user-first.</strong><br />
Instead of thinking this is what you offer, your organization starts to think about solving real customer problems &mdash; the matrix is your GPS view of your market (but like any GPS system, don’t forget to update it occasionally).</li>
<li><strong>Clarity and a shared mental model.</strong><br />
Everyone is starting to use the same language, and there’s more clarity about what you offer per customer segment. So, from Sales through to Business and Product, you’re speaking <strong>to users</strong> and their needs instead of talking about <strong>products</strong> and <strong>services</strong> (or even worse, your in-house org structure). Shared clarity drastically reduces meeting and decision time and allows you to do more impactful work.</li>
<li><strong>Focus, and more show than tell.</strong><br />
Having a matrix helps differentiate between primary, secondary, and other customer segments and visualizes these differences for everyone.</li>
</ul>

<h2 id="when-not-to-use-it">When Not To Use It</h2>

<p>If you already have a clearly defined set of customer segments that your organization is in agreement on and working towards &mdash; good for you; you won’t need this and can rely on your existing data.</p>

<p>Another case where you will likely not need this full overview is when you’re dealing with a very specific customer segment, and there is good alignment between the teams serving this group in terms of focus, priorities, and goals.</p>

<p>Organizations that will see the highest value in this exercise are those who are not yet thinking outside-in and customer-first and who still have a traditional approach, starting from their own services and dealing with conflicting priorities between departments.</p>

<h2 id="next-steps">Next Steps</h2>

<p>And now? You’ve got your beautiful and fully aligned customer segmentation matrix ready and done. What’s next? In all honesty, this work is never done, and this is just the beginning.</p>

<p><strong>If you have been struggling with creating an outside-in perspective in your organization</strong>, the key is to make sure that it gets communicated far and wide.</p>

<p>For example, make sure to get your executive sponsors to talk about it in their rounds, do a road show, or hold open office hours where you can present it to anyone interested and give them a chance to ask questions. Or even better, present it at the next company all-hands, with the suggestion to start building up an insights library per customer segment.</p>

<p><strong>If this was really just the starting point to becoming more product-led</strong>, then the next logical step is to assess and evaluate the current product portfolio. The aim is to get clarity around which services or products are relevant for which customers. Especially in product portfolios plagued by “featuritis,” it makes sense to do a full audit, evaluate both user and business value, and clean out your product closet.</p>

<p><strong>If you’ve seen gaps and blind spots in your matrix</strong>, another next step would be to do some deep dives, customer interviews, and discovery work to fill those. And as you continue on that journey towards more customer-centricity, other tools from the UX and product tool kit, like mapping out user journeys and establishing a good tracking system and KPIs, will be helpful so you can start measuring customer satisfaction and continue to test and learn.</p>

<p>Like a good map, it helps you navigate and create a shared understanding across departments. And this is its primary purpose: <strong>getting clarity and focus across teams to enable better decision-making</strong>. The process of co-creating a living document that visualizes customer segments is at least as important here as the final outcome.</p>

<h3 id="further-reading">Further Reading</h3>

<ul>
<li><a href="https://pdf.sciencedirectassets.com/781788/1-s2.0-S2543925122X60087/1-s2.0-S2543925122000560/main.pdf?X-Amz-Security-Token=IQoJb3JpZ2luX2VjEPD%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJGMEQCIBYP4Ed9QlVyxG4V0Vz%2BCNsKjC9OHS8k6a%2Bsuekz7fDEAiBdzw6ftHp7oO3jlZqeJ1two8BHiiq3OMsy6mJ%2BQtMdnyqzBQgpEAUaDDA1OTAwMzU0Njg2NSIMX%2B5CKsCTZ%2F2ZAea8KpAFIAh9BazHKoaVVP%2Fv%2F%2F%2FXnL8cQC7k%2FlLshqzkn%2B0DOI4BtSyDxsY8RAJQfVps6NxuNU%2BgnqGulKfm2eEYFxCz%2FgG4E3oY3m7fKsQFzmFHl2IsvWyLUj0MkHN6t158cq9hNJyai0i6o%2FcbS3Z6bXTz%2BnTz2Z5S3HAXCVkQK9qUQkIohr2GFg3Q5MmhU9Lhf4wzb5CZ14DO27MzD9RijQybMpJk%2FhheLV1%2FsjIewQRv8SAmdrSNeU7OnujUISeo%2FjYsYPHJa0LUNnVmGTk%2F%2BVmgMdyVi4O9foQn9epsLY3Z4U4iw51NniNHsDqWvWYBHa8sjnTR4uHORk7goCZ1JJQJMkkLc2JWpuaTOkOPSd77SkxUThVZWyxHpcS9SfgAHluFhGR%2F%2FA7ohR17eD3NalPgVuS8%2FpTH88jtyk9T%2BUgQ%2F5betTvrQ081qrjD%2B5tlVXtwH9RAgRGnx0rJ%2BWFAO0IxWKi7AkRHSfOYZ9ZOPWXD1xeD6W003q6gNW%2FdGANK0y0irm1AViHpN5ZJgO9dvnKE2os54y2y%2BMmxR%2BT03AvYWpjx%2Bqs8CxkACCetfV2mvim7NoiNsUS%2Bh6oq5cy351twzh6EpmZ15sHfwIsDccUXeEk%2FN5xf66GyVATbURP0rcfnuxhFQrO%2BpbVw1aBwEVi2JVJHpz9fs%2FQahpRCvcP7DIgX9drovivGuYRxvAlPICXoOzJ0P5E0xH0Pkywad4NnSLIOQoSlItXmYn32Wl98AQL7wOo51nCIA12otlm5gs3%2FbVNJrxfU4iecYibhlTo0WR7Amjsy1WKqJqjFcNFXhJDXmapu0GAZwxRjerkr5wUlryScagzQt3rBJflk5HonrQJzLPAwIAcbP3W0FPyxVtEw4oLZsAY6sgFY4a6pPdx%2BuHsFtHG26Xh7f3uIfVspq7HutTfLfRiWf64CqrG4qoTOAP40JKCJSTwU9suAjVr8naEW6UksUxdsdQVdtt6CfkwQOhaAyfpsbo09AVKJt0iUGwBKmwm2kXHiJzqnt4THtdtTfSG7nPEkXl1qjLwppUthlsPUxgZKNEjUZxRz8EuD3JxKSkBxinCn58YijWWGSFvpedX8p6aYmN%2FCFTPPuYt0Mc%2Bw%2FH1mTB1g&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Date=20240410T090549Z&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Expires=300&amp;X-Amz-Credential=ASIAQ3PHCVTYW2UVYIBY%2F20240410%2Fus-east-1%2Fs3%2Faws4_request&amp;X-Amz-Signature=d55e8b8520025160a5970713ccfc82fef477d7af28a5b74fdc3b6d5afd816a08&amp;hash=43af5fdbf2fc2b733c5db5793289b2f3bac86e2d9b8b68fad04adbac4de1f448&amp;host=68042c943591013ac2b2430a89b270f6af2c76d8dfd086a07176afe7c76c2c61&amp;pii=S2543925122000560&amp;tid=spdf-5e9b4e71-4bf2-4b69-9bb5-aef8f062aaa0&amp;sid=0db6574c7581284fbb1b5be3388cac02cb22gxrqb&amp;type=client&amp;tsoh=d3d3LnNjaWVuY2VkaXJlY3QuY29t&amp;ua=020358565350565d075c&amp;rr=872193c8cc4d4534&amp;cc=de"><em>Data-Driven Personas for Enhanced User Understanding: Combining Empathy with Rationality for Better Insights to Analytics</em></a>, Bernard J. Jansen, Joni O. Salminen, Soon-Gyo Jung (Data and Information Management, 2020)</li>
<li>“<a href="https://adapty.io/blog/user-segmentation-guide/">Most Effective Ways To Segment Your Users</a>,” Ilia Lotarev (Adapty.io)</li>
<li>“<a href="https://uxdesign.cc/how-to-think-segmentation-from-day-1-f714df093ccb">The 6 Types Of User Segmentation And What They Mean For Your Product</a>,” Pavel Malos (UX Collective, Medium)</li>
<li>“<a href="https://uxmag.com/articles/understanding-users-by-going-beyond-personas-demographics-and-affinity-groups">Understanding Users By Going Beyond Personas, Demographics, And Affinity Groups</a>,” Kate Matesic (UX Magazine)</li>
<li>“<a href="https://uxdesign.cc/the-difference-between-customer-segmentation-and-customer-personas-4ea4d960e259">The Difference Between Customer Segmentation And Customer Personas</a>,” Simon Penny (UX Collective, Medium)</li>
</ul>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Chris Day</author><title>Transforming The Relationship Between Designers And Developers</title><link>https://www.smashingmagazine.com/2024/05/transforming-relationship-between-designers-developers/</link><pubDate>Wed, 15 May 2024 10:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2024/05/transforming-relationship-between-designers-developers/</guid><description>Is there such a thing as harmony between designers and developers in the workplace, and if so, how can it be achieved? In this article, Chris Day explores the challenges of effective collaboration, outlines the key factors at play, and (hopefully!) empowers you to find the right solutions to help you and your team deliver to their full potential.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2024/05/transforming-relationship-between-designers-developers/" />
              <title>Transforming The Relationship Between Designers And Developers</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Transforming The Relationship Between Designers And Developers</h1>
                  
                    
                    <address>Chris Day</address>
                  
                  <time datetime="2024-05-15T10:00:00&#43;00:00" class="op-published">2024-05-15T10:00:00+00:00</time>
                  <time datetime="2024-05-15T10:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>In the forever-shifting landscape of design and technology, some rare artifacts surprisingly never change.</p>

<p>Throughout the last two decades, we have witnessed the astonishing evolution of creative tooling, methodologies, and working practices. However, after all of this advancement, we still have clients asking to make the logo bigger, designers despairing as their creations are built with not quite the exact amount of bottom-margin, and developers going crazy about last-minute design changes.</p>

<p>Quite frankly, I’ve had <em>enough</em>. So join me in a parenting-style-hands-on-hips pose of disdain, roll up your sleeves, and let’s fix this mess together, <em>once and for all!</em></p>

<h2 id="why-is-this-still-an-important-topic">Why Is This Still An Important Topic?</h2>

<p>Ultimately, the quality of your designer-developer relations will have a vital impact on the quality of your product. In turn, this will impact <strong>customer experience</strong> (be it internal or external).</p>

<p>Customer experience is everything, and these days the smallest of chinks can create an even bigger dent in the business itself.</p>

<p>It may not even be an obvious or noticeable issue. Over time, those moments of misunderstanding in your team could result in a series of micro-inconsistencies that are felt by the customer yet sneak underneath the radar of quality assurance.</p>

<p>Perhaps you’ll catch these things during user research, but in this scenario, you’d be playing catch-up instead of advancing forward.</p>

<p>To cut a long story short, it could be slowing you down in the race against your competitors and costing you more money in the process.</p>

<p>So, with that in mind, let’s get stuck into the techniques that can steer us in the right direction and inspire everyone on the team to deliver the slickest of user experiences together.</p>

<h2 id="working-culture">Working Culture</h2>

<p>In my opinion, process improvements may only get you so far. The <strong>working culture</strong> in your organization will heavily influence the output of your digital teams. Whilst the subject of culture is incredibly vast, there are a few key elements that I think are hugely important to foster a greater level of collaboration between design and developers:</p>

<ol>
<li><strong>Alignment on the goals</strong> of the project and/or business.</li>
<li><strong>Encouraging a more “robotic” attitude to feedback.</strong> Of course, you can be passionate about what you do, but when it comes to feedback, I always try to encourage people to respond with logic before emotion.</li>
<li><strong>Communication</strong>: Ultimately, you have to <em>trust</em> people to be proactive. You can have a great process, but the gaps and edge cases will still slip through the net unless you have people who are open and ready to prod each other when issues arise.</li>
</ol>

<p>This may seem like common sense to many of us, but many organizations (big ones, too!) still operate without this crucial foundation to motivate and support their teams.</p>

<p>However, it is essential to be honest with yourself and consider the role <em>you</em> play within your team. Even if you think you have already fulfilled these criteria, I’d encourage you to investigate this further to ensure everyone feels the same. It can be as simple as having a 121 discussion with each member of the team, or you could even send out short questionnaires to gauge your workplace’s suitability for an optimal designer and developer collaboration.</p>

<p>You might be surprised by what you hear back from people. <strong>Treat any criticism as gold dust.</strong> It’s an opportunity to improve.</p>

<p>Once you’ve created this foundation within your organization, it’s important to <em>maintain</em> and <em>protect</em> it. Keep reviewing it regularly, and make sure that anyone joining the team will be able to fit in. This leads us nicely on to…</p>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p>Meet <strong><a data-instant href="/printed-books/typescript-in-50-lessons/">“TypeScript in 50 Lessons”</a></strong>, our shiny new guide to TypeScript. With detailed <strong>code walkthroughs</strong>, hands-on examples and common gotchas. For developers who know enough <strong>JavaScript</strong> to be dangerous.</p>
<a data-instant href="/printed-books/typescript-in-50-lessons/" class="btn btn--green btn--large" style="">Jump to table of contents&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="/printed-books/typescript-in-50-lessons/" class="feature-panel-image-link">
<div class="feature-panel-image"><picture><source type="image/avif" srcSet="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2732dfe9-e1ee-41c3-871a-6252aeda741c/typescript-panel.avif" />
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c2f2c6d6-4e85-449a-99f5-58bd053bc846/typescript-shop-cover-opt.png"
    alt="Feature Panel"
    width="481"
    height="698"
/>
</picture>
</div>
</a>
</div>
</aside>
</div>

<h2 id="hiring">Hiring</h2>

<p>If you’re scaling your team, maintaining quality can always be a challenge as you grow. Despite the challenges, it’s important to continue hiring people who have a positive and empathetic attitude to ensure you can maintain this foundation within your workplace.</p>

<p>In order to gauge this, I would like to include the following interview questions.</p>

<h3 id="developer">Developer</h3>

<p>Begin by showing a sample screenshot of your product or a specially crafted concept design:</p>

<blockquote>“You’ve just built X, and the designer wants to change Y. How do you respond?”<br /><br />Follow up:<br /><br />“The designer and PM reject your suggestion because of _______. How do you respond?”</blockquote>

<h3 id="designer">Designer</h3>

<p>Begin by showing a sample screenshot of your product or a specially crafted concept design:</p>

<blockquote>“The developer says, “We can’t build X quickly; can we do Y instead to deliver faster?” How do you react?”<br /><br />Follow up:<br /><br />“The product owner says they are then disappointed with the design. How do you react?”</blockquote>

<p>I recommend asking these kinds of questions in the middle or towards the end of the interview so you have already built rapport. If the candidate is at ease, they are more likely to let slip any negative attitudes that lurk beneath the surface.</p>

<p>I’ve asked interview questions like these to many designers and developers, and every so often, they will openly criticize and stereotype each other with a smile on their faces. I’ve even seen some candidates become visibly frustrated as they recount real-life scenarios from their own experiences.</p>

<p>How you score this is more difficult. Ultimately, <strong>skills and work ethic are the most important things</strong>, so concerning answers to these questions may not necessarily lead to an outright rejection but perhaps flag something you may need to work on with the candidate if they do later join your team.</p>

<p>Hopefully, in most cases, the stronger candidates you speak to will naturally provide balanced and conscientious responses to these tests of character!</p>

<h2 id="process">Process</h2>

<p>We talked a bit about hiring, but I’d imagine many people who need this article are more likely to be in the midst of a designer-developer flame-war as opposed to trying to prevent one in the future!</p>

<p>So, what can we do <em>process-wise</em> to keep things flowing?</p>

<p>Provided that there is plenty of <strong>early</strong> <strong><em>and</em></strong> <strong>ongoing collaboration</strong> in your workflow, there is no absolute right or wrong answer. It’s about what fits your team and your product best. Ultimately, you need to discard the silos of the past and start working together as a team early on.</p>

<ul>
<li>Developers would typically be the last people to get involved, but they should be involved from the start to guide technical feasibility and provide their own ideas.</li>
<li>Designers are often more involved in the beginning but can often drift away before the end of a release. However, we need to keep them onboard and get them to <em>play</em> with the product so we can keep making it even better!</li>
</ul>

<p>It’s important to be open-minded about the solutions. Alas, I have even worked in organizations where different teams have different approaches. Bearing that in mind, here are some good places to start in terms of exploring what might work for your workplace.</p>

<h2 id="scoping">Scoping</h2>

<p>When new features are on the horizon, getting everyone involved in these discussions is crucial.</p>

<p>Sometimes, it can be difficult for developers to detach from the current sprint and think ahead, but it’s important that we have their guidance, and it is ultimately going to save them (and the whole team) time further down the line.</p>

<p>Scoping can appear in many different forms across the spectrum of agile methodologies out there. It’s not my intention to cover any of these and discuss all the positives and negatives of each (that’d make this into a book, and not one that anyone would like to read!); in fact, I am deliberately not mentioning any of them. This article is ultimately about people, and the people we need at this early stage are not just the stakeholders and a product manager. We need designers and developers shaping these early discussions for the following reasons:</p>

<ul>
<li>They will bring their own ideas.</li>
<li>They will visualize the idea very quickly and assess its feasibility.</li>
<li>They will connect the concept with other parts of the domain.</li>
<li>They will also (albeit rarely!) prevent an impossible dream or daft idea from growing on the face of the business like a festering wart.</li>
</ul>

<h3 id="another-perspective-on-scoping-squaredup">Another Perspective On Scoping: SquaredUp</h3>

<p>In order to take a deeper dive into the subject of scoping, I spoke to Dave Clarke, product manager at <a href="https://squaredup.com">SquaredUp</a>.</p>

<blockquote>“Developers are looped in during the design stage, and we’ll test interactive mockups with the engineering team as well as other internal stakeholders before going out to external audiences for feedback. This means that when a feature is ready to be built by an engineer, they’re already really familiar with what we’re building”<br /><br />&mdash; Dave Clarke</a></blockquote>

<p>Back in late 2018, I met the SquaredUp team at an open day in their UK hub in Maidenhead. I was impressed by the quality of their product, considering it was a very technical audience. It looked beautiful, and you could tell that they went the extra mile in terms of collaboration. Not only do they involve developers in the design phase, but they get them involved even earlier than that.</p>

<blockquote>“We send engineers to events so they can talk to customers and hear their pain points first-hand. This helps foster a real appreciation and understanding of the ‘user’ and ensures designers/developers/PMs are all coming at a problem with a solid understanding of the issue from the user’s perspective.”<br /><br />&mdash; Dave Clarke</a></blockquote>

<p>This brings us back again to that all-important foundation. <strong>Alignment on goals</strong> is key, and what better way to reinforce that message than by getting everyone involved in hearing directly from the end users of your product?</p>

<div class="partners__lead-place"></div>

<h2 id="design-presentations">Design Presentations</h2>

<p>Once the wheels are in motion on the big new thing, many teams like to have the designer present their work for forthcoming iteration(s) to the team. This allows everyone to have a say and get excited about what is coming up.</p>

<p>Once again, there are many organizations that would simply agree on the design between stakeholders and designers alone. From the developer perspective, this is incredibly frustrating. Not only will it result in a <strong>lower-quality output</strong>, but it will also make developers <strong>feel as though their opinion doesn’t matter</strong>.</p>

<p>With my developer hat on, though, I absolutely love these kinds of sessions. They allow us to question the details, suggest alternatives, and consider how we slice stuff up into smaller bundles of value that can be released faster.</p>

<p>With my design hat on, it caters to my need to think about the bigger picture. It’s not always practical to design iteratively, but in these sessions, we can all <strong>get together and appreciate the end-to-end experience</strong>.</p>

<p>Typically, we allow the designer time to talk through everything, allowing for questions throughout, and give everyone a chance to dive in and bring their ideas to the table. However, do what works for your team. If you have a designer who wants to present, take all questions at the end and then make changes afterward, do that. If you have one who likes handling lots of questions throughout and makes changes live, go with that.</p>

<p>Perhaps even give it your own identity, too. In my current workplace, one of the squads calls it <em>Design Time</em> and in our squad, we decided to open the name to a poll, and thus (with one cheeky addition to the poll from a colleague) the <em>Itty Bitty Refinement Committee</em> was born!</p>

<h3 id="managing-conflict">Managing Conflict</h3>

<p>However, these kinds of sessions do <strong>have the potential to get sidetracked</strong>. So, as with any meeting, it is essential to have a <strong>clear agenda</strong> and ensure that good facilitation prevents things from going off-piste. If there are conflicts, I always try to find resolutions by considering where we might find the answers. For example,</p>

<ul>
<li>Can we look at our analytics?</li>
<li>Which option is a better fit for our company goals?</li>
<li>Could we do an A/B test to see what is more effective?</li>
</ul>

<p>When people bring ideas to the table, it’s always important to <strong>acknowledge them positively and seek further exploration</strong>. Sometimes, we can agree on an approach quickly, and on other occasions, we can defer the discussion to a later refinement session.</p>

<h2 id="sharing-responsibilities">Sharing Responsibilities</h2>

<p>In my opinion, there is also a gray area between designers and developers, where it often isn’t clear who holds responsibility. This is a big risk because, in many organizations, essential aspects can be completely forgotten.</p>

<p>From my past experience, there are two key areas where I see this happening often. So this may not be exhaustive, but I encourage you to think about these and then ask yourself: Is there anything else &mdash; specific to my organization &mdash; that could have fallen into this void between our designers and developers?</p>

<p>See if you can identify these risks and agree on a way of working together to ensure they are tackled effectively.</p>

<h3 id="animations">Animations</h3>

<p>Nowadays, many dev teams are working on JavaScript-heavy applications, and most of us will have the power of CSS transitions at our disposal. Yet, I frequently land on new projects where they aren’t being leveraged to enhance the customer experience.</p>

<p>Animations can be quite time-consuming to create using many design tools. In particular, I often find that <em>loading states</em> are quite fiddly to prototype in some cases.</p>

<p>In my recent work at <a href="https://www.floww.io/">Floww</a>, I collaborated with designer Hidemi Wenn on an animated progress bar. For the first version, Hidemi had begun with an idea crafted in After Effects. I replicated this in a <a href="https://codepen.io/chrisdaaaaay/pen/BaxOXRw">CodePen</a> and suggested adding some bubbles to highlight the changes in the numbers.</p>

<p><strong>Note</strong>: <em>Of course, CodePen is just one example of this. There are many other tools out there, such as Storybook, that can also allow us to build and collaborate on ideas quickly.</em></p>

<figure class="break-out">
	<p data-height="480"
	data-theme-id="light"
	data-slug-hash="abrOJBr"
	data-user="smashingmag"
	data-default-tab="result"
	class="codepen">See the Pen [Bar Chart of Destiny [forked]](https://codepen.io/smashingmag/pen/abrOJBr) by <a href="https://codepen.io/chrisdaaaaay">Chris Day</a>.</p>
	<figcaption>See the Pen <a href="https://codepen.io/smashingmag/pen/abrOJBr">Bar Chart of Destiny [forked]</a> by <a href="https://codepen.io/chrisdaaaaay">Chris Day</a>.</figcaption>
</figure>

<p>This allowed Hidemi to see her creation working in the browser early &mdash; before it had been fully implemented into the product &mdash; and we then collaborated further to make more enhancements.</p>

<blockquote>“Working together like this was awesome! We could easily bounce around ideas, and tweaking the animation was a breeze.”<br /><br />&mdash; Hidemi Wenn, Product Designer at <a href="https://www.floww.io/">Floww</a></blockquote>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aPairing%20is%20often%20between%20developers,%20but%20why%20not%20jump%20on%20a%20call%20and%20pair%20with%20a%20designer%20whilst%20you%20write%20the%20CSS?%20This%20gives%20them%20full%20transparency,%20and%20you%20can%20collaborate%20together.%0a&url=https://smashingmagazine.com%2f2024%2f05%2ftransforming-relationship-between-designers-developers%2f">
      
Pairing is often between developers, but why not jump on a call and pair with a designer whilst you write the CSS? This gives them full transparency, and you can collaborate together.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>Nowadays, we have amazing tools at our disposal to collaborate, and yet still, so many designers and developers elect to operate in silos.</p>

<h3 id="accessibility">Accessibility</h3>

<p>One of the first things I do when joining any existing digital project is to spin up <a href="https://wave.webaim.org/extension/">Wave</a> (an accessibility testing tool) and subsequently slump into my seat in despair.</p>

<p><strong>Accessibility is something that always suffers as a result of a designer/developer standoff.</strong> Some might say it’s the realm of design, while others would argue it’s quite a technical thing and, therefore, lives in dev land. The truth is <strong>it is a shared responsibility</strong>.</p>

<p>Take something like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus"><code>:focus</code></a>, for example. Whenever I review code, this is something I <em>always</em> check and often discover it’s missing. Ask the developer, and they’ll say, “We didn’t have designs for it.” Well, perhaps, <em>ask</em> the designer to create them, just as I’d expect the designer to query an unimplemented state they had designed for.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aWe%20should%20scrutinize%20each%20other%e2%80%99s%20work%20and%20continue%20to%20channel%20our%20inner%20robot%20to%20respond%20with%20logic%20when%20it%20comes%20to%20constructive%20criticism.%20Keep%20encouraging%20everyone%20to%20embrace%20feedback%20because%20that%20is%20the%20gold%20dust%20that%20makes%20our%20product%20shine%20brighter.%0a&url=https://smashingmagazine.com%2f2024%2f05%2ftransforming-relationship-between-designers-developers%2f">
      
We should scrutinize each other’s work and continue to channel our inner robot to respond with logic when it comes to constructive criticism. Keep encouraging everyone to embrace feedback because that is the gold dust that makes our product shine brighter.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<h2 id="during-implementation">During Implementation</h2>

<p>Having steered our way together through the implementation of our features, at some point, we begin to approach the time to release our features into the wild. We are on the final stretch, and thus, it’s time for developers to stage a reverse-design presentation!</p>

<p>Whilst mentoring developers on this subject, I always remind them <strong>not to take the feedback personally</strong>.</p>

<p>Likewise, I ask designers <strong>to never hold back</strong>. Be persnickety (in a kind way!) and ensure all your concerns are addressed.</p>

<p>It’s only natural for a developer to behave defensively in these scenarios. As a result, designers may hold back on some of the feedback they provide in order to prevent upsetting the developer.</p>

<p>Developers are often very vocal, and if you are tasked with delivering a barrage of design feedback to them, it can appear daunting and make designers fearful of a backlash.</p>

<p>Prevent the silo. Perhaps <strong>have a third party</strong>, such as the product owner/manager, attend the meetings. They can diffuse any situation by referring us all back to the business value.</p>

<p>I’ve also witnessed rare cases where the developer has nodded and agreed with all the feedback and then just hasn’t implemented any of it afterward! So, <strong>make sure it’s all captured in whatever project management tools you use</strong> so you can follow up on the status. Sometimes, it’s easy to forget to do this when the changes are so small, so often (in my current team), we might create a single ticket on our board to implement all the feedback changes as opposed to creating a work item for each.</p>

<p>Another common issue I’ve found is that I’ve met <strong>many designers who don’t actually ever test out the products that they design</strong>. For me, they are missing out on the opportunity to further hone their work, and to learn.</p>

<p>If you’re a designer, ensure that you can log in to the app/website. Get a test account from someone, and <strong>try to break stuff</strong>!</p>

<p>Once all the feedback is in, we can create more work items to give our product those magical finishing touches and ship our masterpiece to the World.</p>

<h2 id="design-systems">Design Systems</h2>

<p>Having mentioned focus states earlier on, you were probably already thinking about design systems before this heading came along! Of course, the design system plays a key role in helping us maintain that consistency, and ensuring accessibility concerns are baked-in to our library of beautiful components.</p>

<p>There are many, many articles about design systems out there already but here, I am going to just consider them in the context of the working relationship.</p>

<p>As the design system encourages reuse, it encourages us to think about other teams in our organization and be more mindful.</p>

<p><strong>If the basic building blocks are covered, we can focus on solving more complex challenges together.</strong> I think this is also a really important value to get your teams on board with.</p>

<p>Design systems can also cause friction. Not everyone will get on board with it. Some designers will feel as though it restricts their creativity. Some developers will be frustrated at having to update the design system instead of cracking on with their own features.</p>

<p>In my opinion, these attitudes will not only slow you down but could harm the working culture of your business. Nowadays, I’d say it’s absolutely crucial for any product team (big or small) to have a design system and have the majority of your team buying into it.</p>

<p>I’ve been present at organizations where the design system is neglected, and in these cases, it actually ends up worse than not having one at all. You really need the majority of your team to be committed to it; otherwise, some people will go off-piste and keep reinventing the wheel (probably without those focus states!).</p>

<h3 id="another-perspective-on-design-systems-gov-uk">Another Perspective On Design Systems: GOV.UK</h3>

<p>The GDS (Government Digital Service) of the UK has built a design system that serves a vast spectrum of different services and tech stacks. An enormous challenge, which is almost certain to be of interest in our quest for knowledge! So, I got in touch with product designer Ed Horsford who has worked on <a href="https://www.edwardhorsford.com/renew-your-passport/">a series of government services</a> that make use of this.</p>

<blockquote>“GDS provides the <a href="https://prototype-kit.service.gov.uk/docs/">GOV.UK Prototype Kit</a>, so as a designer, I can create something in the kit, make full use of the functionality of the design system, and point developers towards the prototype.”<br /><br />&mdash; Edward Horsford</blockquote>

<p>Whilst many other organizations are now making use of tools such as Figma’s excellent <a href="https://www.figma.com/blog/introducing-dev-mode/">Dev Mode</a> feature to streamline design handover, this still requires naming conventions to be lined up between the codebase and the Figma component library. What’s impressive about GDS’ approach here is that <strong>the provision of their own prototyping tool makes it absolutely clear to developers which components need to be used</strong>. However, the availability of a great design system tooling doesn’t always guarantee a smooth outcome, as Ed explains:</p>

<blockquote>“It can be a bit of a mind-shift for developers new to the UK government or using design systems in general &mdash; they may default to hand coding the HTML and CSS to match a design, rather than using the components from the design system to match the prototype.”<br /><br />“If there is a bespoke requirement outside of the design system, then I will always call it out early so I can discuss it with the team.”<br /><br />&mdash; Edward Horsford</blockquote>

<p>Once again, this takes us back to the importance of communication. In a landscape where a design system must be deployed amongst many different teams, <strong>it’s up to the designers and developers to scrutinize each other’s work</strong>.</p>

<p>It was great to hear that as a designer, Ed was actively looking at the front-end code to assist the developer, ensuring the design system was respected so that all of its many benefits could be embedded into the product.</p>

<div class="partners__lead-place"></div>

<h2 id="crisis-mode">Crisis Mode</h2>

<p>I appreciate that much of the advice in this article requires planning and a fair bit of trial and error. So what do you do if your designers and developers are already engulfed in a mass brawl that needs to be quelled?</p>

<p>In these scenarios, I think it is an ideal moment to pause and simply ask each member of the team: <em>What is our goal? What are we working towards?</em></p>

<p>If people are angry, in some ways, it’s a good thing because you know they care. People who care should always be open to a bit of a reset. Openly discuss what everyone wants, and you’ll probably be surprised at <strong>how aligned people really are</strong>; I always go back to this fundamental and work onwards from there.</p>

<p>Sometimes, we get so tangled up in the details we forget what is truly important.</p>

<h3 id="apathy">Apathy</h3>

<p>For every angry team, there are probably many more that just don’t give a crap. For me, this is a far worse situation.</p>

<p>Every problem described in this article could be present. The designers make mockups, the designers build them without question, and everyone gets paid. Who needs to question anything? It’s just a job, right?</p>

<p>Can we really fix this?</p>

<p>Well, in my opinion, you are going to need <strong>a much deeper dive into company culture to try and revive that team spirit</strong>. I have worked at places like this in the past, and it is very challenging to try and implement solutions when the people are just not bought into the vision of the organization.</p>

<p>Whether this is feasible or not depends on your role and the organization itself. I have walked away from situations like this in the past because I didn’t feel as though the organization was willing to change or even be able to acknowledge the problem.</p>

<h2 id="conclusion">Conclusion</h2>

<p>The dynamic between designers and developers is a subject that has always been of great interest to me, as I’ve worked in both roles as well as being an agency owner.</p>

<p>I’m confident as the years continue to progress, this will become less of a problem as the world of work continues to gravitate towards greater levels of inclusivity, honesty, and openness. The foundations of great company culture are so crucial to ensuring that designers and developers can unite and take on the world side-by-side on behalf of your organization.</p>

<p>For now, though, in today’s fragmented and divided world, you can gain a true competitive advantage by leveraging the power of a harmonious digital team built on the foundations of your organizational values.</p>

<p>Go smash it!</p>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Vitaly Friedman</author><title>Why Designers Aren’t Understood</title><link>https://www.smashingmagazine.com/2024/05/designers-business-ux-language/</link><pubDate>Tue, 14 May 2024 12:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2024/05/designers-business-ux-language/</guid><description>How do we conduct UX research when there is no or only limited access to users? Here are some workarounds to run UX research or make a strong case for it. An upcoming part of &lt;a href="https://smart-interface-design-patterns.com">Smart Interface Design Patterns&lt;/a>.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2024/05/designers-business-ux-language/" />
              <title>Why Designers Aren’t Understood</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Why Designers Aren’t Understood</h1>
                  
                    
                    <address>Vitaly Friedman</address>
                  
                  <time datetime="2024-05-14T12:00:00&#43;00:00" class="op-published">2024-05-14T12:00:00+00:00</time>
                  <time datetime="2024-05-14T12:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>As designers, especially in large enterprises, we often might feel <strong>misunderstood and underappreciated</strong>. It might feel like every single day you have to fight for your users, explain yourself and defend your work. It’s unfair, exhausting, painful and frustrating.</p>

<p>Let’s explore how to present design work, <strong>explain design decisions</strong> and get stakeholders on your side &mdash; and speak the language that other departments understand.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/designers-business-ux-language/business-vs-ux-language.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="952"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designers-business-ux-language/business-vs-ux-language.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/designers-business-ux-language/business-vs-ux-language.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/designers-business-ux-language/business-vs-ux-language.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/designers-business-ux-language/business-vs-ux-language.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/designers-business-ux-language/business-vs-ux-language.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/designers-business-ux-language/business-vs-ux-language.jpg"
			
			sizes="100vw"
			alt="Business vs UX Language"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Business language and design language are often misaligned. That’s why designers are often not understood. (<a href='https://files.smashing.media/articles/designers-business-ux-language/business-vs-ux-language.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>As designers, we might feel slightly frustrated by the language that often dominates business meetings. As Jason Fried <a href="https://www.linkedin.com/posts/jason-fried_corporate-language-is-filled-with-metaphors-activity-7143328615512875008-ceUx/">has noted</a>, corporate language is filled with metaphors of fighting. Companies “conquer” the market, they “capture” mindshare, they “target” customers, they “destroy” the competition, they want to attract more “eye-balls, get users “hooked, and increase “life-time value.</p>

<p>Designers, on the other hand, don’t speak in such metaphors. We speak of how to “reduce” friction, “improve” consistency, “empower” users, “enable and help” users, “meet” their expectations, “bridge the gap”, “develop empathy”, understand “user needs, design an “inclusive” experience.</p>

<p>In many ways, these words are the direct opposite of the metaphors commonly used in corporate environments and business meetings. So no wonder that our beliefs and principles might feel <strong>misunderstood and underappreciated</strong>. A way to solve is to be deliberate when choosing words you use in the big meeting. In fact, it’s all about speaking the right language.</p>

<style>.course-intro{--shadow-color:206deg 31% 60%;background-color:#eaf6ff;border:1px solid #ecf4ff;box-shadow:0 .5px .6px hsl(var(--shadow-color) / .36),0 1.7px 1.9px -.8px hsl(var(--shadow-color) / .36),0 4.2px 4.7px -1.7px hsl(var(--shadow-color) / .36),.1px 10.3px 11.6px -2.5px hsl(var(--shadow-color) / .36);border-radius:11px;padding:1.35rem 1.65rem}@media (prefers-color-scheme:dark){.course-intro{--shadow-color:199deg 63% 6%;border-color:var(--block-separator-color,#244654);background-color:var(--accent-box-color,#19313c)}}</style>

<p class="course-intro">This article is <strong>part of our ongoing series</strong> on <a href="/category/design-patterns">design patterns</a>. It’s also an upcoming part of the 10h-video library on <a style="font-weight:700" href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>&nbsp;🍣 and the <a href="https://smashingconf.com/online-workshops/workshops/interface-design-course-vitaly-friedman/">upcoming live UX training</a> as well. Use code <a style="text-decoration:none !important" href="https://smart-interface-design-patterns.com/"><kbd>BIRDIE</kbd></a> to save 15% off.</p>

<h2 id="speaking-the-right-language">Speaking The Right Language</h2>

<p>As designers, we often use <strong>design-specific terms</strong>, such as consistency, friction and empathy. Yet to many managers, these attributes don’t map to any business objectives at all, often leaving them utterly confused about the actual real-life impact of our UX work.</p>

<p>One way out that changed everything for me is to <strong>leave UX vocabulary at the door</strong> when entering a business meeting. Instead, I try to explain design work through the lens of the business, often rehearsing and testing the script ahead of time.</p>

<p>When presenting design work in a big meeting, I try to be <strong>very deliberate and strategic</strong> in the choice of the words I’m using. I won’t be speaking about attracting “eye-balls” or getting users “hooked”. It’s just not me. But I won’t be speaking about reducing “friction” or improving “consistency” either.</p>

<p>Instead, <strong>I tell a story</strong>.</p>

<p>A story that <strong>visualizes how our work helps the business</strong>. How design team has translated business goals into specific design initiatives. How UX can reduce costs. Increase revenue. Grow business. Open new opportunities. New markets. Increase efficiency. Extend reach. Mitigate risk. Amplify word of mouth.</p>

<p>And how we’ll measure all that huge impact of our work.</p>

<p>Typically, it’s broken down into eight sections:</p>

<p>🎯 <strong>Goals</strong> ← Business targets, KRs we aim to achieve.<br />
💥 <strong>Translation</strong> ← Design initiatives, iterations, tests.<br />
🕵️ <strong>Evidence</strong> ← Data from UX research, pain points.<br />
🧠 <strong>Ideas</strong> ← Prioritized by an impact/effort-matrix.<br />
🕹 <strong>Design work</strong> ← Flows, features, user journeys.<br />
📈 <strong>Design KPIs</strong> ← How we’ll measure/report success.<br />
🐑 <strong>Shepherding</strong> ← Risk management, governance.<br />
🔮 <strong>Future</strong> ← What we believe are good next steps.<br /></p>

<h2 id="key-takeaways">Key Takeaways</h2>

<p>🤔 Businesses rarely understand the impact of UX.<br />
🤔 UX language is overloaded with <strong>ambiguous terms</strong>.<br />
🤔 Business can’t support confusing initiatives.<br />
✅ Leave UX language and UX jargon at the door.<br />
✅ Explain UX work through the <strong>lens of business goals</strong>.<br /></p>

<p>🚫 Avoid “consistency”, “empathy”, “simplicity”.<br />
🚫 Avoid “cognitive load”, “universal design”.<br />
🚫 Avoid “lean UX”, “agile”, “archetypes”, “JTBD”.<br />
🚫 Avoid “stakeholder management”, “UX validation”.<br />
🚫 Avoid abbreviations: HMW, IxD, PDP, PLP, WCAG.<br /></p>

<p>✅ Explain how you’ll measure success of your work.<br />
✅ Speak of <strong>business value, loyalty</strong>, abandonment.<br />
✅ Show risk management, compliance, governance.<br />
✅ Refer to cost reduction, efficiency, growth.<br />
✅ Present accessibility as industry-wide best practice.<br /></p>

<p>Next time you walk in a meeting, <strong>pay attention to your words</strong>. Translate UX terms in a language that other departments understand. It might not take long until you’ll see support coming from everywhere &mdash; just because everyone can now clearly see how your work helps them do their work better.</p>

<h2 id="useful-resources">Useful Resources</h2>

<ul>
<li><a href="https://www.secondwavedive.com/books">Business Thinking For Designers</a>, by Ryan Rumsey</li>
<li><a href="https://d.mba/">Business For Designers (d.mba)</a>, by Alen Faljic</li>
<li><a href="https://www.linkedin.com/posts/jason-fried_corporate-language-is-filled-with-metaphors-activity-7143328615512875008-ceUx/">Corporate Language Metaphors</a>, by Jason Fried</li>
<li><a href="https://twitter.com/jmspool/status/961804803440562176">Five Things That Business Cares About</a>, by Jared Spool</li>
<li><a href="https://twitter.com/andybudd/status/1435199755773173761">Direct Impact Of Design Work</a>, by 👨🏻‍💻 Andy Budd</li>
<li><a href="https://givegoodux.com/cut-the-bullshit-its-time-to-end-the-tyranny-of-ux-terminology/">It’s Time To End The Tyranny Of UX Terminology</a>, by Joe Natoli</li>
<li><a href="https://www.notably.ai/blog/how-to-use-storytelling-in-ux-research-reports">How To Use Storytelling In UX Research</a>, by Allison Grayce Marshall</li>
<li><a href="https://smart-interface-design-patterns.com/articles/defend-design-decisions/">How To Defend Your Design Decisions</a>, by Vitaly Friedman</li>
</ul>

<h2 id="meet-smart-interface-design-patterns">Meet Smart Interface Design Patterns</h2>

<p>If you are interested in similar insights around UX, take a look at <a href="https://smart-interface-design-patterns.com/"><strong>Smart Interface Design Patterns</strong></a>, our <strong>10h-video course</strong> with 100s of practical examples from real-life projects &mdash; with a live UX training later this year. Everything from mega-dropdowns to complex enterprise tables &mdash; with 5 new segments added every year. <a href="https://www.youtube.com/watch?v=aSP5oR9g-ss">Jump to a free preview</a>.</p>

<figure style="margin-bottom: 0"><a href="https://smart-interface-design-patterns.com/"><img style="border-radius: 11px" decoding="async" fetchpriority="low" width="950" height="492" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/7cc4e1de-6921-474e-a3fb-db4789fc13dd/b4024b60-e627-177d-8bff-28441f810462.jpeg" sizes="100vw" alt="Smart Interface Design Patterns"></a><figcaption class="op-vertical-bottom">Meet <a href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a>, our video course on interface design &amp; UX.</figcaption></figure>

<div class="btn--lined btn--lined--white-border" style="margin-top: 0.75em; margin-bottom: 0.75em"><a class="btn btn--large btn--green btn--text-shadow" href="https://smart-interface-design-patterns.com/">Jump to the video course&nbsp;&rarr;</a></div>

<p><p class="ticket-price__desc" style="font-size: .8em!important; text-align: center; line-height: 1.5; margin: 0; display: block;">100 design patterns &amp; real-life
examples.<br>10h-video course + live UX training. <a href="https://www.youtube.com/watch?v=aSP5oR9g-ss">Free preview</a>.</p>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(il)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Yaakov Karda</author><title>Lessons Learned After Selling My Startup</title><link>https://www.smashingmagazine.com/2024/04/lessons-learned-after-selling-startup/</link><pubDate>Mon, 29 Apr 2024 15:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2024/04/lessons-learned-after-selling-startup/</guid><description>Yaakov Karda co-founded and ran a successful SaaS product that he wound up selling to another company. Business acquisitions are common but often shrouded in mystery because they happen behind closed doors. In this article, Yaakov details the story of his company and the journey it took him on, shedding light on the process of selling a business and what he learned from the experience.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2024/04/lessons-learned-after-selling-startup/" />
              <title>Lessons Learned After Selling My Startup</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Lessons Learned After Selling My Startup</h1>
                  
                    
                    <address>Yaakov Karda</address>
                  
                  <time datetime="2024-04-29T15:00:00&#43;00:00" class="op-published">2024-04-29T15:00:00+00:00</time>
                  <time datetime="2024-04-29T15:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>August 2021 marks a milestone for me. That’s when we signed an acquisition agreement to sell <a href="http://chatra.com/">Chatra</a>, a profitable live chat platform. I co-founded it after <a href="https://www.smashingmagazine.com/2015/11/lessons-learned-shutting-startup/">shutting down my first startup after a six-year struggle</a>. Chatra took me and the team six years to finish &mdash; that’s six years of learning, experimenting, sometimes failing, and ultimately <a href="https://www.brevo.com/blog/sendinblue-acquires-metrilo-chatra-pushowl/">winning big</a>.</p>

<p>Acquisitions happen all the time. But what does it look like to go through one, putting the thing you built and nurtured up for sale and ceding control to someone else to take over? Sometimes, these things are complicated and contain clauses about what you can and can’t say after the transaction is completed.</p>

<p>So, I’ve curated a handful of the most <strong>valuable takeaways from starting, growing, and selling the company</strong>. It took me some time to process everything; some lessons were learned immediately, while others took time to sink in. Ultimately, though, it’s a recollection of my personal journey. I hope sharing it can help you in the event you ever find yourself in a similar pair of shoes.</p>

<h2 id="keeping-the-band-together">Keeping The Band Together</h2>

<p>Rewind six years before the Chatra acquisition. My first startup, Getwear, ran out of steam, and I &mdash; along with everyone else &mdash; was ready to jump ship.</p>

<p>But we weren’t ready to part ways. My co-founder-partner was a close childhood friend with whom I would sell pirated CDs in the late 90s. Now, I don’t think it’s the most honest way to make a living, but it didn’t bother us much in high school. It also contributed to a strong bond between us, one that led to the launch of Getwear and, later, Chatra.</p>

<p>That partnership and collaboration were too precious to let go; we knew that our work wasn’t supposed to end at Getwear and that we’d have at least one more try together. The fact that we struggled together before is what allowed us to pull through difficult times later. Our friendship allowed us to work through stress, difficulties, and the unavoidable disagreements that always come up.</p>

<p>That was a big lesson for me: <strong>It’s good to have a partner you trust along for the ride.</strong> We were together before Chatra, and we saw it all the way through to the end. I can’t imagine how things would have been different had I partnered with someone new and unfamiliar, or worse, on my own.</p>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p>Meet <strong><a data-instant href="https://www.smashingconf.com/online-workshops/">Smashing Workshops</a></strong> on <strong>front-end, design &amp; UX</strong>, with practical takeaways, live sessions, <strong>video recordings</strong> and a friendly Q&amp;A. With Brad Frost, Stéph Walter and <a href="https://smashingconf.com/online-workshops/workshops">so many others</a>.</p>
<a data-instant href="smashing-workshops" class="btn btn--green btn--large" style="">Jump to the workshops&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="smashing-workshops" class="feature-panel-image-link">
<div class="feature-panel-image">
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="/images/smashing-cat/cat-scubadiving-panel.svg"
    alt="Feature Panel"
    width="257"
    height="355"
/>

</div>
</a>
</div>
</aside>
</div>

<h2 id="building-business-foundations">Building Business Foundations</h2>

<p>We believed Getwear would make us millionaires. So when it failed, that motivation effectively evaporated. We were no longer inspired to take on ambitious plans, but we still had enough steam to start a digital analog of a döner kebab shop &mdash; a simple, sought-after tech product just to pay our bills.</p>

<p>This business wasn’t to be built on the back of investment capital; no, it was bootstrapped. That means we made do with a small, independent, fully-remote team. Remember, this is in 2015. The global pandemic had yet to happen, and a fully remote team was still a novelty. And it was quite a change from how we ran Getwear, which was stocked with an R&amp;D department, a production office, and even a factory in Mumbai. A small distributed team seemed the right approach to keep us nimble as we set about defining our path forward as a company.</p>

<p>Finding our purpose required us to look at the intersection of what the market needs and what we know and can do well. Building a customer support product was an obvious choice: at Getwear, we heavily relied on live chat to help users take their body measurements and place their orders.</p>

<p>We were familiar with existing products on the market. Besides, we already had experience building a conversational support product: we had built an internal tool to facilitate communication between our Mumbai-based factory and an overseas customer-facing team. The best thing about that was that it was built on a relatively obscure framework offering real-time messaging out of the box.</p>

<p>There were maybe 20 established competitors in the space back in 2015, but that didn’t dissuade us. If there was enough room for 20 products to do business, there must be enough for 21. I assumed we should <strong>treat competition as a market validation rather than an obstacle</strong>.</p>

<p>Looking back, <strong>I can confidently say that it’s totally possible to compete (and succeed) in a crowded market.</strong></p>

<p>Product-wise, Getwear was very innovative; no one had ever built an online jeans customizer as powerful as ours. We designed the UX from scratch without relying much on the best practices.</p>

<p>With Chatra, we went down a completely different route: We had improved the established live chat product category via features that were, at that time, commonly found in other types of software but hadn’t made their way to our field. That was the opportunity we seized.</p>

<p>The existing live chat platforms felt archaic in that the interfaces were clunky and reminiscent of Windows 95, the user flows were poorly thought out, and the dated user experience resulted in lost conversation histories.</p>

<p>Slack was a new product at this time and was all the rage with its fresh approach to user interfaces and conversational onboarding. Products like Facebook Messenger and <a href="https://telegram.org/">Telegram</a> (which is popular in Eastern Europe and the Middle East) were already standard bearers and formed user expectations for how a messaging experience should work on mobile. We learned a lot from these products and found in them the blueprint to design a modern chat widget and dashboard for agents.</p>

<p>We certainly stood on the shoulders of giants, and there’s nothing wrong with <a href="https://www.amazon.com/Steal-Like-Artist-Things-Creative/dp/0761169253">stealing like an artist</a>: in fact, both Steve Jobs and Bill Gates did it.</p>

<p>The takeaway?</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aA%20product%20does%20not%20have%20to%20be%20new%20to%20redefine%20and%20disrupt%20a%20market.%20It%e2%80%99s%20possible%20to%20lead%20by%20introducing%20modern%20standards%20and%20designs%20rather%20than%20coming%20up%20with%20something%20radically%20different.%0a&url=https://smashingmagazine.com%2f2024%2f04%2flessons-learned-after-selling-startup%2f">
      
A product does not have to be new to redefine and disrupt a market. It’s possible to lead by introducing modern standards and designs rather than coming up with something radically different.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<h2 id="making-a-go-to-market-strategy">Making A Go-To-Market Strategy</h2>

<p>Once we were clear about <em>what</em> we were building and <em>how</em> to build it, the time came to figure out a strategy for bringing our product to market.</p>

<p>Two things were very clear and true to us up front:</p>

<ol>
<li>We needed to launch and start earning <em>immediately</em> &mdash; in months rather than years &mdash; being a bootstrapped company and all.</li>
<li>We didn’t have money for things like paid acquisition, brand awareness, or outbound sales representatives to serve as the front line for customer engagement.</li>
</ol>

<p>Both conclusions, taken together, helped us decide to focus our efforts on small businesses that need fewer features in a product and onboard by self-service. Marketing-wise, that meant we’d need to find a way around prohibitively expensive ads.</p>

<p>Enter <strong>growth hacking</strong>! The term doesn’t resonate now the way it did in 2015: fresh, aggressive, and effective. As a user-facing website widget, we had a built-in acquisition channel by way of a “powered by Chatra” link. For it to be an effective marketing tool, we had to accumulate a certain number of customers. Otherwise, who’s going to see the link in the first place?</p>

<p>We combined unorthodox techniques to acquire new customers, like web-scraping and email address discovery with cold outreach.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aInitially,%20we%20decided%20to%20go%20after%20our%20competitors%e2%80%99%20customers.%20But%20the%20only%20thing%20we%20got%20out%20of%20targeting%20them%20with%20emails%20was%20their%20rightful%20anger.%0a&url=https://smashingmagazine.com%2f2024%2f04%2flessons-learned-after-selling-startup%2f">
      
Initially, we decided to go after our competitors’ customers. But the only thing we got out of targeting them with emails was their rightful anger.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>In fact, a number of customers complained directly to the competitors, and the CEO of a prominent live chat company demanded we cease communicating with their users.</p>

<p>More than that, he actually requested that we donate to a well-known civil liberty NGO, something we wholeheartedly agreed to, considering it was indeed the right thing to do.</p>

<p>So, we decided to forget about competition and target potential customers (who owned e-commerce websites) using automation for lead research, email sending, and reply processing. We managed to do it on a massive scale with very few resources. By and large, cold outreach has been the single most effective marketing tool we have ever used. And contrary to common assumption, <em>it is not a practice reserved purely for enterprise products.</em></p>

<p>Once we acquired a significant user mass, the widget link became our Number One acquisition channel. In lean startup terminology, a <strong>viral engine of growth</strong> is a situation when existing customers start generating leads and filling the marketing funnel for you. It’s where we all want to be, but the way to get there is often murky and unreliable. But my experience tells me that it is possible and <em>can</em> be planned.</p>

<p>For this strategy to work, it has to be based on <strong>natural user interactions</strong>. With widgets, the mechanic is quite apparent, but not so much with other products. Still, you can do well with serious planning and running experiments to help make informed decisions that achieve the best possible results.</p>

<p>For example, we were surprised that the widget link performed way better in tests when we changed it from “Powered by Chatra” to “Get Chatra!”. We’re talking big increases with minor tweaks. The small details really do matter!</p>

<p><strong>Content marketing</strong> was another avenue we explored for generating leads. We had already done the cold outreach and had a good viral engine going with the widget link. Content marketing, in contrast, was an attempt to generate leads at the “top” of the funnel, independent of any outbound marketing or our customers’ websites. We produced <a href="https://chatra.com/books/">books and guides</a> that were well-researched, written, and designed to bring in potential customers while supporting existing ones with resources to get the most out of Chatra.</p>

<p>Sadly, these efforts failed to attract many new leads. I don’t want to say <em>not</em> to invest in quality content; it’s just that this is not a viable <em>short-term</em> growth strategy.</p>

<div class="partners__lead-place"></div>

<h2 id="increasing-lifetime-customer-value">Increasing Lifetime Customer Value</h2>

<p>It took six months of development to launch and another year to finally break even. By then, we had achieved a product-market fit with consistent organic growth; it was time to focus on metrics and unit economics. Our challenge was to limit customer churn and find ways to increase the lifetime value of existing customers.</p>

<p><strong>If there’s an arch-enemy to SaaS, it’s churn.</strong> Mitigating churn is crucial to any subscription business, as longer subscriptions generate more revenue. Plus, it’s easier to prevent churn than it is to acquire new customers.</p>

<p>We found it helpful to distinguish between avoidable churn and unavoidable (i.e., “natural”) churn. The latter concerns customer behavior beyond our control: if an e-commerce store shuts down, they won’t pay for services. And we had nothing to do with them shutting down &mdash; it’s just the reality of life that most small businesses fail. No quick-fix strategy could ever change that; we just had to <em>deal with it.</em></p>

<p>Chatra’s subscription pricing was fairly inexpensive, yet we enjoyed a relatively high <strong>customer lifetime value</strong> (cLTV). Many customers tended to stay for a long time &mdash; some, for years. Our high cLTV helped us justify higher customer acquisition costs (CAC) for paid ads in the Shopify app store once we decided to run them. Running the ads allowed us to improve our Shopify app store search position. And because of that, we improved and kept our position as a top app within our category. That, I believe, was one of the factors that the company <a href="https://www.brevo.com">Brevo</a> considered when they later decided to acquire our business.</p>

<p>We tried improving the free-to-paid subscription conversion rate by targeting those who actively used the product but remained on a free plan for an extended period. We offered them an upgraded plan subscription for just one dollar per year. And to our surprise, that failed to convince many people to upgrade. We were forced to conclude that <strong>there are two types of customers: those who pay and those who do not (and will not).</strong></p>

<p>From that point forward, things got even weirder. For example, we ran several experiments with subscription pricing and found that we could increase subscription prices from $11 per seat to $19 without adversely affecting either the visitor-to-user or the free-to-paid conversion rates! Apparently, <strong>price doesn’t matter as much as you might think</strong>. It’s possible to raise prices without adversely affecting conversions, at least in our experience with a <strong>freemium pricing model</strong>.</p>

<p>We also released additional products we could cross-sell to existing customers. One was Livebar, an app for in-browser notifications on recent online shopping purchases. Another was <a href="https://yeps.io/">Yeps</a>, a simple announcement bar that sticks to the top of a webpage. Product-wise, both were good. But despite our efforts to bring awareness to them in all our communications with Chatra customers, they never really took off. We’ve closed the first and sold the second for a price that barely justified the development and ongoing support we were putting into it. <strong>We were wrong to assume that if we have a loyal audience, we could automatically sell them another product.</strong></p>

<h2 id="contemplating-an-exit">Contemplating An Exit</h2>

<p>Chatra was a lean company. As a SaaS business, we had a perfect cost-revenue ratio and gained new customers mainly through viral dynamics and self-onboarding. These didn’t increase our costs much but did indeed bring in extra subscription dollars. The engine worked almost without any effort on our side.</p>

<p>After a few years, the company could mostly function on auto-pilot, giving us &mdash; the founders &mdash; time and resources to pay our bills and run business experiments. We were enjoying a good life. Our work was a success!</p>

<p>We gave up on an exit strategy even before starting, so we didn’t pay much attention to the acquisition offers we routinely received; most weren’t enticing enough to pull us away. Even those sent by people known in the industry were way too small: the best offer we got was a valuation of 2.5 times our <a href="https://www.zuora.com/resource/annual-recurring-revenue/#:~:text=Annual%20Recurring%20Revenue%2C%20or%20ARR,for%20a%20single%20calendar%20year.">Annual Recurring Revenue</a> (ARR), which was a non-starter for us.</p>

<p>Then, we received an email with another offer. The details were slim, but we decided to at least entertain the idea and schedule a time to chat. I replied that we wouldn’t consider anything lower than an industry-standard venture-backed SaaS valuation (which was about eight times ARR at the time). The response, surprisingly, read: <em>“Let’s talk. Are you ready to sign a non-disclosure agreement?”</em></p>

<p>My biggest concern was that transferring ownership might lead to the Chatra team being laid off and the product termination. I didn’t want to let down our existing customers! The buyer understood the situation and assured us that Chatra would remain a separate line of business, at least for an extended period. No one on the team would lose their job. The buyer also planned to fork Chatra rather than close it, at least initially.</p>

<p>Still, letting go of it was difficult, and at times, I even felt the urge to blow up the negotiations.</p>

<p>So, why sell at all? We did it for three reasons:</p>

<ul>
<li>First, we felt stuck in the mature stage of the business lifecycle and missed the feeling of creating new things.</li>
<li>Second, we (rightfully) knew that the good times could not last forever; we would be wise to avoid putting all our eggs in one basket.</li>
<li>Third was a bit of pride. I genuinely wanted to go through the acquisition process, which has always seemed like a rite of passage for entrepreneurs.</li>
</ul>

<p>Chatra was growing, cash-flow positive, and economic tailwinds seemed to blow our way. On the flip side, however, we had little left to do as founders. We didn’t want to go upmarket and compete with massive players like <a href="http://intercom.com">Intercom</a> and <a href="http://drift.com">Drift</a>. We were happy in our niche, but it didn’t offer enough growth or expansion opportunities. We felt near the end of the line.</p>

<p>Looking back, I see how fortunate we were. The market took a huge hit soon after the acquisition, to the extent that I’m sure we would not have been able to fetch equally enticing offers within the next two years.</p>

<p>I want to stress that the offer we got was very, very generous. Still I often kick myself for not asking for more, as a deep-pocketed buyer is unlikely to turn away simply because we were trying to increase the company’s valuation. The additional ask would have been negligible to the buyer, but it could have been very meaningful for us.</p>

<p>Different acquisitions wind up looking different in the end. If you’re curious what a transaction looks like, ours was split into three payouts:</p>

<ol>
<li>An initial, fixed payment on the closing date;</li>
<li>Several flexible payouts based on reaching post-acquisition milestones;</li>
<li>An escrow amount deposited with an escrow agent for the possibility of something going wrong, like legal claims.</li>
</ol>

<p>We assumed this structure was non-negotiable and didn’t try to agree on a different distribution that would move more money to the initial payment. Why? We were too shy to ask and were sure we’d complete all requirements on time. Accepting a significant payment delay essentially credited the buyer for the amount of the payouts while leaving me and my co-founder vulnerable to uncertainty.</p>

<p>We should’ve been bold and negotiated more favorable terms. After all, it represented the last time we’d have to battle for Chatra. I consider that a lesson learned for next time.</p>

<div class="partners__lead-place"></div>

<h2 id="conclusion">Conclusion</h2>

<p>Parting ways with Chatra wasn’t easy. The team became my second family, and every product pixel and bit of code was dear to my heart. And yes, I do still feel nostalgia for it from time to time. But I certainly enjoy the freedom that comes with the financial gains.</p>

<p>One thing I absolutely want to mention before closing this out is that</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aHaving%20an%20%e2%80%9cexit%e2%80%9d%20under%20my%20belt%20actually%20did%20very%20little%20to%20change%20my%20personal%20well-being%20or%20sense%20of%20self-worth.%20The%20biggest%20lesson%20I%20took%20away%20from%20the%20acquisition%20is%20that%20success%20is%20the%20process%20of%20doing%20things,%20not%20the%20point%20you%20can%20arrive%20at.%0a&url=https://smashingmagazine.com%2f2024%2f04%2flessons-learned-after-selling-startup%2f">
      
Having an “exit” under my belt actually did very little to change my personal well-being or sense of self-worth. The biggest lesson I took away from the acquisition is that success is the process of doing things, not the point you can arrive at.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>I don’t yet know where the journey will take me from here, but I’m confident that there will be both a business challenge and a way of <a href="http://co-founder.cc">helping others on their own founder journey</a>. That said, I sincerely hope that my experience gives you a good deal of insight into the process of selling a company. It’s one of those things that often happens behind closed doors. But by shedding a little light on it &mdash; at least this one reflection &mdash; perhaps you will be more prepared than I was and know what to look for.</p>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(gg, yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Juan Diego Rodríguez</author><title>The End Of The Free Tier</title><link>https://www.smashingmagazine.com/2024/04/end-of-free-tier/</link><pubDate>Fri, 26 Apr 2024 08:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2024/04/end-of-free-tier/</guid><description>Free-tier pricing is a common marketing strategy. “Free” gets people in the door and allows them to settle in and see how things work. But, as Juan Diego Rodriguez explains, the practice of free &lt;em>tiers&lt;/em> is often conflated with free &lt;em>trials&lt;/em>. And while the distinction may be nuanced, the consequences of sunsetting free-tier pricing may be huge for those who come to rely on those plans.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2024/04/end-of-free-tier/" />
              <title>The End Of The Free Tier</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>The End Of The Free Tier</h1>
                  
                    
                    <address>Juan Diego Rodríguez</address>
                  
                  <time datetime="2024-04-26T08:00:00&#43;00:00" class="op-published">2024-04-26T08:00:00+00:00</time>
                  <time datetime="2024-04-26T08:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>I love free tiers, and I am not the only one. Everyone loves free things &mdash; they’re the best thing in life, after all. But maybe we have grown <em>too</em> accustomed to them, to the extent that a service switching from a “freemium” model to a fully paid plan would probably feel outrageous to you. Nowadays, though, the transition from free to paid services seems inevitable. It’s a matter of <em>when</em> a service drops its free tier rather than <em>if</em> it will.</p>

<p>Companies need to make money. As developers, we probably understand the most that <strong>a product comes with costs</strong>; there are startup funds, resources, and salaries spent to maintain and support the product against a competitive globalized market.</p>

<p>If I decided to take something I made and ship it to others, you darn well know I would charge money for it, and I assume you’re the same. At the same time, I’m typically more than happy to pay for something, knowing it supports the people who made it.</p>

<p>We get that, and we surely don’t go walk into a grocery store complaining that nothing they have is free. It’s just how things work.</p>

<p><strong>What exactly, then, is so infuriating about a service offering a free tier and later deciding to transition to a priced one?</strong></p>

<h2 id="it-s-positioning-not-money">It’s Positioning, Not Money</h2>

<p>It’s not so much about the money as it is the positioning. Who wouldn’t feel somewhat scammed, having invested time and resources into something that was initially advertised as “free” only to be blindsided behind a paywall?</p>

<p>Most of the time, the feeling is less anger than it is mildly annoying. For example, if your favorite browser suddenly became a paid premium offering, you would most likely switch to the next best option. But what happens when the free tier for a hosted product or service is retired? Switching isn’t as easy when hundreds of thousands of developers server their projects in a free-tier hosting plan.</p>

<p>The practice of offering a free tier only to remove it seems like a common practice on the web that won’t go away any time soon. It’s as though companies ditch them once (1) the product becomes mature enough to be a feature-rich offering or (2) the company realizes free customers are not converting into paid customers.</p>

<p>It has been a source of endless complaints, and one only needs to look back at PlanetScale’s recent decision to remove its free-tier database plan, which we will get deeper into in a bit. Are free tiers removed because of their unsustainable nature, or is it to appease profit-hungry companies? I want to explore the <em>why</em> and <em>how</em> of free tiers, better approaches for marketing “free” services, and how to smoothly retire a free tier when it inevitably goes away.</p>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p><strong>Web forms</strong> are at the center of every meaningful interaction. Meet Adam Silver&rsquo;s <strong><a href="https://www.smashingmagazine.com/printed-books/form-design-patterns/">Form Design Patterns</a></strong>, a practical guide to <strong>designing and building forms</strong> for the web.</p>
<a data-instant href="https://www.smashingmagazine.com/printed-books/form-design-patterns/" class="btn btn--green btn--large" style="">Jump to table of contents&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="https://www.smashingmagazine.com/printed-books/form-design-patterns/" class="feature-panel-image-link">
<div class="feature-panel-image"><picture><source type="image/avif" srcSet="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e57b41-b7f1-4ae3-886a-806cce580ef9/form-design-patterns-shop-image-1-1.avif" />
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51e0f837-d85d-4b28-bfab-1c9a47f0ce33/form-design-patterns-shop-image.png"
    alt="Feature Panel"
    width="481"
    height="698"
/>
</picture>
</div>
</a>
</div>
</aside>
</div>

<h2 id="glossary">Glossary</h2>

<p>Before we wade further into these waters, I think it’s worth having a baseline understanding of pricing concepts that are relevant to the discussion.</p>

<p>A free tier is one of several flavors:</p>

<ul>
<li><strong>Free trial opt-in</strong><br />
Permits users to try out the product for a limited period without providing payment details. Once the trial ends, so does access to the product features.</li>
<li><strong>Free trial opt-out</strong><br />
Requires users to provide payment information during registration en route to a free trial that, once it ends, automatically converts to a paid account.</li>
<li><strong>Freemium model</strong><br />
Offers access to a product’s “core” features but requires upgrading to a paid account to unlock other features and benefits.</li>
<li><strong>Reverse trial model</strong><br />
Users start with access to the premium tier upon registration and then transition to a freemium tier after the trial period ends.</li>
</ul>

<h2 id="case-study-planetscale">Case Study: PlanetScale</h2>

<p>Let’s start this conversation by looking at PlanetScale and how it killed its free tier at the beginning of the year. Founded in 2018, PlanetScale launched its database as a service in 2021 and has raised $105 million in venture capital and seed funding, becoming one of the fastest-growing tech companies in North America by 2023. In March of this year, CEO Sam Lambert <a href="https://planetscale.com/blog/planetscale-forever">announced the removal of PlanetScale’s hobby tier</a>.</p>

<p>In short, the decision was made to provide <em>“a reliable and sustainable platform for our customers”</em> by not <em>“giving away endless amounts of free resources to keep growing,”</em> which, of course, leaves everyone in the freemium tier until April 8 to either pay for one of the next plans at the outrageous starting price of $39 per month or migrate to another platform.</p>

<p>Again, a company needs steady revenue and a reliable business plan to stay afloat. But PlanetScale gave mixed signals when they stated in the bespoke memo that <em>“[e]very unprofitable company has a date in the future where it could disappear.”</em> Then they went on to say they are <em>“the main database for companies totaling more than $50B in market cap,”</em> and they <em>“have been recognized [&hellip;] as one of the fastest growing tech companies in the US.”</em></p>

<p>In non-bureaucratic speak, PlanetScale says that the product is failing from one side of its mouth and that the company is wildly successful from the other.</p>

<p>The company is doing great. In <a href="https://www.businesswire.com/news/home/20231108393881/en/">November 2023, PlanetScale was ranked as the 188<sup>th</sup> fastest-growing company in North America</a> by Deloitte Technology Fast 500™. Growth doesn’t necessarily equal revenue, but <em>“to be eligible for Technology Fast 500 recognition, [&hellip;] [c]ompanies must have base-year operating revenues of at least US $50,000, and current-year operating revenues of at least US $5 million.”</em></p>

<p>PlanetScale’s decision can only be interpreted as “we want more money,” at least to me. There’s nothing about its current performance that suggests it needs the revenue to keep the company alive.</p>

<p>That’s a punch below the waist for the developer community, especially considering that those on the free tier are likely independent bootstrappers who need to keep their costs low. And let’s not overlook that ending the free tier was <a href="https://www.theregister.com/2024/03/11/planetscale_lays_off_staff_and/">accompanied by a round of layoffs</a> at the company.</p>

<p>PlanetScale’s story is not what worries me; it’s that <strong>retiring freemium plans is becoming standard practice</strong>, as we have seen with the likes of other big PaaS players, including Heroku and Railway.</p>

<p>That said, the PlanetScale case is perhaps the most frustrating because the cheapest alternative to the free tier they now offer is a whopping $39 per month. Compare that to the likes of others in that space, such as Heroku ($7 per month) and Railway ($5 per month).</p>

<div class="partners__lead-place"></div>

<h2 id="is-this-how-a-free-tier-works">Is This How A Free Tier Works?</h2>

<p>With zero adoption, the value of a new service can’t be seen behind a paywall. Launching any kind of product or service with a freemium pricing model is often used to bring awareness to the product and entice early adopters who might convert into paying customers to help offset the costs of those on the free plan. It’s the old Pareto, or <sup>80</sup>&frasl;<sub>20</sub>, rule, where <a href="https://www.psychologytoday.com/us/blog/click-here-for-happiness/202209/how-to-use-the-80-20-rule-to-reach-your-goals">20% of paying customers ought to pay for the 80% of free users</a>.</p>

<p>A <strong>conversion rate</strong> is the percentage of users that upgrade from a free tier to a paid one, and an “average” rate depends on the type of free tier or trial being offered.</p>

<p>In a freemium model &mdash; without sales assist &mdash; a good conversion rate is somewhere between 3&ndash;5%, but that’s optimistic. Conversion rates are often way lower in reality and perhaps the toughest to improve for startups with few or no customers. Early on, startups often have so few paying customers that they will have to operate at a loss until figuring out a way to land paying customers who can subsidize the ones who aren’t paying anything.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/end-of-free-tier/conversion-rates.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="534"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/end-of-free-tier/conversion-rates.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/end-of-free-tier/conversion-rates.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/end-of-free-tier/conversion-rates.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/end-of-free-tier/conversion-rates.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/end-of-free-tier/conversion-rates.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/end-of-free-tier/conversion-rates.png"
			
			sizes="100vw"
			alt="Illustrated chart of conversion rates for free trials."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Figure 1: Average conversion rate chart. (Image source: <a href='https://www.lennysnewsletter.com/p/monthly-churn-benchmarks'>Lenny’s Newsletter</a>) (<a href='https://files.smashing.media/articles/end-of-free-tier/conversion-rates.png'>Large preview</a>)
    </figcaption>
  
</figure>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aThe%20longer%20a%20company%20operates%20at%20a%20loss,%20the%20more%20likely%20it%20races%20to%20generate%20the%20highest%20possible%20growth%20before%20undoubtedly%20having%20to%20cut%20benefits%20for%20free%20users.%0a&url=https://smashingmagazine.com%2f2024%2f04%2fend-of-free-tier%2f">
      
The longer a company operates at a loss, the more likely it races to generate the highest possible growth before undoubtedly having to cut benefits for free users.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>A lot of those free users will feel misled and migrate to another service, but once the audience is big enough, a company can afford to lose free customers in favor of the minority that will switch to premium. Take Evernote, for example. The note-taking app allowed free users to save 100,000 notes and 250 notebooks only to do an about-face in 2023 and <a href="https://www.androidpolice.com/evernote-about-to-get-a-lot-less-useful-free-users/">limit free users to 50 notes and one notebook</a>.</p>

<p>In principle, a free tier serves the same purpose for SaaS (Software as a System) and PaaS (Product as a System) offerings, but the effects differ. For one, cloud computing costs lots of money, so offering an AWS wrapper in a free tier is significantly harder to sustain. The real difference between SaaS and PaaS, however, is clear when the company decides to kill off its free tier.</p>

<p>Let’s take Zoom as a SaaS example: there is a <strong>basic tier</strong> that gives you up to 40 minutes of free meeting time, and that is plenty for people who simply don’t need much beyond that. If Zoom were to remove its free tier, free users would most likely move to other freemium alternatives like Google Meet rather than upgrade to one of Zoom’s paid tiers. Those customers have invested nothing in Zoom that locks them in, so the cost of switching to another meeting app is only the learning curve of what app they switch to.</p>

<p>This is in contrast to a PaaS; if the free tier is removed, switching providers introduces costs since a part of your architecture lives in the provider’s free tier. Besides the effort needed to migrate to another provider, moving data and servers can be an expensive operation, thanks to <a href="https://www.cloudflare.com/learning/cloud/what-are-data-egress-fees/#:~:text=Data%20egress%20fees%20are%20charges,for%20cloud%20storage%20and%20computing.">data egress fees</a>. <strong>Data egress fees</strong> are obscure charges that cloud providers make customers pay for moving data from one service to another. They charge you to <em>stop paying</em>!</p>

<p>Thankfully, there is an increased awareness of this issue through the European Union’s <a href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=COM%3A2022%3A68%3AFIN">Data Act</a> that requires cloud providers located in Europe to remove barriers that prevent customers from easily switching between companies, including the removal of artificial egress fees.</p>

<h2 id="the-ethics-of-the-free-tier">The Ethics Of The Free Tier</h2>

<p>Is it the developer’s fault for hosting a project on a free pricing tier, considering that it can be rolled out at any moment? I have two schools of thought on this: <strong>principle</strong> and <strong>consequential</strong>.</p>

<ul>
<li><strong>Principle</strong><br />
On the one hand, you shouldn’t have to expect a company to pull the rug out from under you by removing a free tier, especially if the company aims to be a reliable and sustainable platform.</li>
<li><strong>Consequential</strong><br />
On the other hand, you don’t expect someone to cut a red light and hit you when you are driving, but you still look at both sides of the street. So it is with using a free tier. Even if it is “immoral” for a company to remove the tier, a developer ought to have a backup plan in the event that it happens, especially as the disappearance of free tiers becomes more prevalent in the industry.</li>
</ul>

<p>I think it boils down to a matter of transparency. No free tier is advertised as something that may disappear, even if it will in the future. In this case, a free tier is supposed to be another tier with fewer benefits than the paid plan offerings but just as reliable as the most expensive plan, so no user should expect to migrate their projects to other providers any time soon.</p>

<h2 id="what-s-the-alternative">What’s The Alternative?</h2>

<p>Offering customers a free tier only to remove it once the company gets a “healthy enough” share of the market is just wrong, particularly if it was never attached to an up-front sunset date.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aPretending%20that%20the%20purpose%20of%20a%20free%20tier%20is%20the%20same%20as%20a%20free%20trial%20is%20unjust%20since%20it%20surely%20isn%e2%80%99t%20advertised%20that%20way.%0a&url=https://smashingmagazine.com%2f2024%2f04%2fend-of-free-tier%2f">
      
Pretending that the purpose of a free tier is the same as a free trial is unjust since it surely isn’t advertised that way.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>If a company wants to give people a taste of how a product or service works, then I think there are far better and more sincere alternatives to the free-tier pricing model:</p>

<ul>
<li><strong>Free trials (opt-in)</strong><br />
<a href="https://strapi.io/">Strapi</a> is an open-source CMS and a perfect example of a service offering a free trial. In 2023, the company <a href="https://strapi.io/blog/strapi-cloud-is-now-available">released a cloud provider</a> to host Strapi CMS with zero configuration. Even though I think Strapi Cloud is on the pricey side, I still appreciate having a 14-day free trial over a free tier that can or maybe will be removed later. The free trial gives users enough time to get a feel for the product, and there’s no credit card required that would lock someone in (because, let’s face it, some companies count on you forgetting to cancel your free subscription before payments kick in).</li>
</ul>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/end-of-free-tier/strapi-cloud-free-trial.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/end-of-free-tier/strapi-cloud-free-trial.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/end-of-free-tier/strapi-cloud-free-trial.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/end-of-free-tier/strapi-cloud-free-trial.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/end-of-free-tier/strapi-cloud-free-trial.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/end-of-free-tier/strapi-cloud-free-trial.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/end-of-free-tier/strapi-cloud-free-trial.png"
			
			sizes="100vw"
			alt="Strapi Cloud free trial"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Strapi Cloud free trial. (<a href='https://files.smashing.media/articles/end-of-free-tier/strapi-cloud-free-trial.png'>Large preview</a>)
    </figcaption>
  
</figure>

<ul>
<li><strong>Free credits</strong><br />
I have used Railway to host Node.js + Postgres in the past. I think that its “free tier” is the best example of how to help customers try the service: the cheapest plan is a relatively affordable $5 per month, and a new subscriber is credited with $5 to start the project and evaluate the service, again, without the requirement of handing over credit card information or pulling any rugs out from under people. Want to continue your service after the free credits are exhausted? Buy more credits!</li>
</ul>

<p>Railway is a particular case because it used to have a free tier, but <a href="https://blog.railway.app/p/introducing-trial-hobby-pro-plans">it was withdrawn on June 2, 2023</a>. However, the company removed it with a level of care and concern for customers that PlanetScale lacked and even gave customers who relied on the free tier a trial account with a number of free credits. It is also important to note (and I can’t get over it) that PlanetScale’s new cheapest plan is $39 per month, while Railway was able to limit the damage to $5 per month.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/end-of-free-tier/railway-pricing.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="450"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/end-of-free-tier/railway-pricing.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/end-of-free-tier/railway-pricing.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/end-of-free-tier/railway-pricing.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/end-of-free-tier/railway-pricing.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/end-of-free-tier/railway-pricing.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/end-of-free-tier/railway-pricing.png"
			
			sizes="100vw"
			alt="Railway pricing"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Railway pricing. (<a href='https://files.smashing.media/articles/end-of-free-tier/railway-pricing.png'>Large preview</a>)
    </figcaption>
  
</figure>

<div class="partners__lead-place"></div>

<h2 id="free-tiers-that-i-use">Free Tiers That I Use</h2>

<p>I don’t want this article to be just a listicle of free services but rather the start of a conversation about the “free-tier dilemma”. I also want to share some of the free tiers I use, even for small but production-ready projects.</p>

<h3 id="supabase">Supabase</h3>

<p>You can make pretty much any imaginable web app using Supabase as the back-end since it brings a PostgreSQL database, authentication, real-time subscriptions, and storage in a central dashboard &mdash; complete with a generous allocation of database usage in its free tier.</p>

<h3 id="railway">Railway</h3>

<p>I have been using Railway to host Strapi CMS for a long time. Aside from its beautiful UI, Railway includes seamless deployment workflows, automatic scaling, built-in CI/CD pipelines, and integration with popular frameworks and databases thanks to its hundreds of templates. It doesn’t include a free tier <em>per se</em>, but you can get the full feel of Railway with the $5 credit they offer.</p>

<h3 id="github-pages">GitHub Pages</h3>

<p>I use GitHub Pages the way I know many of you do as well: for static pages and technical demos. I have used it before to make live examples for my blog posts. So, it’s more of a playground that I use to make a few artifacts when I need to deploy something fast, but I don’t rely on it for anything that would be of consequence if it were to suddenly go away.</p>

<h3 id="netlify">Netlify</h3>

<p>Beyond hosting, Netlify offers support for almost all modern frameworks, not to mention that they toss in lots of additional perks, including solid documentation, continuous deployment, templates, an edge network, and analytics &mdash; all of which are available in a free tier that pleases almost anyone’s needs.</p>

<h2 id="conclusion">Conclusion</h2>

<p>If it isn’t totally clear where I fall on the free pricing tier situation, I’m not advocating that we end the practice, but for <strong>more transparency</strong> on the side of the companies that offer free tier plans and increased awareness on the side of developers like myself.</p>

<p>I believe that the only way it makes sense to offer a free tier for a SaaS/PaaS is for the company providing it to view it as part of the core product, one that cannot be sunset without a clear and transparent exit strategy, clearly communicated up-front during any sort of registration process. Have a plan for users to painlessly switch services. Allow the customer to make an informed choice and accept responsibility from there.</p>

<p><strong>Free tiers should attract users rather than trap them</strong>, and there is an abysmal difference between replacing a free tier for $5 per month with one that costs nearly $40. Taking away the service is one thing; charging exorbitant rates on top of it only adds insult to injury.</p>

<p>We can do better here, and there are plenty of alternatives to free tiers for effectively marketing a product.</p>

<h3 id="further-reading-on-smashingmag">Further Reading On SmashingMag</h3>

<ul>
<li>“<a href="https://www.smashingmagazine.com/2022/03/guide-mobile-app-marketing/">A Complete Guide To Mobile App Marketing</a>,” Sona Dabaghyan</li>
<li>“<a href="https://www.smashingmagazine.com/2023/06/ia-presenter-case-study-product-pricing-considerations/">iA Presenter: A Case Study On Product Pricing Considerations</a>,” Geoff Graham</li>
<li>“<a href="https://www.smashingmagazine.com/2011/09/youre-pricing-it-wrong-software-pricing-demystified/">You’re Pricing It Wrong: Software Pricing Demystified</a>,” Eran Galperin</li>
<li>“<a href="https://www.smashingmagazine.com/2017/08/success-quality-of-work/">Is Success Down To The Quality Of Your Work?</a>,” Paul Boag</li>
</ul>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(gg, yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Chiara Aliotta</author><title>Crafting Experiences: Uniting Rikyu’s Wisdom With Brand Experience Principles</title><link>https://www.smashingmagazine.com/2024/03/uniting-rikyu-wisdom-brand-experience-principles/</link><pubDate>Thu, 21 Mar 2024 15:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2024/03/uniting-rikyu-wisdom-brand-experience-principles/</guid><description>Whether digital or physical, designing a customer touchpoint requires an understanding of the essential relationship between the brand and the user experience, which is also known as the &lt;strong>brand experience.&lt;/strong> Yet more importantly, a brand must define the principles around which they intend to build a long-lasting relationship with their customers. This article is a simple guide to building long-lasting customer relationships based on the seven rules of Rikyu in the Japanese tea ceremony for a creative and memorable twist.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2024/03/uniting-rikyu-wisdom-brand-experience-principles/" />
              <title>Crafting Experiences: Uniting Rikyu’s Wisdom With Brand Experience Principles</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Crafting Experiences: Uniting Rikyu’s Wisdom With Brand Experience Principles</h1>
                  
                    
                    <address>Chiara Aliotta</address>
                  
                  <time datetime="2024-03-21T15:00:00&#43;00:00" class="op-published">2024-03-21T15:00:00+00:00</time>
                  <time datetime="2024-03-21T15:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>In today’s dynamic and highly competitive market, the concept of brand experience is a key aspect of customer engagement: designers, take note.</p>

<p><strong>Brand experience</strong> refers to all customer interactions and engagements with a brand, encompassing various brand channels, products, services, and encounters from the company website to unpacking its product. It involves following the user each time she comes into contact with the brand and ensuring that her experience is consistent and pleasant.</p>

<p>Beyond merely designing products or services, the designers or design team (along with the marketing department) must strive to create memorable, emotional, and immersive interactions with their customers. A <strong>compelling brand experience</strong> attracts and retains customers while reinforcing the brand promise.</p>

<p>Achieving this goal can be daunting but not impossible as long as designers follow specific principles. Recently, I attended a tea ceremony in the Japanese city of Kyoto, where I was introduced to Rikyu’s timeless wisdom. With fascination, I saw that such wisdom and insight could be applied to the principles of a compelling brand experience in the following ways.</p>

<h2 id="the-japanese-tea-ceremony-according-to-tea-master-rikyu">The Japanese Tea Ceremony, According to Tea Master Rikyu</h2>

<p>The seven principles of Rikyu were developed by Sen no Rikyu, a revered tea master of the 16th century. Each principle encapsulates the essence of the Japanese tea ceremony, emphasizing not only the preparation of tea but also the creation of a harmonious, meaningful experience.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/13-brandexperience-rikyuprinciples-kyoto.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/13-brandexperience-rikyuprinciples-kyoto.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/13-brandexperience-rikyuprinciples-kyoto.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/13-brandexperience-rikyuprinciples-kyoto.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/13-brandexperience-rikyuprinciples-kyoto.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/13-brandexperience-rikyuprinciples-kyoto.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/13-brandexperience-rikyuprinciples-kyoto.png"
			
			sizes="100vw"
			alt="Photo of cherry blossomed Kyoto"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/13-brandexperience-rikyuprinciples-kyoto.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>During my own captivating tea ceremony experience, I gained valuable insights and a fresh perspective on how designers can help create meaningful connections between brands and their audiences, much as the tea ceremony has done for generations.</p>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p><strong>Web forms</strong> are at the center of every meaningful interaction. Meet Adam Silver&rsquo;s <strong><a href="https://www.smashingmagazine.com/printed-books/form-design-patterns/">Form Design Patterns</a></strong>, a practical guide to <strong>designing and building forms</strong> for the web.</p>
<a data-instant href="https://www.smashingmagazine.com/printed-books/form-design-patterns/" class="btn btn--green btn--large" style="">Jump to table of contents&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="https://www.smashingmagazine.com/printed-books/form-design-patterns/" class="feature-panel-image-link">
<div class="feature-panel-image"><picture><source type="image/avif" srcSet="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/64e57b41-b7f1-4ae3-886a-806cce580ef9/form-design-patterns-shop-image-1-1.avif" />
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/51e0f837-d85d-4b28-bfab-1c9a47f0ce33/form-design-patterns-shop-image.png"
    alt="Feature Panel"
    width="481"
    height="698"
/>
</picture>
</div>
</a>
</div>
</aside>
</div>

<h2 id="rule-one-making-a-satisfying-bowl-of-tea">Rule One: Making a Satisfying Bowl of Tea</h2>

<p>The first principle of Rikyu goes right to the heart of the tea ceremony: preparing a satisfying bowl of tea.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/14-brandexperience-rikyuprinciples-bowls.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/14-brandexperience-rikyuprinciples-bowls.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/14-brandexperience-rikyuprinciples-bowls.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/14-brandexperience-rikyuprinciples-bowls.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/14-brandexperience-rikyuprinciples-bowls.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/14-brandexperience-rikyuprinciples-bowls.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/14-brandexperience-rikyuprinciples-bowls.png"
			
			sizes="100vw"
			alt="A photo of the bowl for tea"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/14-brandexperience-rikyuprinciples-bowls.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>This deceptively simple principle reminds designers that everything we design for a brand should be able to provide a memorable experience for the final user. We should aim to go beyond simple brand and customer transactions and instead focus on crafting experiences through products and services.</p>

<p><strong>Examples</strong>:</p>

<ul>
<li>Airbnb,</li>
<li>Duolingo.</li>
</ul>

<p>Both of them facilitate extraordinary experiences beyond the basic user interaction of “rent a house for my trip” and “learn a foreign language.”</p>

<h3 id="airbnb-redefining-travel-through-experience">Airbnb: Redefining Travel Through Experience</h3>

<p>Compared to competitors like Booking.com, Airbnb has completely redefined the experience of travelling, adding a strong storytelling aspect.</p>

<p>From the beginning, the brand has offered a way for travelers to truly immerse themselves in the culture and lifestyle of their destinations.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/01-brandexperience-rikyuprinciples-airbnb.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/01-brandexperience-rikyuprinciples-airbnb.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/01-brandexperience-rikyuprinciples-airbnb.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/01-brandexperience-rikyuprinciples-airbnb.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/01-brandexperience-rikyuprinciples-airbnb.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/01-brandexperience-rikyuprinciples-airbnb.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/01-brandexperience-rikyuprinciples-airbnb.png"
			
			sizes="100vw"
			alt="AirBnb website pages"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/01-brandexperience-rikyuprinciples-airbnb.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Today, Airbnb’s website shows the brand offering the possibility of “living” in an extraordinary place, from cozy apartments to extravagant castles. We can see that their brand isn’t just about finding the right accommodation but also about <strong>creating enduring memories and stories</strong>.</p>

<p>Their services have been significantly updated in recent years, offering customers great flexibility to book in total safety from qualified hosts (called Superhosts) with homes that have been reviewed and reflect Airbnb quality standards.</p>

<p><strong>Takeaway:</strong> Aim to create experiences that stay with people long after they have interacted with your brand.</p>

<h3 id="duolingo-language-learning-as-a-playful-adventure">Duolingo: Language-Learning as a Playful Adventure</h3>

<p>Language learning is often considered a daunting task, one that pushes us out of our comfort zones. But Duolingo, with its playful and gamified approach, is changing that perception.</p>

<p>Their app has transformed language learning into a delightful adventure that anyone can join, even for just five minutes a day.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/02-brandexperience-rikyuprinciples-duolingo.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/02-brandexperience-rikyuprinciples-duolingo.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/02-brandexperience-rikyuprinciples-duolingo.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/02-brandexperience-rikyuprinciples-duolingo.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/02-brandexperience-rikyuprinciples-duolingo.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/02-brandexperience-rikyuprinciples-duolingo.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/02-brandexperience-rikyuprinciples-duolingo.png"
			
			sizes="100vw"
			alt="Duolingo’s user interface design"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/02-brandexperience-rikyuprinciples-duolingo.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>By creating characters that team up with Duo (the owl mascot), Duolingo injects a <strong>sense of companionship and relatability</strong> into language learning, making it feel like taking a journey alongside a helpful friend.</p>

<p><strong>Takeaway:</strong> Break down complex tasks into enjoyable, bite-sized experiences that improve the long-term experience.</p>

<h2 id="rule-two-efficiently-laying-the-charcoal-for-boiling-water">Rule Two: Efficiently Laying the Charcoal for Boiling Water</h2>

<p>As I took my place in the tea room, just opposite the tea master, he explained that charcoal plays an extremely important role in the ceremony. It must be precisely placed to encourage airflow, prevent the fire from extinguishing prematurely, and prepare tea at the perfect temperature.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/15-brandexperience-rikyuprinciples-charcoal.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/15-brandexperience-rikyuprinciples-charcoal.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/15-brandexperience-rikyuprinciples-charcoal.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/15-brandexperience-rikyuprinciples-charcoal.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/15-brandexperience-rikyuprinciples-charcoal.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/15-brandexperience-rikyuprinciples-charcoal.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/15-brandexperience-rikyuprinciples-charcoal.png"
			
			sizes="100vw"
			alt="A photo of a bowl of charcoal burning inside the pavement hole"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/15-brandexperience-rikyuprinciples-charcoal.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>For designers, this translates into creating a comprehensive set of guidelines and rules that dictate how every brand element should look, feel, and behave.</p>

<p>Much like the precise arrangement of charcoal, a <strong>well-designed brand system is the foundation of consistent and efficient brand representation</strong> that ensures harmony and coherence across every touchpoint.</p>

<p>This may seem obvious, but it is only in the last decade that technology companies have started creating elaborate and complete brand guidelines.</p>

<p><strong>Examples</strong>:</p>

<ul>
<li>IBM,</li>
<li>Atlassian.</li>
</ul>

<h3 id="ibm-consistency-breeds-loyalty-and-recognisability">IBM: Consistency Breeds Loyalty and Recognisability</h3>

<p>When we think about the connection between brand and technology, it’s natural to think immediately of Apple and Steve Jobs. So you could be surprised that in fact, IBM was one of the first tech companies to hire a professional graphic designer.</p>

<p>Acclaimed graphic designer Paul Rand designed the iconic IBM logo in 1956. The collaboration between Paul Rand and the company went on for many years, becoming a benchmark for the integration of design principles into the corporate identity of a tech company.</p>

<p>Even today, <a href="https://carbondesignsystem.com/">IBM’s design system Carbon</a> is a testament to the power of simplicity and consistency. Focusing on clarity and functionality, IBM’s brand elements work seamlessly across a diverse range of products and services, including events and workplaces. The Carbon design system is also open source, meaning anyone can contribute to improving it.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/03-brandexperience-rikyuprinciples-ibm.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/03-brandexperience-rikyuprinciples-ibm.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/03-brandexperience-rikyuprinciples-ibm.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/03-brandexperience-rikyuprinciples-ibm.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/03-brandexperience-rikyuprinciples-ibm.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/03-brandexperience-rikyuprinciples-ibm.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/03-brandexperience-rikyuprinciples-ibm.png"
			
			sizes="100vw"
			alt="Screenshots of IBM design"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/03-brandexperience-rikyuprinciples-ibm.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Takeaway:</strong> A consistent and well-designed brand identity allows for organic growth and expansion without diluting the brand, reinforcing brand loyalty and recognition.</p>

<h3 id="atlassian-guiding-future-decisions">Atlassian: Guiding Future Decisions</h3>

<p>Atlassian is a software company with a diverse product portfolio. Their <a href="https://atlassian.design">design system</a> promotes <strong>scalability and flexibility</strong>, while their brand elements are designed to adapt harmoniously across various Atlassian applications.</p>

<p>This adaptability ensures a unified brand experience while accommodating the unique characteristics of each product. It serves as a compass, helping designers navigate the vast landscape of possibilities and ensuring that each design decision made for each Atlassian product aligns with the brand’s essence.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/04-brandexperience-rikyuprinciples-atlassian.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/04-brandexperience-rikyuprinciples-atlassian.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/04-brandexperience-rikyuprinciples-atlassian.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/04-brandexperience-rikyuprinciples-atlassian.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/04-brandexperience-rikyuprinciples-atlassian.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/04-brandexperience-rikyuprinciples-atlassian.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/04-brandexperience-rikyuprinciples-atlassian.png"
			
			sizes="100vw"
			alt="Screemnshots of Atlassian website"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/04-brandexperience-rikyuprinciples-atlassian.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Takeaway:</strong> A strong design foundation serves as an invaluable guide as brands evolve and expand their offering through more different products and services.</p>

<h2 id="rule-3-providing-warmth-in-winter-and-coolness-in-summer">Rule 3: Providing Warmth in Winter and Coolness in Summer</h2>

<p>In the art of the Japanese tea ceremony, the provision of warmth in winter and coolness in summer is a delicate balance, attuned to the emotional and physical states of the participants. This is well-reflected in the tea room’s decoration, and the tea served, depending on the hour and the season, in a bowl chosen by the tea master.</p>

<p>When I attended the tea ceremony, the room was decorated to reflect the spring season. The sweet was also inspired by the blooming cherry blossoms, which were pink and light green. The door to the garden was left open so that we could appreciate the scent of fresh blossoms in the gentle spring breeze.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/16-brandexperience-rikyuprinciples-bowlandsweets.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/16-brandexperience-rikyuprinciples-bowlandsweets.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/16-brandexperience-rikyuprinciples-bowlandsweets.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/16-brandexperience-rikyuprinciples-bowlandsweets.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/16-brandexperience-rikyuprinciples-bowlandsweets.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/16-brandexperience-rikyuprinciples-bowlandsweets.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/16-brandexperience-rikyuprinciples-bowlandsweets.png"
			
			sizes="100vw"
			alt="A photo of the bowl and sweets with blossoms"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/16-brandexperience-rikyuprinciples-bowlandsweets.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>In the design world, this rule translates into the profound understanding and adaptation of experiences to align with customers’ ever-changing needs and emotional states throughout their journey.</p>

<p>Understanding the natural flow of emotions during the user journey allows brands to create responsive experiences that feel personal.</p>

<p><strong>Examples</strong>:</p>

<ul>
<li>Nike,</li>
<li>Netflix.</li>
</ul>

<h3 id="nike-versatility-in-style-and-experience">Nike: Versatility in Style and Experience</h3>

<p>Nike, better than any other brand leader in sportswear, exemplifies mastery in tailoring brand experiences.</p>

<p>The brand recognizes that customers engage with their products across diverse activities.</p>

<p>For this reason, Nike offers a wide range of products, sometimes presented with mini-websites and beautiful campaigns, each with its own distinct style and purpose.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/05-brandexperience-rikyuprinciples-nike.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/05-brandexperience-rikyuprinciples-nike.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/05-brandexperience-rikyuprinciples-nike.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/05-brandexperience-rikyuprinciples-nike.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/05-brandexperience-rikyuprinciples-nike.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/05-brandexperience-rikyuprinciples-nike.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/05-brandexperience-rikyuprinciples-nike.png"
			
			sizes="100vw"
			alt="Screenshots of Nike mini-websites and campaigns"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/05-brandexperience-rikyuprinciples-nike.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Takeaway:</strong> By catering to their users’ varied tastes and needs, brands can tailor experiences to individual preferences and emotions, fostering a deeper connection and resonance.</p>

<h3 id="netflix-personalised-home-entertainment">Netflix: Personalised Home Entertainment</h3>

<p>Netflix has deftly pioneered the use of advanced algorithms and artificial intelligence to tailor its content recommendations. These are not only based on geographic location but individual user preferences.</p>

<p>The platform dynamically adjusts preview images and trailers, aiming to match each user’s unique taste.</p>

<p>Their latest update includes <a href="https://netflixtechblog.com/the-next-step-in-personalization-dynamic-sizzles-4dc4ce2011ef"><em>Dynamic Sizzle Reel</em></a>, short personalized clips of upcoming shows that offer each member a unique and effective experience.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/06-brandexperience-rikyuprinciples-netflix.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/06-brandexperience-rikyuprinciples-netflix.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/06-brandexperience-rikyuprinciples-netflix.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/06-brandexperience-rikyuprinciples-netflix.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/06-brandexperience-rikyuprinciples-netflix.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/06-brandexperience-rikyuprinciples-netflix.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/06-brandexperience-rikyuprinciples-netflix.png"
			
			sizes="100vw"
			alt="Netflix homepage design with mini trailers"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/06-brandexperience-rikyuprinciples-netflix.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>It is worth noting, however, that while Netflix puts effort into yielding greater engagement and enjoyment for their members, the subjective nature of taste can sometimes lead to surprises, where a preview may align perfectly with an individual user’s taste, yet the show itself varies in style.</p>

<p><strong>Takeaway:</strong> When customizing experiences, designers should create an interplay between familiarity and novelty, tailoring content to individual tastes while respecting the user’s need for both comfort and discovery.</p>

<div class="partners__lead-place"></div>

<h2 id="rule-4-arranging-flowers-as-though-they-were-in-the-field">Rule 4: Arranging Flowers as Though They Were in the Field</h2>

<p>As I stepped into the tea room, there was a sense of harmony and tranquillity infused by nature forming part of the interior environment.</p>

<p>The flowers were meticulously arranged in a pot as though plucked directly from the field at that very moment. According to Rikyu’s principles, their composition should be an ode to nature’s simplicity and authenticity.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/17-brandexperience-rikyuprinciples-tearoom.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/17-brandexperience-rikyuprinciples-tearoom.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/17-brandexperience-rikyuprinciples-tearoom.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/17-brandexperience-rikyuprinciples-tearoom.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/17-brandexperience-rikyuprinciples-tearoom.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/17-brandexperience-rikyuprinciples-tearoom.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/17-brandexperience-rikyuprinciples-tearoom.png"
			
			sizes="100vw"
			alt="A photo of the flowers in a pot in a tea room"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/17-brandexperience-rikyuprinciples-tearoom.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>For designers, this rule echoes the importance of using aesthetics to create a visually captivating brand experience that authentically reflects the brand’s values and mission.</p>

<p>The aesthetic choices in design can convey a brand’s essence, creating a harmonious and truthful representation of the brand and its services.</p>

<p>It is important to remember, however, that a visually appealing brand experience is not just about aesthetics alone, but using them to create an <strong>emotional and truthful connection</strong> with the audience.</p>

<p><strong>Examples</strong>:</p>

<ul>
<li>Kerrygold,</li>
<li>WWF.</li>
</ul>

<h3 id="kerrygold-forging-memorable-narratives">Kerrygold: Forging Memorable Narratives</h3>

<p>The <a href="https://www.themagicalpantry.com/">Kerrygold “Magic Pantry”</a> website is testament to the art of visual storytelling, following the brand’s mission to spread authentic Irish recipes and stories from Ireland and its farms.</p>

<p>Through a captivating storytelling game, users explore a recipe or storybook, pick a favorite dish based on their meal, and choose their assistant.</p>

<p>In a perfect story fashion, with a good amount of personalization, users then learn how to cook their chosen recipes using Kerrygold products.</p>

<p>This immersive experience showcases the excellence of Kerrygold’s products and conveys the brand’s commitment to quality and authenticity, while the storybook confers the idea of passing family traditions across the world (so common in the past!)</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/07-brandexperience-rikyuprinciples-kerrygold.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/07-brandexperience-rikyuprinciples-kerrygold.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/07-brandexperience-rikyuprinciples-kerrygold.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/07-brandexperience-rikyuprinciples-kerrygold.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/07-brandexperience-rikyuprinciples-kerrygold.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/07-brandexperience-rikyuprinciples-kerrygold.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/07-brandexperience-rikyuprinciples-kerrygold.png"
			
			sizes="100vw"
			alt="Images of the Kerrygold website"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/07-brandexperience-rikyuprinciples-kerrygold.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Takeaway:</strong> Through visuals, designers need to be authentic, reflecting the truth about the brand. This truthfulness enhances the credibility of the brand’s narrative and establishes deeper user connections.</p>

<h3 id="wwf-enhancing-memorability-through-beauty-and-truth">WWF: Enhancing Memorability Through Beauty and Truth</h3>

<p>WWF employs visual storytelling to raise awareness about environmental issues and species in danger of extinction. Their campaign websites always present a beautiful and immersive visual journey that authentically communicates the urgency of their mission.</p>

<p>While these two websites are grounded in the universal act of eating, WWF prompts users to reflect on their habits’ profound impact on the environment.</p>

<p>Both websites ingeniously guide users to think about food consumption in more detail, fostering a journey toward mindful eating that respects both species and the environment.</p>

<p>The websites adopt a quiz-like approach for users to reflect on and reassess their food consumption patterns, fostering a journey toward mindful eating that respects both species and the environment.</p>

<p>Beyond individual insights, the interactive nature of these platforms encourages users to extend their newfound knowledge to their friends, amplifying awareness of crucial topics such as food consumption, CO2 emissions, and sustainable alternatives.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/08-brandexperience-rikyuprinciples-wwf.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/08-brandexperience-rikyuprinciples-wwf.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/08-brandexperience-rikyuprinciples-wwf.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/08-brandexperience-rikyuprinciples-wwf.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/08-brandexperience-rikyuprinciples-wwf.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/08-brandexperience-rikyuprinciples-wwf.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/08-brandexperience-rikyuprinciples-wwf.png"
			
			sizes="100vw"
			alt="WWF campaign websites"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/08-brandexperience-rikyuprinciples-wwf.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Takeaway:</strong> By infusing elements of discovery and self-reflection, designers can help brands promote their values and missions while empowering their users to become ambassadors for change.</p>

<h2 id="rule-5-being-ready-ahead-of-time">Rule 5: Being Ready Ahead of Time</h2>

<p>In the Japanese tea ceremony, Rule 5 of Rikyu’s principles places emphasis on the seamless art of preparation, ensuring that everything is ready for the guests.</p>

<p>For their part, guests are expected to arrive on time for their appointment and be mindfully prepared to attend the ceremony.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/18-brandexperience-rikyuprinciples-spoons.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/18-brandexperience-rikyuprinciples-spoons.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/18-brandexperience-rikyuprinciples-spoons.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/18-brandexperience-rikyuprinciples-spoons.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/18-brandexperience-rikyuprinciples-spoons.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/18-brandexperience-rikyuprinciples-spoons.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/18-brandexperience-rikyuprinciples-spoons.png"
			
			sizes="100vw"
			alt="Images of the different spoons used to collect the tea"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/18-brandexperience-rikyuprinciples-spoons.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Designers should note that this principle underscores the significance of foresight, careful planning, and meticulous attention &mdash; both to detail and the user’s time.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aFor%20brands,%20being%20ready%20ahead%20of%20time%20is%20paramount%20for%20delivering%20a%20seamless%20and%20exceptional%20customer%20experience.%0a&url=https://smashingmagazine.com%2f2024%2f03%2funiting-rikyu-wisdom-brand-experience-principles%2f">
      
For brands, being ready ahead of time is paramount for delivering a seamless and exceptional customer experience.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>By proactively addressing customer needs and meticulously planning every touchpoint, designers can create a seamless and memorable brand experience that fosters customer satisfaction and loyalty by respecting the value of time.</p>

<p><strong>Examples</strong>:</p>

<ul>
<li>IKEA,</li>
<li>Amazon.</li>
</ul>

<h3 id="ikea-anticipating-customer-expectations">IKEA: Anticipating Customer Expectations</h3>

<p>IKEA, the global furniture and home goods giant, is a brand that, since the beginning, has used its vast warehouse store layout to anticipate and plan customers’ needs &mdash; even the unconscious ones. In fact, you could well be among those shoppers who plan to buy just a few items but leave the store with a trolley full of things they never knew they needed!</p>

<p>When customers enter an IKEA store, they encounter a meticulously planned and organized environment designed as a circular one-way system.</p>

<p>This specific layout of the IKEA store creates a sense of discovery. It encourages shoppers to keep walking through the different departments effortlessly, anticipating or projecting needs that they may have been unaware of before they entered.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/19-brandexperience-rikyuprinciples-Ikea.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/19-brandexperience-rikyuprinciples-Ikea.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/19-brandexperience-rikyuprinciples-Ikea.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/19-brandexperience-rikyuprinciples-Ikea.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/19-brandexperience-rikyuprinciples-Ikea.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/19-brandexperience-rikyuprinciples-Ikea.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/19-brandexperience-rikyuprinciples-Ikea.png"
			
			sizes="100vw"
			alt="Ikea shop layouts"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/19-brandexperience-rikyuprinciples-Ikea.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Takeaway:</strong> Brands should harness the creative ability to tap into customers’ subconscious minds through environment and product display in a way that exceeds their expectations.</p>

<h3 id="amazon-a-ready-to-go-shopping-experience">Amazon: A Ready-to-go Shopping Experience</h3>

<p>Amazon understands that their customers’ time is valuable, creating seamless online and offline experiences that streamline the shopping experience. Their unique systems strive to avoid inconveniences and provide a quick, ready-to-go shopping experience.</p>

<p>For example, their patented one-click ordering system simplifies the checkout process, reducing friction by saving users the trouble of manually selecting or entering settings (like address and payment methods) that are used repeatedly.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/09-brandexperience-rikyuprinciples-amazon.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/09-brandexperience-rikyuprinciples-amazon.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/09-brandexperience-rikyuprinciples-amazon.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/09-brandexperience-rikyuprinciples-amazon.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/09-brandexperience-rikyuprinciples-amazon.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/09-brandexperience-rikyuprinciples-amazon.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/09-brandexperience-rikyuprinciples-amazon.png"
			
			sizes="100vw"
			alt="Designs of Amazon go and Amazon one-click ordering system"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/09-brandexperience-rikyuprinciples-amazon.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Meanwhile, the brick-and-mortar Amazon Go stores exemplify innovation, offering a shopping experience where customers can grab items and go without waiting in line.</p>

<p>These stores work by using the same types of technologies found in self-driving cars, such as computer vision, sensor fusion, and deep learning.</p>

<p>This technology can detect when products are taken or returned to the shelves, tracking them in the customer’s virtual cart. When customers leave the store with their goods, their Amazon account is charged, and a receipt is sent.</p>

<p><em>Please note: Even though Amazon recently announced the closure of some of its physical shops, the experience remains an example of innovative and efficient shopping methods.</em></p>

<p><strong>Takeaways:</strong> Ingrain the art of preparation by utilizing advanced technologies in the brand’s operational philosophy to avoid inconvenience and provide an effortless customer experience.</p>

<div class="partners__lead-place"></div>

<h2 id="rule-6-being-prepared-in-case-it-should-rain">Rule 6: Being Prepared in Case It Should Rain</h2>

<p>In the context of the Japanese tea ceremony, being prepared for rain means being prepared for unexpected challenges.</p>

<p>According to Rikyu, when having tea, the host must be intentionally calm and ready to accommodate any situation that arises. Of course, this doesn’t just apply to changes in the weather!</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/20-brandexperience-rikyuprinciples-garden.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/20-brandexperience-rikyuprinciples-garden.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/20-brandexperience-rikyuprinciples-garden.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/20-brandexperience-rikyuprinciples-garden.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/20-brandexperience-rikyuprinciples-garden.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/20-brandexperience-rikyuprinciples-garden.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/20-brandexperience-rikyuprinciples-garden.png"
			
			sizes="100vw"
			alt="Image of the Zen garden"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/20-brandexperience-rikyuprinciples-garden.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>For designers crafting brand experiences, this principle underscores the importance of building <strong>resilience and adaptability</strong> into the core of their strategies.</p>

<p><strong>Examples</strong>:</p>

<ul>
<li>Zoom,</li>
<li>Lego.</li>
</ul>

<h3 id="zoom-pioneering-remote-communication">Zoom: Pioneering Remote Communication</h3>

<p>Zoom was mostly used for business meetings before the Covid-19 pandemic struck. When it did, it forced most companies to digitize far more quickly than they otherwise would have done.</p>

<p>Zoom stepped up, improving its features so that everyone, from children to their baby boomer grandparents, found the user interface seamless and easy when connecting from their homes.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/10-brandexperience-rikyuprinciples-zoom.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/10-brandexperience-rikyuprinciples-zoom.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/10-brandexperience-rikyuprinciples-zoom.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/10-brandexperience-rikyuprinciples-zoom.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/10-brandexperience-rikyuprinciples-zoom.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/10-brandexperience-rikyuprinciples-zoom.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/10-brandexperience-rikyuprinciples-zoom.png"
			
			sizes="100vw"
			alt="Screenshot of Zoom user interface"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/10-brandexperience-rikyuprinciples-zoom.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>One of the most exciting business decisions taken by Zoom was to turn their Freemium tier wholly free and unlimited for K-12 students. This decision was taken during the early stages of the pandemic (March 2020) demonstrating empathy with the challenges faced by K-12 educational institutions.</p>

<p>The program significantly impacted schools, teachers, and students. It allowed for more collaborative and engaging virtual classrooms, thanks to features like Groups and useful interactions like whiteboards, raising hands, and replying with emojis.</p>

<p>As schools gradually returned to in-person learning and adapted to hybrid models, the free program ended. However, the positive impact of Zoom’s support during a critical period underlined the company’s adaptability and responsiveness to societal needs.</p>

<p><strong>Takeaway:</strong> Designers should prioritize creating intuitive interfaces and scalable infrastructure that can accommodate surges in demand whilst also considering the impact on society.</p>

<h3 id="lego-rebuilding-from-the-bricks-up">Lego: Rebuilding From The Bricks Up</h3>

<p>Without continuous adaptability and recognition of the ever-changing landscape of play, even a historic brand like Lego may have closed its doors!</p>

<p>In fact, if you are a Lego fan, you may have noticed that the brand underwent a profound change in the early 2000s.</p>

<p>In 1998, Lego launched an educational initiative known as Lego Mindstorm. This project used Lego’s signature plastic bricks to teach children how to construct and program robots &mdash; an innovative concept at the time since Arduino had not yet been introduced.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/21-brandexperience-rikyuprinciples-lego.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/21-brandexperience-rikyuprinciples-lego.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/21-brandexperience-rikyuprinciples-lego.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/21-brandexperience-rikyuprinciples-lego.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/21-brandexperience-rikyuprinciples-lego.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/21-brandexperience-rikyuprinciples-lego.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/21-brandexperience-rikyuprinciples-lego.png"
			
			sizes="100vw"
			alt="Pictures of Lego Mindstorm project with box and robot designs"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/21-brandexperience-rikyuprinciples-lego.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Lego’s decision to merge traditional play with technology demonstrated their dedication to keeping up with the digital age. Additionally, Lego Mindstorm appealed to a new audience: the broader open-source hardware and DIY electronics community that emerged during the period (and who, in 2005, found a better match in Arduino).</p>

<p><em>Please note: Even though the program is set to be discontinued by 2024, Lego’s resurgence is often cited as one of the most successful corporate turnarounds.</em></p>

<p>Lego still continues to thrive, expanding its product lines, collaborating with popular franchises, and maintaining its status as a beloved brand among children and adults alike.</p>

<p><strong>Takeaway:</strong> Designers can adapt to change by refocusing on the brand’s core strengths, embracing digital innovation and new targets to exemplify resilience in the face of challenges.</p>

<h2 id="rule-7-acting-with-utmost-consideration-towards-your-guests">Rule 7: Acting with Utmost Consideration Towards Your Guests</h2>

<p>During the tea ceremony in Kyoto, I perceived in every gesture the perfect level of attention to detail, including my response to the tasting and the experience as a whole. I felt the impact of my experience from the moment I entered until long after I left the tea room, even as I write about it now.</p>

<p>This rule highlights the importance of <strong>intuitive hospitality</strong> and involves creating an environment in which guests feel welcomed, valued, and respected.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/22-brandexperience-rikyuprinciples-master.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/22-brandexperience-rikyuprinciples-master.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/22-brandexperience-rikyuprinciples-master.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/22-brandexperience-rikyuprinciples-master.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/22-brandexperience-rikyuprinciples-master.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/22-brandexperience-rikyuprinciples-master.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/22-brandexperience-rikyuprinciples-master.png"
			
			sizes="100vw"
			alt="Image of the master cleaning his tools"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/22-brandexperience-rikyuprinciples-master.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>For designers, this means facilitating brand experiences that put customer satisfaction first and aim to build strong and lasting relationships.</p>

<p>Brands that excel in this rule go above and beyond to provide uniquely personalized experiences that foster long-term loyalty.</p>

<p><strong>Examples</strong>:</p>

<ul>
<li>Stardust App,</li>
<li>Tony’s Chocolonely.</li>
</ul>

<h3 id="stardust-app-empowering-women-s-health-with-privacy-and-compassion">Stardust App: Empowering Women’s Health with Privacy and Compassion</h3>

<p><strong>Stardust</strong> is an astrology-based menstrual cycle-tracking app that debuted in the Apple Store. It became the most downloaded iPhone app in late June after the U.S. Supreme Court struck down Roe v. Wade (which ended the constitutional right to an abortion and instantly made abortion care illegal in more than a dozen states).</p>

<p>In a world where tracking apps often lack sensitivity, Stardust App emerges with an elegant interface that makes monitoring women’s health a visually pleasing experience. But beyond aesthetics, what really sets Stardust apart is its witty and humorous tone of voice.</p>

<p>Acknowledging the nuances of mood swings and pains associated with periods, Stardust’s notification messages and in-app descriptions resonate with women, adding a delightful touch to a typically challenging time.</p>

<p>This blend of sophistication and humor creates a unique and supportive space for women’s wellness.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/11-brandexperience-rikyuprinciples-stardust.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/11-brandexperience-rikyuprinciples-stardust.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/11-brandexperience-rikyuprinciples-stardust.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/11-brandexperience-rikyuprinciples-stardust.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/11-brandexperience-rikyuprinciples-stardust.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/11-brandexperience-rikyuprinciples-stardust.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/11-brandexperience-rikyuprinciples-stardust.png"
			
			sizes="100vw"
			alt="Screenshot of Stardust user interface and examples of Stardust notifications"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/11-brandexperience-rikyuprinciples-stardust.png'>Large preview</a>)
    </figcaption>
  
</figure>

<blockquote><strong>Note:</strong><br /><br />The female-founded app underwent scrutiny from TechCrunch, Vice, and Screen Rant, which questioned their collaboration with third parties and its safety. So on October 29th, 2022, they released a more precise and comprehensive Privacy Policy that explains in a readable way how third parties are used and how the end-to-end encryption works.<br /><br />They also ensured that all sessions were anonymous so that the app would not be able to associate data with users in case of law enforcement.</blockquote>

<p><strong>Takeaway:</strong> Design a brand experience with utmost consideration toward users and that transcends the transactional to foster an enduring sense of trust, empathy, and loyalty.</p>

<h3 id="tony-s-chocolonely-sweet-indulgence-and-ethical-excellence">Tony’s Chocolonely: Sweet Indulgence and Ethical Excellence</h3>

<p>In their commitment to fair trade, Tony’s Chocolonely exemplifies acting with utmost consideration towards both consumers and the environment beyond merely offering delicious chocolate.</p>

<p>More specifically, Tony’s Chocolonely has redefined the chocolate industry by championing fair-trade practices. By introducing a sustainable business model, not only do they satisfy the cravings of chocolate enthusiasts, but they also address the broader demand for ethically sourced and produced chocolate.</p>

<p>In every detail, from the wrapper to the chocolate bar itself, Tony’s Chocolonely is a brand on a mission. The intentional unevenness of their chocolate bar is a profound symbol, mirroring the uneven and unjust landscape of the chocolate industry. This urges consumers to choose fairness, ethical sourcing, and a commitment to change.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/12-brandexperience-rikyuprinciples-tonychocolonely.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="520"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/12-brandexperience-rikyuprinciples-tonychocolonely.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/12-brandexperience-rikyuprinciples-tonychocolonely.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/12-brandexperience-rikyuprinciples-tonychocolonely.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/12-brandexperience-rikyuprinciples-tonychocolonely.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/12-brandexperience-rikyuprinciples-tonychocolonely.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/12-brandexperience-rikyuprinciples-tonychocolonely.png"
			
			sizes="100vw"
			alt="Images of the packaging of the chocolate bar and of the website"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/uniting-rikyu-wisdom-brand-experience-principles/12-brandexperience-rikyuprinciples-tonychocolonely.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Takeaway:</strong> Designers can elevate brand experiences by integrating thoughtful and personalized elements that speak to their industry and resonate with the values of their audience.</p>

<h2 id="conclusion">Conclusion</h2>

<p>In the gentle and artistic practice of the Japanese tea ceremony, I discovered through Rikyu’s seven principles an illuminated path of consideration that resonates beyond the tea room, offering profound insights for crafting compelling brand experiences.</p>

<p>Rikyu’s ancient wisdom serves as a timeless guide, reminding us that <strong>creating a memorable experience is a balanced dance between intention and harmony</strong> and, above all, the valuable attention of those we invite into our brand spaces as welcome guests.</p>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><item><author>Andy Budd</author><title>The Feature Trap: Why Feature Centricity Is Harming Your Product</title><link>https://www.smashingmagazine.com/2024/01/feature-centricity-harming-product/</link><pubDate>Mon, 29 Jan 2024 15:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2024/01/feature-centricity-harming-product/</guid><description>Most product teams commonly adopt a feature-centric mindset, finding them convenient for brainstorming, drafting requirement documents, and integrating into backlogs and ticketing systems. In this article, Andy Budd shows how fixation with features might be holding you back and how making a few small tweaks to your process could make an entire world of difference.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2024/01/feature-centricity-harming-product/" />
              <title>The Feature Trap: Why Feature Centricity Is Harming Your Product</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>The Feature Trap: Why Feature Centricity Is Harming Your Product</h1>
                  
                    
                    <address>Andy Budd</address>
                  
                  <time datetime="2024-01-29T15:00:00&#43;00:00" class="op-published">2024-01-29T15:00:00+00:00</time>
                  <time datetime="2024-01-29T15:00:00&#43;00:00" class="op-modified">2026-02-09T03:03:08+00:00</time>
                </header>
                
                

<p>Most product teams think in terms of features. Features are easy to brainstorm and write requirement docs for, and they fit nicely into our backlogs and ticketing systems. In short, thinking in terms of features makes it easy to manage the complex task of product delivery.</p>

<p>However, we know that the best products are <em>more</em> than the sum of their parts, and sometimes, the space between the features is as important as the features themselves. So, what can we do to improve the process?</p>

<p>The vast majority of product teams are organized around delivering features &mdash; new pieces of functionality that extend the capabilities of the product. These features will often arise from conversations the company is having with prospective buyers:</p>

<ul>
<li>“What features are important to you?”</li>
<li>“What features are missing from your current solution?”</li>
<li>“What features would we need to add in order to make you consider switching from your existing provider to us?” and so on.</li>
</ul>

<p>The company will then compile a list of the most popular feature requests and will ask the product team to deliver them.</p>

<p>For most companies, this is what <em>customer centricity</em> looks like; asking customers to tell them what they want &mdash; and then building those features into the product in the hope they’ll buy &mdash; becomes of key importance. This is based on the fundamental belief that people buy products primarily for the <em>features</em> so we assemble our roadmaps accordingly.</p>

<p>We see this sort of thinking with physical products all the time. For instance, take a look at the following Amazon listing for one of the top-rated TV sets from last year. It’s like they hurled up the entire product roadmap directly onto the listing!</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/feature-centricity-harming-product/1-amazon-listing.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="331"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/feature-centricity-harming-product/1-amazon-listing.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/feature-centricity-harming-product/1-amazon-listing.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/feature-centricity-harming-product/1-amazon-listing.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/feature-centricity-harming-product/1-amazon-listing.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/feature-centricity-harming-product/1-amazon-listing.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/feature-centricity-harming-product/1-amazon-listing.png"
			
			sizes="100vw"
			alt="Screenshot of a very detailed description of a modern TV set sold on Amazon."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      An Amazon listing for one of the top-rated TV from last year. It isn’t very engaging, is it? (<a href='https://files.smashing.media/articles/feature-centricity-harming-product/1-amazon-listing.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Now, of course, if you’re a hardcore gamer with very specific requirements, you might absolutely be looking for a TV with “VRR, ALLM, and eARC as specified in HDMI2.1, plus G-Sync, FreeSync, Game Optimizer, and HGiG.” But for me? I don’t have a clue what any of those things mean, and I don’t really care. Instead, I’ll go to a review site where they explain what the product actually <em>feels like</em> to use in everyday life. The reviewers will explain how good the unboxing experience is. How sturdy the build is. How easy it is to set up. They’ll explain that the OS is really well put together and easy to navigate, the picture quality is probably the best on the market, and the sound, while benefiting from the addition of a quality sound bar, is very clear and understandable. In short, they’ll be describing the <strong>user experience</strong>.</p>

<p>The ironic thing is that when I talk to most founders, product managers, and engineers about how they choose a TV, they’ll say exactly the same thing. And yet, for some reason, we struggle to take that personal experience and apply it to our own users!</p>

<p><strong>Tip:</strong> As a fun little trick, next time you find yourself arguing about <em>features</em> over <em>experience</em>, ask people to get out their phones. I bet that the vast majority of folks in the room will have an iPhone, despite Samsung and Google phones generally having better cameras, more storage, better screens, and so on. The reason why iPhones have risen in dominance (if we ignore the obvious platform lock-in) is because, despite perhaps not having the best feature set on the market, they feel so nice to use.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/feature-centricity-harming-product/2-conference-room-by-alexandre-pellaes.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="533"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/feature-centricity-harming-product/2-conference-room-by-alexandre-pellaes.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/feature-centricity-harming-product/2-conference-room-by-alexandre-pellaes.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/feature-centricity-harming-product/2-conference-room-by-alexandre-pellaes.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/feature-centricity-harming-product/2-conference-room-by-alexandre-pellaes.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/feature-centricity-harming-product/2-conference-room-by-alexandre-pellaes.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/feature-centricity-harming-product/2-conference-room-by-alexandre-pellaes.jpg"
			
			sizes="100vw"
			alt="A photo of a conference room full of people."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      A conference room full of people. How many people here have an iPhone vs another brand? (Image credit: <a href='https://unsplash.com/@apellaes'>Alexandre Pellaes</a>) (<a href='https://files.smashing.media/articles/feature-centricity-harming-product/2-conference-room-by-alexandre-pellaes.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<div data-audience="non-subscriber" data-remove="true" class="feature-panel-container">

<aside class="feature-panel" style="">
<div class="feature-panel-left-col">

<div class="feature-panel-description"><p>Meet <strong><a data-instant href="/printed-books/typescript-in-50-lessons/">“TypeScript in 50 Lessons”</a></strong>, our shiny new guide to TypeScript. With detailed <strong>code walkthroughs</strong>, hands-on examples and common gotchas. For developers who know enough <strong>JavaScript</strong> to be dangerous.</p>
<a data-instant href="/printed-books/typescript-in-50-lessons/" class="btn btn--green btn--large" style="">Jump to table of contents&nbsp;↬</a></div>
</div>
<div class="feature-panel-right-col"><a data-instant href="/printed-books/typescript-in-50-lessons/" class="feature-panel-image-link">
<div class="feature-panel-image"><picture><source type="image/avif" srcSet="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2732dfe9-e1ee-41c3-871a-6252aeda741c/typescript-panel.avif" />
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c2f2c6d6-4e85-449a-99f5-58bd053bc846/typescript-shop-cover-opt.png"
    alt="Feature Panel"
    width="481"
    height="698"
/>
</picture>
</div>
</a>
</div>
</aside>
</div>

<h2 id="seeing-things-from-the-users-perspective">Seeing Things From The Users’ Perspective</h2>

<p>While feature-centric thinking is completely understandable, it misses a whole class of problems. The features in and of themselves might look good on paper and work great in practice, but do they mesh together to form a convincing whole? Or is the full experience a bit of a mess?</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aAll%20the%20annoying%20bumps,%20barriers,%20and%20inconsistencies%20that%20start%20accruing%20around%20each%20new%20feature,%20if%20left%20unsolved,%20can%20limit%20the%20amount%20of%20value%20users%20can%20extract%20from%20the%20product.%20And%20if%20you%20don%e2%80%99t%20effectively%20identify%20and%20remove%20these%20barriers%20in%20a%20deliberate%20and%20structured%20way,%20any%20additional%20functionality%20will%20simply%20add%20to%20the%20problem.%0a&url=https://smashingmagazine.com%2f2024%2f01%2ffeature-centricity-harming-product%2f">
      
All the annoying bumps, barriers, and inconsistencies that start accruing around each new feature, if left unsolved, can limit the amount of value users can extract from the product. And if you don’t effectively identify and remove these barriers in a deliberate and structured way, any additional functionality will simply add to the problem.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>If users are already struggling to extract value from existing features, how do you expect them to extract any <em>additional</em> value you might be adding to the product?</p>

<blockquote>“As a product manager, it’s natural to want to offer as many features as possible to your customers. After all, you want to provide value, right? But what happens when you offer too many features? Your product becomes bloated, convoluted, and difficult to use.”<br />&mdash; “<a href="https://faqprime.com/en/are-too-many-features-hurting-your-product-heres-how-to-fix-it/">Are Too Many Features Hurting Your Product?</a>”</blockquote>

<p>These barriers and inconsistencies are usually the result of people not thinking through the user experience. And I don’t mean <a href="https://www.linkedin.com/pulse/diagram-shows-value-great-ux-jared-spool-2rxae"><em>user experience</em></a> in some abstract way. I mean literally walking through the product step-by-step as though you’d never seen it before &mdash; sometimes described as having a “beginner’s mind” &mdash; and considering the following questions:</p>

<ul>
<li>Is it clear what value this product delivers and how I can get that value?</li>
<li>If I were a new user, would the way the product is named and structured make sense to me?</li>
<li>Can I easily build up a mental model of where everything is and how the product works?</li>
<li>Do I know what to do next?</li>
<li>How is this going to fit into my existing workflow?</li>
<li>What’s getting in my way and slowing me down?</li>
</ul>

<p>While approaching things with a beginner’s mind sounds easy, it’s actually a surprisingly hard mindset for people to adopt &mdash; letting go of everything they know (or think they know) about their product, market, and users. Instead, their position as a superuser tends to cloud their judgment: believing that because something is obvious to them (something that they have created and have been working on for the past two years), it will be obvious to a new user who has spent less than five minutes with the product. This is where <a href="https://www.uxtweak.com/usability-testing/">usability testing</a> (a UX research method that evaluates whether users are able to use a digital product efficiently and effectively) should normally “enter the stage.”</p>

<p>The issue with trying to approach things with a beginner’s mind is also often exacerbated by “<a href="https://en.wikipedia.org/wiki/Motivated_reasoning">motivated reasoning</a>,” the idea that we view things through the lens of what we <em>want</em> to be true, rather than what <em>is</em> true. To this end, you’re much more likely to discount feedback from other people if that feedback is going to result in some negative outcome, like having to spend extra time and money redesigning a user flow when you’d rather be shipping that cool new feature you came up with last week.</p>

<p>I see this play out in usability testing sessions all the time. The first subject comes in and struggles to grasp a core concept, and the team rolls their eyes at the incompetence of the user. The next person comes in and has the same experience, causing the team to ask where you found all these stupid users. However, as the third, fourth, and fifth person comes through and experiences the same challenge, “lightbulbs” slowly start forming over the team members’ heads:</p>

<blockquote>“Maybe this isn’t the users’ fault after all? Maybe we’ve assumed a level of knowledge or motivation that isn’t there; maybe it’s the language we’ve used to describe the feature, or maybe there’s something in the way the interface has been designed that is causing this confusion?”</blockquote>

<p>These kinds of insights can cause teams to fundamentally pivot their thinking. But this can also create a huge amount of discomfort and cognitive dissonance &mdash; realizing that your view of the world might not be entirely accurate. As such, there’s a strong motivation for people to avoid these sorts of realizations, which is why we often put so little effort (unfortunately) into understanding how our users perceive and use the things we create.</p>

<p>Developing a beginner’s mind takes time and practice. It’s something that most people can cultivate, and it’s actually something I find designers are especially good at &mdash; stepping into other people’s shoes, unclouded by their own beliefs and biases. This is what designers mean when they talk about using <em>empathy</em>.</p>

<div class="partners__lead-place"></div>

<h2 id="towards-a-two-tier-process-conclusion">Towards A Two-Tier Process (Conclusion)</h2>

<p>We obviously still need to have “feature teams.” Folks who can understand and deliver the new capabilities our users request (and our business partners demand). While I’d like to see more thought and validation when it comes to feature selection and creation, <a href="https://www.smashingmagazine.com/2023/08/improving-double-diamond-design-process/">it’s often quicker to add new features to see if they get used</a> than to try and use research to give a definitive answer.</p>

<p>As an example, I’m working with one founder at the moment who has been going around houses with their product team for months about whether a feature would work. He eventually convinced them to give it a try &mdash; it took four days to push out the change, and they got the feedback they needed almost instantly.</p>

<p>However, as well as having teams focused on delivering new user value, we also need teams who are focused on helping <em>unlock and maximize existing</em> user value. These teams need to concentrate on outcomes over outputs; so, less <em>deliver X capability in Y sprints</em> than <em>deliver X improvement by Y date</em>. To do this, these teams need to have a high level of agency. This means taking them out of the typical feature factory mindset.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/feature-centricity-harming-product/3-feature-factory.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="305"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/feature-centricity-harming-product/3-feature-factory.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/feature-centricity-harming-product/3-feature-factory.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/feature-centricity-harming-product/3-feature-factory.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/feature-centricity-harming-product/3-feature-factory.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/feature-centricity-harming-product/3-feature-factory.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/feature-centricity-harming-product/3-feature-factory.jpg"
			
			sizes="100vw"
			alt="An illustration that depicts the ‘feature factory’ concept."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Are you working at a feature factory? (Illustration: <a href='https://cutle.fish/blog/12-signs-youre-working-in-a-feature-factory'>John Cutler</a>) (<a href='https://files.smashing.media/articles/feature-centricity-harming-product/3-feature-factory.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>The teams focusing on helping unlock and maximize existing user value need to be a little more cross-disciplinary than your traditional feature team. They’re essentially developing interventions rather than new capabilities &mdash; coming up with a hypothesis and running experiments rather than adding bells and whistles. <em>“How can we improve the onboarding experience to increase activation and reduce churn?”</em> Or, <em>“How can we improve messaging throughout the product so people have a better understanding of how it works and increase our North Star metric as a result?”</em></p>

<p><strong>There’s nothing radical about focusing on outcomes over outputs.</strong> In fact, this way of thinking is at the heart of both the <a href="https://theleanstartup.com/">Lean Startup</a> movement and the <a href="https://www.productled.org/foundations/what-is-product-led-growth">Product Led Growth</a>. The problem is that while this is seen as received wisdom, very few companies actually put it into practice (although if you ask them, most founders believe that this is exactly what they do).</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aPut%20simply,%20you%20can%e2%80%99t%20expect%20teams%20to%20work%20independently%20to%20deliver%20%e2%80%9coutcomes%e2%80%9d%20if%20you%20fill%20their%20their%20calendar%20with%20output%20work.%0a&url=https://smashingmagazine.com%2f2024%2f01%2ffeature-centricity-harming-product%2f">
      
Put simply, you can’t expect teams to work independently to deliver “outcomes” if you fill their their calendar with output work.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</blockquote>

<p>So this two-tier system is really a hack, allowing you to keep sales, marketing, and your CEO (and your CEO’s partner) happy by delivering a constant stream of new features while spinning up a separate team who can remove themselves from the drum-beat of feature delivery and focus on the outcomes instead.</p>

<div class="partners__lead-place"></div>

<h3 id="further-reading">Further Reading</h3>

<ul>
<li>“<a href="https://www.komododigital.co.uk/insights/feature-addiction-can-ruin-a-digital-product/">Why Too Many Features Can Ruin a Digital Product Before It Begins</a>” <em>(Komodo Digital)</em><br />
Digital products are living, ever-evolving things. So, why do so many companies force feature after feature into projects without any real justification? Let’s talk about feature addiction and how to avoid it.</li>
<li>“<a href="https://faqprime.com/en/are-too-many-features-hurting-your-product-heres-how-to-fix-it/">Are Too Many Features Hurting Your Product?</a>” <em>(FAQPrime)</em><br />
As a product manager, it’s natural to want to offer as many features as possible to your customers. After all, you want to provide value, right? But what happens when you offer too many features? Your product becomes bloated, convoluted, and difficult to use. Let’s take a closer look at what feature bloat is, why it’s a problem, and how you can avoid it.</li>
<li>“<a href="https://cutle.fish/blog/12-signs-youre-working-in-a-feature-factory">Twelve Signs You’re Working in a Feature Factory</a>,” John Cutler<br />
The author started using the term <em>Feature Factory</em> when a software developer friend complained that he was “just sitting in the factory, cranking out features, and sending them down the line.” This article was written in 2016 and still holds its ground today. In 2019 there appeared a newer version of it (“<a href="https://amplitude.com/blog/12-signs-youre-working-in-a-feature-factory-3-years-later">Twelve signs You’re Working in a Feature Factory &mdash; Three Years Later</a>”).</li>
<li>“<a href="https://www.atlassian.com/agile">What Is The Agile Methodology?</a>,” <em>(Atlassian)</em><br />
The Agile methodology is a project management approach that involves breaking the project into phases and emphasizes continuous collaboration and improvement. Teams follow a cycle of planning, executing, and evaluating.</li>
<li>“<a href="https://www.creative-cx.com/problem-statement-vs-hypothesis-which-is-more-important-for-experimentation/">Problem Statement vs Hypothesis &mdash; Which ­­Is More Important</a>?,” Sadie Neve<br />
When it comes to experimentation and conversion rate optimization (CRO), we often see people relying too much on their instincts. But in reality, nothing in experimentation is certain until tested. This means experimentation should be approached like a scientific experiment that follows three core steps: identify a problem, form a hypothesis, and test that hypothesis.</li>
<li>“<a href="https://melissaperri.com/blog/2014/08/05/the-build-trap">The Build Trap</a>,” Melissa Perri <em>(Produx Labs)</em><br />
The <em>“move fast and break things”</em> mantra seems to have taken the startup world by storm since Facebook made it their motto a few years ago. But there is a serious flaw with this phrase, and it’s that most companies see this as an excuse to stop analyzing what they intend to build and why they should build it &mdash; those companies get stuck in what I call “The Build Trap.”</li>
<li>“<a href="https://www.productled.org/foundations/what-is-product-led-growth">What Is Product-led Growth?</a>” <em>(PLG Collective)</em><br />
We are in the middle of a massive shift in the way people use and buy software. It’s been well over a decade since Salesforce brought software to the cloud. Apple put digital experiences in people’s pockets back in 2009 with the first iPhone. And in the years since the market has been flooded with consumer and B2B products that promise to meet just about every need under the sun.</li>
<li><a href="https://theleanstartup.com/">The Lean Startup</a><br />
The Lean Startup isn’t just about how to create a more successful entrepreneurial business. It’s about what we can learn from those businesses to improve virtually everything we do.</li>
<li>“<a href="https://www.uxtweak.com/usability-testing/">Usability Testing &mdash; The Complete Guide</a>,” Daria Krasovskaya and Marek Strba<br />
Usability testing is the ultimate method of uncovering any type of issue related to a system’s ease of use, and it truly is a must for any modern website or app owner.</li>
<li>&ldquo;<a href="https://www.linkedin.com/pulse/diagram-shows-value-great-ux-jared-spool-2rxae">The Value of Great UX</a>,” Jared Spool<br />
How can we show that a great user experience produces immense value for the organization? We can think of experience as a spectrum, from extreme frustration to delight. In his article, Jared will walk you through how our work as designers is able to transform our users’ experiences from being frustrated to being delighted.</li>
<li>“<a href="https://www.smashingmagazine.com/2023/08/improving-double-diamond-design-process/">Improving The Double Diamond Design Process</a>,” Andy Budd <em>(Smashing Magazine)</em><br />
The so-called “Double Diamond” is a great way of visualizing an ideal design process, but it’s just not the way most companies deliver new projects or services. The article proposes a new “Double Diamond” idea that better aligns with the way work actually gets done and highlights the place where design has the most leverage.</li>
<li>“<a href="https://andybudd.medium.com/are-we-moving-towards-a-post-agile-age-7751379fa1e2">Are We Moving Towards a Post-Agile Age?</a>,” Andy Budd<br />
Agile has been the dominant development methodology in our industry for a while now. While some teams are just getting to grips with Agile, others have extended it to the point that it’s no longer recognizable as Agile; in fact, many of the most progressive design and development teams are Agile only in name. What they are actually practicing is something new, different, and innately more interesting &mdash; something I’ve been calling Post-Agile thinking.</li>
</ul>

<div class="signature">
  <img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async" />
  <span>(mb, yk)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item></channel></rss>