<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Workflow on Smashing Magazine — For Web Designers And Developers</title><link>https://www.smashingmagazine.com/category/workflow/index.xml</link><description>Recent content in Workflow on Smashing Magazine — For Web Designers And Developers</description><generator>Hugo -- gohugo.io</generator><language>en-us</language><lastBuildDate>Thu, 25 Dec 2025 10:32:38 +0000</lastBuildDate><item><author>Paul Boag</author><title>How UX Professionals Can Lead AI Strategy</title><link>https://www.smashingmagazine.com/2025/12/how-ux-professionals-can-lead-ai-strategy/</link><pubDate>Mon, 08 Dec 2025 08:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/12/how-ux-professionals-can-lead-ai-strategy/</guid><description>Lead your organization’s AI strategy before someone else defines it for you. A practical framework for UX professionals to shape AI implementation.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/12/how-ux-professionals-can-lead-ai-strategy/" />
              <title>How UX Professionals Can Lead AI Strategy</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>How UX Professionals Can Lead AI Strategy</h1>
                  
                    
                    <address>Paul Boag</address>
                  
                  <time datetime="2025-12-08T08:00:00&#43;00:00" class="op-published">2025-12-08T08:00:00+00:00</time>
                  <time datetime="2025-12-08T08:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>Your senior management is excited about AI. They’ve read the articles, attended the webinars, and seen the demos. They’re convinced that AI will transform your organization, boost productivity, and give you a competitive edge.</p>

<p>Meanwhile, you’re sitting in your UX role wondering what this means for your team, your workflow, and your users. You might even be worried about your job security.</p>

<p>The problem is that the conversation about how AI gets implemented is happening right now, and if you’re not part of it, <strong>someone else will decide how it affects your work</strong>. That someone probably doesn’t understand user experience, research practices, or the subtle ways poor implementation can damage the very outcomes management hopes to achieve.</p>

<p>You have a choice. You can wait for directives to come down from above, or you can take control of the conversation and lead the AI strategy for your practice.</p>

<h2 id="why-ux-professionals-must-own-the-ai-conversation">Why UX Professionals Must Own the AI Conversation</h2>

<p>Management sees AI as efficiency gains, cost savings, competitive advantage, and innovation all wrapped up in one buzzword-friendly package. They’re not wrong to be excited. The technology is genuinely impressive and can deliver real value.</p>

<p><strong>But without UX input, AI implementations often fail users in predictable ways:</strong></p>

<ul>
<li>They automate tasks without understanding the judgment calls those tasks require.</li>
<li>They optimize for speed while destroying the quality that made your work valuable.</li>
</ul>

<p>Your expertise positions you perfectly to guide implementation. You understand users, workflows, quality standards, and the gap between what looks impressive in a demo and what actually works in practice.</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="use-ai-momentum-to-advance-your-priorities">Use AI Momentum to Advance Your Priorities</h3>

<p>Management’s enthusiasm for AI creates an opportunity to advance priorities you’ve been fighting for unsuccessfully. When management is willing to invest in AI, you can connect those long-standing needs to the AI initiative. Position user research as essential for training AI systems on real user needs. Frame usability testing as the validation method that ensures AI-generated solutions actually work.</p>

<p>How AI gets implemented will shape your team’s roles, your users’ experiences, and your organization’s capability to deliver quality digital products.</p>

<h2 id="your-role-isn-t-disappearing-it-s-evolving">Your Role Isn’t Disappearing (It’s Evolving)</h2>

<p>Yes, AI will automate some of the tasks you currently do. But someone needs to decide which tasks get automated, how they get automated, what guardrails to put in place, and how automated processes fit around real humans doing complex work.</p>

<p>That someone should be <em>you</em>.</p>

<p>Think about what you already do. When you conduct user research, AI might help you transcribe interviews or identify themes. But you’re the one who knows which participant hesitated before answering, which feedback contradicts what you observed in their behavior, and which insights matter most for your specific product and users.</p>

<p>When you design interfaces, AI might generate layout variations or suggest components from your design system. But you’re the one who understands the constraints of your technical platform, the political realities of getting designs approved, and the edge cases that will break a clever solution.</p>

<p><strong>Your future value comes from the work you’re already doing:</strong></p>

<ul>
<li><strong>Seeing the full picture.</strong><br />
You understand how this feature connects to that workflow, how this user segment differs from that one, and why the technically correct solution won’t work in your organization’s reality.</li>
<li><strong>Making judgment calls.</strong><br />
You decide when to follow the design system and when to break it, when user feedback reflects a real problem versus a feature request from one vocal user, and when to push back on stakeholders versus find a compromise.</li>
<li><strong>Connecting the dots.</strong><br />
You translate between technical constraints and user needs, between business goals and design principles, between what stakeholders ask for and what will actually solve their problem.</li>
</ul>

<p>AI will keep getting better at individual tasks. But you’re the person who decides which solution actually works for your specific context. The people who will struggle are those doing simple, repeatable work without understanding why. Your value is in understanding context, making judgment calls, and connecting solutions to real problems.</p>

<h2 id="step-1-understand-management-s-ai-motivations">Step 1: Understand Management’s AI Motivations</h2>

<p>Before you can lead the conversation, you need to understand what’s driving it. Management is responding to real pressures: cost reduction, competitive pressure, productivity gains, and board expectations.</p>

<p><strong>Speak their language.</strong><br />
When you talk to management about AI, frame everything in terms of ROI, risk mitigation, and competitive advantage. <em>“This approach will protect our quality standards”</em> is less compelling than <em>“This approach reduces the risk of damaging our conversion rate while we test AI capabilities.”</em></p>

<p><strong>Separate hype from reality.</strong><br />
Take time to research what AI capabilities actually exist versus what’s hype. Read case studies, try tools yourself, and talk to peers about what’s actually working.</p>

<p><strong>Identify real pain points.</strong><br />
AI might legitimately address in your organization. Maybe your team spends hours formatting research findings, or accessibility testing creates bottlenecks. These are the problems worth solving.</p>

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

<h2 id="step-2-audit-your-current-state-and-opportunities">Step 2: Audit Your Current State and Opportunities</h2>

<p>Map your team’s work. Where does time actually go? Look at the past quarter and categorize how your team spent their hours.</p>

<p><strong>Identify high-volume, repeatable tasks versus high-judgment work.</strong><br />
Repeatable tasks are candidates for automation. High-judgment work is where you add irreplaceable value.</p>

<p><strong>Also, identify what you’ve wanted to do but couldn’t get approved.</strong><br />
This is your opportunity list. Maybe you’ve wanted quarterly usability tests, but only get budget annually. Write these down separately. You’ll connect them to your AI strategy in the next step.</p>

<p>Spot opportunities where AI could genuinely help:</p>

<ul>
<li><strong>Research synthesis:</strong><br />
AI can help organize and categorize findings.</li>
<li><strong>Analyzing user behavior data:</strong><br />
AI can process analytics and session recordings to surface patterns you might miss.</li>
<li><strong>Rapid prototyping:</strong><br />
AI can quickly generate testable prototypes, speeding up your test cycles.</li>
</ul>

<h2 id="step-3-define-ai-principles-for-your-ux-practice">Step 3: Define AI Principles for Your UX Practice</h2>

<p>Before you start forming your strategy, establish principles that will guide every decision.</p>

<p><strong>Set non-negotiables.</strong><br />
User privacy, accessibility, and human oversight of significant decisions. Write these down and get agreement from leadership before you pilot anything.</p>

<p><strong>Define criteria for AI use.</strong><br />
AI is good at pattern recognition, summarization, and generating variations. AI is poor at understanding context, making ethical judgments, and knowing when rules should be broken.</p>

<p><strong>Define success metrics beyond efficiency.</strong><br />
Yes, you want to save time. But you also need to measure quality, user satisfaction, and team capability. Build a balanced scorecard that captures what actually matters.</p>

<p><strong>Create guardrails.</strong><br />
Maybe every AI-generated interface needs human review before it ships. These guardrails prevent the obvious disasters and give you space to learn safely.</p>

<h2 id="step-4-build-your-ai-in-ux-strategy">Step 4: Build Your AI-in-UX Strategy</h2>

<p>Now you’re ready to build the actual strategy you’ll pitch to leadership. <strong>Start small</strong> with pilot projects that have a clear scope and evaluation criteria.</p>

<p><strong>Connect to business outcomes management cares about.</strong><br />
Don’t pitch <em>“using AI for research synthesis.”</em> Pitch <em>“reducing time from research to insights by 40%, enabling faster product decisions.”</em></p>

<p><strong>Piggyback your existing priorities on AI momentum.</strong><br />
Remember that opportunity list from Step 2? Now you connect those long-standing needs to your AI strategy. If you’ve wanted more frequent usability testing, explain that AI implementations need continuous validation to catch problems before they scale. AI implementations genuinely benefit from good research practices. You’re simply using management’s enthusiasm for AI as the vehicle to finally get resources for practices that should have been funded all along.</p>

<p><strong>Define roles clearly.</strong><br />
Where do humans lead? Where does AI assist? Where won’t you automate? Management needs to understand that some work requires human judgment and should never be fully automated.</p>

<p><strong>Plan for capability building.</strong><br />
Your team will need training and new skills. Budget time and resources for this.</p>

<p><strong>Address risks honestly.</strong><br />
AI could generate biased recommendations, miss important context, or produce work that looks good but doesn’t actually function. For each risk, explain how you’ll detect it and what you’ll do to mitigate it.</p>

<h2 id="step-5-pitch-the-strategy-to-leadership">Step 5: Pitch the Strategy to Leadership</h2>

<p>Frame your strategy as de-risking management’s AI ambitions, not blocking them. You’re showing them how to implement AI successfully while avoiding the obvious pitfalls.</p>

<p><strong>Lead with outcomes and ROI they care about.</strong><br />
Put the business case up front.</p>

<p><strong>Bundle your wish list into the AI strategy.</strong><br />
When you present your strategy, include those capabilities you’ve wanted but couldn’t get approved before. Don’t present them as separate requests. Integrate them as essential components. <em>“To validate AI-generated designs, we’ll need to increase our testing frequency from annual to quarterly”</em> sounds much more reasonable than <em>“Can we please do more testing?”</em> You’re explaining what’s required for their AI investment to succeed.</p>

<p><strong>Show quick wins alongside a longer-term vision.</strong><br />
Identify one or two pilots that can show value within 30-60 days. Then show them how those pilots build toward bigger changes over the next year.</p>

<p><strong>Ask for what you need.</strong><br />
Be specific. You need a budget for tools, time for pilots, access to data, and support for team training.</p>

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

<h2 id="step-6-implement-and-demonstrate-value">Step 6: Implement and Demonstrate Value</h2>

<p>Run your pilots with clear before-and-after metrics. Measure everything: time saved, quality maintained, user satisfaction, team confidence.</p>

<p><strong>Document wins and learning.</strong><br />
Failures are useful too. If a pilot doesn’t work out, document why and what you learned.</p>

<p><strong>Share progress in management’s language.</strong>
 Monthly updates should focus on business outcomes, not technical details. <em>“We’ve reduced research synthesis time by 35% while maintaining quality scores”</em> is the right level of detail.</p>

<p><strong>Build internal advocates by solving real problems.</strong><br />
When your AI pilots make someone’s job easier, you create advocates who will support broader adoption.</p>

<p><strong>Iterate based on what works in your specific context.</strong>
 Not every AI application will fit your organization. Pay attention to what’s actually working and double down on that.</p>

<h2 id="taking-initiative-beats-waiting">Taking Initiative Beats Waiting</h2>

<p>AI adoption is happening. The question isn’t whether your organization will use AI, but whether you’ll shape how it gets implemented.</p>

<p>Your UX expertise is exactly what’s needed to implement AI successfully. You understand users, quality, and the gap between impressive demos and useful reality.</p>

<p><strong>Take one practical first step this week.</strong><br />
Schedule 30 minutes to map one AI opportunity in your practice. Pick one area where AI might help, think through how you’d pilot it safely, and sketch out what success would look like.</p>

<p>Then start the conversation with your manager. You might be surprised how receptive they are to someone stepping up to lead this.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aYou%20know%20how%20to%20understand%20user%20needs,%20test%20solutions,%20measure%20outcomes,%20and%20iterate%20based%20on%20evidence.%20Those%20skills%20don%e2%80%99t%20change%20just%20because%20AI%20is%20involved.%20You%e2%80%99re%20applying%20your%20existing%20expertise%20to%20a%20new%20tool.%0a&url=https://smashingmagazine.com%2f2025%2f12%2fhow-ux-professionals-can-lead-ai-strategy%2f">
      
You know how to understand user needs, test solutions, measure outcomes, and iterate based on evidence. Those skills don’t change just because AI is involved. You’re applying your existing expertise to a new tool.

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

<p>Your role isn’t disappearing. It’s evolving into something more strategic, more valuable, and more secure. But only if you take the initiative to shape that evolution yourself.</p>

<h3 id="further-reading-on-smashingmag">Further Reading On SmashingMag</h3>

<ul>
<li>“<a href="https://www.smashingmagazine.com/2025/08/designing-with-ai-practical-techniques-product-design/">Designing With AI, Not Around It: Practical Advanced Techniques For Product Design Use Cases</a>”, Ilia Kanazin &amp; Marina Chernyshova</li>
<li>“<a href="https://www.smashingmagazine.com/2025/08/beyond-hype-what-ai-can-do-product-design/">Beyond The Hype: What AI Can Really Do For Product Design</a>”, Nikita Samutin</li>
<li>“<a href="https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/">A Week In The Life Of An AI-Augmented Designer</a>”, Lyndon Cerejo</li>
<li>“<a href="https://www.smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/">Functional Personas With AI: A Lean, Practical Workflow</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>(yk, il)</span>
</div>


              </article>
            </body>
          </html>
        ]]></content:encoded></item><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">2025-12-25T10:32:38+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>AI In UX: Achieve More With Less</title><link>https://www.smashingmagazine.com/2025/10/ai-ux-achieve-more-with-less/</link><pubDate>Fri, 17 Oct 2025 08:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/10/ai-ux-achieve-more-with-less/</guid><description>A simple but powerful mental model for working with AI: treat it like an enthusiastic intern with no real-world experience. Paul Boag shares lessons learned from real client projects across user research, design, development, and content creation.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/10/ai-ux-achieve-more-with-less/" />
              <title>AI In UX: Achieve More With Less</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>AI In UX: Achieve More With Less</h1>
                  
                    
                    <address>Paul Boag</address>
                  
                  <time datetime="2025-10-17T08:00:00&#43;00:00" class="op-published">2025-10-17T08:00:00+00:00</time>
                  <time datetime="2025-10-17T08:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>I have made a lot of mistakes with AI over the past couple of years. I have wasted hours trying to get it to do things it simply cannot do. I have fed it terrible prompts and received terrible output. And I have definitely spent more time fighting with it than I care to admit.</p>

<p>But I have also discovered that when you stop treating AI like magic and start treating it like what it actually is (a very enthusiastic intern with zero life experience), things start to make more sense.</p>

<p>Let me share what I have learned from working with AI on real client projects across user research, design, development, and content creation.</p>

<h2 id="how-to-work-with-ai">How To Work With AI</h2>

<p>Here is the mental model that has been most helpful for me. Treat AI like an <strong>intern with zero experience</strong>.</p>

<p>An intern fresh out of university has lots of enthusiasm and qualifications, but no real-world experience. You would not trust them to do anything unsupervised. You would explain tasks in detail. You would expect to review their work multiple times. You would give feedback and ask them to try again.</p>

<p>This is exactly how you should work with AI.</p>

<h3 id="the-basics-of-prompting">The Basics Of Prompting</h3>

<p>I am not going to pretend to be an expert. I have just spent way too much time playing with this stuff because I like anything shiny and new. But here is what works for me.</p>

<ul>
<li><strong>Define the role.</strong><br />
Start with something like <em>“Act as a user researcher”</em>  or <em>“Act as a copywriter.”</em>  This gives the AI context for how to respond.</li>
<li><strong>Break it into steps.</strong><br />
Do not just say <em>“Analyze these interview transcripts.”</em> Instead, say <em>“I want you to complete the following steps. One, identify recurring themes. Two, look for questions users are trying to answer. Three, note any objections that come up. Four, output a summary of each.”</em></li>
<li><strong>Define success.</strong><br />
Tell it what good looks like. <em>“I am looking for a report that gives a clear indication of recurring themes and questions in a format I can send to stakeholders. Do not use research terminology because they will not understand it.”</em></li>
<li><strong>Make it think.</strong><br />
Tell it to think deeply about its approach before responding. Get it to create a way to test for success (known as a rubric) and iterate on its work until it passes that test.</li>
</ul>

<p>Here is a real prompt I use for online research:</p>

<blockquote>Act as a user researcher. I would like you to carry out deep research online into [brand name]. In particular, I would like you to focus on what people are saying about the brand, what the overall sentiment is, what questions people have, and what objections people mention. The goal is to create a detailed report that helps me better understand the brand perception.<br /><br />Think deeply about your approach before carrying out the research. Create a rubric for the report to ensure it is as useful as possible. Keep iterating until the report scores extremely high on the rubric. Only then, output the report.</blockquote>

<p>That second paragraph (the bit about thinking deeply and creating a rubric), I basically copy and paste into everything now. It is a universal way to get better output.</p>

<h3 id="learn-when-to-trust-it">Learn When To Trust It</h3>

<p>You should never fully trust AI. Just like you would never fully trust an intern you have only just met.</p>

<p>To begin with, double-check absolutely everything. Over time, you will get a sense of when it is losing its way. You will spot the patterns. You will know when to start a fresh conversation because the current one has gone off the rails.</p>

<p>But even after months of working with it daily, I still check its work. I still challenge it. I still make it <strong>cite sources</strong> and <strong>explain its reasoning</strong>.</p>

<p>The key is that even with all that checking, it is still faster than doing it yourself. Much faster.</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="using-ai-for-user-research">Using AI For User Research</h2>

<p>This is where AI has genuinely transformed my work. I use it constantly for five main things.</p>

<h3 id="online-research">Online Research</h3>

<p>I love AI for this. I can ask it to go and research a brand online. What people are saying about it, what questions they have, what they like, and what frustrates them. Then do the same for competitors and compare.</p>

<p>This would have taken me days of trawling through social media and review sites. Now it takes minutes.</p>

<p>I recently did this for an e-commerce client. I wanted to understand what annoyed people about the brand and what they loved. I got detailed insights that shaped the entire conversion optimization strategy. All from one prompt.</p>

<h3 id="analyzing-interviews-and-surveys">Analyzing Interviews And Surveys</h3>

<p>I used to avoid open-ended questions in surveys. They were such a pain to review. Now I use them all the time because AI can analyze hundreds of text responses in seconds.</p>

<p>For interviews, I upload the transcripts and ask it to identify recurring themes, questions, and requests. I always get it to quote directly from the transcripts so I can verify it is not making things up.</p>

<p>The quality is good. Really good. As long as you give it <strong>clear instructions</strong> about what you want.</p>

<h3 id="making-sense-of-data">Making Sense Of Data</h3>

<p>I am terrible with spreadsheets. Put me in front of a person and I can understand them. Put me in front of data, and my eyes glaze over.</p>

<p>AI has changed that. I upload spreadsheets to ChatGPT and just ask questions. <em>“What patterns do you see?”</em> <em>“Can you reformat this?”</em> <em>“Show me this data in a different way.”</em></p>

<p><a href="https://clarity.microsoft.com/">Microsoft Clarity</a> now has Copilot built in, so you can ask it questions about your analytics data. <a href="https://www.triplewhale.com/">Triple Whale</a> does the same for e-commerce sites. These tools are game changers if you struggle with data like I do.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ai-ux-achieve-more-with-less/1-microsoft-clarity.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="465"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/1-microsoft-clarity.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/1-microsoft-clarity.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/1-microsoft-clarity.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/1-microsoft-clarity.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/1-microsoft-clarity.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/1-microsoft-clarity.png"
			
			sizes="100vw"
			alt="Screenshot of the Microsoft Clarity with the built-in Copilot"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Microsoft Clarity has co-pilot built in, making it so much easier to uncover insights. (<a href='https://files.smashing.media/articles/ai-ux-achieve-more-with-less/1-microsoft-clarity.png'>Large preview</a>)
    </figcaption>
  
</figure>

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

<h3 id="research-projects">Research Projects</h3>

<p>This is probably my favorite technique. In ChatGPT and Claude, you can create projects. In other tools, they are called spaces. Think of them as self-contained folders where everything you put in is available to every conversation in that project.</p>

<p>When I start working with a new client, I create a project and throw everything in. Old user research. Personas. Survey results. Interview transcripts. Documentation. Background information. Site copy. Anything I can find.</p>

<p>Then I give it custom instructions. Here is one I use for my own business:</p>

<blockquote>Act as a business consultant and marketing strategy expert with good copywriting skills. Your role is to help me define the future of my <a href="https://boagworld.com/l/ux-consultant/">UX consultant business</a> and better articulate it, especially via my website. When I ask for your help, ask questions to improve your answers and challenge my assumptions where appropriate.</blockquote>

<p>I have even uploaded a virtual board of advisors (people I wish I had on my board) and asked AI to research how they think and respond as they would.</p>

<p>Now I have this project that knows everything about my business. I can ask it questions. Get it to review my work. <strong>Challenge my thinking.</strong> It is like having a co-worker who never gets tired and has a perfect memory.</p>

<p>I do this for every client project now. It is invaluable.</p>

<h3 id="creating-personas">Creating Personas</h3>

<p>AI has reinvigorated my interest in personas. I had lost heart in them a bit. They took too long to create, and clients always said they already had marketing personas and did not want to pay to do them again.</p>

<p>Now I can create what I call <a href="https://www.smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/">functional personas</a>. Personas that are actually useful to people who work in UX. Not marketing fluff about what brands people like, but real information about what questions they have and what tasks they are trying to complete.</p>

<p>I upload all my research to a project and say:</p>

<blockquote>Act as a user researcher. Create a persona for [audience type]. For this persona, research the following information: questions they have, tasks they want to complete, goals, states of mind, influences, and success metrics. It is vital that all six criteria are addressed in depth and with equal vigor.</blockquote>

<p>The output is really good. Detailed. Useful. Based on actual data rather than pulled out of thin air.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ai-ux-achieve-more-with-less/2-ai-creating-personas.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="2480"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/2-ai-creating-personas.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/2-ai-creating-personas.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/2-ai-creating-personas.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/2-ai-creating-personas.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/2-ai-creating-personas.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/2-ai-creating-personas.png"
			
			sizes="100vw"
			alt="Ai-generated functional persona"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      AI makes creating detailed personas so much faster. (<a href='https://files.smashing.media/articles/ai-ux-achieve-more-with-less/2-ai-creating-personas.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Here is my challenge to anyone who thinks AI-generated personas are somehow fake. What makes you think your personas are so much better? Every persona is a story of a <strong>hypothetical user</strong>. You make judgment calls when you create personas, too. At least AI can process far more information than you can and is brilliant at pattern recognition.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aMy%20only%20concern%20is%20that%20relying%20too%20heavily%20on%20AI%20could%20disconnect%20us%20from%20real%20users.%20We%20still%20need%20to%20talk%20to%20people.%20We%20still%20need%20that%20empathy.%20But%20as%20a%20tool%20to%20synthesize%20research%20and%20create%20reference%20points?%20It%20is%20excellent.%0a&url=https://smashingmagazine.com%2f2025%2f10%2fai-ux-achieve-more-with-less%2f">
      
My only concern is that relying too heavily on AI could disconnect us from real users. We still need to talk to people. We still need that empathy. But as a tool to synthesize research and create reference points? It is excellent.

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

<h2 id="using-ai-for-design-and-development">Using AI For Design And Development</h2>

<p>Let me start with a warning. AI is not production-ready. Not yet. Not for the kind of client work I do, anyway.</p>

<p>Three reasons why:</p>

<ol>
<li>It is slow if you want something specific or complicated.</li>
<li>It can be frustrating because it gets close but not quite there.</li>
<li>And the quality is often subpar. Unpolished code, questionable design choices, that kind of thing.</li>
</ol>

<p>But that does not mean it is not useful. It absolutely is. Just not for final production work.</p>

<h3 id="functional-prototypes">Functional Prototypes</h3>

<p>If you are not too concerned with matching a specific design, AI can quickly prototype functionality in ways that are hard to match in Figma. Because Figma is terrible at prototyping functionality. You cannot even create an active form field in a Figma prototype. It’s the biggest thing people do online other than click links &mdash; and you cannot test it.</p>

<p>Tools like <a href="https://www.relume.io/">Relume</a> and <a href="https://bolt.new/">Bolt</a> can create quick functional mockups that show roughly how things work. They are great for non-designers who just need to throw together a prototype quickly. For designers, they can be useful for showing developers how you want something to work.</p>

<p>But you can spend ages getting them to put a hamburger menu on the right side of the screen. So use them for quick iteration, not pixel-perfect design.</p>

<h3 id="small-coding-tasks">Small Coding Tasks</h3>

<p>I use AI constantly for small, low-risk coding work. I am not a developer anymore. I used to be, back when dinosaurs roamed the earth, but not for years.</p>

<p>AI lets me create the little tools I need. <a href="https://boagworld.com/boagworks/convince-the-boss/">A calculator that calculates the ROI of my UX work</a>. An app for running top task analysis. Bits of JavaScript for hiding elements on a page. WordPress plugins for updating dates automatically.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ai-ux-achieve-more-with-less/3-bolt-tool.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="465"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/3-bolt-tool.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/3-bolt-tool.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/3-bolt-tool.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/3-bolt-tool.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/3-bolt-tool.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/3-bolt-tool.png"
			
			sizes="100vw"
			alt="Screenshot of the Bolt tool"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      I find Bolt an incredibly intuitive tool for building quick prototypes for low-risk apps. (<a href='https://files.smashing.media/articles/ai-ux-achieve-more-with-less/3-bolt-tool.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Just before running my workshop on this topic, I needed a tool to create calendar invites for multiple events. All the online services wanted £16 a month. I asked ChatGPT to build me one. One prompt. It worked. It looked rubbish, but I did not care. It did what I needed.</p>

<p>If you are a developer, you should absolutely be using tools like <a href="https://cursor.com/">Cursor</a> by now. They are invaluable for pair programming with AI. But if you are not a developer, just stick with Claude or Bolt for quick throwaway tools.</p>

<h3 id="reviewing-existing-services">Reviewing Existing Services</h3>

<p>There are some great tools for getting quick feedback on existing websites when budget and time are tight.</p>

<p>If you need to conduct a <a href="https://boagworld.com/l/ux-audit/">UX audit</a>, <a href="https://wevo.ai/takeapulse/">Wevo Pulse</a> is an excellent starting point. It automatically reviews a website based on personas and provides visual attention heatmaps, friction scores, and specific improvement recommendations. It generates insights in minutes rather than days.</p>

<p>Now, let me be clear. This does not replace having an experienced person conduct a proper UX audit. You still need that human expertise to understand context, make judgment calls, and spot issues that AI might miss. But as a starting point to identify obvious problems quickly? It is a great tool. Particularly when budget or time constraints mean a full audit is not on the table.</p>

<p>For e-commerce sites, <a href="https://baymard.com/product/ux-ray">Baymard has UX Ray</a>, which analyzes flaws based on their massive database of user research.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ai-ux-achieve-more-with-less/4-baymard-ux-ray.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="465"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/4-baymard-ux-ray.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/4-baymard-ux-ray.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/4-baymard-ux-ray.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/4-baymard-ux-ray.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/4-baymard-ux-ray.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/4-baymard-ux-ray.png"
			
			sizes="100vw"
			alt="Screenshot of the Baymard UX-ray"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Baymard UX-ray is an incredibly handy tool for improving the quality of your UX audits. (<a href='https://files.smashing.media/articles/ai-ux-achieve-more-with-less/4-baymard-ux-ray.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="checking-your-designs">Checking Your Designs</h3>

<p><a href="https://attentioninsight.com/">Attention Insight</a> has taken thousands of hours of eye-tracking studies and trained AI on it to predict where people will look on a page. It has about 90 to 96 percent accuracy.</p>

<p>You upload a screenshot of your design, and it shows you where attention is going. Then you can play around with your imagery and layout to guide attention to the right place.</p>

<p>It is great for dealing with stakeholders who say, <em>“People won’t see that.”</em> You can prove they will. Or equally, when stakeholders try to crowd the interface with too much stuff, you can show them attention shooting everywhere.</p>

<p>I use this constantly. Here is a real example from a pet insurance company. They had photos of a dog, cat, and rabbit for different types of advice. The dog was far from the camera. The cat was looking directly at the camera, pulling all the attention. The rabbit was half off-frame. Most attention went to the cat’s face.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ai-ux-achieve-more-with-less/5-attention-insight.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="421"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/5-attention-insight.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/5-attention-insight.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/5-attention-insight.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/5-attention-insight.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/5-attention-insight.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/5-attention-insight.png"
			
			sizes="100vw"
			alt="An example from a pet insurance company tested by Attention Insight"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/ai-ux-achieve-more-with-less/5-attention-insight.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>I redesigned it using AI-generated images, where I could control exactly where each animal looked. Dog looking at the camera. Cat looking right. Rabbit looking left. All the attention drawn into the center. Made a massive difference.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ai-ux-achieve-more-with-less/6-redesigned-ai-version.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="394"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/6-redesigned-ai-version.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/6-redesigned-ai-version.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/6-redesigned-ai-version.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/6-redesigned-ai-version.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/6-redesigned-ai-version.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/6-redesigned-ai-version.png"
			
			sizes="100vw"
			alt="Redesigned version of the previous example with AI-generated images."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      AI can be used to create images that are consistent with a brand identity and are designed to draw attention to specific elements. (<a href='https://files.smashing.media/articles/ai-ux-achieve-more-with-less/6-redesigned-ai-version.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="creating-the-perfect-image">Creating The Perfect Image</h3>

<p>I use AI all the time for creating images that do a specific job. My preferred tools are <a href="https://www.midjourney.com/">Midjourney</a> and Gemini.</p>

<p>I like Midjourney because, visually, it creates stunning imagery. You can dial in the tone and style you want. The downside is that it is not great at following specific instructions.</p>

<p>So I produce an image in Midjourney that is close, then upload it to Gemini. Gemini is not as good at visual style, but it is much better at following instructions. <em>“Make the guy reach here”</em> or <em>“Add glasses to this person.”</em> I can get pretty much exactly what I want.</p>

<p>The other thing I love about Midjourney is that you can upload a photograph and say, <em>“Replicate this style.”</em> This keeps <strong>consistency</strong> across a website. I have a master image I use as a reference for all my site imagery to keep the style consistent.</p>

<h2 id="using-ai-for-content">Using AI For Content</h2>

<p>Most clients give you terrible copy. Our job is to improve the user experience or conversion rate, and anything we do gets utterly undermined by bad copy.</p>

<p>I have completely stopped asking clients for copy since AI came along. Here is my process.</p>

<h3 id="build-everything-around-questions">Build Everything Around Questions</h3>

<p>Once I have my information architecture, I get AI to generate a massive list of questions users will ask. Then I run a <a href="https://www.smashingmagazine.com/2022/05/top-tasks-focus-what-matters-must-defocus-what-doesnt/">top task analysis</a> where people vote on which questions matter most.</p>

<p>I assign those questions to pages on the site. Every page gets a list of the questions it needs to answer.</p>

<h3 id="get-bullet-point-answers-from-stakeholders">Get Bullet Point Answers From Stakeholders</h3>

<p>I spin up the content management system with a really basic theme. Just HTML with very basic formatting. I go through every page and assign the questions.</p>

<p>Then I go to my clients and say: <em>“I do not want you to write copy. Just go through every page and bullet point answers to the questions. If the answer exists on the old site, copy and paste some text or link to it. But just bullet points.”</em></p>

<p>That is their job done. Pretty much.</p>

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

<h3 id="let-ai-draft-the-copy">Let AI Draft The Copy</h3>

<p>Now I take control. I feed ChatGPT the questions and bullet points and say:</p>

<blockquote>Act as an online copywriter. Write copy for a webpage that answers the question [question]. Use the following bullet points to answer that question: [bullet points]. Use the following guidelines: Aim for a ninth-grade reading level or below. Sentences should be short. Use plain language. Avoid jargon. Refer to the reader as you. Refer to the writer as us. Ensure the tone is friendly, approachable, and reassuring. The goal is to [goal]. Think deeply about your approach. Create a rubric and iterate until the copy is excellent. Only then, output it.</blockquote>

<p>I often upload a full style guide as well, with details about how I want it to be written.</p>

<p>The output is genuinely good. As a first draft, it is excellent. Far better than what most stakeholders would give me.</p>

<h3 id="stakeholders-review-and-provide-feedback">Stakeholders Review And Provide Feedback</h3>

<p>That goes into the website, and stakeholders can comment on it. Once I get their feedback, I take the original copy and all their comments back into ChatGPT and say, <em>“Rewrite using these comments.”</em></p>

<p>Job done.</p>

<p>The great thing about this approach is that even if stakeholders make loads of changes, they are making changes to a good foundation. The overall quality still comes out better than if they started with a blank sheet.</p>

<p>It also makes things go smoother because you are not criticizing their content, where they get defensive. They are criticizing AI content.</p>

<h3 id="tools-that-help">Tools That Help</h3>

<p>If your stakeholders are still giving you content, <a href="https://hemingwayapp.com/">Hemingway Editor</a> is brilliant. Copy and paste text in, and it tells you how readable and scannable it is. It highlights long sentences and jargon. You can use this to prove to clients that their content is not good web copy.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ai-ux-achieve-more-with-less/7-hemingway-editor.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="497"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/7-hemingway-editor.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/7-hemingway-editor.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/7-hemingway-editor.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/7-hemingway-editor.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/7-hemingway-editor.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ai-ux-achieve-more-with-less/7-hemingway-editor.png"
			
			sizes="100vw"
			alt="Screenshot of the Hemingway Editor"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Hemingway Editor is superb at rewriting copy to be more web-friendly. (<a href='https://files.smashing.media/articles/ai-ux-achieve-more-with-less/7-hemingway-editor.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>If you pay for the pro version, you get AI tools that will rewrite the copy to be more readable. It is excellent.</p>

<h2 id="what-this-means-for-you">What This Means for You</h2>

<p>Let me be clear about something. None of this is perfect. AI makes mistakes. It hallucinates. It produces bland output if you do not push it hard enough. It requires constant checking and challenging.</p>

<p>But here is what I know from two years of using this stuff daily. It has made me <strong>faster</strong>. It has made me <strong>better</strong>. It has freed me up to do <strong>more strategic thinking</strong> and <strong>less grunt work</strong>.</p>

<p>A report that would have taken me five days now takes three hours. That is not an exaggeration. That is real.</p>

<p>Overall, AI probably gives me a 25 to 33 percent increase in what I can do. That is significant.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aYour%20value%20as%20a%20UX%20professional%20lies%20in%20your%20ideas,%20your%20questions,%20and%20your%20thinking.%20Not%20your%20ability%20to%20use%20Figma.%20Not%20your%20ability%20to%20manually%20review%20transcripts.%20Not%20your%20ability%20to%20write%20reports%20from%20scratch.%0a&url=https://smashingmagazine.com%2f2025%2f10%2fai-ux-achieve-more-with-less%2f">
      
Your value as a UX professional lies in your ideas, your questions, and your thinking. Not your ability to use Figma. Not your ability to manually review transcripts. Not your ability to write reports from scratch.

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

<p>AI cannot innovate. It cannot make creative leaps. It cannot know whether its output is good. It cannot understand what it is like to be human.</p>

<p>That is where you come in. That is where you will always come in.</p>

<p>Start small. Do not try to learn everything at once. Just ask yourself throughout your day: Could I do this with AI? Try it. See what happens. Double-check everything. Learn what works and what does not.</p>

<p>Treat it like an enthusiastic intern with zero life experience. Give it clear instructions. Check its work. Make it try again. Challenge it. Push it further.</p>

<p>And remember, it is not going to take your job. It is going to change it. For the better, I think. As long as we learn to work with it rather than against 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>Lyndon Cerejo</author><title>From Prompt To Partner: Designing Your Custom AI Assistant</title><link>https://www.smashingmagazine.com/2025/09/from-prompt-to-partner-designing-custom-ai-assistant/</link><pubDate>Fri, 26 Sep 2025 10:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/09/from-prompt-to-partner-designing-custom-ai-assistant/</guid><description>What if your best AI prompts didn’t disappear into your unorganized chat history, but came back tomorrow as a reliable assistant? In this article, you’ll learn how to turn one-off “aha” prompts into reusable assistants that are tailored to your audience, grounded in your knowledge, and consistent every time, saving you (and your team) from typing the same 448-word prompt ever again. No coding, just designing, and by the end, you’ll have a custom AI assistant that can augment your team.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/09/from-prompt-to-partner-designing-custom-ai-assistant/" />
              <title>From Prompt To Partner: Designing Your Custom AI Assistant</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>From Prompt To Partner: Designing Your Custom AI Assistant</h1>
                  
                    
                    <address>Lyndon Cerejo</address>
                  
                  <time datetime="2025-09-26T10:00:00&#43;00:00" class="op-published">2025-09-26T10:00:00+00:00</time>
                  <time datetime="2025-09-26T10:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>In “<a href="https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/">A Week In The Life Of An AI-Augmented Designer</a>”, Kate stumbled her way through an AI-augmented sprint (coffee was chugged, mistakes were made). In “<a href="https://www.smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/">Prompting Is A Design Act</a>”, we introduced WIRE+FRAME, a framework to structure prompts like designers structure creative briefs. Now we’ll take the next step: packaging those structured prompts into AI assistants you can design, reuse, and share.</p>

<p>AI assistants go by different names: CustomGPTs (ChatGPT), Agents (Copilot), and Gems (Gemini). But they all serve the same function &mdash; allowing you to customize the default AI model for your unique needs. If we carry over our smart intern analogy, think of these as interns trained to assist you with specific tasks, eliminating the need for repeated instructions or information, and who can support not just you, but your entire team.</p>

<h2 id="why-build-your-own-assistant">Why Build Your Own Assistant?</h2>

<p>If you’ve ever copied and pasted the same mega-prompt for the n<sup>th</sup> time, you’ve experienced the pain. An AI assistant turns a one-off “great prompt” into a dependable teammate. And if you’ve used any of the publicly available AI Assistants, you’ve realized quickly that they’re usually generic and not tailored for your use.</p>

<p>Public AI assistants are great for inspiration, but nothing beats an assistant that solves a repeated problem for you and your team, in <strong>your voice</strong>, with <strong>your context and constraints</strong> baked in. Instead of reinventing the wheel by writing new prompts each time, or repeatedly copy-pasting your structured prompts every time, or spending cycles trying to make a public AI Assistant work the way you need it to, your own AI Assistant allows you and others to easily get better, repeatable, consistent results faster.</p>

<h3 id="benefits-of-reusing-prompts-even-your-own">Benefits Of Reusing Prompts, Even Your Own</h3>

<p>Some of the benefits of building your own AI Assistant over writing or reusing your prompts include:</p>

<ul>
<li><strong>Focused on a real repeating problem</strong><br />
A good AI Assistant isn’t a general-purpose “do everything” bot that you need to keep tweaking. It focuses on a single, recurring problem that takes a long time to complete manually and often results in varying quality depending on who’s doing it (e.g., analyzing customer feedback).</li>
<li><strong>Customized for your context</strong><br />
Most large language models (LLMs, such as ChatGPT) are designed to be everything to everyone. An AI Assistant changes that by allowing you to customize it to automatically work like you want it to, instead of a generic AI.</li>
<li><strong>Consistency at scale</strong><br />
You can use the <a href="https://www.smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/#anatomy-structure-it-like-a-designer">WIRE+FRAME prompt framework</a> to create structured, reusable prompts. An AI Assistant is the next logical step: instead of copy-pasting that fine-tuned prompt and sharing contextual information and examples each time, you can bake it into the assistant itself, allowing you and others achieve the same consistent results every time.</li>
<li><strong>Codifying expertise</strong><br />
Every time you turn a great prompt into an AI Assistant, you’re essentially bottling your expertise. Your assistant becomes a living design guide that outlasts projects (and even job changes).</li>
<li><strong>Faster ramp-up for teammates</strong><br />
Instead of new designers starting from a blank slate, they can use pre-tuned assistants. Think of it as knowledge transfer without the long onboarding lecture.

<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>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="reasons-for-your-own-ai-assistant-instead-of-public-ai-assistants">Reasons For Your Own AI Assistant Instead Of Public AI Assistants</h3>

<p>Public AI assistants are like stock templates. While they serve a specific purpose compared to the generic AI platform, and are useful starting points, if you want something tailored to your needs and team, you should really build your own.</p>

<p>A few reasons for building your AI Assistant instead of using a public assistant someone else created include:</p>

<ul>
<li><strong>Fit</strong>: Public assistants are built for the masses. Your work has quirks, tone, and processes they’ll never quite match.</li>
<li><strong>Trust &amp; Security</strong>: You don’t control what instructions or hidden guardrails someone else baked in. With your own assistant, you know exactly what it will (and won’t) do.</li>
<li><strong>Evolution</strong>: An AI Assistant you design and build can grow with your team. You can update files, tweak prompts, and maintain a changelog &mdash; things a public bot won’t do for you.</li>
</ul>

<p>Your own AI Assistants allow you to take your successful ways of interacting with AI and make them repeatable and shareable. And while they are tailored to your and your team’s way of working, remember that they are still based on generic AI models, so the usual AI disclaimers apply:</p>

<p><em>Don’t share anything you wouldn’t want screenshotted in the next company all-hands. Keep it safe, private, and user-respecting. A shared AI Assistant can potentially reveal its inner workings or data.</em></p>

<p><strong><em>Note</em></strong>: <em>We will be building an AI assistant using ChatGPT, aka a CustomGPT, but you can try the same process with any decent LLM sidekick. As of publication, a paid account is required to create CustomGPTs, but once created, they can be shared and used by anyone, regardless of whether they have a paid or free account. Similar limitations apply to the other platforms. Just remember that outputs can vary depending on the LLM model used, the model’s training, mood, and flair for creative hallucinations.</em></p>

<h3 id="when-not-to-build-an-ai-assistant-yet">When Not to Build An AI Assistant (Yet)</h3>

<p>An AI Assistant is great when the <em>same</em> audience has the <em>same</em> problem <em>often</em>. When the fit isn’t there, the risk is high; you should skip building an AI Assistant for now, as explained below:</p>

<ul>
<li><strong>One-off or rare tasks</strong><br />
If it won’t be reused at least monthly, I’d recommend keeping it as a saved WIRE+FRAME prompt. For example, something for a one-time audit or creating placeholder content for a specific screen.</li>
<li><strong>Sensitive or regulated data</strong><br />
If you need to build in personally identifiable information (PII), health, finance, legal, or trade secrets, err on the side of not building an AI Assistant. Even if the AI platform promises not to use your data, I’d strongly suggest using redaction or an approved enterprise tool with necessary safeguards in place (company-approved enterprise versions of Microsoft Copilot, for instance).</li>
<li><strong>Heavy orchestration or logic</strong><br />
Multi-step workflows, API calls, database writes, and approvals go beyond the scope of an AI Assistant into Agentic territory (as of now). I’d recommend not trying to build an AI Assistant for these cases.</li>
<li><strong>Real-time information</strong><br />
AI Assistants may not be able to access real-time data like prices, live metrics, or breaking news. If you need these, you can upload near-real-time data (as we do below) or connect with data sources that you or your company controls, rather than relying on the open web.</li>
<li><strong>High-stakes outputs</strong><br />
For cases related to compliance, legal, medical, or any other area requiring auditability, consider implementing process guardrails and training to keep humans in the loop for proper review and accountability.</li>
<li><strong>No measurable win</strong><br />
If you can’t name a success metric (such as time saved, first-draft quality, or fewer re-dos), I’d recommend keeping it as a saved WIRE+FRAME prompt.</li>
</ul>

<p>Just because these are signs that you should not build your AI Assistant now, doesn’t mean you shouldn’t ever. Revisit this decision when you notice that you’re starting to repeatedly use the same prompt weekly, multiple teammates ask for it, or manual time copy-pasting and refining start exceeding ~15 minutes. Those are some signs that an AI Assistant will pay back quickly.</p>

<p>In a nutshell, build an AI Assistant when you can name the problem, the audience, frequency, and the win. The rest of this article shows how to turn your successful WIRE+FRAME prompt into a CustomGPT that you and your team can actually use. No advanced knowledge, coding skills, or hacks needed.</p>

<h2 id="as-always-start-with-the-user">As Always, Start with the User</h2>

<p>This should go without saying to UX professionals, but it’s worth a reminder: if you’re building an AI assistant for anyone besides yourself, start with the user and their needs before you build anything.</p>

<ul>
<li>Who will use this assistant?</li>
<li>What’s the specific pain or task they struggle with today?</li>
<li>What language, tone, and examples will feel natural to them?</li>
</ul>

<p>Building without doing this first is a sure way to end up with clever assistants nobody actually wants to use. Think of it like any other product: before you build features, you understand your audience. The same rule applies here, even more so, because AI assistants are only as helpful as they are useful and usable.</p>

<h2 id="from-prompt-to-assistant">From Prompt To Assistant</h2>

<p>You’ve already done the heavy lifting with WIRE+FRAME. Now you’re just turning that refined and reliable prompt into a CustomGPT you can reuse and share. You can use MATCH as a checklist to go from a great prompt to a useful AI assistant.</p>

<ul>
<li><strong>M: Map your prompt</strong><br />
Port your successful WIRE+FRAME prompt into the AI assistant.</li>
<li><strong>A: Add knowledge and training</strong><br />
Ground the assistant in <em>your</em> world. Upload knowledge files, examples, or guides that make it uniquely yours.</li>
<li><strong>T: Tailor for audience</strong><br />
Make it feel natural to the people who will use it. Give it the right capabilities, but also adjust its settings, tone, examples, and conversation starters so they land with your audience.</li>
<li><strong>C: Check, test, and refine</strong><br />
Test the preview with different inputs and refine until you get the results you expect.</li>
<li><strong>H: Hand off and maintain</strong><br />
Set sharing options and permissions, share the link, and maintain it.</li>
</ul>

<p>A few weeks ago, we invited readers to share their ideas for AI assistants they wished they had. The top contenders were:</p>

<ul>
<li><strong>Prototype Prodigy</strong>: Transform rough ideas into prototypes and export them into Figma to refine.</li>
<li><strong>Critique Coach</strong>: Review wireframes or mockups and point out accessibility and usability gaps.</li>
</ul>

<p>But the favorite was an AI assistant to turn tons of customer feedback into actionable insights. Readers replied with variations of: <em>“An assistant that can quickly sort through piles of survey responses, app reviews, or open-ended comments and turn them into themes we can act on.”</em></p>

<p>And that’s the one we will build in this article &mdash; say hello to <strong>Insight Interpreter.</strong></p>

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

<h2 id="walkthrough-insight-interpreter">Walkthrough: Insight Interpreter</h2>

<p>Having lots of customer feedback is a nice problem to have. Companies actively seek out customer feedback through surveys and studies (solicited), but also receive feedback that may not have been asked for through social media or public reviews (unsolicited). This is a goldmine of information, but it can be messy and overwhelming trying to make sense of it all, and it’s nobody’s idea of fun. Here’s where an AI assistant like the Insight Interpreter can help. We’ll turn the example prompt created using the WIRE+FRAME framework in <a href="https://www.smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/">Prompting Is A Design Act</a> into a CustomGPT.</p>

<p>When you start building a CustomGPT by visiting <a href="https://chat.openai.com/gpts/editor?utm_source=chatgpt.com">https://chat.openai.com/gpts/editor</a>, you’ll see two paths:</p>

<ul>
<li><strong>Conversational interface</strong><br />
Vibe-chat your way &mdash; it’s easy and quick, but similar to unstructured prompts, your inputs get baked in a little messily, so you may end up with vague or inconsistent instructions.</li>
<li><strong>Configure interface</strong><br />
The structured form where you type instructions, upload files, and toggle capabilities. Less instant gratification, less winging it, but more control. This is the option you’ll want for assistants you plan to share or depend on regularly.</li>
</ul>

<p>The good news is that MATCH works for both. In conversational mode, you can use it as a mental checklist, and we’ll walk through using it in configure mode as a more formal checklist in this article.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/1-customgpt-configure-interface.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/from-prompt-to-partner-designing-custom-ai-assistant/1-customgpt-configure-interface.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/1-customgpt-configure-interface.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/1-customgpt-configure-interface.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/1-customgpt-configure-interface.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/1-customgpt-configure-interface.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/1-customgpt-configure-interface.png"
			
			sizes="100vw"
			alt="CustomGPT Configure Interface"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      CustomGPT Configure Interface. (<a href='https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/1-customgpt-configure-interface.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="m-map-your-prompt">M: Map Your Prompt</h3>

<p>Paste your full WIRE+FRAME prompt into the <em>Instructions</em> section exactly as written. As a refresher, I’ve included the mapping and snippets of the detailed prompt from before:</p>

<ul>
<li><strong>W</strong>ho &amp; What: The AI persona and the core deliverable (<em>“…senior UX researcher and customer insights analyst… specialize in synthesizing qualitative data from diverse sources…”</em>).</li>
<li><strong>I</strong>nput Context: Background or data scope to frame the task (<em>“…analyzing customer feedback uploaded from sources such as…”</em>).</li>
<li><strong>R</strong>ules &amp; Constraints: Boundaries (<em>“…do not fabricate pain points, representative quotes, journey stages, or patterns…”</em>).</li>
<li><strong>E</strong>xpected Output: Format and fields of the deliverable (<em>“…a structured list of themes. For each theme, include…”</em>).</li>
<li><strong>F</strong>low: Explicit, ordered sub-tasks (<em>“Recommended flow of tasks: Step 1…”</em>).</li>
<li><strong>R</strong>eference Voice: Tone, mood, or reference (<em>“…concise, pattern-driven, and objective…”</em>).</li>
<li><strong>A</strong>sk for Clarification: Ask questions if unclear (<em>“…if data is missing or unclear, ask before continuing…”</em>).</li>
<li><strong>M</strong>emory: Memory to recall earlier definitions (<em>“Unless explicitly instructed otherwise, keep using this process…”</em>).</li>
<li><strong>E</strong>valuate &amp; Iterate: Have the AI self-critique outputs (<em>“…critically evaluate…suggest improvements…”</em>).</li>
</ul>

<p>If you’re building Copilot Agents or Gemini Gems instead of CustomGPTs, you still paste your WIRE+FRAME prompt into their respective <em>Instructions</em> sections.</p>

<h3 id="a-add-knowledge-and-training">A: Add Knowledge And Training</h3>

<p>In the knowledge section, upload up to 20 files, clearly labeled, that will help the CustomGPT respond effectively. Keep files small and versioned: <em>reviews_Q2_2025.csv</em> beats <em>latestfile_final2.csv</em>. For this prompt for analyzing customer feedback, generating themes organized by customer journey, rating them by severity and effort, files could include:</p>

<ul>
<li>Taxonomy of themes;</li>
<li>Instructions on parsing uploaded data;</li>
<li>Examples of real UX research reports using this structure;</li>
<li>Scoring guidelines for severity and effort, e.g., what makes something a 3 vs. a 5 in severity;</li>
<li>Customer journey map stages;</li>
<li>Customer feedback file templates (not actual data).</li>
</ul>

<p>An example of a file to help it parse uploaded data is shown below:</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/2-gpt-file-parsing-instructions.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/from-prompt-to-partner-designing-custom-ai-assistant/2-gpt-file-parsing-instructions.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/2-gpt-file-parsing-instructions.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/2-gpt-file-parsing-instructions.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/2-gpt-file-parsing-instructions.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/2-gpt-file-parsing-instructions.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/2-gpt-file-parsing-instructions.png"
			
			sizes="100vw"
			alt="GPT file parsing instructions"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/2-gpt-file-parsing-instructions.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="t-tailor-for-audience">T: Tailor For Audience</h3>

<ul>
<li><strong>Audience tailoring</strong><br />
If you are building this for others, your prompt should have addressed tone in the “Reference Voice” section. If you didn’t, do it now, so the CustomGPT can be tailored to the tone and expertise level of users who will use it. In addition, use the <em>Conversation starters</em> section to add a few examples or common prompts for users to start using the CustomGPT, again, worded for your users. For instance, we could use “Analyze feedback from the attached file” for our Insights Interpreter to make it more self-explanatory for anyone, instead of “Analyze data,” which may be good enough if you were using it alone. For my Designerly Curiosity GPT, assuming that users may not know what it could do, I use “What are the types of curiosity?” and “Give me a micro-practice to spark curiosity”.</li>
<li><strong>Functional tailoring</strong><br />
Fill in the CustomGPT name, icon, description, and capabilities.

<ul>
<li><em>Name</em>: Pick one that will make it clear what the CustomGPT does. Let’s use “Insights Interpreter &mdash; Customer Feedback Analyzer”. If needed, you can also add a version number. This name will show up in the sidebar when people use it or pin it, so make the first part memorable and easily identifiable.</li>
<li><em>Icon</em>: Upload an image or generate one. Keep it simple so it can be easily recognized in a smaller dimension when people pin it in their sidebar.</li>
<li><em>Description</em>: A brief, yet clear description of what the CustomGPT can do. If you plan to list it in the GPT store, this will help people decide if they should pick yours over something similar.</li>
<li><em>Recommended Model</em>: If your CustomGPT needs the capabilities of a particular model (e.g., needs GPT-5 thinking for detailed analysis), select it. In most cases, you can safely leave it up to the user or select the most common model.</li>
<li><em>Capabilities</em>: Turn off anything you won’t need. We’ll turn off “Web Search” to allow the CustomGPT to focus only on uploaded data, without expanding the search online, and we will turn on “Code Interpreter &amp; Data Analysis” to allow it to understand and process uploaded files. “Canvas” allows users to work on a shared canvas with the GPT to edit writing tasks; “Image generation” - if the CustomGPT needs to create images.</li>
<li><em>Actions</em>: Making <a href="https://platform.openai.com/docs/actions/introduction">third-party APIs</a> available to the CustomGPT, advanced functionality we don’t need.</li>
<li><em>Additional Settings</em>: Sneakily hidden and opted in by default, I opt out of training OpenAI’s models.</li>
</ul></li>
</ul>

<h3 id="c-check-test-refine">C: Check, Test &amp; Refine</h3>

<p>Do one last visual check to make sure you’ve filled in all applicable fields and the basics are in place: is the concept sharp and clear (not a do-everything bot)? Are the roles, goals, and tone clear? Do we have the right assets (docs, guides) to support it? Is the flow simple enough that others can get started easily? Once those boxes are checked, move into testing.</p>

<p>Use the <em>Preview</em> panel to verify that your CustomGPT performs as well, or better, than your original WIRE+FRAME prompt, and that it works for your intended audience. Try a few representative inputs and compare the results to what you expected. If something worked before but doesn’t now, check whether new instructions or knowledge files are overriding it.</p>

<p>When things don’t look right, here are quick debugging fixes:</p>

<ul>
<li><strong>Generic answers?</strong><br />
Tighten <em>Input Context</em> or update the knowledge files.</li>
<li><strong>Hallucinations?</strong><br />
Revisit your <em>Rules</em> section. Turn off web browsing if you don’t need external data.</li>
<li><strong>Wrong tone?</strong><br />
Strengthen <em>Reference Voice</em> or swap in clearer examples.</li>
<li><strong>Inconsistent?</strong><br />
Test across models in preview and set the most reliable one as “Recommended.”</li>
</ul>

<h3 id="h-hand-off-and-maintain">H: Hand Off And Maintain</h3>

<p>When your CustomGPT is ready, you can publish it via the “Create” option. Select the appropriate access option:</p>

<ul>
<li><strong>Only me</strong>: Private use. Perfect if you’re still experimenting or keeping it personal.</li>
<li><strong>Anyone with the link</strong>: Exactly what it means. Shareable but not searchable. Great for pilots with a team or small group. Just remember that links can be reshared, so treat them as semi-public.</li>
<li><strong>GPT Store</strong>: Fully public. Your assistant is listed and findable by anyone browsing the store. <em>(This is the option we’ll use.)</em></li>
<li><strong>Business workspace</strong> (if you’re on GPT Business): Share with others within your business account only &mdash; the easiest way to keep it in-house and controlled.</li>
</ul>

<p>But hand off doesn’t end with hitting publish, you should maintain it to keep it relevant and useful:</p>

<ul>
<li><strong>Collect feedback</strong>: Ask teammates what worked, what didn’t, and what they had to fix manually.</li>
<li><strong>Iterate</strong>: Apply changes directly or duplicate the GPT if you want multiple versions in play. You can find all your CustomGPTs at: <a href="https://chatgpt.com/gpts/mine">https://chatgpt.com/gpts/mine</a></li>
<li><strong>Track changes</strong>: Keep a simple changelog (date, version, updates) for traceability.</li>
<li><strong>Refresh knowledge</strong>: Update knowledge files and examples on a regular cadence so answers don’t go stale.</li>
</ul>

<p>And that’s it! <a href="https://go.cerejo.com/insights-interpreter">Our Insights Interpreter is now live!</a></p>

<p>Since we used the WIRE+FRAME prompt from the previous article to create the Insights Interpreter CustomGPT, I compared the outputs:</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/3-results-structured-wire-frame-prompt.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="325"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/3-results-structured-wire-frame-prompt.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/3-results-structured-wire-frame-prompt.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/3-results-structured-wire-frame-prompt.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/3-results-structured-wire-frame-prompt.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/3-results-structured-wire-frame-prompt.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/3-results-structured-wire-frame-prompt.png"
			
			sizes="100vw"
			alt="Results of the structured WIRE&#43;FRAME prompt from the previous article"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Results of the structured WIRE+FRAME prompt from the previous article. (<a href='https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/3-results-structured-wire-frame-prompt.png'>Large preview</a>)
    </figcaption>
  
</figure>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/4-results-insights-interpreter-customgpt.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="276"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/4-results-insights-interpreter-customgpt.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/4-results-insights-interpreter-customgpt.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/4-results-insights-interpreter-customgpt.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/4-results-insights-interpreter-customgpt.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/4-results-insights-interpreter-customgpt.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/4-results-insights-interpreter-customgpt.png"
			
			sizes="100vw"
			alt="Results of the Insights Interpreter CustomGPT based on the same prompt"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Results of the Insights Interpreter CustomGPT based on the same prompt. (<a href='https://files.smashing.media/articles/from-prompt-to-partner-designing-custom-ai-assistant/4-results-insights-interpreter-customgpt.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>The results are similar, with slight differences, and that’s expected. If you compare the results carefully, the themes, issues, journey stages, frequency, severity, and estimated effort match with some differences in wording of the theme, issue summary, and problem statement. The opportunities and quotes have more visible differences. Most of it is because of the CustomGPT knowledge and training files, including instructions, examples, and guardrails, now live as always-on guidance.</p>

<p>Keep in mind that in reality, Generative AI is by nature generative, so outputs will vary. Even with the same data, you won’t get identical wording every time. In addition, underlying models and their capabilities rapidly change. If you want to keep things as consistent as possible, recommend a model (though people can change it), track versions of your data, and compare for structure, priorities, and evidence rather than exact wording.</p>

<p>While I’d love for you to use Insights Interpreter, I strongly recommend taking 15 minutes to follow the steps above and create your own. That is exactly what you or your team needs &mdash; including the tone, context, output formats, and get the real AI Assistant you need!</p>

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

<h2 id="inspiration-for-other-ai-assistants">Inspiration For Other AI Assistants</h2>

<p>We just built the Insight Interpreter and mentioned two contenders: Critique Coach and Prototype Prodigy. Here are a few other realistic uses that can spark ideas for your own AI Assistant:</p>

<ul>
<li><strong>Workshop Wizard</strong>: Generates workshop agendas, produces icebreaker questions, and follows up survey drafts.</li>
<li><strong>Research Roundup Buddy</strong>: Summarizes raw transcripts into key themes, then creates highlight reels (quotes + visuals) for team share-outs.</li>
<li><strong>Persona Refresher</strong>: Updates stale personas with the latest customer feedback, then rewrites them in different tones (boardroom formal vs. design-team casual).</li>
<li><strong>Content Checker</strong>: Proofs copy for tone, accessibility, and reading level before it ever hits your site.</li>
<li><strong>Trend Tamer</strong>: Scans competitor reviews and identifies emerging patterns you can act on before they reach your roadmap.</li>
<li><strong>Microcopy Provocateur</strong>: Tests alternate copy options by injecting different tones (sassy, calm, ironic, nurturing) and role-playing how users might react, especially useful for error states or Call to Actions.</li>
<li><strong>Ethical UX Debater</strong>: Challenges your design decisions and deceptive designs by simulating the voice of an ethics board or concerned user.</li>
</ul>

<p>The best AI Assistants come from carefully inspecting your workflow and looking for areas where AI can augment your work regularly and repetitively. Then follow the steps above to build a team of customized AI assistants.</p>

<h2 id="ask-me-anything-about-assistants">Ask Me Anything About Assistants</h2>

<ul>
<li><strong>What are some limitations of a CustomGPT?</strong><br />
Right now, the best parallels for AI are a very smart intern with access to a lot of information. CustomGPTs are still running on LLM models that are basically trained on a lot of information and programmed to predictively generate responses based on that data, including possible bias, misinformation, or incomplete information. Keeping that in mind, you can make that intern provide better and more relevant results by using your uploads as onboarding docs, your guardrails as a job description, and your updates as retraining.</li>
<li><strong>Can I copy someone else’s public CustomGPT and tweak it?</strong><br />
Not directly, but if you get inspired by another CustomGPT, you can look at how it’s framed and rebuild your own using WIRE+FRAME &amp; MATCH. That way, you make it your own and have full control of the instructions, files, and updates. But you can do that with Google’s equivalent &mdash; Gemini Gems. Shared Gems behave similarly to shared Google Docs, so once shared, any Gem instructions and files that you have uploaded can be viewed by any user with access to the Gem. Any user with edit access to the Gem can also update and delete the Gem.</li>
<li><strong>How private are my uploaded files?</strong><br />
The files you upload are stored and used to answer prompts to your CustomGPT. If your CustomGPT is not private or you didn’t disable the hidden setting to allow CustomGPT conversations to improve the model, that data could be referenced. Don’t upload sensitive, confidential, or personal data you wouldn’t want circulating. Enterprise accounts do have some protections, so check with your company.</li>
<li><strong>How many files can I upload, and does size matter?</strong><br />
Limits vary by platform, but smaller, specific files usually perform better than giant docs. Think “chapter” instead of “entire book.” At the time of publishing, CustomGPTs allow up to 20 files, Copilot Agents up to 200 (if you need anywhere near that many, chances are your agent is not focused enough), and Gemini Gems up to 10.</li>
<li><strong>What’s the difference between a CustomGPT and a Project?</strong><br />
A CustomGPT is a focused assistant, like an intern trained to do one role well (like “Insight Interpreter”). A Project is more like a workspace where you can group multiple prompts, files, and conversations together for a broader effort. CustomGPTs are specialists. Projects are containers. If you want something reusable, shareable, and role-specific, go to CustomGPT. If you want to organize broader work with multiple tools and outputs, and shared knowledge, Projects are the better fit.</li>
</ul>

<h2 id="from-reading-to-building">From Reading To Building</h2>

<p>In this AI x Design series, we’ve gone from messy prompting (“<a href="https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/">A Week In The Life Of An AI-Augmented Designer</a>”) to a structured prompt framework, WIRE+FRAME (“<a href="https://www.smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/">Prompting Is A Design Act</a>”). And now, in this article, your very own reusable AI sidekick.</p>

<p>CustomGPTs don’t replace designers but augment them. The real magic isn’t in the tool itself, but in <em>how</em> you design and manage it. You can use public CustomGPTs for inspiration, but the ones that truly fit your workflow are the ones you design yourself. They <strong>extend your craft</strong>, <strong>codify your expertise</strong>, and give your team leverage that generic AI models can’t.</p>

<p>Build one this week. Even better, today. Train it, share it, stress-test it, and refine it into an AI assistant that can augment your team.</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>Functional Personas With AI: A Lean, Practical Workflow</title><link>https://www.smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/</link><pubDate>Tue, 16 Sep 2025 08:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/</guid><description>For too long, personas have been something that many of us just created, despite the considerable work that goes into them, only to find they have limited usefulness. Paul Boag shows how to breathe new life into this stale UX asset and demonstrates that it’s possible to create truly useful functional personas in a lightweight way.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/09/functional-personas-ai-lean-practical-workflow/" />
              <title>Functional Personas With AI: A Lean, Practical Workflow</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Functional Personas With AI: A Lean, Practical Workflow</h1>
                  
                    
                    <address>Paul Boag</address>
                  
                  <time datetime="2025-09-16T08:00:00&#43;00:00" class="op-published">2025-09-16T08:00:00+00:00</time>
                  <time datetime="2025-09-16T08:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>Traditional personas suck for UX work. They obsess over marketing metrics like age, income, and job titles while missing what actually matters in design: what people are trying to accomplish.</p>

<p><a href="https://boagworld.com/usability/personas/">Functional personas</a>, on the other hand, focus on what people are trying to do, not who they are on paper. With a simple AI‑assisted workflow, you can build and maintain personas that actually guide design, content, and conversion decisions.</p>

<ul>
<li>Keep users front of mind with task‑driven personas,</li>
<li>Skip fragile demographics; center on goals, questions, and blockers,</li>
<li>Use AI to process your messy inputs fast and fill research gaps,</li>
<li>Validate lightly, ship confidently, and keep them updated.</li>
</ul>

<p>In this article, I want to breathe new life into a stale UX asset.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/traditional-demographic-personas.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="483"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/traditional-demographic-personas.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/traditional-demographic-personas.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/traditional-demographic-personas.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/traditional-demographic-personas.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/traditional-demographic-personas.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/traditional-demographic-personas.png"
			
			sizes="100vw"
			alt="Traditional demographic personas"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Traditional demographic personas look good but quickly get outdated, need constant updating, and rarely offer practical UX guidance. (<a href='https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/traditional-demographic-personas.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>For too long, personas have been something that many of us just created, despite the considerable work that goes into them, only to find they have limited usefulness.</p>

<p>I know that many of you may have given up on them entirely, but I am hoping in this post to encourage you that it is possible to create truly useful personas in a lightweight way.</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="why-personas-still-matter">Why Personas Still Matter</h2>

<p>Personas give you a shared lens. When everyone uses the same reference point, you cut debate and make better calls. For UX designers, developers, and digital teams, that shared lens keeps you from designing in silos and helps you prioritize work that genuinely improves the experience.</p>

<p>I use personas as a quick test: <em>Would this change help this user complete their task faster, with fewer doubts?</em> If the answer is no (or a shrug), it’s probably a sign the idea isn’t worth pursuing.</p>

<h2 id="from-demographics-to-function">From Demographics To Function</h2>

<p>Traditional personas tell you someone’s age, job title, or favorite brand. That makes a nice poster, but it rarely changes design or copy.</p>

<p><strong>Functional personas flip the script.</strong> They describe:</p>

<ul>
<li><strong>Goals &amp; tasks:</strong> What the person is here to achieve.</li>
<li><strong>Questions &amp; objections:</strong> What they need to know before they act.</li>
<li><strong>Touchpoints:</strong> How the person interacts with the organization.</li>
<li><strong>Service gaps:</strong> How the company might be letting this persona down.</li>
</ul>

<p>When you center on tasks and friction, you get direct lines from user needs to UI decisions, content, and conversion paths.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/persona-templates.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="2354"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/persona-templates.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/persona-templates.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/persona-templates.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/persona-templates.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/persona-templates.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/persona-templates.png"
			
			sizes="100vw"
			alt="Persona templates"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Persona templates should be customized for each organization’s specific needs and contexts. (<a href='https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/persona-templates.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>But remember, this list isn’t set in stone &mdash; adapt it to what’s actually useful in your specific situation.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aOne%20of%20the%20biggest%20problems%20with%20traditional%20personas%20was%20following%20a%20rigid%20template%20regardless%20of%20whether%20it%20made%20sense%20for%20your%20project.%20We%20must%20not%20fall%20into%20that%20same%20mistake%20with%20functional%20personas.%0a&url=https://smashingmagazine.com%2f2025%2f09%2ffunctional-personas-ai-lean-practical-workflow%2f">
      
One of the biggest problems with traditional personas was following a rigid template regardless of whether it made sense for your project. We must not fall into that same mistake with functional personas.

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

<h2 id="the-benefits-of-functional-personas">The Benefits of Functional Personas</h2>

<p>For small startups, functional personas <strong>reduce wasted effort</strong>. For enterprise teams, they keep sprawling projects grounded in what matters most.</p>

<p>However, because of the way we are going to produce our personas, they provide certain benefits in either case:</p>

<ul>
<li><strong>Lighten the load:</strong> They’re easier to update without large research cycles.</li>
<li><strong>Stay current:</strong> Because they are easy to produce, we can update them more often.</li>
<li><strong>Tie to outcomes:</strong> Tasks, objections, and proof points map straight to funnels, flows, and product decisions.</li>
</ul>

<p>We can deliver these benefits because we are going to use AI to help us, rather than carrying out a lot of time-consuming new research.</p>

<h2 id="how-ai-helps-us-get-there">How AI Helps Us Get There</h2>

<p>Of course, doing fresh research is always preferable. But in many cases, it is not feasible due to time or budget constraints. I would argue that using AI to help us create personas based on existing assets is preferable to having no focus on user attention at all.</p>

<p>AI tools can chew through the inputs you already have (surveys, analytics, chat logs, reviews) and surface patterns you can act on. They also help you scan public conversations around your product category to fill gaps.</p>

<p>I therefore recommend using AI to:</p>

<ul>
<li><strong>Synthesize inputs:</strong> Turn scattered notes into clean themes.</li>
<li><strong>Spot segments by need:</strong> Group people by jobs‑to‑be‑done, not demographics.</li>
<li><strong>Draft quickly:</strong> Produce first‑pass personas and sample journeys in minutes.</li>
<li><strong>Iterate with stakeholders:</strong> Update on the fly as you get feedback.</li>
</ul>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aAI%20doesn%e2%80%99t%20remove%20the%20need%20for%20traditional%20research.%20Rather,%20it%20is%20a%20way%20of%20extracting%20more%20value%20from%20the%20scattered%20insights%20into%20users%20that%20already%20exist%20within%20an%20organization%20or%20online.%0a&url=https://smashingmagazine.com%2f2025%2f09%2ffunctional-personas-ai-lean-practical-workflow%2f">
      
AI doesn’t remove the need for traditional research. Rather, it is a way of extracting more value from the scattered insights into users that already exist within an organization or online.

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

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

<h2 id="the-workflow">The Workflow</h2>

<p>Here’s how to move from scattered inputs to usable personas. Each step builds on the last, so treat it as a cycle you can repeat as projects evolve.</p>

<h3 id="1-set-up-a-dedicated-workspace">1. Set Up A Dedicated Workspace</h3>

<p>Create a dedicated space within your AI tool for this work. Most AI platforms offer project management features that let you organize files and conversations:</p>

<ul>
<li>In ChatGPT and Claude, use “Projects” to store context and instructions.</li>
<li>In Perplexity, Gemini and CoPilot similar functionality is referred to as “Spaces.”</li>
</ul>

<p>This project space becomes your central repository where all uploaded documents, research data, and generated personas live together. The AI will maintain context between sessions, so you won’t have to re-upload materials each time you iterate. This structured approach makes your workflow more efficient and helps the AI deliver more consistent results.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/chatgpt-projects-persona-development.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="525"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/chatgpt-projects-persona-development.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/chatgpt-projects-persona-development.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/chatgpt-projects-persona-development.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/chatgpt-projects-persona-development.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/chatgpt-projects-persona-development.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/chatgpt-projects-persona-development.png"
			
			sizes="100vw"
			alt="ChatGPT Project for persona development"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      ChatGPT Projects serve as an effective tool for gathering and analyzing user research data in ways that directly support persona development. (<a href='https://files.smashing.media/articles/functional-personas-ai-lean-practical-workflow/chatgpt-projects-persona-development.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="2-write-clear-instructions">2. Write Clear Instructions</h3>

<p>Next, you can brief your AI project so that it understands what it wants from you. For example:</p>

<blockquote>“Act as a user researcher. Create realistic, functional personas using the project files and public research. Segment by needs, tasks, questions, pain points, and goals. Show your reasoning.”</blockquote>

<p>Asking for a rationale gives you a paper trail you can defend to stakeholders.</p>

<h3 id="3-upload-what-you-ve-got-even-if-it-s-messy">3. Upload What You’ve Got (Even If It’s Messy)</h3>

<p>This is where things get really powerful.</p>

<p>Upload everything (and I mean everything) you can put your hands on relating to the user. Old surveys, past personas, analytics screenshots, FAQs, support tickets, review snippets; dump them all in. The more varied the sources, the stronger the triangulation.</p>

<h3 id="4-run-focused-external-research">4. Run Focused External Research</h3>

<p>Once you have done that, you can supplement that data by getting AI to carry out “deep research” about your brand. Have AI scan recent (I often focus on the last year) public conversations for your brand, product space, or competitors. Look for:</p>

<ul>
<li>Who’s talking and what they’re trying to do;</li>
<li>Common questions and blockers;</li>
<li>Phrases people use (great for copywriting).</li>
</ul>

<p>Save the report you get back into your project.</p>

<h3 id="5-propose-segments-by-need">5. Propose Segments By Need</h3>

<p>Once you have done that, ask AI to suggest segments based on tasks and friction points (not demographics). Push back until each segment is <strong>distinct, observable, and actionable</strong>. If two would behave the same way in your flow, merge them.</p>

<p>This takes a little bit of trial and error and is where your experience really comes into play.</p>

<h3 id="6-generate-draft-personas">6. Generate Draft Personas</h3>

<p>Now you have your segments, the next step is to draft your personas. Use a simple template so the document is read and used. If your personas become too complicated, people will not read them. Each persona should:</p>

<ul>
<li>State goals and tasks,</li>
<li>List objections and blockers,</li>
<li>Highlight pain points,</li>
<li>Show touchpoints,</li>
<li>Identify service gaps.</li>
</ul>

<p>Below is a sample template you can work with:</p>

<pre><code class="language-markdown">&#35; Persona Title: e.g. Savvy Shopper
- Person's Name: e.g. John Smith.
- Age: e.g. 24
- Job: e.g. Social Media Manager

"A quote that sums up the persona's general attitude"

&#35;&#35; Primary Goal
What they’re here to achieve (1–2 lines).

&#35;&#35; Key Tasks
• Task 1
• Task 2
• Task 3

&#35;&#35; Questions & Objections
• What do they need to know before they act?
• What might make them hesitate?

&#35;&#35; Pain Points
• Where do they get stuck?
• What feels risky, slow, or confusing?

&#35;&#35; Touchpoints
• What channels are they most commonly interacting with?

&#35;&#35; Service Gaps
• How is the organization currently failing this persona?
</code></pre>

<p>Remember, you should customize this to reflect what will prove useful within your organization.</p>

<h3 id="7-validate">7. Validate</h3>

<p>It is important to validate that what the AI has produced is realistic. Obviously, no persona is a true representation as it is a snapshot in time of a Hypothetical user. However, we do want it to be as accurate as possible.</p>

<p>Share your drafts with colleagues who interact regularly with real users &mdash; people in support cells or research teams. Where possible, test with a handful of users. Then cut anything that you can’t defend or correct any errors that are identified.</p>

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

<h2 id="troubleshooting-guardrails">Troubleshooting &amp; Guardrails</h2>

<p>As you work through the above process, you will encounter problems. Here are common pitfalls and how to avoid them:</p>

<ul>
<li><strong>Too many personas?</strong><br />
Merge until each one changes a design or copy decision. Three strong personas beat seven weak ones.</li>
<li><strong>Stakeholder wants demographics?</strong><br />
Only include details that affect behavior. Otherwise, leave them out. Suggest separate personas for other functions (such as marketing).</li>
<li><strong>AI hallucinations?</strong><br />
Always ask for a rationale or sources. Cross‑check with your own data and customer‑facing teams.</li>
<li><strong>Not enough data?</strong><br />
Mark assumptions clearly, then validate with quick interviews, surveys, or usability tests.</li>
</ul>

<h2 id="making-personas-useful-in-practice">Making Personas Useful In Practice</h2>

<p>The most important thing to remember is to actually use your personas once they’ve been created. They can easily become forgotten PDFs rather than active tools. Instead, personas should shape your work and be referenced regularly. Here are some ways you can put personas to work:</p>

<ul>
<li><strong>Navigation &amp; IA:</strong> Structure menus by top tasks.</li>
<li><strong>Content &amp; Proof:</strong> Map objections to FAQs, case studies, and microcopy.</li>
<li><strong>Flows &amp; UI:</strong> Streamline steps to match how people think.</li>
<li><strong>Conversion:</strong> Match CTAs to personas’ readiness, goals, and pain points.</li>
<li><strong>Measurement:</strong> Track KPIs that map to personas, not vanity metrics.</li>
</ul>

<p>With this approach, personas evolve from static deliverables into <strong>dynamic reference points</strong> your whole team can rely on.</p>

<h2 id="keep-them-alive">Keep Them Alive</h2>

<p>Treat personas as a <strong>living toolkit</strong>. Schedule a refresh every quarter or after major product changes. Rerun the research pass, regenerate summaries, and archive outdated assumptions. The goal isn’t perfection; it’s keeping them relevant enough to guide decisions.</p>

<h2 id="bottom-line">Bottom Line</h2>

<p>Functional personas are faster to build, easier to maintain, and better aligned with real user behavior. By combining AI’s speed with human judgment, you can create personas that don’t just sit in a slide deck; they actively shape better products, clearer interfaces, and smoother experiences.</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>Karan Rawal</author><title>From Data To Decisions: UX Strategies For Real-Time Dashboards</title><link>https://www.smashingmagazine.com/2025/09/ux-strategies-real-time-dashboards/</link><pubDate>Fri, 12 Sep 2025 15:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/09/ux-strategies-real-time-dashboards/</guid><description>Real-time dashboards are decision assistants, not passive displays. In environments like fleet management, healthcare, and operations, the cost of a delay or misstep is high. Karan Rawal explores strategic UX patterns that shorten time-to-decision, reduce cognitive overload, and make live systems trustworthy.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/09/ux-strategies-real-time-dashboards/" />
              <title>From Data To Decisions: UX Strategies For Real-Time Dashboards</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>From Data To Decisions: UX Strategies For Real-Time Dashboards</h1>
                  
                    
                    <address>Karan Rawal</address>
                  
                  <time datetime="2025-09-12T15:00:00&#43;00:00" class="op-published">2025-09-12T15:00:00+00:00</time>
                  <time datetime="2025-09-12T15:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>I once worked with a fleet operations team that monitored dozens of vehicles in multiple cities. Their dashboard showed fuel consumption, live GPS locations, and real-time driver updates. Yet the team struggled to see what needed urgent attention. The problem was not a lack of data but a lack of clear indicators to support decision-making. There were no priorities, alerts, or context to highlight what mattered most at any moment.</p>

<p><strong>Real-time dashboards</strong> are now critical decision-making tools in industries like logistics, manufacturing, finance, and healthcare. However, many of them fail to help users make timely and confident decisions, even when they show live data.</p>

<blockquote>Designing for real-time use is very different from designing static dashboards. The challenge is not only presenting metrics but enabling decisions under pressure. Real-time users face limited time and a high cognitive load. They need clarity on actions, not just access to raw data.</blockquote>

<p>This requires interface elements that support quick scanning, pattern recognition, and guided attention. Layout hierarchy, alert colors, grouping, and motion cues all help, but they must be driven by a deeper strategy: understanding what the user must decide in <em>that</em> moment.</p>

<p>This article explores <strong>practical UX strategies</strong> for real-time dashboards that enable real decisions. Instead of focusing only on visual best practices, it looks at how user intent, personalization, and cognitive flow can turn raw data into meaningful, timely insights.</p>

<h2 id="designing-for-real-time-comprehension-helping-users-stay-focused-under-pressure">Designing for Real-Time Comprehension: Helping Users Stay Focused Under Pressure</h2>

<p>A GPS app not only shows users their location but also helps them decide where to go next. In the same way, a real-time dashboard should go beyond displaying the latest data. Its purpose is to help users quickly understand complex information and make informed decisions, especially in fast-paced environments with short attention spans.</p>

<h3 id="how-users-process-real-time-updates">How Users Process Real-Time Updates</h3>

<p>Humans have limited cognitive capacity, so they can only process a small amount of data at once. Without <strong>proper context</strong> or <strong>visual cues</strong>, rapidly updating dashboards can overwhelm users and shift attention away from key information.</p>

<p>To address this, I use the following approaches:</p>

<ul>
<li><strong>Delta Indicators and Trend Sparklines</strong><br />
<a href="https://in.tradingview.com/scripts/delta/">Delta indicators</a> show value changes at a glance, while sparklines are small line charts that reveal trends over time in a compact space. For example, a sales dashboard might show a green upward arrow next to revenue to indicate growth, along with a sparkline displaying sales trends over the past week.</li>
<li><strong>Subtle Micro-Animations</strong><br />
<a href="https://www.youtube.com/watch?v=MZjV27K2KR4">Small animations</a> highlight changes without distracting users. Research in cognitive psychology shows that such animations effectively draw attention, helping users notice updates while staying focused. For instance, a soft pulse around a changing metric can signal activity without overwhelming the viewer.</li>
<li><strong>Mini-History Views</strong><br />
Showing a short history of recent changes reduces reliance on memory. For example, a dashboard might let users scroll back a few minutes to review updates, supporting better understanding and verification of data trends.

<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>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="common-challenges-in-real-time-dashboards">Common Challenges In Real-Time Dashboards</h3>

<blockquote>Many live dashboards fail when treated as static reports instead of dynamic tools for quick decision-making.</blockquote>

<p>In my early projects, I made this mistake, resulting in cluttered layouts, distractions, and frustrated users.</p>

<p>Typical errors include the following:</p>

<ul>
<li><strong>Overcrowded Interfaces</strong>: Presenting too many metrics competes for users’ attention, making it hard to focus.</li>
<li><strong>Flat Visual Hierarchy</strong>: Without clear emphasis on critical data, users might focus on less important information.</li>
<li><strong>No Record of Changes</strong>: When numbers update instantly with no explanation, users can feel lost or confused.</li>
<li><strong>Excessive Refresh Rates</strong>: Not all data needs constant updates. Updating too frequently can create unnecessary motion and cognitive strain.</li>
</ul>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/bad-vs-good-dashboard-ux.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="467"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/bad-vs-good-dashboard-ux.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/bad-vs-good-dashboard-ux.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/bad-vs-good-dashboard-ux.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/bad-vs-good-dashboard-ux.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/bad-vs-good-dashboard-ux.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/bad-vs-good-dashboard-ux.png"
			
			sizes="100vw"
			alt="Side-by-side dashboards labeled Bad UX and Good UX. The bad UX dashboard is cluttered with multiple pie charts and bar graphs, while the good UX dashboard uses a clear hierarchy with summary cards, line charts, and simplified visuals for easier data interpretation."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Comparison of bad vs. good UX in dashboards, showing how clear hierarchy and visualization improve data understanding. (Image source: <a href='https://www.devoteam.com/expert-view/make-data-make-sense-why-ux-in-dashboards-matters/'>devoteam</a>) (<a href='https://files.smashing.media/articles/ux-strategies-real-time-dashboards/bad-vs-good-dashboard-ux.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="managing-stress-and-cognitive-overload">Managing Stress And Cognitive Overload</h3>

<p>Under stress, users depend on intuition and focus only on immediately relevant information. If a dashboard updates too quickly or shows conflicting alerts, users may delay actions or make mistakes. It is important to:</p>

<ul>
<li><strong>Prioritize</strong> the most important data first to avoid overwhelming the user.</li>
<li>Offer <strong>snapshot or pause options</strong> so users can take time to process information.</li>
<li>Use <strong>clear indicators</strong> to show if an action is required or if everything is operating normally.</li>
</ul>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aIn%20real-time%20environments,%20the%20best%20dashboards%20balance%20speed%20with%20calmness%20and%20clarity.%20They%20are%20not%20just%20data%20displays%20but%20tools%20that%20promote%20live%20thinking%20and%20better%20decisions.%0a&url=https://smashingmagazine.com%2f2025%2f09%2fux-strategies-real-time-dashboards%2f">
      
In real-time environments, the best dashboards balance speed with calmness and clarity. They are not just data displays but tools that promote live thinking and better decisions.

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

<h3 id="enabling-personalization-for-effective-data-consumption">Enabling Personalization For Effective Data Consumption</h3>

<p>Many analytics tools let users build custom dashboards, but these design principles guide layouts that support decision-making. Personalization options such as custom metric selection, alert preferences, and update pacing help manage cognitive load and improve data interpretation.</p>

<table class="tablesaw break-out">
    <thead>
        <tr>
            <th>Cognitive Challenge</th>
            <th>UX Risk in Real-Time Dashboards</th>
      <th>Design Strategy to Mitigate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Users can’t track rapid changes</td>
            <td>Confusion, missed updates, second-guessing</td>
      <td>Use delta indicators, change animations, and trend sparklines</td>
        </tr>
        <tr>
            <td>Limited working memory</td>
            <td>Overload from too many metrics at once</td>
      <td>Prioritize key KPIs, apply progressive disclosure</td>
        </tr>
        <tr>
            <td>Visual clutter under stress</td>
            <td>Tunnel vision or misprioritized focus</td>
      <td>Apply a clear visual hierarchy, minimize non-critical elements</td>
        </tr>
        <tr>
            <td>Unclear triggers or alerts</td>
            <td>Decision delays, incorrect responses</td>
      <td>Use thresholds, binary status indicators, and plain language</td>
        </tr>
    <tr>
            <td>Lack of context/history</td>
            <td>Misinterpretation of sudden shifts</td>
      <td>Provide micro-history, snapshot freeze, or hover reveal</td>
        </tr>
    </tbody>
</table>

<p><em>Common Cognitive Challenges in Real-Time Dashboards and UX Strategies to Overcome Them.</em></p>

<h2 id="designing-for-focus-using-layout-color-and-animation-to-drive-real-time-decisions">Designing For Focus: Using Layout, Color, And Animation To Drive Real-Time Decisions</h2>

<p>Layout, color, and animation do more than improve appearance. They help users interpret live data quickly and make decisions under time pressure. Since users respond to rapidly changing information, these elements must reduce cognitive load and highlight key insights immediately.</p>

<ul>
<li><strong>Creating a Visual Hierarchy to Guide Attention.</strong><br />
A clear hierarchy directs users’ eyes to key metrics. Arrange elements so the most important data stands out. For example, place critical figures like sales volume or system health in the upper left corner to match common scanning patterns. Limit visible elements to about five to prevent overload and ease processing—group related data into cards to improve scannability and help users focus without distraction.</li>
<li><strong>Using Color Purposefully to Convey Meaning.</strong><br />
Color communicates meaning in data visualization. Red or orange indicates critical alerts or negative trends, signaling urgency. Blue and green represent positive or stable states, offering reassurance. Neutral tones like gray support background data and make key colors stand out. Ensure accessibility with strong contrast and pair colors with icons or labels. For example, bright red can highlight outages while muted gray marks historical logs, keeping attention on urgent issues.</li>
<li><strong>Supporting Comprehension with Subtle Animation.</strong><br />
Animation should clarify, not distract. Smooth transitions of 200 to 400 milliseconds communicate changes effectively. For instance, upward motion in a line chart reinforces growth. Hover effects and quick animations provide feedback and improve interaction. Thoughtful motion makes changes noticeable while maintaining focus.</li>
</ul>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/car-rental-dashboard-analytics.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="545"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/car-rental-dashboard-analytics.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/car-rental-dashboard-analytics.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/car-rental-dashboard-analytics.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/car-rental-dashboard-analytics.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/car-rental-dashboard-analytics.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/car-rental-dashboard-analytics.png"
			
			sizes="100vw"
			alt="An example of a car rental analytics dashboard that uses hierarchy, color, and charts to highlight key metrics like customer growth, satisfaction trends, and acquisition costs, enabling faster decision-making."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Car rental dashboard that uses hierarchy, color, and charts to highlight key metrics and trends. (Image credit: <a href='https://www.aqedigital.com/services/ai-ml-solutions-car-rental/'>Car Rental Solution</a> by AQe Digital) (<a href='https://files.smashing.media/articles/ux-strategies-real-time-dashboards/car-rental-dashboard-analytics.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Layout, color, and animation create an experience that enables fast, accurate interpretation of live data. Real-time dashboards support continuous monitoring and decision-making by reducing mental effort and <strong>highlighting anomalies or trends</strong>. Personalization allows users to tailor dashboards to their roles, improving relevance and efficiency. For example, operations managers may focus on system health metrics while sales directors prioritize revenue KPIs. This adaptability makes dashboards dynamic, strategic tools.</p>

<table class="tablesaw break-out">
    <thead>
        <tr>
            <th>Element</th>
            <th>Placement & Visual Weight</th>
      <th>Purpose & Suggested Colors</th>
      <th>Animation Use Case & Effect</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>Primary KPIs</strong></td>
            <td>Center or top-left; bold, large font</td>
      <td>Highlight critical metrics; typically stable states</td>
      <td>Value updates: smooth increase (200–400 ms)</td>
        </tr>
        <tr>
            <td><strong>Controls</strong></td>
            <td>Top or left panel; light, minimal visual weight</td>
      <td>Provide navigation/filtering; neutral color schemes</td>
      <td>User actions: subtle feedback (100–150 ms)</td>
        </tr>
        <tr>
            <td><strong>Charts</strong></td>
            <td>Middle or right; medium emphasis</td>
      <td>Show trends and comparisons; use blue/green for positives, grey for neutral</td>
      <td>Chart trends: trail or fade (300–600 ms)</td>
        </tr>
    <tr>
            <td><strong>Alerts</strong></td>
            <td>Edge of dashboard or floating; high contrast (bold)</td>
      <td>Signal critical issues; red/orange for alerts, yellow/amber for warnings</td>
      <td>Quick animations for appearance; highlight changes</td>
        </tr>
    </tbody>
</table>

<p><em>Design Elements, Placement, Color, and Motion Strategies for Effective Real-Time Dashboards.</em></p>

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

<h2 id="clarity-in-motion-designing-dashboards-that-make-change-understandable">Clarity In Motion: Designing Dashboards That Make Change Understandable</h2>

<p>If users cannot interpret changes quickly, the dashboard fails regardless of its visual design. Over time, I have developed methods that reduce confusion and make change feel intuitive rather than overwhelming.</p>

<p>One of the most effective tools I use is the <a href="https://en.wikipedia.org/wiki/Sparkline">sparkline</a>, a compact line chart that shows a trend over time and is typically placed next to a key performance indicator. Unlike full charts, sparklines omit axes and labels. Their simplicity makes them powerful, since they instantly show whether a metric is trending up, down, or steady. For example, placing a sparkline next to monthly revenue immediately reveals if performance is improving or declining, even before the viewer interprets the number.</p>

<p>When using sparklines effectively, follow these principles:</p>

<ul>
<li>Pair sparklines with metrics such as revenue, churn rate, or user activity so users can see both the value and its trajectory at a glance.</li>
<li>Simplify by removing clutter like axis lines or legends unless they add real value.</li>
<li>Highlight the latest data point with a dot or accent color since current performance often matters more than historical context.</li>
<li>Limit the time span. Too many data points compress the sparkline and hurt readability. A focused window, such as the last 7 or 30 days, keeps the trend clear.</li>
<li>Use sparklines in comparative tables. When placed in rows (for example, across product lines or regions), they reveal anomalies or emerging patterns that static numbers may hide.</li>
</ul>

<figure><a href="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-performance-gif.gif"><img src="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-performance-gif.gif" width="800" height="450" alt="A GIF of a dynamic dashboard showing profit and loss waterfall, performance variance vs budget and last year, profit trend lines, and expense category breakdown for hospitality operations." /></a><figcaption>Interactive P&L Performance Dashboard with Forecast and Variance Tracking. (<a href="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-performance-gif.gif">Large preview</a>)</figcaption></figure>

<p>I combine sparklines with directional indicators like arrows and percentage deltas to support quick interpretation.</p>

<p>For example, pairing “▲ +3.2%” with a rising sparkline shows both the direction and scale of change. I do not rely only on color to convey meaning.</p>

<p>Since <a href="https://www.colourblindawareness.org/colour-blindness/">1 in 12 men</a> is color-blind, using red and green alone can exclude some users. To ensure accessibility, I add shapes and icons alongside color cues.</p>

<p>Micro-animations provide subtle but effective signals. This counters <a href="https://www.nngroup.com/articles/change-blindness">change blindness</a> &mdash; our tendency to miss non-salient changes.</p>

<ul>
<li>When numbers update, I use fade-ins or count-up transitions to indicate change without distraction.</li>
<li>If a list reorders, such as when top-performing teams shift positions, a smooth slide animation under 300 milliseconds helps users maintain spatial memory. These animations reduce cognitive friction and prevent disorientation.</li>
</ul>

<p>Layout is critical for clarifying change:</p>

<ul>
<li>I use <strong>modular cards</strong> with consistent spacing, alignment, and hierarchy to highlight key metrics.</li>
<li>Cards are arranged in a <strong>sortable grid</strong>, allowing filtering by severity, recency, or relevance.</li>
<li><strong>Collapsible sections</strong> manage dense information while keeping important data visible for quick scanning and deeper exploration.</li>
</ul>

<p>For instance, in a logistics dashboard, a card labeled “On-Time Deliveries” may display a weekly sparkline. If performance dips, the line flattens or turns slightly red, a downward arrow appears with a −1.8% delta, and the updated number fades in. This gives instant clarity without requiring users to open a detailed chart.</p>

<p>All these design choices support fast, informed decision-making. In high-velocity environments like product analytics, logistics, or financial operations, dashboards must do more than present data. They must <strong>reduce ambiguity</strong> and help teams quickly detect change, understand its impact, and take action.</p>

<h2 id="making-reliability-visible-designing-for-trust-in-real-time-data-interfaces">Making Reliability Visible: Designing for Trust In Real-Time Data Interfaces</h2>

<p>In real-time data environments, reliability is not just a technical feature. It is the foundation of user trust. Dashboards are used in high-stakes, fast-moving contexts where decisions depend on timely, accurate data. Yet these systems often face less-than-ideal conditions such as unreliable networks, API delays, and incomplete datasets. Designing for these realities is not just damage control. It is essential for making data experiences usable and trustworthy.</p>

<p>When data lags or fails to load, it can mislead users in serious ways:</p>

<ul>
<li>A dip in a trendline may look like a market decline when it is only a delay in the stream.</li>
<li>Missing categories in a bar chart, if not clearly signaled, can lead to flawed decisions.</li>
</ul>

<p>To mitigate this:</p>

<ul>
<li>Every data point should be paired with its condition.</li>
<li>Interfaces must show not only what the data says but also how current or complete it is.</li>
</ul>

<p>One effective strategy is replacing traditional spinners with <a href="https://www.nngroup.com/articles/skeleton-screens/">skeleton UIs</a>. These are greyed-out, animated placeholders that suggest the structure of incoming data. They set expectations, reduce anxiety, and show that the system is actively working. For example, in a financial dashboard, users might see the outline of a candlestick chart filling in as new prices arrive. This signals that data is being refreshed, not stalled.</p>

<h3 id="handling-data-unavailability">Handling Data Unavailability</h3>

<p>When data is unavailable, I show <strong>cached snapshots</strong> from the most recent successful load, labeled with timestamps such as “Data as of 10:42 AM.” This keeps users aware of what they are viewing.</p>

<p>In operational dashboards such as logistics or monitoring systems, this approach lets users act confidently even when real-time updates are temporarily out of sync.</p>

<h3 id="managing-connectivity-failures">Managing Connectivity Failures</h3>

<p>To handle connectivity failures, I use <strong>auto-retry mechanisms with exponential backoff</strong>, giving the system several chances to recover quietly before notifying the user.</p>

<p>If retries fail, I maintain transparency with clear banners such as “Offline… Reconnecting…” In one product, this approach prevented users from reloading entire dashboards unnecessarily, especially in areas with unreliable Wi-Fi.</p>

<h3 id="ensuring-reliability-with-accessibility">Ensuring Reliability with Accessibility</h3>

<p>Reliability strongly connects with accessibility:</p>

<ul>
<li>Real-time interfaces must announce updates without disrupting user focus, beyond just screen reader compatibility.</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions">ARIA live regions</a> quietly narrate significant changes in the background, giving screen reader users timely updates without confusion.</li>
<li>All controls remain keyboard-accessible.</li>
<li>Animations follow <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">motion-reduction preferences</a> to support users with vestibular sensitivities.</li>
</ul>

<h3 id="data-freshness-indicator">Data Freshness Indicator</h3>

<p>A compact but powerful pattern I often implement is the Data Freshness Indicator, a small widget that:</p>

<ul>
<li>Shows sync status,</li>
<li>Displays the last updated time,</li>
<li>Includes a manual refresh button.</li>
</ul>

<p>This improves <strong>transparency</strong> and reinforces <strong>user control</strong>. Since different users interpret these cues differently, advanced systems allow personalization. For example:</p>

<ul>
<li>Analysts may prefer detailed logs of update attempts.</li>
<li>Business users might see a simple status such as “Live”, “Stale”, or “Paused”.</li>
</ul>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aReliability%20in%20data%20visualization%20is%20not%20about%20promising%20perfection.%20It%20is%20about%20creating%20a%20resilient,%20informative%20experience%20that%20supports%20human%20judgment%20by%20revealing%20the%20true%20state%20of%20the%20system.%0a&url=https://smashingmagazine.com%2f2025%2f09%2fux-strategies-real-time-dashboards%2f">
      
Reliability in data visualization is not about promising perfection. It is about creating a resilient, informative experience that supports human judgment by revealing the true state of the system.

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

<p>When users understand what the dashboard knows, what it does not, and what actions it is taking, they are more likely to trust the data and make smarter decisions.</p>

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

<h2 id="real-world-case-study">Real-World Case Study</h2>

<p>In my work across logistics, hospitality, and healthcare, the challenge has always been to distill complexity into clarity. A well-designed dashboard is more than functional; it serves as a trusted companion in decision-making, embedding clarity, speed, and confidence from the start.</p>

<h3 id="1-fleet-management-dashboard">1. Fleet Management Dashboard</h3>

<p>A client in the car rental industry struggled with fragmented operational data. Critical details like vehicle locations, fuel usage, maintenance schedules, and downtime alerts were scattered across static reports, spreadsheets, and disconnected systems. Fleet operators had to manually cross-reference data sources, even for basic dispatch tasks, which caused missed warnings, inefficient routing, and delays in response.</p>

<p>We solved these issues by redesigning the dashboard strategically, focusing on both layout improvements and how users interpret and act on information.</p>

<p><strong>Strategic Design Improvements and Outcomes:</strong></p>

<ul>
<li><strong>Instant visibility of KPIs</strong><br />
High-contrast cards at the top of the dashboard made key performance indicators instantly visible.<br />
<em>Example: Fuel consumption anomalies that previously went unnoticed for days were flagged within hours, enabling quick corrective action.</em></li>
<li><strong>Clear trend and pattern visualization</strong><br />
Booking forecasts, utilization graphs, and city-by-city comparisons highlighted performance trends.<br />
<em>Example: A weekday-weekend booking chart helped a regional manager spot underperformance in one city and plan targeted vehicle redistribution.</em></li>
<li><strong>Unified operational snapshot</strong><br />
Cost, downtime, and service schedules were grouped into one view.<br />
<em>Result: The operations team could assess fleet health in under five minutes each morning instead of using multiple tools.</em></li>
<li><strong>Predictive context for planning</strong><br />
Visual cues showed peak usage periods and historical demand curves.<br />
<em>Result: Dispatchers prepared for forecasted spikes, reducing customer wait times and improving resource availability.</em></li>
<li><strong>Live map with real-time status</strong><br />
A color-coded map displays vehicle status: green for active, red for urgent attention, gray for idle.<br />
<em>Result: Supervisors quickly identified inactive or delayed vehicles and rerouted resources as needed.</em></li>
<li><strong>Role-based personalization</strong><br />
Personalization options were built in, allowing each role to customize dashboard views.<br />
<em>Example: Fleet managers prioritized financial KPIs, while technicians filtered for maintenance alerts and overdue service reports.</em></li>
</ul>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/auto-leasing-analytics.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="555"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/auto-leasing-analytics.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/auto-leasing-analytics.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/auto-leasing-analytics.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/auto-leasing-analytics.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/auto-leasing-analytics.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/auto-leasing-analytics.png"
			
			sizes="100vw"
			alt="A data analytics dashboard for the auto leasing industry displaying revenue per booking, cost recovery, operational efficiency, and top revenue-generating locations across the UAE regions."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Auto Leasing Revenue and Efficiency Dashboard. (Image source: <a href='https://www.aqedigital.com/automobile-ai-solution'>Fleet management Solution by AQe Digital</a>) (<a href='https://files.smashing.media/articles/ux-strategies-real-time-dashboards/auto-leasing-analytics.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Strategic Impact:</strong> The dashboard redesign was not only about improving visuals. It changed how teams interacted with data. Operators no longer needed to search for insights, as the system presented them in line with tasks and decision-making. The dashboard became a shared reference for teams with different goals, enabling real-time problem solving, fewer manual checks, and stronger alignment across roles. Every element was designed to build both understanding and confidence in action.</p>

<h3 id="2-hospitality-revenue-dashboard">2. Hospitality Revenue Dashboard</h3>

<p>One of our clients, a hospitality group with 11 hotels in the UAE, faced a growing strategic gap. They had data from multiple departments, including bookings, events, food and beverage, and profit and loss, but it was spread across disconnected dashboards.</p>

<p><strong>Strategic Design Improvements and Outcomes:</strong></p>

<ul>
<li><strong>All revenue streams (rooms, restaurants, bars, and profit and loss) were consolidated into a single filterable dashboard.</strong><br />
Example: A revenue manager could filter by property to see if a drop in restaurant revenue was tied to lower occupancy or was an isolated issue. The structure supported daily operations, weekly reviews, and quarterly planning.</li>
<li><strong>Disconnected charts and metrics were replaced with a unified visual narrative showing how revenue streams interacted.</strong><br />
Example: The dashboard revealed how event bookings influenced bar sales or staffing. This shifted teams from passive data consumption to active interpretation.</li>
<li><strong>AI modules for demand forecasting, spend prediction, and pricing recommendations were embedded in the dashboard.</strong><br />
Result: Managers could test rate changes with interactive sliders and instantly view effects on occupancy, revenue per available room, and food and beverage income. This enabled proactive scenario planning.</li>
<li><strong>Compact, color-coded sparklines were placed next to each key metric to show short- and long-term trends.</strong><br />
Result: These visuals made it easy to spot seasonal shifts or channel-specific patterns without switching views or opening separate reports.</li>
<li><strong>Predictive overlays such as forecast bands and seasonality markers were added to performance graphs.</strong><br />
Example: If occupancy rose but lagged behind seasonal forecasts, the dashboard surfaced the gap, prompting early action such as promotions or issue checks.</li>
</ul>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-revenue-dashboard.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="411"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-revenue-dashboard.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-revenue-dashboard.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-revenue-dashboard.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-revenue-dashboard.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-revenue-dashboard.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-revenue-dashboard.png"
			
			sizes="100vw"
			alt="A digital dashboard showing hotel metrics including occupancy, ADR, RevPAR, F&amp;B revenue, and payroll, filtered by date range and department, with performance comparisons to previous periods."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      P&L Variance and Revenue Intelligence Dashboard for Hotel Performance Review. (Image source: <a href='https://www.aqedigital.com/hospitality-ai-solutions'>Hospitality AI Solution by AQe Digital</a>) (<a href='https://files.smashing.media/articles/ux-strategies-real-time-dashboards/pl-revenue-dashboard.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Strategic Impact:</strong> By aligning the dashboard structure with real pricing and revenue strategies, the client shifted from static reporting to forward-looking decision-making. This was not a cosmetic interface update. It was a complete rethinking of how data could support business goals. The result enabled every team, from finance to operations, to interpret data based on their specific roles and responsibilities.</p>

<h3 id="3-healthcare-interoperability-dashboard">3. Healthcare Interoperability Dashboard</h3>

<p>In healthcare, timely and accurate access to patient information is essential. A multi-specialist hospital client struggled with fragmented data. Doctors had to consult separate platforms such as electronic health records, lab results, and pharmacy systems to understand a patient’s condition. This fragmented process slowed decision-making and increased risks to patient safety.</p>

<p><strong>Strategic Design Improvements and Outcomes:</strong></p>

<ul>
<li><strong>Patient medical history was integrated to unify lab reports, medications, and allergy information in one view.</strong><br />
Example: A cardiologist, for example, could review recent cardiac markers with active medications and allergy alerts in the same place, enabling faster diagnosis and treatment.</li>
<li><strong>Lab report tracking was upgraded to show test type, date, status, and a clear summary with labels such as Pending, Completed, and Awaiting Review.</strong><br />
Result: Trends were displayed with sparklines and color-coded indicators, helping clinicians quickly spot abnormalities or improvements.</li>
<li><strong>A medication management module was added for prescription entry, viewing, and exporting. It included dosage, frequency, and prescribing physician details.</strong><br />
Example: Specialists could customize it to highlight drugs relevant to their practice, reducing overload and focusing on critical treatments.</li>
<li><strong>Rapid filtering options were introduced to search by patient name, medical record number, date of birth, gender, last visit, insurance company, or policy number.</strong><br />
Example: Billing staff could locate patients by insurance details, while clinicians filtered records by visits or demographics.</li>
<li><strong>Visual transparency was provided through interactive tooltips explaining alert rationales and flagged data points.</strong><br />
Result: Clinicians gained immediate context, such as the reason a lab value was marked as critical, supporting informed and timely decisions.</li>
</ul>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/ux-strategies-real-time-dashboards/healthcare-dashboard.jpg">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="523"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/healthcare-dashboard.jpg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/healthcare-dashboard.jpg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/healthcare-dashboard.jpg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/healthcare-dashboard.jpg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/healthcare-dashboard.jpg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/ux-strategies-real-time-dashboards/healthcare-dashboard.jpg"
			
			sizes="100vw"
			alt="A medical dashboard interface displaying total patients, active appointments, lab results, system alerts, patient growth trend, appointment status, and lab test processing with insights and alerts."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Patient and Appointment Monitoring Dashboard for Healthcare Providers (Image source: <a href='https://www.aqedigital.com/healthcare-ai-driven-solutions/'>Healthcare Interoperability AI Solution by AQe Digital</a>) (<a href='https://files.smashing.media/articles/ux-strategies-real-time-dashboards/healthcare-dashboard.jpg'>Large preview</a>)
    </figcaption>
  
</figure>

<p><strong>Strategic Impact:</strong> Our design encourages active decision-making instead of passive data review. Interactive tooltips ensure visual transparency by explaining the rationale behind alerts and flagged data points. These information boxes give clinicians immediate context, such as why a lab value is marked critical, helping them understand implications and next steps without delay.</p>

<h3 id="key-ux-insights-from-the-above-3-examples">Key UX Insights from the Above 3 Examples</h3>

<ul>
<li><strong>Design should drive conclusions, not just display data.</strong><br />
Contextualized data enabled faster and more confident decisions. For example, a logistics dashboard flagged high-risk delays so dispatchers could act immediately.</li>
<li><strong>Complexity should be structured, not eliminated.</strong><br />
Tools used timelines, layering, and progressive disclosure to handle dense information. A financial tool groups transactions by time blocks, easing cognitive load without losing detail.</li>
<li><strong>Trust requires clear system logic.</strong><br />
Users trusted predictive alerts only after understanding their triggers. A healthcare interface added a &ldquo;Why this alert?&rdquo; option that explained the reasoning.</li>
<li><strong>The aim is clarity and action, not visual polish.</strong><br />
Redesigns improved speed, confidence, and decision-making. In real-time contexts, confusion delays are more harmful than design flaws.</li>
</ul>

<h2 id="final-takeaways">Final Takeaways</h2>

<p>Real-time dashboards are not about overwhelming users with data. They are about helping them act quickly and confidently. The most effective dashboards reduce noise, highlight the most important metrics, and support decision-making in complex environments. Success lies in <strong>balancing visual clarity with cognitive ease</strong> while accounting for human limits like memory, stress, and attention alongside technical needs.</p>

<p><strong>Do:</strong></p>

<ul>
<li>Prioritize key metrics in a clear order so priorities are obvious. For instance, a support manager may track open tickets before response times.</li>
<li>Use subtle micro-animations and small visual cues to indicate changes, helping users spot trends without distraction.</li>
<li>Display data freshness and sync status to build trust.</li>
<li>Plan for edge cases like incomplete or offline data to keep the experience consistent.</li>
<li>Ensure accessibility with high contrast, ARIA labels, and keyboard navigation.</li>
</ul>

<p><strong>Don’t:</strong></p>

<ul>
<li>Overcrowd the interface with too many metrics.</li>
<li>Rely only on color to communicate critical information.</li>
<li>Update all data at once or too often, which can cause overload.</li>
<li>Hide failures or delays; transparency helps users adapt.</li>
</ul>

<p>Over time, I’ve come to <strong>see real-time dashboards as decision assistants rather than control panels</strong>. When users say, <em>“This helps me stay in control,”</em> it reflects a design built on empathy that respects cognitive limits and enhances decision-making. That is the true measure of success.</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>Lyndon Cerejo</author><title>Prompting Is A Design Act: How To Brief, Guide And Iterate With AI</title><link>https://www.smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/</link><pubDate>Fri, 29 Aug 2025 10:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/</guid><description>Prompting is more than giving AI some instructions. You could think of it as a design act, part creative brief and part conversation design. This second article on AI augmenting design work introduces a designerly approach to prompting: one that blends creative briefing, interaction design, and structural clarity.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/08/prompting-design-act-brief-guide-iterate-ai/" />
              <title>Prompting Is A Design Act: How To Brief, Guide And Iterate With AI</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Prompting Is A Design Act: How To Brief, Guide And Iterate With AI</h1>
                  
                    
                    <address>Lyndon Cerejo</address>
                  
                  <time datetime="2025-08-29T10:00:00&#43;00:00" class="op-published">2025-08-29T10:00:00+00:00</time>
                  <time datetime="2025-08-29T10:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>In “<a href="https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/">A Week In The Life Of An AI-Augmented Designer</a>”, we followed Kate’s weeklong journey of her first AI-augmented design sprint. She had three realizations through the process:</p>

<ol>
<li><strong>AI isn’t a co-pilot (yet); it’s more like a smart, eager intern</strong>.<br />
One with access to a lot of information, good recall, fast execution, but no context. That mindset defined how she approached every interaction with AI: not as magic, but as management.</li>
<li><strong>Don’t trust; guide, coach, and always verify.</strong><br />
Like any intern, AI needs coaching and supervision, and that’s where her designerly skills kicked in. Kate relied on curiosity to explore, observation to spot bias, empathy to humanize the output, and critical thinking to challenge what didn’t feel right. Her learning mindset helped her keep up with advances, and experimentation helped her learn by doing.</li>
<li><strong>Prompting is part creative brief, and part conversation design, just with an AI instead of a person.</strong><br />
When you prompt an AI, you’re not just giving instructions, but designing how it responds, behaves, and outputs information. If AI is like an intern, then the prompt is your creative brief that frames the task, sets the tone, and clarifies what good looks like. It’s also your conversation script that guides how it responds, how the interaction flows, and how ambiguity is handled.</li>
</ol>

<p>As designers, we’re used to designing interactions for people. Prompting is us designing our own interactions with machines &mdash; it uses the same mindset with a new medium. It shapes an AI’s behavior the same way you’d guide a user with structure, clarity, and intent.</p>

<p>If you’ve bookmarked, downloaded, or saved prompts from others, you’re not alone. We’ve all done that during our AI journeys. But while someone else’s prompts are a good starting point, you will get better and more relevant results if you can write your own prompts tailored to your goals, context, and style. Using someone else’s prompt is like using a Figma template. It gets the job done, but mastery comes from understanding and applying the fundamentals of design, including layout, flow, and reasoning. Prompts have a structure too. And when you learn it, you stop guessing and start designing.</p>

<p><strong>Note</strong>: <em>All prompts in this article were tested using ChatGPT &mdash; not because it’s the only game in town, but because it’s friendly, flexible, and lets you talk like a person, yes, even after the recent GPT-5 “update”. That said, any LLM with a decent attention span will work. Results for the same prompt may vary based on the AI model you use, the AI’s training, mood, and how confidently it can hallucinate.</em></p>

<p><strong>Privacy PSA</strong>: <em>As always, don’t share anything you wouldn’t want leaked, logged, or accidentally included in the next AI-generated meme. Keep it safe, legal, and user-respecting.</em></p>

<p>With that out of the way, let’s dive into the mindset, anatomy, and methods of effective prompting as another tool in your design toolkit.</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="mindset-prompt-like-a-designer">Mindset: Prompt Like A Designer</h2>

<p>As designers, we storyboard journeys, wireframe interfaces to guide users, and write UX copy with intention. However, when prompting AI, we treat it differently: “Summarize these insights”, “Make this better”, “Write copy for this screen”, and then wonder why the output feels generic, off-brand, or just meh. It’s like expecting a creative team to deliver great work from a one-line Slack message. We wouldn’t brief a freelancer, much less an intern, with “Design a landing page,” so why brief AI that way?</p>

<h3 id="prompting-is-a-creative-brief-for-a-machine">Prompting Is A Creative Brief For A Machine</h3>

<p>Think of a good prompt as a <strong>creative brief</strong>, just for a non-human collaborator. It needs similar elements, including a clear role, defined goal, relevant context, tone guidance, and output expectations. Just as a well-written creative brief unlocks alignment and quality from your team, a well-structured prompt helps the AI meet your expectations, even though it doesn’t have real instincts or opinions.</p>

<h3 id="prompting-is-also-conversation-design">Prompting Is Also Conversation Design</h3>

<p>A good prompt goes beyond defining the task and sets the tone for the exchange by designing a conversation: guiding how the AI interprets, sequences, and responds. You shape the flow of tasks, how ambiguity is handled, and how refinement happens &mdash; that’s conversation design.</p>

<h2 id="anatomy-structure-it-like-a-designer">Anatomy: Structure It Like A Designer</h2>

<p>So how do you write a designer-quality prompt? That’s where the <strong>W.I.R.E.+F.R.A.M.E.</strong> prompt design framework comes in &mdash; a UX-inspired framework for writing intentional, structured, and reusable prompts. Each letter represents a key design direction, grounded in the way UX designers already think: Just as a wireframe doesn’t dictate final visuals, this WIRE+FRAME framework doesn’t constrain creativity, but guides the AI with structured information it needs.</p>

<blockquote>“Why not just use a series of back-and-forth chats with AI?”</blockquote>

<p>You can, and many people do. But without structure, AI fills in the gaps on its own, often with vague or generic results. A good prompt upfront saves time, reduces trial and error, and improves consistency. And whether you’re working on your own or across a team, a framework means you’re not reinventing a prompt every time but reusing what works to get better results faster.</p>

<p>Just as we build wireframes before adding layers of fidelity, the WIRE+FRAME framework has two parts:</p>

<ul>
<li><strong>WIRE</strong> is the must-have skeleton. It gives the prompt its shape.</li>
<li><strong>FRAME</strong> is the set of enhancements that bring polish, logic, tone, and reusability &mdash; like building a high-fidelity interface from the wireframe.</li>
</ul>

<p>Let’s improve <a href="https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/">Kate’s original research synthesis prompt</a> (<em>“Read this customer feedback and tell me how we can improve financial literacy for Gen Z in our app”</em>). To better reflect how people actually prompt in practice, let’s tweak it to a more broadly applicable version: <em>“Read this customer feedback and tell me how we can improve our app for Gen Z users.”</em> This one-liner mirrors the kinds of prompts we often throw at AI tools: short, simple, and often lacking structure.</p>

<p>Now, we’ll take that prompt and rebuild it using the first four elements of the <strong>W.I.R.E.</strong> framework &mdash; the core building blocks that provide AI with the main information it needs to deliver useful results.</p>

<h3 id="w-who-what">W: Who &amp; What</h3>

<p><em>Define who the AI should be, and what it’s being asked to deliver.</em></p>

<p>A creative brief starts with assigning the right hat. Are you briefing a copywriter? A strategist? A product designer? The same logic applies here. Give the AI a clear identity and task. Treat AI like a trusted freelancer or intern. Instead of saying “help me”, tell it who it should act as and what’s expected.</p>

<p><strong>Example</strong>: <em>“You are a senior UX researcher and customer insights analyst. You specialize in synthesizing qualitative data from diverse sources to identify patterns, surface user pain points, and map them across customer journey stages. Your outputs directly inform product, UX, and service priorities.”</em></p>

<h3 id="i-input-context">I: Input Context</h3>

<p><em>Provide background that frames the task.</em></p>

<p>Creative partners don’t work in a vacuum. They need context: the audience, goals, product, competitive landscape, and what’s been tried already. This is the “What you need to know before you start” section of the brief. Think: key insights, friction points, business objectives. The same goes for your prompt.</p>

<p><strong>Example</strong>: <em>“You are analyzing customer feedback for Fintech Brand’s app, targeting Gen Z users. Feedback will be uploaded from sources such as app store reviews, survey feedback, and usability test transcripts.”</em></p>

<h3 id="r-rules-constraints">R: Rules &amp; Constraints</h3>

<p><em>Clarify any limitations, boundaries, and exclusions.</em></p>

<p>Good creative briefs always include boundaries &mdash; what to avoid, what’s off-brand, or what’s non-negotiable. Things like brand voice guidelines, legal requirements, or time and word count limits. Constraints don’t limit creativity &mdash; they focus it. AI needs the same constraints to avoid going off the rails.</p>

<p><strong>Example</strong>: <em>“Only analyze the uploaded customer feedback data. Do not fabricate pain points, representative quotes, journey stages, or patterns. Do not supplement with prior knowledge or hypothetical examples. Use clear, neutral, stakeholder-facing language.”</em></p>

<h3 id="e-expected-output">E: Expected Output</h3>

<p><em>Spell out what the deliverable should look like.</em></p>

<p>This is the deliverable spec: What does the finished product look like? What tone, format, or channel is it for? Even if the task is clear, the format often isn’t. Do you want bullet points or a story? A table or a headline? If you don’t say, the AI will guess, and probably guess wrong. Even better, include an example of the output you want, an effective way to help AI know what you’re expecting. If you’re using GPT-5, you can also mix examples across formats (text, images, tables) together.</p>

<p><strong>Example</strong>: <em>“Return a structured list of themes. For each theme, include:</em></p>

<ul>
<li><strong><em>Theme Title</em></strong></li>
<li><strong><em>Summary of the Issue</em></strong></li>
<li><strong><em>Problem Statement</em></strong></li>
<li><strong><em>Opportunity</em></strong></li>
<li><strong><em>Representative Quotes (from data only)</em></strong></li>
<li><strong><em>Journey Stage(s)</em></strong></li>
<li><strong><em>Frequency (count from data)</em></strong></li>
<li><strong><em>Severity Score (1–5)</em></strong> <em>where 1 = Minor inconvenience or annoyance; 3 = Frustrating but workaround exists; 5 = Blocking issue</em></li>
<li><strong><em>Estimated Effort (Low / Medium / High)</em></strong>, <em>where Low = Copy or content tweak; Medium = Logic/UX/UI change; High = Significant changes.”</em></li>
</ul>

<p><strong>WIRE</strong> gives you everything you need to stop guessing and start designing your prompts with purpose. When you start with WIRE, your prompting is like a briefing, treating AI like a collaborator.</p>

<p>Once you’ve mastered this core structure, you can layer in additional fidelity, like tone, step-by-step flow, or iterative feedback, using the <strong>FRAME</strong> elements. These five elements provide additional guidance and clarity to your prompt by layering clear deliverables, thoughtful tone, reusable structure, and space for creative iteration.</p>

<h3 id="f-flow-of-tasks">F: Flow of Tasks</h3>

<p><em>Break complex prompts into clear, ordered steps.</em></p>

<p>This is your project plan or creative workflow that lays out the stages, dependencies, or sequence of execution. When the task has multiple parts, don’t just throw it all into one sentence. You are doing the thinking and guiding AI. Structure it like steps in a user journey or modules in a storyboard. In this example, it fits as the blueprint for the AI to use to generate the table described in “E: Expected Output”</p>

<p><strong>Example</strong>: <em>“Recommended flow of tasks:<br />
Step 1: Parse the uploaded data and extract discrete pain points.<br />
Step 2: Group them into themes based on pattern similarity.<br />
Step 3: Score each theme by frequency (from data), severity (based on content), and estimated effort.<br />
Step 4: Map each theme to the appropriate customer journey stage(s).<br />
Step 5: For each theme, write a clear problem statement and opportunity based only on what’s in the data.”</em></p>

<h3 id="r-reference-voice-or-style">R: Reference Voice or Style</h3>

<p><em>Name the desired tone, mood, or reference brand.</em></p>

<p>This is the brand voice section or style mood board &mdash; reference points that shape the creative feel. Sometimes you want buttoned-up. Other times, you want conversational. Don’t assume the AI knows your tone, so spell it out.</p>

<p><strong>Example</strong>: <em>“Use the tone of a UX insights deck or product research report. Be concise, pattern-driven, and objective. Make summaries easy to scan by product managers and design leads.”</em></p>

<h3 id="a-ask-for-clarification">A: Ask for Clarification</h3>

<p><em>Invite the AI to ask questions before generating, if anything is unclear.</em></p>

<p>This is your <em>“Any questions before we begin?”</em> moment &mdash; a key step in collaborative creative work. You wouldn’t want a freelancer to guess what you meant if the brief was fuzzy, so why expect AI to do better? Ask AI to reflect or clarify before jumping into output mode.</p>

<p><strong>Example</strong>: <em>“If the uploaded data is missing or unclear, ask for it before continuing. Also, ask for clarification if the feedback format is unstructured or inconsistent, or if the scoring criteria need refinement.”</em></p>

<h3 id="m-memory-within-the-conversation">M: Memory (Within The Conversation)</h3>

<p><em>Reference earlier parts of the conversation and reuse what’s working.</em></p>

<p>This is similar to keeping visual tone or campaign language consistent across deliverables in a creative brief. Prompts are rarely one-shot tasks, so this reminds AI of the tone, audience, or structure already in play. GPT-5 got better with memory, but this still remains a useful element, especially if you switch topics or jump around.</p>

<p><strong>Example</strong>: <em>“Unless I say otherwise, keep using this process: analyze the data, group into themes, rank by importance, then suggest an action for each.”</em></p>

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

<h3 id="e-evaluate-iterate">E: Evaluate &amp; Iterate</h3>

<p><em>Invite the AI to critique, improve, or generate variations.</em></p>

<p>This is your revision loop &mdash; your way of prompting for creative direction, exploration, and refinement. Just like creatives expect feedback, your AI partner can handle review cycles if you ask for them. Build iteration into the brief to get closer to what you actually need. Sometimes, you may see ChatGPT test two versions of a response on its own by asking for your preference.</p>

<p><strong>Example</strong>: <em>“After listing all themes, identify the one with the highest combined priority score (based on frequency, severity, and effort).</em></p>

<p><em>For that top-priority theme:</em></p>

<ul>
<li><em>Critically evaluate its framing: Is the title clear? Are the quotes strong and representative? Is the journey mapping appropriate?</em></li>
<li><em>Suggest one improvement (e.g., improved title, more actionable implication, clearer quote, tighter summary).</em></li>
<li><em>Rewrite the theme entry with that improvement applied.</em></li>
<li><em>Briefly explain why the revision is stronger and more useful for product or design teams.”</em></li>
</ul>

<p>Here’s a quick recap of the WIRE+FRAME framework:</p>

<table class="tablesaw break-out">
    <thead>
        <tr>
            <th>Framework Component</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>W: Who & What</strong></td>
            <td>Define the AI persona and the core deliverable.</td>
        </tr>
        <tr>
            <td><strong>I: Input Context</strong></td>
            <td>Provide background or data scope to frame the task.</td>
        </tr>
        <tr>
            <td><strong>R: Rules & Constraints</strong></td>
            <td>Set boundaries</td>
        </tr>
    <tr>
            <td><strong>E: Expected Output</strong></td>
            <td>Spell out the format and fields of the deliverable.</td>
        </tr>
    <tr>
            <td><strong>F: Flow of Tasks</strong></td>
            <td>Break the work into explicit, ordered sub-tasks.</td>
        </tr>
    <tr>
            <td><strong>R: Reference Voice/Style</strong></td>
            <td>Name the tone, mood, or reference brand to ensure consistency.</td>
        </tr>
    <tr>
            <td><strong>A: Ask for Clarification</strong></td>
            <td>Invite AI to pause and ask questions if any instructions or data are unclear before proceeding.</td>
        </tr>
    <tr>
            <td><strong>M: Memory</strong></td>
            <td>Leverage in-conversation memory to recall earlier definitions, examples, or phrasing without restating them.</td>
        </tr>
    <tr>
            <td><strong>E: Evaluate & Iterate</strong></td>
            <td>After generation, have the AI self-critique the top outputs and refine them.</td>
        </tr>
    </tbody>
</table>

<p>And here’s the full WIRE+FRAME prompt:</p>

<blockquote><strong>(W)</strong> You are a senior UX researcher and customer insights analyst. You specialize in synthesizing qualitative data from diverse sources to identify patterns, surface user pain points, and map them across customer journey stages. Your outputs directly inform product, UX, and service priorities.<br /><br /><strong>(I)</strong> You are analyzing customer feedback for Fintech Brand’s app, targeting Gen Z users. Feedback will be uploaded from sources such as app store reviews, survey feedback, and usability test transcripts.<br /><br /><strong>(R)</strong> Only analyze the uploaded customer feedback data. Do not fabricate pain points, representative quotes, journey stages, or patterns. Do not supplement with prior knowledge or hypothetical examples. Use clear, neutral, stakeholder-facing language.<br /><br /><strong>(E)</strong> Return a structured list of themes. For each theme, include:<ul><li><strong>Theme Title</strong></li><li><strong>Summary of the Issue</strong></li><li><strong>Problem Statement</strong></li><li><strong>Opportunity</strong></li><li><strong>Representative Quotes (from data only)</strong></li><li><strong>Journey Stage(s)</strong></li><li><strong>Frequency (count from data)</strong></li><li><strong>Severity Score (1–5)</strong> where 1 = Minor inconvenience or annoyance; 3 = Frustrating but workaround exists; 5 = Blocking issue</li><li><strong>Estimated Effort (Low / Medium / High)</strong>, where Low = Copy or content tweak; Medium = Logic/UX/UI change; High = Significant changes</li></ul><strong>(F)</strong> Recommended flow of tasks:<br />Step 1: Parse the uploaded data and extract discrete pain points.<br />Step 2: Group them into themes based on pattern similarity.<br />Step 3: Score each theme by frequency (from data), severity (based on content), and estimated effort.<br />Step 4: Map each theme to the appropriate customer journey stage(s).<br />Step 5: For each theme, write a clear problem statement and opportunity based only on what’s in the data.<br /><br /><strong>(R)</strong> Use the tone of a UX insights deck or product research report. Be concise, pattern-driven, and objective. Make summaries easy to scan by product managers and design leads.<br /><br /><strong>(A)</strong> If the uploaded data is missing or unclear, ask for it before continuing. Also, ask for clarification if the feedback format is unstructured or inconsistent, or if the scoring criteria need refinement.<br /><br /><strong>(M)</strong> Unless I say otherwise, keep using this process: analyze the data, group into themes, rank by importance, then suggest an action for each.<br /><br /><strong>(E)</strong> After listing all themes, identify the one with the highest combined priority score (based on frequency, severity, and effort).<br />For that top-priority theme:<ul><li>Critically evaluate its framing: Is the title clear? Are the quotes strong and representative? Is the journey mapping appropriate?</li><li>Suggest one improvement (e.g., improved title, more actionable implication, clearer quote, tighter summary).</li><li>Rewrite the theme entry with that improvement applied.</li><li>Briefly explain why the revision is stronger and more useful for product or design teams.</li></ul></blockquote>

<p>You could use “##” to label the sections (e.g., “##FLOW”) more for your readability than for AI. At over 400 words, this Insights Synthesis prompt example is a detailed, structured prompt, but it isn’t customized for you and your work. The intent wasn’t to give you a specific prompt (the proverbial fish), but to show how you can use a prompt framework like WIRE+FRAME to create a customized, relevant prompt that will help AI augment your work (teaching you to fish).</p>

<p>Keep in mind that prompt length isn’t a common concern, but rather a lack of quality and structure is. As of the time of writing, AI models can easily process prompts that are thousands of words long.</p>

<p>Not every prompt needs all the FRAME components; WIRE is often enough to get the job done. But when the work is strategic or highly contextual, pick components from FRAME &mdash; the extra details can make a difference. Together, WIRE+FRAME give you a detailed framework for creating a well-structured prompt, with the crucial components first, followed by optional components:</p>

<ul>
<li><strong>WIRE</strong> builds a clear, focused prompt with role, input, rules, and expected output.</li>
<li><strong>FRAME</strong> adds refinement like tone, reusability, and iteration.</li>
</ul>

<p>Here are some scenarios and recommendations for using WIRE or WIRE+FRAME:</p>

<table class="tablesaw break-out">
    <thead>
        <tr>
            <th>Scenarios</th>
            <th>Description</th>
      <th>Recommended</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>Simple, One-Off Analyses</strong></td>
            <td>Quick prompting with minimal setup and no need for detailed process transparency.</td>
      <td>WIRE</td>
        </tr>
        <tr>
            <td><strong>Tight Sprints or Hackathons</strong></td>
            <td>Rapid turnarounds, and times you don’t need embedded review and iteration loops.</td>
      <td>WIRE</td>
        </tr>
        <tr>
            <td><strong>Highly Iterative Exploratory Work</strong></td>
            <td>You expect to tweak results constantly and prefer manual control over each step.</td>
      <td>WIRE</td>
        </tr>
    <tr>
            <td><strong>Complex Multi-Step Playbooks</strong></td>
            <td>Detailed workflows that benefit from a standardized, repeatable, visible sequence.</td>
      <td>WIRE+FRAME</td>
        </tr>
    <tr>
            <td><strong>Shared or Hand-Off Projects</strong></td>
            <td>When different teams will rely on embedded clarification, memory, and consistent task flows for recurring analyses.</td>
      <td>WIRE+FRAME</td>
        </tr>
    <tr>
            <td><strong>Built-In Quality Control</strong></td>
            <td>You want the AI to flag top issues, self-critique, and refine, minimizing manual QC steps.</td>
      <td>WIRE+FRAME</td>
        </tr>
    </tbody>
</table>

<p>Prompting isn’t about getting it right the first time. It’s about designing the interaction and redesigning when needed. With WIRE+FRAME, you’re going beyond basic prompting and designing the interaction between you and AI.</p>

<h3 id="from-gut-feel-to-framework-a-prompt-makeover">From Gut Feel To Framework: A Prompt Makeover</h3>

<p>Let’s compare the results of Kate’s first AI-augmented design sprint prompt (to synthesize customer feedback into design insights) with one based on the WIRE+FRAME prompt framework, with the same data and focusing on the top results:</p>

<p><em>Original prompt: Read this customer feedback and tell me how we can improve our app for Gen Z users.</em></p>

<p>Initial ChatGPT Results:</p>

<ul>
<li>Improve app reliability to reduce crashes and freezing.</li>
<li>Provide better guidance or tutorials for financial tools like budgeting or goal setting.</li>
<li>Enhance the transparency of Zelle transfers by showing confirmation messages.</li>
<li>Speed up app loading and reduce lag on key actions.</li>
</ul>

<p>With this version, you’d likely need to go back and forth with follow-up questions, rewrite the output for clarity, and add structure before sharing with your team.</p>

<p><em>WIRE+FRAME prompt above (with defined role, scope, rules, expected format, tone, flow, and evaluation loop).</em></p>

<p>Initial ChatGPT Results:</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/prompting-design-act-brief-guide-iterate-ai/1-wire-frame-prompt.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="325"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/prompting-design-act-brief-guide-iterate-ai/1-wire-frame-prompt.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/prompting-design-act-brief-guide-iterate-ai/1-wire-frame-prompt.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/prompting-design-act-brief-guide-iterate-ai/1-wire-frame-prompt.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/prompting-design-act-brief-guide-iterate-ai/1-wire-frame-prompt.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/prompting-design-act-brief-guide-iterate-ai/1-wire-frame-prompt.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/prompting-design-act-brief-guide-iterate-ai/1-wire-frame-prompt.png"
			
			sizes="100vw"
			alt="Results of the structured WIRE&#43;FRAME prompt"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Results of the structured WIRE+FRAME prompt. (<a href='https://files.smashing.media/articles/prompting-design-act-brief-guide-iterate-ai/1-wire-frame-prompt.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>You can clearly see the very different results from the two prompts, both using the exact same data. While the first prompt returns a quick list of ideas, the detailed WIRE+FRAME version doesn’t just summarize feedback but structures it. Themes are clearly labeled, supported by user quotes, mapped to customer journey stages, and prioritized by frequency, severity, and effort.</p>

<p>The structured prompt results can be used as-is or shared without needing to reformat, rewrite, or explain them (see disclaimer below). The first prompt output needs massaging: it’s not detailed, lacks evidence, and would require several rounds of clarification to be actionable. The first prompt may work when the stakes are low and you are exploring. But when your prompt is feeding design, product, or strategy, structure comes to the rescue.</p>

<h4 id="disclaimer-know-your-data">Disclaimer: Know Your Data</h4>

<p>A well-structured prompt can make AI output more useful, but it shouldn’t be the final word, or your single source of truth. AI models are powerful pattern predictors, not fact-checkers. If your data is unclear or poorly referenced, even the best prompt may return confident nonsense. Don’t blindly trust what you see. <strong>Treat AI like a bright intern</strong>: fast, eager, and occasionally delusional. You should always be familiar with your data and validate what AI spits out. For example, in the WIRE+FRAME results above, AI rated the effort as low for financial tool onboarding. That could easily be a medium or high. <strong>Good prompting should be backed by good judgment.</strong></p>

<h3 id="try-this-now">Try This Now</h3>

<p>Start by using the WIRE+FRAME framework to create a prompt that will help AI augment your work. You could also rewrite the last prompt you were not satisfied with, using the WIRE+FRAME, and compare the output.</p>

<p>Feel free to use <a href="https://wireframe-prompt-framework.lovable.app">this simple tool</a> to guide you through the framework.</p>

<h2 id="methods-from-lone-prompts-to-a-prompt-system">Methods: From Lone Prompts to a Prompt System</h2>

<p>Just as design systems have reusable components, your prompts can too. You can use the WIRE+FRAME framework to write detailed prompts, but you can also use the structure to create reusable components that are pre-tested, plug-and-play pieces you can assemble to build high-quality prompts faster. Each part of WIRE+FRAME can be transformed into a prompt component: small, reusable modules that reflect your team’s standards, voice, and strategy.</p>

<p>For instance, if you find yourself repeatedly using the same content for different parts of the WIRE+FRAME framework, you could save them as reusable components for you and your team. In the example below, we have two different reusable components for “W: Who &amp; What” &mdash; an insights analyst and an information architect.</p>

<h3 id="w-who-what-1">W: Who &amp; What</h3>

<ol>
<li><em>You are a senior UX researcher and customer insights analyst. You specialize in synthesizing qualitative data from diverse sources to identify patterns, surface user pain points, and map them across customer journey stages. Your outputs directly inform product, UX, and service priorities.</em></li>
<li><em>You are an experienced information architect specializing in organizing enterprise content on intranets. Your task is to reorganize the content and features into categories that reflect user goals, reduce cognitive load, and increase findability.</em></li>
</ol>

<p>Create and save prompt components and variations for each part of the WIRE+FRAME framework, allowing your team to quickly assemble new prompts by combining components when available, rather than starting from scratch each time.</p>

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

<h2 id="behind-the-prompts-questions-about-prompting">Behind The Prompts: Questions About Prompting</h2>

<p><em>Q: If I use a prompt framework like WIRE+FRAME every time, will the results be predictable?</em></p>

<p>A: Yes and no. Yes, your outputs will be guided by a consistent set of instructions (e.g., <strong>R</strong>ules, <strong>E</strong>xamples, <strong>R</strong>eference Voice / Style) that will guide the AI to give you a predictable format and style of results. And no, while the framework provides structure, it doesn’t flatten the generative nature of AI, but focuses it on what’s important to you. In the next article, we will look at how you can use this to your advantage to quickly reuse your best repeatable prompts as we build your AI assistant.</p>

<p><em>Q: Could changes to AI models break the WIRE+FRAME framework?</em></p>

<p>A: AI models are evolving more rapidly than any other technology we’ve seen before &mdash; in fact, ChatGPT was recently updated to GPT-5 to mixed reviews. The update didn’t change the core principles of prompting or the WIRE+FRAME prompt framework. With future releases, some elements of how we write prompts today may change, but the need to communicate clearly with AI won’t. Think of how you delegate work to an intern vs. someone with a few years’ experience: you still need detailed instructions the first time either is doing a task, but the level of detail may change. WIRE+FRAME isn’t built only for today’s models; the components help you clarify your intent, share relevant context, define constraints, and guide tone and format &mdash; all timeless elements, no matter how smart the model becomes. The skill of shaping clear, structured interactions with non-human AI systems will remain valuable.</p>

<p><em>Q: Can prompts be more than text? What about images or sketches?</em></p>

<p>A: Absolutely. With tools like GPT-5 and other multimodal models, you can upload screenshots, pictures, whiteboard sketches, or wireframes. These visuals become part of your <strong>I</strong>nput Context or help define the <strong>E</strong>xpected Output. The same WIRE+FRAME principles still apply: you’re setting context, tone, and format, just using images and text together. Whether your input is a paragraph or an image and text, you’re still designing the interaction.</p>

<p>Have a prompt-related question of your own? Share it in the comments, and I’ll either respond there or explore it further in the next article in this series.</p>

<h2 id="from-designerly-prompting-to-custom-assistants">From Designerly Prompting To Custom Assistants</h2>

<p>Good prompts and results don’t come from using others’ prompts, but from writing prompts that are customized for you and your context. The WIRE+FRAME framework helps with that and makes prompting a tool you can use to guide AI models like a creative partner instead of hoping for magic from a one-line request.</p>

<p>Prompting uses the designerly skills you already use every day to collaborate with AI:</p>

<ul>
<li><strong>Curiosity</strong> to explore what the AI can do and frame better prompts.</li>
<li><strong>Observation</strong> to detect bias or blind spots.</li>
<li><strong>Empathy</strong> to make machine outputs human.</li>
<li><strong>Critical thinking</strong> to verify and refine.</li>
<li><strong>Experiment &amp; Iteration</strong> to learn by doing and improve the interaction over time.</li>
<li><strong>Growth Mindset</strong> to keep up with new technology like AI and prompting.</li>
</ul>

<p>Once you create and refine prompt components and prompts that work for you, make them reusable by documenting them. But wait, there’s more &mdash; what if your best prompts, or the elements of your prompts, could live inside your own AI assistant, available on demand, fluent in your voice, and trained on your context? That’s where we’re headed next.</p>

<p>In the next article, “Design Your Own Design Assistant”, we’ll take what you’ve learned so far and turn it into a Custom AI assistant (aka Custom GPT), a design-savvy, context-aware assistant that works like you do. We’ll walk through that exact build, from defining the assistant’s job description to uploading knowledge, testing, and sharing it with others.</p>

<h3 id="resources">Resources</h3>

<ul>
<li><a href="https://cookbook.openai.com/examples/gpt-5/gpt-5_prompting_guide">GPT-5 Prompting Guide</a></li>
<li><a href="https://cookbook.openai.com/examples/gpt4-1_prompting_guide">GPT-4.1 Prompting Guide</a></li>
<li><a href="https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/overview">Anthropic Prompt Engineering</a></li>
<li><a href="https://cloud.google.com/discover/what-is-prompt-engineering?hl=en">Prompt Engineering by Google</a></li>
<li><a href="https://docs.perplexity.ai/guides/prompt-guide">Perplexity</a></li>
<li><a href="https://wireframe-prompt-framework.lovable.app">Webapp to guide you through the WIRE+FRAME framework</a></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>Lyndon Cerejo</author><title>A Week In The Life Of An AI-Augmented Designer</title><link>https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/</link><pubDate>Fri, 22 Aug 2025 08:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/</guid><description>If you are new to using AI in design or curious about integrating AI into your UX process without losing your human touch, this article offers a grounded, day-by-day look at introducing AI into your design workflow.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/08/week-in-life-ai-augmented-designer/" />
              <title>A Week In The Life Of An AI-Augmented Designer</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>A Week In The Life Of An AI-Augmented Designer</h1>
                  
                    
                    <address>Lyndon Cerejo</address>
                  
                  <time datetime="2025-08-22T08:00:00&#43;00:00" class="op-published">2025-08-22T08:00:00+00:00</time>
                  <time datetime="2025-08-22T08:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>Artificial Intelligence isn’t new, but in November 2022, something changed. The launch of ChatGPT brought AI out of the background and into everyday life. Suddenly, interacting with a machine didn’t feel technical &mdash; it felt <strong>conversational</strong>.</p>

<p>Just this March, ChatGPT overtook Instagram and TikTok as the most downloaded app in the world. That level of adoption shows that millions of everyday users, not just developers or early adopters, are comfortable using AI in casual, conversational ways. People are using AI not just to get answers, but to <a href="https://hbr.org/2025/04/how-people-are-really-using-gen-ai-in-2025">think, create, plan, and even to help with mental health and loneliness</a>.</p>

<p>In the past two and a half years, people have moved through the <a href="https://www.ekrfoundation.org/5-stages-of-grief/change-curve/">Kübler-Ross Change Curve</a> &mdash; only instead of grief, it’s AI-induced uncertainty. UX designers, like Kate (who you’ll meet shortly), have experienced something like this:</p>

<ul>
<li><strong>Denial</strong>: “AI can’t design like a human; it won’t affect my workflow.”</li>
<li><strong>Anger</strong>: “AI will ruin creativity. It’s a threat to our craft.”</li>
<li><strong>Bargaining</strong>: “Okay, maybe just for the boring tasks.”</li>
<li><strong>Depression</strong>: “I can’t keep up. What’s the future of my skills?”</li>
<li><strong>Acceptance</strong>: “Alright, AI can free me up for more strategic, human work.”</li>
</ul>

<p>As designers move into experimentation, they’re not asking, <em>Can I use AI?</em> but <em>How might I use it well?</em>.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aUsing%20AI%20isn%e2%80%99t%20about%20chasing%20the%20latest%20shiny%20object%20but%20about%20learning%20how%20to%20stay%20human%20in%20a%20world%20of%20machines,%20and%20use%20AI%20not%20as%20a%20shortcut,%20but%20as%20a%20creative%20collaborator.%0a&url=https://smashingmagazine.com%2f2025%2f08%2fweek-in-life-ai-augmented-designer%2f">
      
Using AI isn’t about chasing the latest shiny object but about learning how to stay human in a world of machines, and use AI not as a shortcut, but as a creative collaborator.

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

<p>It isn’t about finding, bookmarking, downloading, or hoarding prompts, but <strong>experimenting</strong> and writing your own prompts.</p>

<p>To bring this to life, we’ll follow Kate, a mid-level designer at a FinTech company, navigating her first AI-augmented design sprint. You’ll see her ups and downs as she experiments with AI, tries to balance human-centered skills with AI tools, when she relies on intuition over automation, and how she reflects critically on the role of AI at each stage of the sprint.</p>

<p>The next two planned articles in this series will explore how to design prompts (Part 2) and guide you through building your own AI assistant (aka CustomGPT; Part 3). Along the way, we’ll spotlight the <a href="https://www.smashingmagazine.com/2023/04/skills-designers-ai-cant-replicate/">designerly skills AI can’t replicate</a> like curiosity, empathy, critical thinking, and experimentation that will set you apart in a world where <strong>automation is easy, but people and human-centered design matter even more</strong>.</p>

<p><strong>Note</strong>: <em>This article was written by a human (with feelings, snacks, and deadlines). The prompts are real, the AI replies are straight from the source, and no language models were overworked &mdash; just politely bossed around. All em dashes are the handiwork of MS Word’s autocorrect &mdash; not AI. Kate is fictional, but her week is stitched together from real tools, real prompts, real design activities, and real challenges designers everywhere are navigating right now. She will primarily be using ChatGPT, reflecting the popularity of this jack-of-all-trades AI as the place many start their AI journeys before branching out. If you stick around to the end, you’ll find other AI tools that may be better suited for different design sprint activities. Due to the pace of AI advances, your outputs may vary (YOMV), possibly by the time you finish reading this sentence.</em></p>

<p><strong>Cautionary Note</strong>: <em>AI is helpful, but not always private or secure. Never share sensitive, confidential, or personal information with AI tools &mdash; even the helpful-sounding ones. When in doubt, treat it like a coworker who remembers everything and may not be particularly good at keeping secrets.</em></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="prologue-meet-kate-as-she-preps-for-the-upcoming-week">Prologue: Meet Kate (As She Preps For The Upcoming Week)</h2>

<p>Kate stared at the digital mountain of feedback on her screen: transcripts, app reviews, survey snippets, all waiting to be synthesized. Deadlines loomed. Her calendar was a nightmare. Meanwhile, LinkedIn was ablaze with AI hot takes and success stories. Everyone seemed to have found their “AI groove” &mdash; except her. She wasn’t anti-AI. She just hadn’t figured out how it actually fit into her work. She had tried some of the prompts she saw online, played with some AI plugins and extensions, but it felt like an add-on, not a core part of her design workflow.</p>

<p>Her team was focusing on improving financial confidence for Gen Z users of their FinTech app, and Kate planned to use one of her favorite frameworks: <a href="https://www.gv.com/sprint/">the Design Sprint</a>, a five-day, high-focus process that condenses months of product thinking into a single week. Each day tackles a distinct phase: Understand, Sketch, Decide, Prototype, and Test. All designed to move fast, make ideas tangible, and learn from real users before making big bets.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/1-stages-design-sprint.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="265"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/1-stages-design-sprint.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/1-stages-design-sprint.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/1-stages-design-sprint.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/1-stages-design-sprint.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/1-stages-design-sprint.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/1-stages-design-sprint.png"
			
			sizes="100vw"
			alt="Stages of a 5-Day Design Sprint"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Stages of a 5-Day Design Sprint. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/1-stages-design-sprint.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>This time, she planned to experiment with a very lightweight version of the design sprint, almost <em>“solo-ish”</em> since her PM and engineer were available for check-ins and decisions, but not present every day. That gave her both space and a constraint, and made it the perfect opportunity to explore how AI could augment each phase of the sprint.</p>

<p>She decided to lean on her designerly behavior of experimentation and learning and integrate AI intentionally into her sprint prep, using it as both a <strong>creative partner</strong> and a <strong>thinking aid</strong>. Not with a rigid plan, but with a working hypothesis that AI would at the very least speed her up, if nothing else.</p>

<p>She wouldn’t just be designing and testing a prototype, but prototyping and testing what it means to design with AI, while still staying in the driver’s seat.</p>

<p>Follow Kate along her journey through her first AI-powered design sprint: from curiosity to friction and from skepticism to insight.</p>

<h2 id="monday-understanding-the-problem-aka-kate-vs-digital-pile-of-notes">Monday: Understanding the Problem (aka: Kate Vs. Digital Pile Of Notes)</h2>

<p><em>The first day of a design sprint is spent understanding the user, their problems, business priorities, and technical constraints, and narrowing down the problem to solve that week.</em></p>

<p>This morning, Kate had transcripts from recent user interviews and customer feedback from the past year from app stores, surveys, and their customer support center. Typically, she would set aside a few days to process everything, coming out with glazed eyes and a few new insights. This time, she decided to use ChatGPT to summarize that data: <em>“Read this customer feedback and tell me how we can improve financial literacy for Gen Z in our app.”</em></p>

<p>ChatGPT’s outputs were underwhelming to say the least. Disappointed, she was about to give up when she remembered an infographic about good prompting that she had emailed herself. She updated her prompt based on those recommendations:</p>

<ul>
<li>Defined a role for the AI (“product strategist”),</li>
<li>Provided context (user group and design sprint objectives), and</li>
<li>Clearly outlined what she was looking for (financial literacy related patterns in pain points, blockers, confusion, lack of confidence; synthesis to identify top opportunity areas).</li>
</ul>

<p>By the time she Aero-pressed her next cup of coffee, ChatGPT had completed its analysis, highlighting blockers like jargon, lack of control, fear of making the wrong choice, and need for blockchain wallets. Wait, what? That last one felt off.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/2-ai-results-hallucinations.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="501"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/2-ai-results-hallucinations.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/2-ai-results-hallucinations.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/2-ai-results-hallucinations.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/2-ai-results-hallucinations.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/2-ai-results-hallucinations.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/2-ai-results-hallucinations.png"
			
			sizes="100vw"
			alt="AI results may sometimes include hallucinations – don’t trust; always verify."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      AI results may sometimes include hallucinations: don’t trust, always verify. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/2-ai-results-hallucinations.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Kate searched her sources and confirmed her hunch: AI hallucination! Despite the best of prompts, AI sometimes makes things up based on trendy concepts from its training data rather than actual data. Kate updated her prompt with <strong>constraints</strong> to make ChatGPT only use data she had uploaded, and to cite examples from that data in its results. 18 seconds later, the updated results did not mention blockchain or other unexpected results.</p>

<p>By lunch, Kate had the makings of a research summary that would have taken much, much longer, and a whole lot of caffeine.</p>

<p>That afternoon, Kate and her product partner plotted the pain points on the Gen Z app journey. The emotional mapping highlighted the most critical moment: the first step of a financial decision, like setting a savings goal or choosing an investment option. That was when fear, confusion, and lack of confidence held people back.</p>

<p>AI synthesis combined with human insight helped them define the <strong>problem statement</strong> as: <em>“How might we help Gen Z users confidently take their first financial action in our app, in a way that feels simple, safe, and puts them in control?”</em></p>

<h3 id="kate-s-reflection">Kate’s Reflection</h3>

<p>As she wrapped up for the day, Kate jotted down her reflections on her first day as an AI-augmented designer:</p>

<blockquote>There’s nothing like learning by doing. I’ve been reading about AI and tinkering around, but took the plunge today. Turns out AI is much more than a tool, but I wouldn’t call it a co-pilot. Yet. I think it’s like a sharp intern: it has a lot of information, is fast, eager to help, but it lacks context, needs supervision, and can surprise you. You have to give it clear instructions, double-check its work, and guide and supervise it. Oh, and maintain boundaries by not sharing anything I wouldn’t want others to know.<br /><br />Today was about listening &mdash; to users, to patterns, to my own instincts. AI helped me sift through interviews fast, but I had to stay <strong>curious</strong> to catch what it missed. Some quotes felt too clean, like the edges had been smoothed over. That’s where <strong>observation</strong> and <strong>empathy</strong> kicked in. I had to ask myself: what’s underneath this summary?<br /><br /><strong>Critical thinking</strong> was the designerly skill I had to exercise most today. It was tempting to take the AI’s synthesis at face value, but I had to push back by re-reading transcripts, questioning assumptions, and making sure I wasn’t outsourcing my judgment. Turns out, the thinking part still belongs to me.</blockquote>

<h2 id="tuesday-sketching-aka-kate-and-the-sea-of-okish-ideas">Tuesday: Sketching (aka: Kate And The Sea of OKish Ideas)</h2>

<p><em>Day 2 of a design sprint focuses on solutions, starting by remixing and improving existing ideas, followed by people sketching potential solutions.</em></p>

<p>Optimistic, yet cautious after her experience yesterday, Kate started thinking about ways she could use AI today, while brewing her first cup of coffee. By cup two, she was wondering if AI could be a creative teammate. Or a creative intern at least. She decided to ask AI for a list of relevant UX patterns across industries. Unlike yesterday’s complex analysis, Kate was asking for inspiration, not insight, which meant she could use a simpler prompt: <em>“Give me 10 unique examples of how top-rated apps reduce decision anxiety for first-time users &mdash; from FinTech, health, learning, or ecommerce.”</em></p>

<p>She received her results in a few seconds, but there were only 6, not the 10 she asked for. She expanded her prompt for examples from a wider range of industries. While reviewing the AI examples, Kate realized that one had accessibility issues. To be fair, the results met Kate’s ask since she had not specified accessibility considerations. She then went pre-AI and brainstormed examples with her product partner, coming up with a few unique local examples.</p>

<p>Later that afternoon, Kate went full human during Crazy 8s by putting a marker to paper and sketching 8 ideas in 8 minutes to rapidly explore different directions. Wondering if AI could live up to its generative nature, she uploaded pictures of her top 3 sketches and prompted AI to act as <em>“a product design strategist experienced in Gen Z behavior, digital UX, and behavioral science”</em>, gave it context about the problem statement, stage in the design sprint, and explicitly asked AI the following:</p>

<ol>
<li>Analyze the 3 sketch concepts and identify core elements or features that resonated with the goal.</li>
<li>Generate 5 new concept directions, each of which should:

<ul>
<li>Address the original design sprint challenge.</li>
<li>Reflect Gen Z design language, tone, and digital behaviors.</li>
<li>Introduce a unique twist, remix, or conceptual inversion of the ideas in the sketches.</li>
</ul></li>
<li>For each concept, provide:

<ul>
<li>Name (e.g., “Monopoly Mode,” “Smart Start”);</li>
<li>1&ndash;2 sentence concept summary;</li>
<li>Key differentiator from the original sketches;</li>
<li>Design tone and/or behavioral psychology technique used.</li>
</ul></li>
</ol>

<p>The results included ideas that Kate and her product partner hadn’t considered, including a progress bar that started at 20% (to build confidence), and a sports-like “stock bracket” for first-time investors.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/3-ai-generated-remixed-concepts.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="559"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/3-ai-generated-remixed-concepts.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/3-ai-generated-remixed-concepts.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/3-ai-generated-remixed-concepts.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/3-ai-generated-remixed-concepts.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/3-ai-generated-remixed-concepts.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/3-ai-generated-remixed-concepts.png"
			
			sizes="100vw"
			alt="AI-generated remixed concepts after sharing three of the Crazy 8’s concepts"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      AI-generated remixed concepts after sharing three of the Crazy 8’s concepts. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/3-ai-generated-remixed-concepts.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Not bad, thought Kate, as she cherry-picked elements, combined and built on these ideas in her next round of sketches. By the end of the day, they had a diverse set of sketched solutions &mdash; some original, some AI-augmented, but all exploring how to reduce fear, simplify choices, and build confidence for Gen Z users taking their first financial step. With five concept variations and a few rough storyboards, Kate was ready to start converging on day 3.</p>

<h3 id="kate-s-reflection-1">Kate’s Reflection</h3>

<blockquote>Today was creatively energizing yet a little overwhelming! I leaned hard on AI to act as a creative teammate. It delivered a few unexpected ideas and remixed my Crazy 8s into variations I never would’ve thought of!<br /><br />It also reinforced the need to stay grounded in the human side of design. AI was fast &mdash; too fast, sometimes. It spit out polished-sounding ideas that sounded right, but I had to slow down, observe carefully, and ask: Does this feel right for our users? Would a first-time user feel safe or intimidated here?<br /><br /><strong>Critical thinking</strong> helped me separate what mattered from what didn’t. <strong>Empathy</strong> pulled me back to what Gen Z users actually said, and kept their voices in mind as I sketched. <strong>Curiosity</strong> and <strong>experimentation</strong> were my fuel. I kept tweaking prompts, remixing inputs, and seeing how far I could stretch a concept before it broke. <strong>Visual communication</strong> helped translate fuzzy AI ideas into something I could react to &mdash; and more importantly, test.</blockquote>

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

<h2 id="wednesday-deciding-aka-kate-tries-to-get-ai-to-pick-a-side">Wednesday: Deciding (aka Kate Tries to Get AI to Pick a Side)</h2>

<p><em>Design sprint teams spend Day 3 critiquing each of their potential solutions to shortlist those that have the best chance of achieving their long-term goal. The winning scenes from the sketches are then woven into a prototype storyboard.</em></p>

<p>Design sprint Wednesdays were Kate’s least favorite day. After all the generative energy during Sketching Tuesday, today, she would have to decide on one clear solution to prototype and test. She was unsure if AI would be much help with judging tradeoffs or narrowing down options, and it wouldn’t be able to critique like a team. Or could it?</p>

<p>Kate reviewed each of the five concepts, noting strengths, open questions, and potential risks. Curious about how AI would respond, she uploaded images of three different design concepts and prompted ChatGPT for strengths and weaknesses. AI’s critique was helpful in summarizing the pros and cons of different concepts, including a few points she had not considered &mdash; like potential privacy concerns.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/4-speed-critique-uploaded-concept.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="538"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/4-speed-critique-uploaded-concept.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/4-speed-critique-uploaded-concept.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/4-speed-critique-uploaded-concept.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/4-speed-critique-uploaded-concept.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/4-speed-critique-uploaded-concept.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/4-speed-critique-uploaded-concept.png"
			
			sizes="100vw"
			alt="Speed Critique (Strengths and Weaknesses) of an uploaded concept"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Speed Critique (Strengths and Weaknesses) of an uploaded concept. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/4-speed-critique-uploaded-concept.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>She asked a few follow-up questions to confirm the actual reasoning. Wondering if she could simulate a team critique by prompting ChatGPT differently, Kate asked it to use the <a href="https://www.debonogroup.com/services/core-programs/six-thinking-hats/">6 thinking hats technique</a>. The results came back dense, overwhelming, and unfocused. The AI couldn’t prioritize, and it couldn’t see the gaps Kate instinctively noticed: friction in onboarding, misaligned tone, unclear next steps.</p>

<p>In that moment, the promise of AI felt overhyped. Kate stood up, stretched, and seriously considered ending her experiments with the AI-driven process. But she paused. Maybe the problem wasn’t the tool. Maybe it was <em>how</em> she was using it. She made a note to experiment when she wasn’t on a design sprint clock.</p>

<p>She returned to her sketches, this time laying them out on the wall. No screens, no prompts. Just markers, sticky notes, and Sharpie scribbles. Human judgment took over. Kate worked with her product partner to finalize the solution to test on Friday and spent the next hour storyboarding the experience in Figma.</p>

<p>Kate re-engaged with AI as a reviewer, not a decider. She prompted it for feedback on the storyboard and was surprised to see it spit out detailed design, content, and micro-interaction suggestions for each of the steps of the storyboarded experience. A lot of food for thought, but she’d have to judge what mattered when she created her prototype. But that wasn’t until tomorrow!</p>

<h3 id="kate-s-reflection-2">Kate’s Reflection</h3>

<blockquote>AI exposed a few of my blind spots in the critique, which was good, but it basically pointed out that multiple options “could work”. I had to rely on my <strong>critical thinking</strong> and instincts to weigh options logically, emotionally, and contextually in order to choose a direction that was the most testable and aligned with the user feedback from Day 1.<br /><br />I was also surprised by the suggestions it came up with while reviewing my final storyboard, but I will need a fresh pair of eyes and all the human judgement I can muster tomorrow.<br /><br /><strong>Empathy</strong> helped me walk through the flow like I was a new user. <strong>Visual communication</strong> helped pull it all together by turning abstract steps into a real storyboard for the team to see instead of imagining.<br /><br /><strong>TO DO</strong>: Experiment prompting around the 6 Thinking Hats for different perspectives.</blockquote>

<h2 id="thursday-prototype-aka-kate-and-faking-it">Thursday: Prototype (aka Kate And Faking It)</h2>

<p><em>On Day 4, the team usually turns the storyboard from the previous day into a prototype that can be tested with users on Day 5. The prototype doesn’t need to be fully functional; a simulated experience is sufficient to gather user feedback.</em></p>

<p>Kate’s prototype day often consisted of marathon Figma Design sessions and late-night pizza dinners. She was hoping AI would change that today. She fed yesterday’s storyboard to ChatGPT and asked it for screens. It took a while to generate, but she was excited to see a screen flow gradually appear on her screen, except that it had 3 ¾ screens, instead of the 6 frames from her storyboard, as you can see in the image below.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/5-chat-gpt-half-baked-screens.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/week-in-life-ai-augmented-designer/5-chat-gpt-half-baked-screens.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/5-chat-gpt-half-baked-screens.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/5-chat-gpt-half-baked-screens.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/5-chat-gpt-half-baked-screens.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/5-chat-gpt-half-baked-screens.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/5-chat-gpt-half-baked-screens.png"
			
			sizes="100vw"
			alt="ChatGPT’s half-baked (actually, 3 ¾th baked) screens."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      ChatGPT’s half-baked (actually, 3 ¾<sup>th</sup> baked) screens. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/5-chat-gpt-half-baked-screens.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>She tried different prompts but couldn’t get a complete flow. She was excited when it offered to create a Figma file. She waited. And waited. And reminded it that she was right there waiting. It finally gave her a link &mdash; a link that didn’t work. That made her question why she needed prototype screens in Figma at all. Could one of those no-code tools do the job? Kate remembered that she had just received beta access to <a href="https://www.figma.com/make/">Figma Make</a> (Figma’s AI prompt-to-prototype tool) and decided to put it to the test.</p>

<p>She shared her storyboard, added context about the prototype for a design sprint, the problem, and a brief description of the audience. In a few seconds, she saw code being generated and a running description on the left. It seemed like it would take some time, so she headed to the cafeteria for lunch.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/6-initial-prototype-figma-make.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="559"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/6-initial-prototype-figma-make.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/6-initial-prototype-figma-make.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/6-initial-prototype-figma-make.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/6-initial-prototype-figma-make.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/6-initial-prototype-figma-make.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/6-initial-prototype-figma-make.png"
			
			sizes="100vw"
			alt="Initial prototype created by Figma Make based on a prompt with the storyboard"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Initial prototype created by Figma Make based on a prompt with the storyboard. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/6-initial-prototype-figma-make.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>When Kate returned, she was surprised to see Figma Make had created an app along with a detailed explanation:</p>

<blockquote>“I’ve created a complete finance app prototype with five key screens that guide users through setting financial goals in a friendly, low-pressure way. The app features smooth animations with Framer Motion, a progress indicator to show users where they are in the journey, and emotionally supportive visuals and copy throughout the experience. Each screen serves a specific purpose: welcoming users, helping them define relatable goals, building their plan with visual feedback, presenting a simple summary, and offering next steps without pressure.<br /><br />You might want to:<ul><li>Add personalization options like user profiles or avatars.</li><li>Implement a dark mode toggle for accessibility.</li><li>Create additional goal templates and saving strategies.”</li></ul></blockquote>

<p>Since Figma Make had built the prototype, not her, Kate felt like she was User 0, and clicked her way through the interactive prototype, making a mental note of what worked, what didn’t. She was impressed to see that she could not only select a common goal (buy a home, save for education, and so on) but she could also create her own goal (<em>hello De’Longhi Coffee Maker</em>) and it carried over for the rest of the experience. This was something she had never been able to do in Figma Design!</p>

<p>Despite some obvious misses like a missing header and navigation, and some buttons not working, she was impressed! Kate tried the option to ‘Publish’ and it gave her a link that she immediately shared with her product and engineering partners. A few minutes later, they joined her in the conference room, exploring it together. The engineer scanned the code, didn’t seem impressed, but said it would work as a disposable prototype.</p>

<p>Kate prompted Figma Make to add an orange header and app navigation, and this time the trio kept their eyes peeled as they saw the progress in code and in English. The results were pretty good. They spent the next hour making changes to get it ready for testing. Even though he didn’t admit it, the engineer seemed impressed with the result, if not the code.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/7-finalized-prototype-screenshots-figma-make.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="302"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/7-finalized-prototype-screenshots-figma-make.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/7-finalized-prototype-screenshots-figma-make.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/7-finalized-prototype-screenshots-figma-make.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/7-finalized-prototype-screenshots-figma-make.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/7-finalized-prototype-screenshots-figma-make.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/7-finalized-prototype-screenshots-figma-make.png"
			
			sizes="100vw"
			alt="Finalized prototype screenshots from the interactive Figma Make prototype"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Finalized prototype screenshots from the interactive <a href='https://zone-crush-76141775.figma.site/'>Figma Make prototype</a>. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/7-finalized-prototype-screenshots-figma-make.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>By late afternoon, they had a <a href="https://zone-crush-76141775.figma.site">functioning interactive prototype</a>. Kate fed ChatGPT the prototype link and asked it to create a usability testing script. It came up with a basic, but complete test script, including a checklist for observers to take notes.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/8-initial-usability-testing-script-ai.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="506"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/8-initial-usability-testing-script-ai.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/8-initial-usability-testing-script-ai.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/8-initial-usability-testing-script-ai.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/8-initial-usability-testing-script-ai.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/8-initial-usability-testing-script-ai.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/8-initial-usability-testing-script-ai.png"
			
			sizes="100vw"
			alt="Initial usability testing script generated by AI"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Initial usability testing script generated by AI. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/8-initial-usability-testing-script-ai.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Kate went through the script carefully and updated it to add probing questions about AI transparency, emotional check-ins, more specific task scenarios, and a post-test debrief that looped back to the sprint goal.</p>

<p>Kate did a dry run with her product partner, who teased her: <em>“Did you really need me? Couldn’t your AI do it?”</em> It hadn’t occurred to her, but she was now curious!</p>

<blockquote>“Act as a Gen Z user seeing this interactive prototype for the first time. How would you react to the language, steps, and tone? What would make you feel more confident or in control?”</blockquote>

<p>It worked! ChatGPT simulated user feedback for the first screen and asked if she wanted it to continue. <em>“Yes, please,”</em> she typed. A few seconds later, she was reading what could have very well been a screen-by-screen transcript from a test.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/9-ai-generated-feedback-prototype.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="467"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/9-ai-generated-feedback-prototype.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/9-ai-generated-feedback-prototype.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/9-ai-generated-feedback-prototype.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/9-ai-generated-feedback-prototype.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/9-ai-generated-feedback-prototype.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/9-ai-generated-feedback-prototype.png"
			
			sizes="100vw"
			alt="AI-generated feedback about the prototype"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      AI-generated feedback about the prototype. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/9-ai-generated-feedback-prototype.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Kate was still processing what she had seen as she drove home, happy she didn’t have to stay late. The simulated test using AI appeared impressive at first glance. But the more she thought about it, the more disturbing it became. The output didn’t mention what the simulated user clicked, and if she had asked, she probably would have received an answer. But how useful would that be? After almost missing her exit, she forced herself to think about eating a relaxed meal at home instead of her usual Prototype-Thursday-Multitasking-Pizza-Dinner.</p>

<h3 id="kate-s-reflection-3">Kate’s Reflection</h3>

<blockquote>Today was the most meta I’ve felt all week: building a prototype about AI, with AI, while being coached by AI. And it didn’t all go the way I expected.<br /><br />While ChatGPT didn’t deliver prototype screens, Figma Make coded a working, interactive prototype with interactions I couldn’t have built in Figma Design. I used <strong>curiosity</strong> and <strong>experimentation</strong> today, by asking: What if I reworded this? What if I flipped that flow?<br /><br />AI moved fast, but I had to keep steering. But I have to admit that tweaking the prototype by changing the words, not code, felt like magic!<br /><br /><strong>Critical thinking</strong> isn’t optional anymore &mdash; it is table stakes.<br /><br />My impromptu ask of ChatGPT to simulate a Gen Z user testing my flow? That part both impressed and unsettled me. I’m going to need time to process this. But that can wait until next week. Tomorrow, I test with 5 Gen Zs &mdash; real people.</blockquote>

<h2 id="friday-test-aka-prototype-meets-user">Friday: Test (aka Prototype Meets User)</h2>

<p><em>Day 5 in a design sprint is a culmination of the week’s work from understanding the problem, exploring solutions, choosing the best, and building a prototype. It’s when teams interview users and learn by watching them react to the prototype and seeing if it really matters to them.</em></p>

<p>As Kate prepped for the tests, she grounded herself in the sprint problem statement and the users: “<em>How might we help Gen Z users confidently take their first financial action in our app &mdash; in a way that feels simple, safe, and puts them in control?”</em></p>

<p>She clicked through the prototype one last time &mdash; the link still worked! And just in case, she also had screenshots saved.</p>

<p>Kate moderated the five tests while her product and engineering partners observed. The prototype may have been AI-generated, but the reactions were human. She observed where people hesitated, what made them feel safe and in control. Based on the participant, she would pivot, go off-script, and ask clarifying questions, getting deeper insights.</p>

<p>After each session, she dropped the transcripts and their notes into ChatGPT, asking it to summarize that user’s feedback into pain points, positive signals, and any relevant quotes. At the end of the five rounds, Kate prompted them for recurring themes to use as input for their reflection and synthesis.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/10-ai-generated-synthesis-usability-testing.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="499"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/10-ai-generated-synthesis-usability-testing.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/10-ai-generated-synthesis-usability-testing.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/10-ai-generated-synthesis-usability-testing.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/10-ai-generated-synthesis-usability-testing.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/10-ai-generated-synthesis-usability-testing.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/10-ai-generated-synthesis-usability-testing.png"
			
			sizes="100vw"
			alt="AI-generated synthesis of the Day 5 usability testing"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      AI-generated synthesis of the Day 5 usability testing. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/10-ai-generated-synthesis-usability-testing.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>The trio combed through the results, with an eye out for any suspicious AI-generated results. They ran into one: <em>“Users Trust AI”</em>. Not one user mentioned or clicked the ‘Why this?’ link, but AI possibly assumed transparency features worked because they were available in the prototype.</p>

<p>They agreed that the prototype resonated with users, allowing all to easily set their financial goals, and identified a couple of opportunities for improvement: better explaining AI-generated plans and celebrating “win” moments after creating a plan. Both were fairly easy to address during their product build process.</p>

<p>That was a nice end to the week: another design sprint wrapped, and Kate’s first AI-augmented design sprint! She started Monday anxious about falling behind, overwhelmed by options. She closed Friday confident in a validated concept, grounded in real user needs, and empowered by tools she now knew how to steer.</p>

<h3 id="kate-s-reflection-4">Kate’s Reflection</h3>

<blockquote>Test driving my prototype with AI yesterday left me impressed and unsettled. But today’s tests with people reminded me why we test with real users, not proxies or people who interact with users, but actual end users. And GenAI is not the user. Five tests put my designerly skill of <strong>observation</strong> to the test.<br /><br />GenAI helped summarize the test transcripts quickly but snuck in one last hallucination this week &mdash; about AI! With AI, don’t trust &mdash; always verify! <strong>Critical thinking</strong> is not going anywhere.<br /><br />AI can move fast with words, but only people can use <strong>empathy</strong> to move beyond words to truly understand human emotions.<br /><br />My next goal is to learn to talk to AI better, so I can get better results.</blockquote>

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

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

<p>Over the course of five days, Kate explored how AI could fit into her UX work, not by reading articles or LinkedIn posts, but by doing. Through daily experiments, iterations, and missteps, she got comfortable with AI as a collaborator to support a design sprint. It accelerated every stage: synthesizing user feedback, generating divergent ideas, giving feedback, and even spinning up a working prototype, as shown below.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/week-in-life-ai-augmented-designer/11-design-sprint-ai.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="284"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/11-design-sprint-ai.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/11-design-sprint-ai.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/11-design-sprint-ai.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/11-design-sprint-ai.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/11-design-sprint-ai.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/week-in-life-ai-augmented-designer/11-design-sprint-ai.png"
			
			sizes="100vw"
			alt="Design Sprint with AI"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Design Sprint with AI. (<a href='https://files.smashing.media/articles/week-in-life-ai-augmented-designer/11-design-sprint-ai.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>What was clear by Friday was that speed isn’t insight. While AI produced outputs fast, it was Kate’s designerly skills &mdash; <strong>curiosity</strong>, <strong>empathy</strong>, <strong>observation</strong>, <strong>visual communication</strong>, <strong>experimentation</strong>, and most importantly, <strong>critical thinking</strong> and a <strong>growth mindset</strong> &mdash; that turned data and patterns into meaningful insights. She stayed in the driver’s seat, verifying claims, adjusting prompts, and applying judgment where automation fell short.</p>

<p>She started the week on Monday, overwhelmed, her confidence dimmed by uncertainty and the noise of AI hype. She questioned her relevance in a rapidly shifting landscape. By Friday, she not only had a validated concept but had also reshaped her entire approach to design. She had evolved: from AI-curious to AI-confident, from reactive to proactive, from unsure to empowered. Her mindset had shifted: AI was no longer a threat or trend; it was like a smart intern she could direct, critique, and collaborate with. She didn’t just adapt to AI. She redefined what it meant to be a designer in the age of AI.</p>

<p>The experience raised deeper questions: How do we make sure AI-augmented outputs are not made up? How should we treat AI-generated user feedback? Where do ethics and human responsibility intersect?</p>

<p>Besides a validated solution to their design sprint problem, Kate had prototyped a new way of working as an AI-augmented designer.</p>

<p>The question now isn’t just <em>“Should designers use AI?”</em>. It’s <em>“How do we work with AI responsibly, creatively, and consciously?”</em>. That’s what the next article will explore: designing your interactions with AI using a repeatable framework.</p>

<p><strong>Poll</strong>: If you could design your own AI assistant, what would it do?</p>

<ul>
<li>Assist with ideation?</li>
<li>Research synthesis?</li>
<li>Identify customer pain points?</li>
<li>Or something else entirely?</li>
</ul>

<p><a href="https://forms.gle/tSsZzy92VVrjuPQX8">Share your idea</a>, and in the spirit of learning by doing, we’ll build one together from scratch in the third article of this series: Building your own CustomGPT.</p>

<h3 id="resources">Resources</h3>

<ul>
<li><a href="https://www.amazon.com/Sprint-Solve-Problems-Test-Ideas/dp/150112174X">Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days</a>, by Jake Knapp</li>
<li><a href="https://www.gv.com/sprint/">The Design Sprint</a></li>
<li><a href="https://www.figma.com/make/">Figma Make</a></li>
<li>“<a href="https://gizmodo.com/openai-appeals-sweeping-unprecedented-order-requiring-it-maintain-all-chatgpt-logs-2000612405">OpenAI Appeals ‘Sweeping, Unprecedented Order’ Requiring It Maintain All ChatGPT Logs</a>”, Vanessa Taylor</li>
</ul>

<p><strong>Tools</strong></p>

<p>As mentioned earlier, ChatGPT was the general-purpose LLM Kate leaned on, but you could swap it out for Claude, Gemini, Copilot, or other competitors and likely get similar results (or at least similarly weird surprises). Here are some alternate AI tools that might suit each sprint stage even better. Note that with dozens of new AI tools popping up every week, this list is far from exhaustive.</p>

<table class="tablesaw break-out">
    <thead>
        <tr>
            <th>Stage</th>
            <th>Tools</th>
      <th>Capability</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>Understand</strong></td>
            <td>Dovetail, UserTesting’s Insights Hub, <a href="http://heymarvin.com">Marvin</a></td>
      <td>Summarize & Synthesize data</td>
        </tr>
        <tr>
            <td><strong>Sketch</strong></td>
            <td>Any LLM, <a href="https://musely.ai/tools/ideation-tool">Musely</a></td>
      <td>Brainstorm concepts and ideas</td>
        </tr>
        <tr>
            <td><strong>Decide</strong></td>
            <td>Any LLM</td>
      <td>Critique/provide feedback</td>
        </tr>
    <tr>
            <td><strong>Prototype</strong></td>
            <td><a href="http://uizard.io">UIzard</a>, <a href="http://uxpilot.ai">UXPilot</a>, <a href="http://visily.ai">Visily</a>, <a href="http://krisspy.ai">Krisspy</a>, Figma Make, Lovable, Bolt</td>
      <td>Create wireframes and prototypes</td>
        </tr>
    <tr>
            <td><strong>Test</strong></td>
            <td>UserTesting, UserInterviews, PlaybookUX, <a href="http://maze.co">Maze</a>, plus tools from the Understand stage</td>
      <td>Moderated and unmoderated user tests/synthesis </td>
        </tr>
    </tbody>
</table>

<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>Are Halland</author><title>The Core Model: Start FROM The Answer, Not WITH The Solution</title><link>https://www.smashingmagazine.com/2025/07/core-model-start-from-answer-not-solution/</link><pubDate>Wed, 30 Jul 2025 13:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/07/core-model-start-from-answer-not-solution/</guid><description>The Core Model is a practical methodology that flips traditional digital development on its head. Instead of starting with solutions or structure, we begin with a hypothesis about what users need and follow a simple framework that brings diverse teams together to create more effective digital experiences. By asking six good questions in the right order, teams align around user tasks and business objectives, creating clarity that transcends organizational boundaries.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/07/core-model-start-from-answer-not-solution/" />
              <title>The Core Model: Start FROM The Answer, Not WITH The Solution</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>The Core Model: Start FROM The Answer, Not WITH The Solution</h1>
                  
                    
                    <address>Are Halland</address>
                  
                  <time datetime="2025-07-30T13:00:00&#43;00:00" class="op-published">2025-07-30T13:00:00+00:00</time>
                  <time datetime="2025-07-30T13:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>Ever sat in a meeting where everyone jumped straight to solutions? “We need a new app!” “Let’s redesign the homepage!” “AI will fix everything!” This solution-first thinking is endemic in digital development &mdash; and it’s why so many projects fail to deliver real value. As the creator of the Core Model methodology, I developed this approach to flip the script: <strong>instead of starting with solutions, we start FROM the answer</strong>.</p>

<p>What’s the difference? Starting with solutions means imposing our preconceived ideas. Starting FROM the answer to a user task means forming a hypothesis about what users need, then taking a step back to follow a simple structure that validates and refines that hypothesis.</p>

<h2 id="six-good-questions-that-lead-to-better-answers">Six Good Questions That Lead to Better Answers</h2>

<p>At its heart, the Core Model is simply six good questions asked in the right order, with a seventh that drives action. It appeals to common sense &mdash; something often in short supply during complex digital projects.</p>

<p>When I introduced this approach to a large organization struggling with their website, their head of digital admitted: <em>“We’ve been asking all these questions separately, but never in this structured way that connects them.”</em></p>

<p>These questions help teams pause, align around what matters, and create solutions that actually work:</p>

<ol>
<li>Who are we trying to help, and what’s their situation?</li>
<li>What are they trying to accomplish?</li>
<li>What do we want to achieve?</li>
<li>How do they approach this need?</li>
<li>Where should they go next?</li>
<li>What’s the essential content or functionality they need?</li>
<li>What needs to be done to create this solution?</li>
</ol>

<p>This simple framework creates clarity across team boundaries, bringing together content creators, designers, developers, customer service, subject matter experts, and leadership around a shared understanding.</p>

<h2 id="starting-with-a-hypothesis">Starting With a Hypothesis</h2>

<p>The Core Model process typically begins before the workshop. The project lead or facilitator works with key stakeholders to:</p>

<ol>
<li>Identify candidate cores based on organizational priorities and user needs.</li>
<li>Gather existing user insights and business objectives.</li>
<li>Form initial hypotheses about what these cores should accomplish.</li>
<li>Prepare relevant background materials for workshop participants.</li>
</ol>

<p>This preparation ensures the workshop itself is focused and productive, with teams validating and refining hypotheses rather than starting from scratch.</p>

<h2 id="the-core-model-six-elements-that-create-alignment">The Core Model: Six Elements That Create Alignment</h2>

<p>Let’s explore each element of the Core Model in detail:</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/core-model-start-from-answer-not-solution/1-core-model-framework.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="453"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/1-core-model-framework.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/1-core-model-framework.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/1-core-model-framework.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/1-core-model-framework.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/1-core-model-framework.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/1-core-model-framework.png"
			
			sizes="100vw"
			alt="The Core Model framework"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      The Core Model framework with its six elements: Target Group, User Tasks, Business Objectives, Inward Paths, Forward Paths, and Core Content. (<a href='https://files.smashing.media/articles/core-model-start-from-answer-not-solution/1-core-model-framework.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="1-target-group-building-empathy-first">1. Target Group: Building Empathy First</h3>

<p>Rather than detailed personas, the Core Model starts with quick proto-personas that build empathy for users in specific situations:</p>

<ul>
<li>A parent researching childcare options late at night after a long day.</li>
<li>A small business owner trying to understand tax requirements between client meetings.</li>
<li>A new resident navigating unfamiliar public services in their second language.</li>
</ul>

<p>The key is to humanize users and understand their emotional and practical context before diving into solutions.</p>

<h3 id="2-user-tasks-what-people-are-actually-trying-to-do">2. User Tasks: What People Are Actually Trying to Do</h3>

<p>Beyond features or content, what are users actually trying to accomplish?</p>

<ul>
<li>Making an informed decision about a major purchase.</li>
<li>Finding the right form to apply for a service.</li>
<li>Understanding next steps in a complex process.</li>
<li>Checking eligibility for a program or benefit.</li>
</ul>

<p>These tasks should be based on user research and drive everything that follows. <a href="https://www.smashingmagazine.com/2022/05/top-tasks-focus-what-matters-must-defocus-what-doesnt/">Top task methodology</a> is a great approach to this.</p>

<h3 id="3-business-objectives-what-success-looks-like">3. Business Objectives: What Success Looks Like</h3>

<p>Every digital initiative should connect to clear organizational goals:</p>

<ul>
<li>Increasing online self-service adoption.</li>
<li>Reducing support costs.</li>
<li>Improving satisfaction and loyalty.</li>
<li>Meeting compliance requirements.</li>
<li>Generating leads or sales.</li>
</ul>

<p>These objectives provide the measurement framework for success. (If you work with OKRs, you can think of these as <strong>Key Results</strong> that connect to your overall <strong>Objective</strong>.)</p>

<h3 id="4-inward-paths-user-scenarios-and-approaches">4. Inward Paths: User Scenarios and Approaches</h3>

<p>This element goes beyond just findability to include the user’s entire approach and mental model:</p>

<ul>
<li>What scenarios lead them to this need?</li>
<li>What terminology do they use to describe their problem?</li>
<li>How would the phrase their need to Google or an LLM?</li>
<li>What emotions or urgency are they experiencing?</li>
<li>What channels or touchpoints do they use?</li>
<li>What existing knowledge do they bring?</li>
</ul>

<p>Understanding these angles of different approaches ensures we meet users where they are.</p>

<h3 id="5-forward-paths-guiding-the-journey">5. Forward Paths: Guiding the Journey</h3>

<p>What should users do after engaging with this core?</p>

<ul>
<li>Take a specific action to continue their task.</li>
<li>Explore related information or options.</li>
<li>Connect with appropriate support channels.</li>
<li>Save or share their progress.</li>
</ul>

<p>These paths create coherent journeys (core flows) rather than dead ends.</p>

<h3 id="6-core-content-the-essential-solution">6. Core Content: The Essential Solution</h3>

<p>Only after mapping the previous elements do we define the actual solution:</p>

<ul>
<li>What information must be included?</li>
<li>What functionality is essential?</li>
<li>What tone and language are appropriate?</li>
<li>What format best serves the need?</li>
</ul>

<p>This becomes our blueprint for what actually needs to be created.</p>

<h3 id="action-cards-from-insight-to-implementation">Action Cards: From Insight to Implementation</h3>

<p>The Core Model process culminates with action cards that answer the crucial seventh question: <em>“What needs to be done to create this solution?”</em></p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/core-model-start-from-answer-not-solution/2-action-card.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="419"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/2-action-card.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/2-action-card.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/2-action-card.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/2-action-card.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/2-action-card.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/core-model-start-from-answer-not-solution/2-action-card.png"
			
			sizes="100vw"
			alt="Action card"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      (<a href='https://files.smashing.media/articles/core-model-start-from-answer-not-solution/2-action-card.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>These cards typically include:</p>

<ul>
<li>Specific actions required;</li>
<li>Who is responsible;</li>
<li>Timeline for completion;</li>
<li>Resources needed;</li>
<li>Dependencies and constraints.</li>
</ul>

<p>Action cards transform insights into concrete next steps, ensuring the workshop leads to real improvements rather than just interesting discussions.</p>

<h2 id="the-power-of-core-pairs">The Power of Core Pairs</h2>

<p>A unique aspect of the Core Model methodology is working in core pairs—two people from different competencies or departments working together on the same core sheet. This approach creates several benefits:</p>

<ul>
<li><strong>Cross-disciplinary insight</strong><br />
Pairing someone with deep subject knowledge with someone who brings a fresh perspective.</li>
<li><strong>Built-in quality control</strong><br />
Partners catch blind spots and challenge assumptions.</li>
<li><strong>Simplified communication</strong><br />
One-to-one dialogue is more effective than group discussions.</li>
<li><strong>Shared ownership</strong><br />
Both participants develop a commitment to the solution.</li>
<li><strong>Knowledge transfer</strong><br />
Skills and insights flow naturally between disciplines.</li>
</ul>

<p>The ideal pair combines different perspectives &mdash; content and design, business and technical, expert and novice &mdash; creating a balanced approach that neither could achieve alone.</p>

<h2 id="creating-alignment-within-and-between-teams">Creating Alignment Within and Between Teams</h2>

<p>The Core Model excels at creating two crucial types of alignment:</p>

<h3 id="within-cross-functional-teams">Within Cross-Functional Teams</h3>

<p>Modern teams bring together diverse competencies:</p>

<ul>
<li>Content creators focus on messages and narrative.</li>
<li>Designers think about user experience and interfaces.</li>
<li>Developers consider technical implementation.</li>
<li>Business stakeholders prioritize organizational needs.</li>
</ul>

<p>The Core Model gives these specialists a common framework. Instead of the designer focusing only on interfaces or the developer only on code, everyone aligns around user tasks and business goals.</p>

<p>As one UX designer told me:</p>

<blockquote>“The Core Model changed our team dynamic completely. Instead of handing off wireframes to developers who didn’t understand the ‘why’ behind design decisions, we now share a common understanding of what we’re trying to accomplish.”</blockquote>

<h3 id="between-teams-across-the-customer-journey">Between Teams Across the Customer Journey</h3>

<p>Users don’t experience your organization in silos &mdash; they move across touchpoints and teams. The Core Model helps connect these experiences:</p>

<ul>
<li>Marketing teams understand how their campaigns connect to service delivery.</li>
<li>Product teams see how their features fit into larger user journeys.</li>
<li>Support teams gain context on user pathways and common issues.</li>
<li>Content teams create information that supports the entire journey.</li>
</ul>

<p>By mapping connections between cores (core flows), organizations create coherent experiences rather than fragmented interactions.</p>

<h2 id="breaking-down-organizational-barriers">Breaking Down Organizational Barriers</h2>

<p>The Core Model creates a neutral framework where various perspectives can contribute while maintaining a unified direction. This is particularly valuable in traditional organizational structures where content responsibility is distributed across departments.</p>

<h2 id="the-workshop-making-it-happen">The Workshop: Making It Happen</h2>

<p>The Core Model workshop brings these elements together in a practical format that can be adapted to different contexts and needs.</p>

<h3 id="workshop-format-and-timing">Workshop Format and Timing</h3>

<p>For complex projects with multiple stakeholders across organizational silos, the ideal format is a full-day (6&ndash;hour) workshop:</p>

<p><strong>First Hour: Foundation and Context</strong></p>

<ul>
<li>Introduction to the methodology (15 min).</li>
<li>Sharing user insights and business context (15 min).</li>
<li>Reviewing pre-workshop hypotheses (15 min).</li>
<li>Initial discussion and questions (15 min).</li>
</ul>

<p><strong>Hours 2&ndash;4: Core Mapping</strong></p>

<ul>
<li>Core pairs work on mapping elements (120 min).</li>
<li>Sharing between core pairs and in plenary between elements.</li>
<li>Facilitators provide guidance as needed.</li>
</ul>

<p><strong>Hours 5&ndash;6: Presentation, Discussion, and Action Planning</strong></p>

<ul>
<li>Each core pair presents its findings (depending on the number of cores).</li>
<li>Extensive group discussion and refinement.</li>
<li>Creating action cards and next steps.</li>
</ul>

<p>The format is highly flexible:</p>

<ul>
<li>Teams experienced with the methodology can conduct focused sessions in as little as 30 minutes.</li>
<li>Smaller projects might need only 2&ndash;3 hours.</li>
<li>Remote teams might split the workshop into multiple shorter sessions.</li>
</ul>

<h3 id="workshop-environment">Workshop Environment</h3>

<p>The Core Model workshop thrives in different environments:</p>

<ul>
<li><strong>Analog</strong>: Traditional approach using paper <a href="https://drive.google.com/file/d/18yT6Fv-fFmVqorWuezRSAraVj2ngCwXh/view?usp=sharing">core sheets</a>.</li>
<li><strong>Digital</strong>: Virtual workshops using <a href="https://coremodel.link/miro">Miro</a>, <a href="https://coremodel.link/mural">Mural</a>, <a href="https://coremodel.link/figjam">FigJam</a>, or similar platforms.</li>
<li><strong>Hybrid</strong>: Digital canvas in physical workshop, combining in-person interaction with digital documentation.</li>
</ul>

<p><strong>Note</strong>: <em>You can find all downloads and templates <a href="http://coremodel.link/templates">here</a>.</em></p>

<h3 id="core-pairs-the-key-to-success">Core Pairs: The Key to Success</h3>

<p>The composition of core pairs is critical to success:</p>

<ul>
<li>One person should know the solution domain well (subject matter expert).</li>
<li>The other brings a fresh perspective (and learns about a different domain).</li>
<li>This combination ensures both depth of knowledge and fresh thinking.</li>
<li>Cross-functional pairing creates natural knowledge transfer and breaks down silos.</li>
</ul>

<h3 id="workshop-deliverables">Workshop Deliverables</h3>

<p><strong>Important to note</strong>: The workshop doesn’t produce final solutions.</p>

<p>Instead, it creates a comprehensive brief containing the following:</p>

<ul>
<li>Priorities and context for content development.</li>
<li>Direction and ideas for design and user experience.</li>
<li>Requirements and specifications for functionality.</li>
<li>Action plan for implementation with clear ownership.</li>
</ul>

<p>This brief becomes the foundation for subsequent development work, ensuring everyone builds toward the same goal while leaving room for specialist expertise during implementation.</p>

<h2 id="getting-started-your-first-core-model-implementation">Getting Started: Your First Core Model Implementation</h2>

<p>Ready to apply the Core Model in your organization? Here’s how to begin:</p>

<h3 id="1-form-your-initial-hypothesis">1. Form Your Initial Hypothesis</h3>

<p>Before bringing everyone together:</p>

<ul>
<li>Identify a core where users struggle and the business impact is clear.</li>
<li>Gather available user insights and business objectives.</li>
<li>Form a hypothesis about what this core should accomplish.</li>
<li>Identify key stakeholders across relevant departments.</li>
</ul>

<h3 id="2-bring-together-the-right-core-pairs">2. Bring Together the Right Core Pairs</h3>

<p>Select participants who represent different perspectives:</p>

<ul>
<li>Content creators paired with designers.</li>
<li>Business experts paired with technical specialists.</li>
<li>Subject matter experts paired with user advocates.</li>
<li>Veterans paired with fresh perspectives.</li>
</ul>

<h3 id="3-follow-the-seven-questions">3. Follow the Seven Questions</h3>

<p>Guide core pairs through the process:</p>

<ul>
<li>Who are we trying to help, and what’s their situation?</li>
<li>What are they trying to accomplish?</li>
<li>What do we want to achieve?</li>
<li>How do they approach this need?</li>
<li>Where should they go next?</li>
<li>What’s the essential content or functionality?</li>
<li>What needs to be done to create this solution?</li>
</ul>

<h3 id="4-create-an-action-plan">4. Create an Action Plan</h3>

<p>Transform insights into concrete actions:</p>

<ul>
<li>Document specific next steps on action cards.</li>
<li>Assign clear ownership for each action.</li>
<li>Establish timeline and milestones.</li>
<li>Define how you’ll measure success.</li>
</ul>

<h2 id="in-conclusion-common-sense-in-a-structured-framework">In Conclusion: Common Sense In A Structured Framework</h2>

<p>The Core Model works because it combines common sense with structure &mdash; asking the right questions in the right order to ensure we address what actually matters.</p>

<p>By starting FROM the answer, not WITH the solution, teams <strong>avoid premature problem-solving</strong> and create digital experiences that <strong>truly serve user needs</strong> while achieving organizational goals.</p>

<p>Whether you’re managing a traditional website, creating multi-channel content, or developing digital products, this methodology provides a framework for better collaboration, clearer priorities, and more effective outcomes.</p>

<p><em>This article is a short adaptation of my book</em> <strong><em>The Core Model &mdash; A Common Sense to Digital Strategy and Design</em></strong>. <em>You can find information about the book and updated resources at <a href="http://thecoremodel.com/">thecoremodel.com</a>.</em></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>Carrie Webster</author><title>Collaboration: The Most Underrated UX Skill No One Talks About</title><link>https://www.smashingmagazine.com/2025/06/collaboration-most-underrated-ux-skill/</link><pubDate>Thu, 05 Jun 2025 08:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/06/collaboration-most-underrated-ux-skill/</guid><description>We often spotlight wireframes, research, or tools like Figma, but none of that moves the needle if we can’t collaborate well. Great UX doesn’t happen in isolation. It takes conversations with engineers, alignment with product, sales, and other stakeholders, as well as the ability to listen, adapt, and co-create. That’s where design becomes a team sport, and when your ability to capture the outcomes multiplies the UX impact.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/06/collaboration-most-underrated-ux-skill/" />
              <title>Collaboration: The Most Underrated UX Skill No One Talks About</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Collaboration: The Most Underrated UX Skill No One Talks About</h1>
                  
                    
                    <address>Carrie Webster</address>
                  
                  <time datetime="2025-06-05T08:00:00&#43;00:00" class="op-published">2025-06-05T08:00:00+00:00</time>
                  <time datetime="2025-06-05T08:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>When people talk about UX, it’s usually about the things they can see and interact with, like wireframes and prototypes, smart interactions, and design tools like Figma, Miro, or Maze. Some of the outputs are even glamorized, like design systems, research reports, and pixel-perfect UI designs. But here’s the truth I’ve seen again and again in over two decades of working in UX: none of that moves the needle if there is no collaboration.</p>

<p><strong>Great UX doesn’t happen in isolation.</strong> It happens through conversations with engineers, product managers, customer-facing teams, and the customer support teams who manage support tickets. Amazing UX ideas come alive in messy Miro sessions, cross-functional workshops, and those online chats (e.g., Slack or Teams) where people align, adapt, and co-create.</p>

<p>Some of the most impactful moments in my career weren’t when I was “designing” in the traditional sense. They have been gaining incredible insights when discussing problems with teammates who have varied experiences, brainstorming, and coming up with ideas that I never could have come up with on my own. As I always say, ten minds in a room will come up with ten times as many ideas as one mind. Often, many ideas are the most useful outcome.</p>

<p>There have been times when a team has helped to reframe a problem in a workshop, taken vague and conflicting feedback, and clarified a path forward, or I’ve sat with a sales rep and heard the same user complaint show up in multiple conversations. This is when <strong>design becomes a team sport</strong>, and when your ability to capture the outcomes multiplies the UX impact.</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="why-this-article-matters-now">Why This Article Matters Now</h2>

<p>The reason collaboration feels so urgent now is that the way we work since COVID has changed, according to a <a href="https://www.bls.gov/opub/btn/volume-13/remote-work-productivity.htm">study published by the US Department of Labor</a>. Teams are more cross-functional, often remote, and increasingly complex. Silos are easier to fall into, due to distance or lack of face-to-face contact, and yet alignment has never been more important. We can’t afford to see collaboration as a “nice to have” anymore. It’s a <strong>core skill</strong>, especially in UX, where our work touches so many parts of an organisation.</p>

<p>Let’s break down what collaboration in UX really means, and why it deserves way more attention than it gets.</p>

<h2 id="what-is-collaboration-in-ux-really">What Is Collaboration In UX, Really?</h2>

<p>Let’s start by clearing up a misconception. Collaboration is not the same as cooperation.</p>

<ul>
<li><strong>Cooperation</strong>: “You do your thing, I’ll do mine, and we’ll check in later.”</li>
<li><strong>Collaboration</strong>: “Let’s figure this out together and co-own the outcome.”</li>
</ul>

<p>Collaboration, as defined in the <a href="https://oercollective.caul.edu.au/communication-concepts/chapter/defining-collaboration/">book Communication Concepts</a>, published by Deakin University, involves <strong>working with others to produce outputs</strong> and/or achieve shared goals. The outcome of collaboration is typically a tangible product or a measurable achievement, such as solving a problem or making a decision. Here’s an example from a recent project:</p>

<p>Recently, I worked on a fraud alert platform for a fintech business. It was a six-month project, and we had zero access to users, as the product had not yet hit the market. Also, the users were highly specialised in the B2B finance space and were difficult to find. Additionally, the team members I needed to collaborate with were based in Malaysia and Melbourne, while I am located in Sydney.</p>

<p>Instead of treating that as a dead end, we turned inward: collaborating with subject matter experts, professional services consultants, compliance specialists, and customer support team members who had deep knowledge of fraud patterns and customer pain points. Through bi-weekly workshops using a Miro board, iterative feedback loops, and sketching sessions, we worked on <strong>design solution options</strong>. I even asked them to present their own design version as part of the process.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/1-miro-board.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="364"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/1-miro-board.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/1-miro-board.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/1-miro-board.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/1-miro-board.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/1-miro-board.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/1-miro-board.png"
			
			sizes="100vw"
			alt="A Miro board with design solutions"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      This Miro board shows a series of design solutions created by team members as part of a design thinking workshop. It was conducted online. (<a href='https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/1-miro-board.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>After months of iterating on the fraud investigation platform through these collaboration sessions, I ended up with two different design frameworks for the investigator’s dashboard. Instead of just presenting the “best one” and hoping for buy-in, I ran a voting exercise with PMs, engineers, SMEs, and customer support. Everyone had a voice. The winning design was created and validated with the input of the team, resulting in an outcome that solved many problems for the end user and was <strong>owned by the entire team</strong>. That’s collaboration!</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/2-miro-board-design-collaboration-workshops.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="421"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/2-miro-board-design-collaboration-workshops.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/2-miro-board-design-collaboration-workshops.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/2-miro-board-design-collaboration-workshops.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/2-miro-board-design-collaboration-workshops.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/2-miro-board-design-collaboration-workshops.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/2-miro-board-design-collaboration-workshops.png"
			
			sizes="100vw"
			alt="Miro board with design collaboration workshops"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Multiple and ongoing design collaboration workshops as captured in this Miro board. Stakeholders could also return and comment at their convenience. (<a href='https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/2-miro-board-design-collaboration-workshops.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>It is definitely one of the most satisfying projects of my career.</p>

<p>On the other hand, I recently caught up with an old colleague who now serves as a product owner. Her story was a cautionary tale: the design team had gone ahead with a major redesign of an app without looping her in until late in the game. Not surprisingly, the new design missed several key product constraints and business goals. It had to be scrapped and redone, with her now at the table. That experience reinforced what we all know deep down: your best work rarely happens in isolation.</p>

<p>As illustrated in my experience, <strong>true collaboration can span many roles</strong>. It’s not just between designers and PMs. It can also include QA testers who identify real-world issues, content strategists who ensure our language is clear and inclusive, sales representatives who interact with customers on a daily basis, marketers who understand the brand’s voice, and, of course, customer support agents who are often the first to hear when something goes wrong. The best outcomes arrive when we’re open to <strong>different perspectives and inputs</strong>.</p>

<h2 id="why-collaboration-is-so-overlooked">Why Collaboration Is So Overlooked?</h2>

<p>If collaboration is so powerful, why don’t we talk about it more?</p>

<p>In my experience, one reason is the <a href="https://socialinnovationsjournal.org/editions/75-disruptive-innovations/2908-let-s-bust-the-lone-hero-myth-the-role-of-collective-leadership-in-systems-change#:~:text=It%20requires%20an%20understanding%20of,affected%20by%20the%20targeted%20issue.">myth of the “lone UX hero”</a>.  Many of us entered the field inspired by stories of design geniuses revolutionising products on their own. Our portfolios often reflect that as well. We showcase our solo work, our processes, and our wins. Job descriptions often reinforce the idea of the solo UX designer, listing tool proficiency and deliverables more than soft skills and team dynamics.</p>

<p>And then there’s the team culture within many organisations of “just get the work done”, which often leads to fewer meetings and tighter deadlines. As a result, a sense of collaboration is inefficient and wasted. I have also experienced working with some designers where perfectionism and territoriality creep in &mdash; “This is my design” &mdash; which kills the open, communal spirit that collaboration needs.</p>

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

<h2 id="when-collaboration-is-the-user-research">When Collaboration Is The User Research</h2>

<p>In an ideal world, we’d always have direct access to users. But let’s be real. Sometimes that just doesn’t happen. Whether it’s due to budget constraints, time limitations, or layers of bureaucracy, talking to end users isn’t always possible. That’s where collaboration with team members becomes even more crucial.</p>

<p>The next best thing to talking to users? Talking to the people who talk to users. Sales teams, customer success reps, tech support, and field engineers. They’re all user researchers in disguise!</p>

<p>On another B2C project, the end users were having trouble completing the key task. My role was to redesign the onboarding experience for an online identity capture tool for end users. I was unable to schedule interviews with end users due to budget and time constraints, so I turned to the sales and tech support teams.</p>

<p>I conducted multiple mini-workshops to identify the most common onboarding issues they had heard directly from our customers. This led to a huge “aha” moment: most users dropped off before the document capture process. They may have been struggling with a lack of instruction, not knowing the required time, or not understanding the steps involved in completing the onboarding process.</p>

<p>That insight reframed my approach, and we ultimately redesigned the flow to prioritize orientation and clear instructions before proceeding to the setup steps. Below is an example of one of the screen designs, including some of the instructions we added.</p>














<figure class="
  
  
  ">
  
    <a href="https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/3-screen-design.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="885"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/3-screen-design.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/3-screen-design.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/3-screen-design.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/3-screen-design.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/3-screen-design.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/3-screen-design.png"
			
			sizes="100vw"
			alt="A screen design"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      The screen design above includes some of the instructions we added after our design workshop outcomes. (<a href='https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/3-screen-design.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>This kind of collaboration <em>is</em> user research. It’s not a substitute for talking to users directly, but it’s a <strong>powerful proxy</strong> when you have limited options.</p>

<h2 id="but-what-about-using-ai">But What About Using AI?</h2>

<p>Glad you asked! Even AI tools, which are increasingly being used for idea generation, pattern recognition, or rapid prototyping, don’t replace collaboration; they just change the shape of it.</p>

<p>AI can help you explore design patterns, draft user flows, or generate multiple variations of a layout in seconds. It’s fantastic for getting past creative blocks or pressure-testing your assumptions. But let’s be clear: these tools are accelerators, not oracles. As an innovation and strategy consultant <a href="https://www.linkedin.com/pulse/team-collaboration-does-ai-help-hinder-nathan-waterhouse-canse/">Nathan Waterhouse points out</a>, AI can point you in a direction, but it can’t tell you which direction is the <em>right</em> one in your specific context. That still requires human judgment, empathy, and an understanding of the messy realities of users and business goals.</p>

<p>You still need people, especially those closest to your users, to validate, challenge, and evolve any AI-generated idea. For instance, you might use ChatGPT to brainstorm onboarding flows for a SaaS tool, but if you’re not involving customer support reps who regularly hear <em>“I didn’t know where to start”</em> or <em>“I couldn’t even log in,”</em> you’re just working with assumptions. The same applies to engineers who know what is technically feasible or PMs who understand where the business is headed.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aAI%20can%20generate%20ideas,%20but%20only%20collaboration%20turns%20those%20ideas%20into%20something%20usable,%20valuable,%20and%20real.%20Think%20of%20it%20as%20a%20powerful%20ingredient,%20but%20not%20the%20whole%20recipe.%0a&url=https://smashingmagazine.com%2f2025%2f06%2fcollaboration-most-underrated-ux-skill%2f">
      
AI can generate ideas, but only collaboration turns those ideas into something usable, valuable, and real. Think of it as a powerful ingredient, but not the whole recipe.

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

<h2 id="how-to-strengthen-your-ux-collaboration-skills">How To Strengthen Your UX Collaboration Skills?</h2>

<p>If collaboration doesn’t come naturally or hasn’t been a focus, that’s okay. Like any skill, it can be practiced and improved. Here are a few ways to level up:</p>

<ol>
<li><strong>Cultivate curiosity about your teammates.</strong><br />
Ask engineers what keeps them up at night. Learn what metrics your PMs care about. Understand the types of tickets the support team handles most frequently. The more you care about their challenges, the more they&rsquo;ll care about yours.</li>
<li><strong>Get comfortable facilitating.</strong><br />
You don’t need to be a certified Design Sprint master, but learning how to run a structured conversation, align stakeholders, or synthesize different points of view is hugely valuable. Even a simple “What’s working? What’s not?” retro can be an amazing starting point in identifying where you need to focus next.</li>
<li><strong>Share early, share often.</strong><br />
Don’t wait until your designs are polished to get input. Messy sketches and rough prototypes invite collaboration. When others feel like they’ve helped shape the work, they’re more invested in its success.</li>
<li><strong>Practice active listening.</strong><br />
When someone critiques your work, don’t immediately defend. Pause. Ask follow-up questions. Reframe the feedback. Collaboration isn’t about consensus; it’s about finding a shared direction that can honour multiple truths.</li>
<li><strong>Co-own the outcome.</strong><br />
Let go of your ego. The best UX work isn’t “your” work. It’s the result of many voices, skill sets, and conversations converging toward a solution that helps users. It’s not “I”, it’s “we” that will solve this problem together.</li>
</ol>

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

<h2 id="conclusion-ux-is-a-team-sport">Conclusion: UX Is A Team Sport</h2>

<p>Great design doesn’t emerge from a vacuum. It comes from <strong>open dialogue</strong>, <strong>cross-functional understanding</strong>, and a <strong>shared commitment</strong> to solving real problems for real people.</p>

<p>If there’s one thing I wish every early-career designer knew, it’s this:</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aCollaboration%20is%20not%20a%20side%20skill.%20It%e2%80%99s%20the%20engine%20behind%20every%20meaningful%20design%20outcome.%20And%20for%20seasoned%20professionals,%20it%e2%80%99s%20the%20superpower%20that%20turns%20good%20teams%20into%20great%20ones.%0a&url=https://smashingmagazine.com%2f2025%2f06%2fcollaboration-most-underrated-ux-skill%2f">
      
Collaboration is not a side skill. It’s the engine behind every meaningful design outcome. And for seasoned professionals, it’s the superpower that turns good teams into great ones.

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

<p>So next time you’re tempted to go heads-down and just “crank out a design,” pause to reflect. Ask who else should be in the room. And invite them in, not just to review your work, but to help create it.</p>

<p>Because in the end, the best UX isn’t just what you make. It’s what you make <em>together</em>.</p>

<h3 id="further-reading-on-smashingmag">Further Reading On SmashingMag</h3>

<ul>
<li>“<a href="https://www.smashingmagazine.com/2024/06/presenting-ux-research-design-stakeholders/">Presenting UX Research And Design To Stakeholders: The Power Of Persuasion</a>,” Victor Yocco</li>
<li>“<a href="https://www.smashingmagazine.com/2024/05/transforming-relationship-between-designers-developers/">Transforming The Relationship Between Designers And Developers</a>,” Chris Day</li>
<li>“<a href="https://www.smashingmagazine.com/2022/10/effective-communication-everyday-meetings/">Effective Communication For Everyday Meetings</a>,” Andrii Zhdan</li>
<li>“<a href="https://www.smashingmagazine.com/2022/04/ux-integrated-design-workflows/">Preventing Bad UX Through Integrated Design Workflows</a>,” Ceara Crawshaw</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>Nikita Samutin</author><title>Why Designers Get Stuck In The Details And How To Stop</title><link>https://www.smashingmagazine.com/2025/06/why-designers-get-stuck-in-details/</link><pubDate>Tue, 03 Jun 2025 14:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/06/why-designers-get-stuck-in-details/</guid><description>Designers love to craft, but polishing pixels before the problem is solved is a time-sink. This article pinpoints the five traps that lure us into premature detail — being afraid to show rough work, fixing symptoms instead of causes, solving the wrong problem, drowning in unactionable feedback, and plain fatigue — then hands you a four-step rescue plan to refocus on goals, ship faster, and keep your craft where it counts.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/06/why-designers-get-stuck-in-details/" />
              <title>Why Designers Get Stuck In The Details And How To Stop</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Why Designers Get Stuck In The Details And How To Stop</h1>
                  
                    
                    <address>Nikita Samutin</address>
                  
                  <time datetime="2025-06-03T14:00:00&#43;00:00" class="op-published">2025-06-03T14:00:00+00:00</time>
                  <time datetime="2025-06-03T14:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>You’ve drawn fifty versions of the same screen &mdash; and you still hate every one of them. Begrudgingly, you pick three, show them to your product manager, and hear: <em>“Looks cool, but the idea doesn’t work.”</em> Sound familiar?</p>

<p>In this article, I’ll unpack why designers fall into detail work at the wrong moment, examining both process pitfalls and the underlying psychological reasons, as understanding these traps is the first step to overcoming them. I’ll also share tactics I use to climb out of that trap.</p>

<h2 id="reason-1-you-re-afraid-to-show-rough-work">Reason #1 You’re Afraid To Show Rough Work</h2>

<p>We designers worship detail. We’re taught that true craft equals razor‑sharp typography, perfect grids, and pixel precision. So the minute a task arrives, we pop open Figma and start polishing long before polish is needed.</p>

<p>I’ve skipped the sketch phase more times than I care to admit. I told myself it would be faster, yet I always ended up spending hours producing a tidy mock‑up when a scribbled thumbnail would have sparked a five‑minute chat with my product manager. Rough sketches felt “unprofessional,” so I hid them.</p>

<p>The cost? Lost time, wasted energy &mdash; and, by the third redo, teammates were quietly wondering if I even understood the brief.</p>

<p>The real problem here is the <strong>habit</strong>: we open Figma and start perfecting the UI before we’ve even solved the problem.</p>

<p>So why do we hide these rough sketches? It’s not just a bad habit or plain silly. There are solid <strong>psychological reasons</strong> behind it. We often just call it perfectionism, but it’s deeper than wanting things neat. Digging into the psychology (like the <a href="https://positivepsychology.com/perfectionism/">research by Hewitt and Flett</a>) shows there are a couple of flavors driving this:</p>

<ul>
<li><strong>Socially prescribed perfectionism</strong><br />
It’s that nagging feeling that everyone else expects perfect work from you, which makes showing anything rough feel like walking into the lion’s den.</li>
<li><strong>Self-oriented perfectionism</strong><br />
Where you’re the one setting impossibly high standards for yourself, leading to brutal self-criticism if anything looks slightly off.</li>
</ul>

<p>Either way, the result’s the same: showing unfinished work feels wrong, and you miss out on that vital early feedback.</p>

<p>Back to the design side, remember that clients rarely see architects’ first pencil sketches, but these sketches still exist; they guide structural choices before the 3D render. Treat your thumbnails the same way &mdash; artifacts meant to collapse uncertainty, not portfolio pieces. Once stakeholders see the upside, roughness becomes a badge of speed, not sloppiness. So, the key is to consciously make that shift:</p>

<blockquote>Treat early sketches as disposable tools for thinking and actively share them to get feedback faster.</blockquote>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-designers-get-stuck-in-details/mockup-early.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/why-designers-get-stuck-in-details/mockup-early.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-designers-get-stuck-in-details/mockup-early.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-designers-get-stuck-in-details/mockup-early.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-designers-get-stuck-in-details/mockup-early.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-designers-get-stuck-in-details/mockup-early.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-designers-get-stuck-in-details/mockup-early.png"
			
			sizes="100vw"
			alt="A low-fidelity mockup of a photo upload interface for a car listing, used to discuss functionality with the product manager."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      A rough mockup shared with the product manager. Is it pretty? Not really. Does it solve the problem? Absolutely. (<a href='https://files.smashing.media/articles/why-designers-get-stuck-in-details/mockup-early.png'>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>Roll up your sleeves and <strong>boost your UX skills</strong>! Meet <strong><a data-instant href="https://smart-interface-design-patterns.com/">Smart Interface Design Patterns</a></strong>&nbsp;🍣, a 10h video library by Vitaly Friedman. <strong>100s of real-life examples</strong> and live UX training. <a href="https://www.youtube.com/watch?v=3mwZztmGgbE">Free preview</a>.</p>
<a data-instant href="https://smart-interface-design-patterns.com/" 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://smart-interface-design-patterns.com/" 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/3155f571-450d-42f9-81b4-494aa9b52841/video-course-smart-interface-design-patterns-vitaly-friedman.avif" />
<img
    loading="lazy"
    decoding="async"
    class="feature-panel-image-img"
    src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8c98e7f9-8e62-4c43-b833-fc6bf9fea0a9/video-course-smart-interface-design-patterns-vitaly-friedman.jpg"
    alt="Feature Panel"
    width="690"
    height="790"
/>
</picture>
</div>
</a>
</div>
</aside>
</div>

<h2 id="reason-2-you-fix-the-symptom-not-the-cause">Reason #2: You Fix The Symptom, Not The Cause</h2>

<p>Before tackling any task, we need to understand what business outcome we’re aiming for. Product managers might come to us asking to enlarge the payment button in the shopping cart because users aren’t noticing it. The suggested solution itself isn’t necessarily bad, but before redesigning the button, we should ask, <em>“What data suggests they aren’t noticing it?”</em> Don’t get me wrong, I’m not saying you shouldn’t trust your product manager. On the contrary, these questions help ensure you’re on the same page and working with the same data.</p>

<p>From my experience, here are several reasons why users might not be clicking that coveted button:</p>

<ul>
<li>Users don’t understand that this step is for payment.</li>
<li>They understand it’s about payment but expect order confirmation first.</li>
<li>Due to incorrect translation, users don’t understand what the button means.</li>
<li>Lack of trust signals (no security icons, unclear seller information).</li>
<li>Unexpected additional costs (hidden fees, shipping) that appear at this stage.</li>
<li>Technical issues (inactive button, page freezing).</li>
</ul>

<p>Now, imagine you simply did what the manager suggested. Would you have solved the problem? Hardly.</p>

<p>Moreover, the responsibility for the unresolved issue would fall on you, as the interface solution lies within the design domain. The product manager actually did their job correctly by identifying a problem: suspiciously, few users are clicking the button.</p>

<p>Psychologically, taking on this bigger role isn’t easy. It means overcoming the <a href="https://positivepsychology.com/fear-of-failure/">fear of making mistakes</a> and the discomfort of exploring unclear problems rather than just doing tasks. This shift means seeing ourselves as <strong>partners who create value</strong>  &mdash; even if it means fighting a hesitation to question product managers (which might come from a fear of speaking up or a desire to <a href="https://ideasforleaders.com/Ideas/overcoming-our-evolutionary-fears-to-speak-up-to-authority/">avoid challenging authority</a>) &mdash; and understanding that using our <strong>product logic expertise</strong> proactively is crucial for modern designers.</p>

<p>There’s another critical reason why we, designers, need to be a bit like product managers: the rise of AI. I deliberately used a simple example about enlarging a button, but I’m confident that in the near future, AI will easily handle routine design tasks. This worries me, but at the same time, I’m already gladly stepping into the product manager’s territory: understanding product and business metrics, formulating hypotheses, conducting research, and so on. It might sound like I’m taking work away from PMs, but believe me, they undoubtedly have enough on their plates and are usually more than happy to delegate some responsibilities to designers.</p>

<h2 id="reason-3-you-re-solving-the-wrong-problem">Reason #3: You’re Solving The Wrong Problem</h2>

<p>Before solving anything, ask whether the problem even deserves your attention.</p>

<p>During a major home‑screen redesign, our goal was to drive more users into paid services. The initial hypothesis &mdash; making service buttons bigger and brighter might help returning users &mdash; seemed reasonable enough to test. However, even when A/B tests (a method of comparing two versions of a design to determine which performs better) showed minimal impact, we continued to tweak those buttons.</p>

<p>Only later did it click: the home screen isn’t the place to sell; visitors open the app to start, not to buy. We removed that promo block, and nothing broke. Contextual entry points deeper into the journey performed brilliantly. Lesson learned:</p>

<blockquote>Without the right context, any visual tweak is lipstick on a pig.</blockquote>

<p>Why did we get stuck polishing buttons instead of stopping sooner? It’s easy to get tunnel vision. Psychologically, it’s likely the good old <a href="https://en.wikipedia.org/wiki/Sunk_cost#Loss_aversion_and_the_sunk_cost_fallacy">sunk cost fallacy</a> kicking in: we’d already invested time in the buttons, so stopping felt like wasting that effort, even though the data wasn’t promising.</p>

<p>It’s just easier to keep fiddling with something familiar than to admit we need a new plan. Perhaps the simple question I should have asked myself <em>when results stalled</em> was: <em>“Are we optimizing the right thing or just polishing something that fundamentally doesn’t fit the user’s primary goal here?”</em> That alone might have saved hours.</p>

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

<h2 id="reason-4-you-re-drowning-in-unactionable-feedback">Reason #4: You’re Drowning In Unactionable Feedback</h2>

<p>We all discuss our work with colleagues. But here’s a crucial point: what kind of question do you pose to kick off that discussion? If your go-to is “What do you think?” well, that question might lead you down a rabbit hole of personal opinions rather than actionable insights. While experienced colleagues will cut through the noise, others, unsure what to evaluate, might comment on anything and everything &mdash; fonts, button colors, even when you desperately need to discuss a user flow.</p>

<p>What matters here are two things:</p>

<ol>
<li>The <strong>question</strong> you ask,</li>
<li>The <strong>context</strong> you give.</li>
</ol>

<p>That means clearly stating the problem, what you’ve learned, and how your idea aims to fix it.</p>

<p>For instance:</p>

<blockquote>“The problem is our payment conversion rate has dropped by X%. I’ve interviewed users and found they abandon payment because they don’t understand how the total amount is calculated. My solution is to show a detailed cost breakdown. Do you think this actually solves the problem for them?”</blockquote>

<p>Here, you’ve stated the problem (conversion drop), shared your insight (user confusion), explained your solution (cost breakdown), and asked a direct question. It’s even better if you prepare a list of specific sub-questions. For instance: “Are all items in the cost breakdown clear?” or “Does the placement of this breakdown feel intuitive within the payment flow?”</p>

<p>Another good habit is to keep your rough sketches and previous iterations handy. Some of your colleagues’ suggestions might be things you’ve already tried. It’s great if you can discuss them immediately to either revisit those ideas or definitively set them aside.</p>

<p>I’m not a psychologist, but experience tells me that, psychologically, the reluctance to be this specific often stems from a fear of our solution being rejected. We tend to internalize feedback: a seemingly innocent comment like, <em>“Have you considered other ways to organize this section?”</em> or <em>“Perhaps explore a different structure for this part?”</em> can instantly morph in our minds into <em>“You completely messed up the structure. You’re a bad designer.”</em> <a href="https://www.psychologytoday.com/us/basics/imposter-syndrome">Imposter syndrome</a>, in all its glory.</p>

<p>So, to wrap up this point, here are two recommendations:</p>

<ol>
<li><strong>Prepare for every design discussion.</strong><br />
A couple of focused questions will yield far more valuable input than a vague <em>“So, what do you think?”</em>.</li>
<li><strong>Actively work on separating feedback on your design from your self-worth.</strong><br />
If a mistake is pointed out, acknowledge it, learn from it, and you’ll be less likely to repeat it. This is often easier said than done. For me, it took years of working with a psychotherapist. If you struggle with this, I sincerely wish you strength in overcoming it.</li>
</ol>

<h2 id="reason-5-you-re-just-tired">Reason #5 You’re Just Tired</h2>

<p>Sometimes, the issue isn’t strategic at all &mdash; it’s fatigue. Fussing over icon corners can feel like a cozy bunker when your brain is fried. There’s a name for this: <strong>decision fatigue</strong>. Basically, your brain’s battery for hard thinking is low, so it hides out in the easy, comfy zone of pixel-pushing.</p>

<p>A striking example comes from a New York Times article titled “<a href="https://www.nytimes.com/2011/08/21/magazine/do-you-suffer-from-decision-fatigue.html">Do You Suffer From Decision Fatigue?</a>.” It described how judges deciding on release requests were far more likely to grant release early in the day (about 70% of cases) compared to late in the day (less than 10%) simply because their decision-making energy was depleted. Luckily, designers rarely hold someone’s freedom in their hands, but the example dramatically shows how fatigue can impact our judgment and productivity.</p>

<p><strong>What helps here:</strong></p>

<ul>
<li><strong>Swap tasks.</strong><br />
Trade tickets with another designer; novelty resets your focus.</li>
<li><strong>Talk to another designer.</strong><br />
If NDA permits, ask peers outside the team for a sanity check.</li>
<li><strong>Step away.</strong><br />
Even a ten‑minute walk can do more than a double‑shot espresso.</li>
</ul>

<p>By the way, I came up with these ideas while walking around my office. I was lucky to work near a river, and those short walks quickly turned into a helpful habit.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/why-designers-get-stuck-in-details/river-break.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/why-designers-get-stuck-in-details/river-break.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/why-designers-get-stuck-in-details/river-break.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/why-designers-get-stuck-in-details/river-break.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/why-designers-get-stuck-in-details/river-break.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/why-designers-get-stuck-in-details/river-break.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/why-designers-get-stuck-in-details/river-break.png"
			
			sizes="100vw"
			alt="A quiet riverside at sunset — a peaceful spot to recharge"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Not quite magical, but this spot helped me reset. (<a href='https://files.smashing.media/articles/why-designers-get-stuck-in-details/river-break.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>And one more trick that helps me snap out of detail mode early: if I catch myself making around 20 little tweaks &mdash; changing font weight, color, border radius &mdash; I just stop. Over time, it turned into a habit. I have a similar one with Instagram: by the third reel, my brain quietly asks, <em>“Wait, weren’t we working?”</em> Funny how that kind of nudge saves a ton of time.</p>

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

<h2 id="four-steps-i-use-to-avoid-drowning-in-detail">Four Steps I Use to Avoid Drowning In Detail</h2>

<p>Knowing these potential traps, here’s the practical process I use to stay on track:</p>

<h3 id="1-define-the-core-problem-business-goal">1. Define the Core Problem &amp; Business Goal</h3>

<p>Before anything, dig deep: what’s the actual problem we’re solving, not just the requested task or a surface-level symptom? Ask ‘why’ repeatedly. What user pain or business need are we addressing? Then, state the clear business goal: <em>“What metric am I moving, and do we have data to prove this is the right lever?”</em> If retention is the goal, decide whether push reminders, gamification, or personalised content is the best route. The wrong lever, or tackling a symptom instead of the cause, dooms everything downstream.</p>

<h3 id="2-choose-the-mechanic-solution-principle">2. Choose the Mechanic (Solution Principle)</h3>

<p>Once the core problem and goal are clear, lock the solution principle or ‘mechanic’ first. Going with a game layer? Decide if it’s leaderboards, streaks, or badges. Write it down. Then move on. No UI yet. This keeps the focus high-level before diving into pixels.</p>

<h3 id="3-wireframe-the-flow-get-focused-feedback">3. Wireframe the Flow &amp; Get Focused Feedback</h3>

<p>Now open Figma. Map screens, layout, and transitions. Boxes and arrows are enough. Keep the fidelity low so the discussion stays on the flow, not colour. Crucially, when you share these early wires, ask specific questions and provide clear context (as discussed in ‘Reason #4’) to get actionable feedback, not just vague opinions.</p>

<h3 id="4-polish-the-visuals-mindfully">4. Polish the Visuals (Mindfully)</h3>

<p>I only let myself tweak grids, type scales, and shadows after the flow is validated. If progress stalls, or before a major polish effort, I surface the work in a design critique &mdash; again using targeted questions and clear context &mdash; instead of hiding in version 47. This ensures detailing serves the now-validated solution.</p>

<p>Even for something as small as a single button, running these four checkpoints takes about ten minutes and saves hours of decorative dithering.</p>

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

<p>Next time you feel the pull to vanish into mock‑ups before the problem is nailed down, <strong>pause and ask what you might be avoiding</strong>. Yes, that can expose an uncomfortable truth. But pausing to ask what you might be avoiding &mdash; maybe the fuzzy core problem, or just asking for tough feedback &mdash; gives you the power to face the real issue head-on. It keeps the project focused on solving the right problem, not just perfecting a flawed solution.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aAttention%20to%20detail%20is%20a%20superpower%20when%20used%20at%20the%20right%20moment.%20Obsessing%20over%20pixels%20too%20soon,%20though,%20is%20a%20bad%20habit%20and%20a%20warning%20light%20telling%20us%20the%20process%20needs%20a%20rethink.%0a&url=https://smashingmagazine.com%2f2025%2f06%2fwhy-designers-get-stuck-in-details%2f">
      
Attention to detail is a superpower when used at the right moment. Obsessing over pixels too soon, though, is a bad habit and a warning light telling us the process needs a rethink.

    </a>
  </p>
  <div class="pull-quote__quotation">
    <div class="pull-quote__bg">
      <span class="pull-quote__symbol">“</span></div>
  </div>
</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>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">2025-12-25T10:32:38+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>Eric Olive</author><title>Fewer Ideas: An Unconventional Approach To Creativity</title><link>https://www.smashingmagazine.com/2025/05/fewer-ideas-unconventional-approach-creativity/</link><pubDate>Thu, 15 May 2025 10:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/05/fewer-ideas-unconventional-approach-creativity/</guid><description>Remember that last team brainstorming session where you were supposed to generate a long list of brilliant ideas? How many of those ideas actually stuck? Did leadership act on any of those ideas? In this article, Eric Olive challenges the value of exercises like brainstorming and explores more effective methods for sparking creativity to improve design and enhance the user’s experience.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/05/fewer-ideas-unconventional-approach-creativity/" />
              <title>Fewer Ideas: An Unconventional Approach To Creativity</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>Fewer Ideas: An Unconventional Approach To Creativity</h1>
                  
                    
                    <address>Eric Olive</address>
                  
                  <time datetime="2025-05-15T10:00:00&#43;00:00" class="op-published">2025-05-15T10:00:00+00:00</time>
                  <time datetime="2025-05-15T10:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>What do the Suez Canal, the Roman Goddess Libertas, and ancient Egyptian sculptures have in common? The Statue of Liberty.</p>

<p>Surprising? Sure, but the connections make sense when you know the story as recounted by Columbia University psychologist Sheena Iyengar on a recent episode of <em>Hidden Brain</em>.</p>

<p>The French artist Frédéric Bartholdi drew inspiration from Egyptian sculptures when he submitted a design for a sculpture that was going to be built at the Suez Canal.</p>

<p>That plan for the Suez Canal sculpture fell through, leading Bartholdi and a friend to raise money to create a sculpture as a gift to the United States. Bartholdi designed the sculpture after studying the intricacies of the Roman Goddess Libertas, a significant female icon in the late 1800s. He also modeled the statue on Isabelle Boyer, who was 36 years old in 1878. Finally, Bartholdi incorporated his mother’s face into the proposed design. The result? The Statue of Liberty.</p>

<p>Bartholdi’s unorthodox yet methodical approach yielded one of the most famous sculptures in the world.</p>

<p>How did he do it? Did he let his mind run wild? Did he generate endless lists or draw hundreds of plans for each sculpture? Was he a 19th-century brainstorming advocate?</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="the-problem">The Problem</h2>

<p>“Yes,” would be the answer of many innovation experts today. From stand-ups to workshops and templates to whiteboards, getting the creative juices flowing often involves brainstorming along with the reminder that <em>“there are no bad ideas”</em> and <em>“more ideas are better.”</em> Practiced and repeated so often, this approach to creativity must work, right?</p>

<p>Wrong, says Iyengar. <strong>Too many ideas hinder creativity</strong> because the human brain can only manage a few ideas at once.</p>

<blockquote>“Creativity requires you to have a bunch of pieces and to not only be able to have them in your memory bank in a way that you can kind of say what they are, but to be able to keep manipulating them in lots of different ways. And that means, you know, in order for your mind to be able to be facile enough to do that, it is going to need fewer pieces.”<br /><br />&mdash; Hidden Brain, “<a href="https://hiddenbrain.org/podcast/how-to-be-more-creative/">How to be more creative</a>”</blockquote>

<p>Evidence for this view includes <a href="https://journals.sagepub.com/doi/abs/10.1509/jmr.10.0407?journalCode=mrja">a study published by Anne-Laure Sellier of HEC Paris and Darren W. Dahl of British Columbia</a>. The authors compared knitting and crafting in two experimental studies. The results suggested that <strong>restricting the number of materials and other creative inputs enhanced the creativity</strong> of study participants. The reason was the participants’ ability to enjoy the creative process more, which enhanced their creative output.</p>

<p>A few years ago, I had a similar experience while planning a series of studies. As with any initiative, identifying the scope was key. The problem? Rather than choose from two or three well-defined options, the team discussed several themes at once and then piled on a series of ideas about the best format for presenting these themes: Lists, tables, graphs, images, and flowcharts. The results looked something like this.</p>














<figure class="
  
  
  ">
  
    <a href="https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/1-messy-whiteboard.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/fewer-ideas-unconventional-approach-creativity/1-messy-whiteboard.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/1-messy-whiteboard.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/1-messy-whiteboard.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/1-messy-whiteboard.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/1-messy-whiteboard.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/1-messy-whiteboard.png"
			
			sizes="100vw"
			alt="A messy whiteboard"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Traditional brainstorming leads to a messy whiteboard. (<a href='https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/1-messy-whiteboard.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>A messy whiteboard is not inherently bad. The question is whether brainstorming results like these block or enhance creativity. If the board above seems overwhelming, it’s worth considering a more structured process for creativity and idea generation.</p>

<h2 id="the-solution-three-ways-to-enhance-creativity">The Solution: Three Ways To Enhance Creativity</h2>

<p>Just as Bartholdi approached his designs methodically, designers today can benefit from limits and structure.</p>

<p>In this article, I’ll shed light on three techniques that enhance creativity:</p>

<ul>
<li><a href="#tip-1-controlled-curiosity">Controlled curiosity</a></li>
<li><a href="#tip-2-imposing-constraints-and-making-a-plan">Imposing constraints and making a plan</a></li>
<li><a href="#tip-3-look-to-other-domains">Look to other domains</a></li>
</ul>

<h3 id="tip-1-controlled-curiosity">Tip 1: Controlled Curiosity</h3>

<p>In today’s world, it’s easy to fall into the trap of believing that creativity comes from simply exposing yourself to a flood of information &mdash; scrolling endlessly, consuming random facts, and filling your mind with disconnected data points. It’s a trap because mindless absorption of information without understanding the purpose or deeper context won’t make you more creative.</p>

<p>True creativity is fueled by curiosity, the drive to know more. Curiosity is powerful because it acts as an internal compass, guiding our search for knowledge with intention.</p>

<blockquote>When you’re curious, you don’t just passively take in information; you actively seek it with a <strong>purpose</strong>.</blockquote>

<p>You have a question in mind, a direction, a reason that shapes the way you explore. This sense of purpose transforms information from a chaotic influx of data into structured, meaningful insights that the brain can organize, categorize, and retrieve when needed.</p>

<p>In my role as a user experience (UX) researcher, I recently needed to review 100+ internal and industry research papers to establish and understand what was already known about a specific subject. The challenge was how to sort, organize, and absorb this information without feeling overwhelmed. Was it better to leverage AI tools like Gemini or ChatGPT to summarize this body of knowledge? How reliable would these summaries be? Was it better to read the executive summaries and copy a few themes to include in a synopsis of all of these papers? What was the best way to organize this information? Which tool should I use to summarize and organize?</p>

<p>Faced with a tight deadline and mounting stress, I paused to reassess. To avoid spiraling, I asked: <em>What are the core objectives of this research review?</em> I then defined three key goals:</p>

<ol>
<li>Extract three to five themes to present to several internal teams.</li>
<li>Craft a research plan pegged to these themes.</li>
<li>Leverage these themes to inform a series of screens that the design team would create to test with real users.</li>
</ol>

<p>With clearly defined objectives, I had a purpose. This purpose allowed me to channel my innate curiosity because I knew why I was wading through so much material and who would read and review the synthesis. Curiosity drove me to explore this large body of research, but purpose kept me focused.</p>

<p>Curiosity is the drive to learn more. Creativity requires curiosity because, without this drive, designers and researchers are less likely to explore new ideas or new approaches to problem-solving. The good news is that research and design attract the naturally curious.</p>

<blockquote class="pull-quote">
  <p>
    <a class="pull-quote__link" aria-label="Share on Twitter" href="https://twitter.com/share?text=%0aThe%20key%20lies%20in%20transforming%20curiosity%20into%20focused%20exploration.%20It%e2%80%99s%20less%20about%20the%20volume%20of%20information%20absorbed%20and%20more%20about%20the%20intent%20behind%20the%20inquiry,%20the%20depth%20of%20engagement,%20and%20the%20strategic%20application%20of%20acquired%20knowledge.%0a&url=https://smashingmagazine.com%2f2025%2f05%2ffewer-ideas-unconventional-approach-creativity%2f">
      
The key lies in transforming curiosity into focused exploration. It’s less about the volume of information absorbed and more about the intent behind the inquiry, the depth of engagement, and the strategic application of acquired knowledge.

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

<p>Purposeful curiosity is the difference between drowning in a sea of knowledge and navigating it with mastery.</p>

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

<h3 id="tip-2-imposing-constraints-and-making-a-plan">Tip 2: Imposing Constraints And Making A Plan</h3>

<p>Just as purpose makes it easier to focus, constraint also contributes to creativity. Brainstorming 50 ideas might seem creative but can actually prove more distracting than energizing. Limiting the number of ideas is more productive.</p>

<blockquote>“Some people think that having constraints means they can’t be creative. The research shows that people are more creative when there are constraints.”<br /><br />&mdash; Dr. Susan Weinschenk, “<a href="https://www.smashingmagazine.com/2018/12/role-of-creativity-ux-design/">The Role of Creativity in Design</a>”</blockquote>

<p>The point is not to limit creativity and innovation but to <strong>nurture it with structure</strong>. Establishing constraints enhances creativity by focusing idea generation around a few key themes.</p>

<p>Here are two ways to focus on idea generation:</p>

<ol>
<li>During meetings and workshops, <strong>how might we (HMW) statements</strong> help concentrate discussion while still leaving room for a variety of ideas? For example, <em>“How might we condense this 15-step workflow without omitting essential information?”</em></li>
<li><strong>Identify the problem and conduct two exercises to test solutions.</strong> For example, three customer surveys conducted over the past six months show a consistent pattern: 30% of customers are dissatisfied with their call center experience, and time-on-call has increased over the same six-month period. Divide the team into two groups.

<ul>
<li>Group 1 writes two new versions of the greeting customer service representatives (CSRs) use when a customer calls. The next step is an A/B test.</li>
<li>Group 2 identifies two steps to remove from the current CSR script. The next step is a trial run with CSRs to record time-on-call and customer satisfaction with the call.</li>
</ul></li>
</ol>

<p>“Constraint” can be negative, such as a restriction or limitation, but it can also refer to exhibiting control and restraint.</p>

<p>By exercising restraint, you and your team can cultivate higher-quality ideas and concentrate on solutions. Rather than generate 50 ideas about how to reconfigure an entire call center setup, it is more productive to focus on two metrics: time-on-task and the customer’s self-rated satisfaction when contacting the call center.</p>

<p>By channeling this concentrated energy towards well-defined challenges, your team can then effectively pursue innovative solutions for two closely related issues.</p>

<h3 id="tip-3-look-to-other-domains">Tip 3: Look To Other Domains</h3>

<p>Other domains or subject areas can be a valuable source of innovative solutions. When facing a challenging design problem, limiting ideas but reaching beyond the immediate domain is a powerful combination.</p>

<p>The high-stakes domain of airplane design provides a useful case study of how to simultaneously limit ideas and look to other domains to solve a design problem. Did you know that Otto Lilienthal, a 19th-century design engineer, was the first person to make repeated, successful flights with gliders?</p>














<figure class="
  
  
  ">
  
    <a href="https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/2-lilienthal-glider.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="400"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/2-lilienthal-glider.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/2-lilienthal-glider.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/2-lilienthal-glider.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/2-lilienthal-glider.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/2-lilienthal-glider.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/2-lilienthal-glider.png"
			
			sizes="100vw"
			alt="Otto Lilienthal’s glider"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Otto Lilienthal’s glider. (Image source: <a href='https://picryl.com/media/lilienthal-im-unruhigen-gleitflug-728696'>picryl.com</a>) (<a href='https://files.smashing.media/articles/fewer-ideas-unconventional-approach-creativity/2-lilienthal-glider.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Maybe not, but you’ve likely heard of the Wright brothers, whose work launched modern aviation. Why? Lilienthal’s work, while essential, relied on a design based on a bird’s wings, requiring the person flying the glider to move their entire body to change direction. This design ultimately proved fatal when Lilienthal was unable to steer out of a nosedive and crashed.</p>

<p>The Wright brothers were bike mechanics who leveraged their knowledge of balance to create a steering mechanism for pilots. By looking outside the “flight domain,” the Wright brothers found a way to balance and steer planes and ultimately transformed aviation.</p>

<p>In a similar fashion, Bartholdi, the French artist who sculpted the Statue of Liberty, did not limit himself to looking at statues in Paris. He traveled to Egypt, studied coins and paintings, and drew inspiration from his mother’s face.</p>

<p>Designers seeking inspiration should step away from the screen to paint, write a poem, or build a sculpture with popsicle sticks. In other words, paint with oils, not pixels; write with ink, not a keyboard; sculpt with sticks, not white space.</p>

<p>On its face, seeking inspiration from other disciplines would seem to contradict <a href="#tip-2-imposing-constraints-and-making-a-plan">Tip 2 above</a> &mdash; impose constraints. Examined from another angle, however, <strong>imposing constraints and exploring domains are complementary techniques</strong>.</p>

<p>Rather than list ten random ideas on a whiteboard, it’s more productive to focus on a few solutions and think about these solutions from a variety of angles. For example, recently, I found myself facing a high volume of ideas, source material, and flow charts. While organizing this information was manageable, distilling it into a form others could absorb proved challenging.</p>

<p>Rather than generate a list of ten ways to condense this information, I took the dog for a walk and let my eyes wander while strolling through the park. What did I see when my eyes lit upon barren trees? Branches. And what do flow charts do? They branch into different directions.</p>

<p>Upon finishing the walk, I jumped back online and began organizing my source material into a series of branched flows. Was this wildly innovative? No. Was this the first time I had drawn flowcharts with branches? Also no. The difference in this case was the application of the branching solution for <strong>all of my source material,</strong> not only the flow charts. In short, a walk and a nudge from nature’s design helped me escape the constraints imposed by a two-dimensional screen.</p>

<p>Stepping away from the screen is, of course, good for our mental and physical health. The occasional light bulb moment is a bonus and one I’m happy to accept.</p>

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

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

<p>Yet these moments alone are not enough. You must channel inspiration by applying <strong>practical techniques</strong> to move forward with design and analysis lest you become overwhelmed by so many ideas that you become paralyzed and unable to make a decision.</p>

<p>To avoid paralysis and reduce the chances of wasting time, I’ve argued against brainstorming, endless lists, and wall-to-wall post-its. Instead, I’ve proposed three practical techniques to boost creativity.</p>

<p><strong>Controlled curiosity.</strong></p>

<p>From brainstorming to endless scrolling, exposing yourself to high volumes of information is a trap because absorbing information without understanding the purpose or deeper context won’t make you more creative.</p>

<p>The solution lies in transforming curiosity into focused exploration. Purposeful curiosity allows you to explore, think, and identify solutions without drowning in a sea of information.</p>

<p><strong>Imposing constraints.</strong></p>

<p>Brainstorming long lists of ideas might seem creative, but can actually prove more distracting than energizing.</p>

<p>The solution is to nurture creativity with structure by limiting the number of ideas under consideration.</p>

<p>This structure enhances creativity by focusing idea generation around a few key themes.</p>

<p><strong>Look beyond your immediate domain.</strong></p>

<p>Otto Lilienthal’s fatal glider crash shows what can happen when solutions are examined through the single lens of one subject area.</p>

<p>The solution is to concentrate on innovative solutions for a single issue while reflecting on the problem from various perspectives, such as two-dimensional design, three-dimensional design, or design in nature.</p>

<h3 id="resources">Resources</h3>

<ul>
<li><a href="https://hiddenbrain.org/podcast/how-to-be-more-creative/">How to be More Creative</a>, Hidden Brain Media</li>
<li>“<a href="https://journals.sagepub.com/doi/abs/10.1509/jmr.10.0407?journalCode=mrja">Focus Creative Success is Enjoyed through Restricted Choice</a>” by Annie Laure-Sellier and Darren W. Dahl</li>
</ul>

<h3 id="further-reading-on-smashing-magazine">Further Reading on Smashing Magazine</h3>

<ul>
<li>“<a href="https://www.smashingmagazine.com/2025/04/neuroscience-designers-boost-creativity-endless-reference-scrolling/">Boosting Up Your Creativity Without Endless Reference Scrolling</a>,” Marina Chernyshova</li>
<li>“<a href="https://www.smashingmagazine.com/2025/04/ux-design-files-organization-template/">UX And Design Files Organization Template</a>,” Vitaly Friedman</li>
<li>“<a href="https://www.smashingmagazine.com/2024/06/scent-ux-unrealized-potential-olfactory-design/">The Scent Of UX: The Unrealized Potential Of Olfactory Design</a>,” Kristian Mikhel</li>
<li>“<a href="https://www.smashingmagazine.com/2025/04/fostering-accessibility-culture/">Fostering An Accessibility Culture</a>,” Daniel Devesa Derksen-Staats</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>Vitaly Friedman</author><title>How To Launch Big Complex Projects</title><link>https://www.smashingmagazine.com/2025/05/how-launch-big-complex-projects/</link><pubDate>Mon, 05 May 2025 10:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/05/how-launch-big-complex-projects/</guid><description>When was the last time your project wrapped up smoothly — no delays, no surprises, no last-minute compromises? In reality, most UX projects drift as timelines slip, budgets stretch, and features morph. How do we get better at navigating the chaos? An upcoming part of &lt;a href="https://measure-ux.com">How To Measure UX and Design Impact&lt;/a> by yours truly.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/05/how-launch-big-complex-projects/" />
              <title>How To Launch Big Complex Projects</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>How To Launch Big Complex Projects</h1>
                  
                    
                    <address>Vitaly Friedman</address>
                  
                  <time datetime="2025-05-05T10:00:00&#43;00:00" class="op-published">2025-05-05T10:00:00+00:00</time>
                  <time datetime="2025-05-05T10:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                
                

<p>Think about your past projects. Did they finish <strong>on time and on budget</strong>? Did they end up getting delivered without cutting corners? Did they get disrupted along the way with a changed scope, conflicted interests, unexpected delays, and surprising blockers?</p>

<p>Chances are high that your recent project was <strong>over schedule and over budget</strong> &mdash; just like a vast majority of other complex UX projects. Especially if it entailed at least some sort of <strong>complexity</strong>, be it a large group of stakeholders, a specialized domain, internal software, or expert users. It might have been delayed, moved, canceled, “refined,” or postponed. As it turns out, in many teams, <strong>shipping on time is an exception</strong> rather than the rule.</p>

<p>In fact, things almost never go according to plan &mdash; and on complex projects, they don’t even come close. So, how can we prevent it from happening? Well, let’s find out.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://www.linkedin.com/feed/update/urn:li:activity:7320383766965719040/">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="615"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/1-how-big-things-get-done.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-launch-big-complex-projects/1-how-big-things-get-done.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-launch-big-complex-projects/1-how-big-things-get-done.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-launch-big-complex-projects/1-how-big-things-get-done.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-launch-big-complex-projects/1-how-big-things-get-done.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/1-how-big-things-get-done.png"
			
			sizes="100vw"
			alt="How to launch big complex projects, a book cover"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Many of the insights in this article are from <a href='https://sites.prh.com/how-big-things-get-done-book'>“How Big Things Get Done”</a>, a wonderful book not just for designers, but anyone who works on large, complex products. (<a href='https://files.smashing.media/articles/how-launch-big-complex-projects/1-how-big-things-get-done.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h2 id="99-5-of-big-projects-overrun-budgets-and-schedules">99.5% Of Big Projects Overrun Budgets And Schedules</h2>

<p>As people, we are inherently over-optimistic and over-confident. It’s hard to study and process everything that can go wrong, so we tend to focus on the bright side. However, unchecked optimism leads to unrealistic forecasts, poorly defined goals, better options ignored, problems not spotted, and no contingencies to counteract the inevitable surprises.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-launch-big-complex-projects/2-normal-fat-tails-distribution.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="402"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/2-normal-fat-tails-distribution.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-launch-big-complex-projects/2-normal-fat-tails-distribution.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-launch-big-complex-projects/2-normal-fat-tails-distribution.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-launch-big-complex-projects/2-normal-fat-tails-distribution.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-launch-big-complex-projects/2-normal-fat-tails-distribution.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/2-normal-fat-tails-distribution.png"
			
			sizes="100vw"
			alt="Normal distribution vs. Fat-tail distribution"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      The blue line follows a normal distribution, the red line follows “fat tails” &mdash; sometimes big outliers are quite common. Illustration by Scott Young. (<a href='https://files.smashing.media/articles/how-launch-big-complex-projects/2-normal-fat-tails-distribution.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p><a href="https://www.globalleadersinstitute.org/blog-post/hofstadters-law-as-a-strategic-tool-for-cultural-institutions/">Hofstadter’s Law</a> states that the time needed to complete a project will always expand to fill the available time &amp;- even if you take into account Hofstadter’s Law. Put differently, it <em>always</em> takes longer than you expect, however cautious you might be.</p>

<p>As a result, only 0.5% of big projects make the budget and the schedule &mdash; e.g., big relaunches, legacy re-dos, big initiatives. We might try to mitigate risk by adding 15&ndash;20% buffer &mdash; but it rarely helps. Many of these projects don’t follow “normal” (Bell curve) distribution, but are rather “fat-tailed”.</p>

<p>And there, overruns of 60&ndash;500% are typical and turn big projects into <strong>big disasters</strong>.</p>

<h2 id="reference-class-forecasting-rcf">Reference-Class Forecasting (RCF)</h2>

<p>We often assume that if we just thoroughly <strong>collect all the costs</strong> needed and estimate complexity or efforts, we should get a decent estimate of where we will eventually land. Nothing could be further from the truth.</p>

<p>Complex projects have <strong>plenty of unknown unknowns</strong>. No matter how many risks, dependencies, and upstream challenges we identify, there are many more we can’t even imagine. The best way to be more accurate is to define a realistic <em>anchor</em> &mdash; for time, costs, and benefits &mdash; from similar projects done in the past.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-launch-big-complex-projects/3-it-projects-fat-tailed-distribution.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="581"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/3-it-projects-fat-tailed-distribution.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-launch-big-complex-projects/3-it-projects-fat-tailed-distribution.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-launch-big-complex-projects/3-it-projects-fat-tailed-distribution.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-launch-big-complex-projects/3-it-projects-fat-tailed-distribution.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-launch-big-complex-projects/3-it-projects-fat-tailed-distribution.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/3-it-projects-fat-tailed-distribution.png"
			
			sizes="100vw"
			alt="Graph showing a fat-tailed distribution among various sectors"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      IT projects are more likely to have a fat-tailed distribution, with extreme outliers. (<a href='https://files.smashing.media/articles/how-launch-big-complex-projects/3-it-projects-fat-tailed-distribution.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>Reference-class forecasting follows a <strong>very simple process</strong>:</p>

<ul>
<li>First, we find the reference projects that have the most similarities to our project.</li>
<li>If the distribution follows the Bell curve, use the mean value + <strong>10–15% contingency</strong>.</li>
<li>If the distribution is fat-tailed, invest in profound <strong>risk management</strong> to prevent big challenges down the line.</li>
<li>Tweak the mean value only if you have very good reasons to do so.</li>
<li><strong>Set up a database</strong> to track past projects in your company (for cost, time, benefits).</li>
</ul>

<h2 id="mapping-out-users-success-moments">Mapping Out Users’ Success Moments</h2>

<p>Over the last few years, I’ve been using the technique called “Event Storming,” suggested by <a href="https://www.linkedin.com/in/matteo-cavucci/">Matteo Cavucci</a> many years back. The idea is to <strong>capture users’ experience moments through the lens of business needs</strong>. With it, we focus on the desired business outcome and then use research insights to project events that users will be going through to achieve that outcome.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-launch-big-complex-projects/4-event-storming.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="614"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/4-event-storming.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-launch-big-complex-projects/4-event-storming.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-launch-big-complex-projects/4-event-storming.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-launch-big-complex-projects/4-event-storming.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-launch-big-complex-projects/4-event-storming.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/4-event-storming.png"
			
			sizes="100vw"
			alt="Illustration of the event storming"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Event storming: we are exploring users’ events through the lens of the desired business outcome. (<a href='https://files.smashing.media/articles/how-launch-big-complex-projects/4-event-storming.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>The image above shows the process in action &mdash; with <strong>different lanes representing different points of interest</strong>, and prioritized user events themed into groups, along with risks, bottlenecks, stakeholders, and users to be involved &mdash; as well as UX metrics. From there, we can identify common themes that emerge and create a shared understanding of risks, constraints, and people to be involved.</p>

<p>Throughout that journey, we identify key milestones and break users’ events into two main buckets:</p>

<ol>
<li>User’s <strong>success moments</strong> (which we want to dial up ↑);</li>
<li>User’s <strong>pain points</strong> or <strong>frustrations</strong> (which we want to dial down ↓).</li>
</ol>

<p>We then break out into groups of 3&ndash;4 people to separately prioritize these events and estimate their impact and effort on <a href="https://cutlefish.substack.com/p/tbm-220-effort-vs-value-curves">Effort vs. Value curves</a> by <a href="https://www.linkedin.com/in/johnpcutler?miniProfileUrn=urn%3Ali%3Afs_miniProfile%3AACoAAABkgVcByXwZ4Zke2hKjaekv4qJxDWQeqsY&amp;lipi=urn%3Ali%3Apage%3Ad_flagship3_pulse_read%3BLaY9r%2FVvSwSjIb5%2B1j9PVw%3D%3D">John Cutler</a>.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://cutlefish.substack.com/p/tbm-220-effort-vs-value-curves">
    
    <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-launch-big-complex-projects/5-effort-vs-value-curves.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-launch-big-complex-projects/5-effort-vs-value-curves.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-launch-big-complex-projects/5-effort-vs-value-curves.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-launch-big-complex-projects/5-effort-vs-value-curves.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-launch-big-complex-projects/5-effort-vs-value-curves.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/5-effort-vs-value-curves.png"
			
			sizes="100vw"
			alt="Effort vs. Value curves"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      We are mapping UX initiatives against the cumulative value over effort (time). As <a href='https://cutlefish.substack.com/p/tbm-220-effort-vs-value-curves'>suggested by John Cutler</a>. (<a href='https://files.smashing.media/articles/how-launch-big-complex-projects/5-effort-vs-value-curves.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>The next step is <strong>identifying key stakeholders</strong> to engage with, risks to consider (e.g., legacy systems, 3rd-party dependency, etc.), resources, and tooling. We reserve special time to identify key blockers and constraints that endanger a successful outcome or slow us down. If possible, we also set up UX metrics to track how successful we actually are in improving the current state of UX.</p>

<p>It might seem like a bit too much planning for just a UX project, but it has been helping quite significantly to reduce failures and delays and also maximize business impact.</p>

<p>When speaking to businesses, I usually speak about better <strong>discovery and scoping as the best way to mitigate risk</strong>. We can, of course, throw ideas into the market and run endless experiments. But not for critical projects that get a lot of visibility, e.g., replacing legacy systems or launching a new product. They require thorough planning to prevent big disasters, urgent rollbacks, and&hellip; black swans.</p>

<h2 id="black-swan-management">Black Swan Management</h2>

<p>Every other project encounters what&rsquo;s called a <strong>Black Swan</strong> &mdash; a low probability, high-consequence event that is more likely to occur when projects stretch over longer periods of time. It could be anything from restructuring teams to a change of priorities, which then leads to cancellations and rescheduling.</p>

<p>Little problems have an incredible capacity to <strong>compound large, disastrous problems</strong> &mdash; ruining big projects and sinking big ambitions at a phenomenal scale. The more little problems we can design around early, the more chances we have to get the project out the door successfully.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://sketchyideas.substack.com/p/what-imposter-syndrome-feels-like">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="493"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/6-sketch-how-big-things-get-done.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-launch-big-complex-projects/6-sketch-how-big-things-get-done.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-launch-big-complex-projects/6-sketch-how-big-things-get-done.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-launch-big-complex-projects/6-sketch-how-big-things-get-done.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-launch-big-complex-projects/6-sketch-how-big-things-get-done.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/6-sketch-how-big-things-get-done.png"
			
			sizes="100vw"
			alt="How Big Things Get Done, a sketch notes summary Rob Dimeo."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      How Big Things Get Done, a sketch notes summary Rob Dimeo, <a href='https://sketchyideas.substack.com/p/what-imposter-syndrome-feels-like'>discovered via Chris J Wilson</a>. (<a href='https://files.smashing.media/articles/how-launch-big-complex-projects/6-sketch-how-big-things-get-done.png'>Large preview</a>)
    </figcaption>
  
</figure>

<p>So we make projects smaller and shorter. We mitigate risks by involving stakeholders early. We provide <strong>less surface</strong> for Black Swans to emerge. One good way to get there is to always start every project with a simple question: <em>“Why are we actually doing this project?”</em> The answers often reveal not just motivations and ambitions, but also the challenges and dependencies hidden between the lines of the brief.</p>

<p>And as we plan, we could follow a <strong>“right-to-left thinking”</strong>. We don’t start with where we are, but rather where we want to be. And as we plan and design, we move from the future state towards the current state, studying what’s missing or what’s blocking us from getting there. The trick is: we always keep our end goal in mind, and our decisions and milestones are always shaped by that goal.</p>

<h2 id="manage-deficit-of-experience">Manage Deficit Of Experience</h2>

<p>Complex projects start with a deep deficit of experience. To increase the chances of success, we need to minimize the chance of mistakes even happening. That means trying to make the process <strong>as repetitive as possible</strong> &mdash; with smaller “work modules” repeated by teams over and over again.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-launch-big-complex-projects/7-projects-deficit-experience.jpeg">
    
    <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/how-launch-big-complex-projects/7-projects-deficit-experience.jpeg 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-launch-big-complex-projects/7-projects-deficit-experience.jpeg 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-launch-big-complex-projects/7-projects-deficit-experience.jpeg 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-launch-big-complex-projects/7-projects-deficit-experience.jpeg 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-launch-big-complex-projects/7-projects-deficit-experience.jpeg 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/7-projects-deficit-experience.jpeg"
			
			sizes="100vw"
			alt="Illustration of the boat with holes and blisters on them."
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      In the end, we are all in the same boat. The earlier we prevent leaks and troubles from happening, the better off we will be on the other side. Thanks to José Torre for the wonderful illustration. (<a href='https://files.smashing.media/articles/how-launch-big-complex-projects/7-projects-deficit-experience.jpeg'>Large preview</a>)
    </figcaption>
  
</figure>

<p>🚫 <strong>Beware of unchecked optimism</strong> → unrealistic forecasts.<br />
🚫 <strong>Beware of “cutting-edge”</strong> → untested technology spirals risk.<br />
🚫 <strong>Beware of “unique”</strong> → high chance of exploding costs.<br />
🚫 <strong>Beware of “brand new”</strong> → rely on tested and reliable.<br />
🚫 <strong>Beware of “the biggest”</strong> → build small things, then compose.</p>

<p>It also means relying on reliable: from well-tested tools to <strong>stable teams</strong> that have worked well together in the past. Complex projects <strong>aren’t a good place</strong> to innovate processes, mix-n-match teams, and try out more affordable vendors.</p>

<p>Typically, these are <strong>extreme costs in disguise</strong>, skyrocketing delivery delays, and unexpected expenses.</p>

<h2 id="think-slow-act-fast">Think Slow, Act Fast</h2>

<p>In the spirit of looming deadlines, many projects rush into delivery mode before the scope of the project is well-defined. It might work for fast experiments and minor changes, but that’s a red flag for larger projects. The best strategy is to spend more time in <strong>planning</strong> before designing a single pixel on the screen.</p>

<p>But planning isn’t an exercise in abstract imaginative work. Good planning should include experiments, tests, simulations, and refinements. It must include the steps of <strong>how we reduce risks</strong> and how we mitigate risks when something unexpected (but frequent in other similar projects) happens.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://files.smashing.media/articles/how-launch-big-complex-projects/8-history-successful-projects.png">
    
    <img
      loading="lazy"
      decoding="async"
      fetchpriority="low"
			width="800"
			height="669"
			
			srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/8-history-successful-projects.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/how-launch-big-complex-projects/8-history-successful-projects.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/how-launch-big-complex-projects/8-history-successful-projects.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/how-launch-big-complex-projects/8-history-successful-projects.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/how-launch-big-complex-projects/8-history-successful-projects.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/how-launch-big-complex-projects/8-history-successful-projects.png"
			
			sizes="100vw"
			alt="History of how big projects performed"
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Tracking a history of successful launches gives us insight into how well our estimates and plans are. (<a href='https://files.smashing.media/articles/how-launch-big-complex-projects/8-history-successful-projects.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h2 id="good-design-is-good-risk-management">Good Design Is Good Risk Management</h2>

<p>When speaking about design and research to senior management, position it as a <strong>powerful risk management tool</strong>. Good design that involves concept testing, experimentation, user feedback, iterations, and refinement of the plan is cheap and safe.</p>

<p>Eventually it might need more time than expected, but it’s much &mdash; <em>MUCH!</em> &mdash; cheaper than delivery. Delivery is <strong>extremely cost-intensive</strong>, and if it relies on wrong assumptions and poor planning, then that’s when the project becomes vulnerable and difficult to move or re-route.</p>

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

<p>The insights above come from a wonderful book on <a href="https://sites.prh.com/how-big-things-get-done-book"><em>How Big Things Get Done</em></a> by Prof. Bent Flyvbjerg and Dan Gardner. It goes in all the fine details of how big projects fail and when they succeed. It’s not a book about design, but a fantastic book for designers who want to <strong>plan and estimate better</strong>.</p>

<p>Not every team will work on a large, complex project, but sometimes these projects <strong>become inevitable</strong> &mdash; when dealing with legacy, projects with high visibility, layers of politics, or an entirely new domain where the company moves.</p>

<p>Good projects that succeed have one thing in common: they dedicate a majority of time to <strong>planning and managing risks</strong> and unknown unknowns. They avoid big-bang revelations, but instead test continuously and repeatedly. That’s your <strong>best chance to succeed</strong> &mdash; work around these unknowns, as you won’t be able to prevent them from emerging entirely anyway.</p>

<h2>New: How To Measure UX And Design Impact</h2>

<p>Meet <a href="https://measure-ux.com/">Measure UX &amp; Design Impact</a> (8h), a <strong>practical guide for designers and UX leads</strong> to shape, measure and explain your incredible UX impact on business. Recorded and updated by Vitaly Friedman. Use the friendly code 🎟 <strong><code>IMPACT</code></strong> to <strong>save 20% off</strong> 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>

<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>Anima Team</author><title>How To Turn Your Figma Designs Into Live Apps With Anima Playground</title><link>https://www.smashingmagazine.com/2025/04/anima-playground-figma-designs-live-apps/</link><pubDate>Tue, 29 Apr 2025 10:00:00 +0000</pubDate><guid>https://www.smashingmagazine.com/2025/04/anima-playground-figma-designs-live-apps/</guid><description>As designers, it’s important to be able to transform visual ideas into concepts within minutes and into fully functional products within hours. Well, today we’re bringing you closer to AnimaApp, an app designed to make your life easier &amp;mdash; whether you’re a designer, developer, product team member or entrepreneur.</description><content:encoded><![CDATA[
          <html>
            <head>
              <meta charset="utf-8">
              <link rel="canonical" href="https://www.smashingmagazine.com/2025/04/anima-playground-figma-designs-live-apps/" />
              <title>How To Turn Your Figma Designs Into Live Apps With Anima Playground</title>
            </head>
            <body>
              <article>
                <header>
                  <h1>How To Turn Your Figma Designs Into Live Apps With Anima Playground</h1>
                  
                    
                    <address>Anima Team</address>
                  
                  <time datetime="2025-04-29T10:00:00&#43;00:00" class="op-published">2025-04-29T10:00:00+00:00</time>
                  <time datetime="2025-04-29T10:00:00&#43;00:00" class="op-modified">2025-12-25T10:32:38+00:00</time>
                </header>
                <p>This article is sponsored by <b>Anima App</b></p>
                

<p>For years, designers and developers have been stuck in a frustrating loop. Designers create stunning UIs in Figma, only for developers to spend hours &mdash; or days &mdash; coding them from scratch. Along the way, details get lost, tweaks pile up, and before you know it, the whole process turns into a never-ending back-and-forth.</p>

<p>It’s a tale as old as modern product teams: pixel-perfect designs turned into imperfect realities, timelines stretched by repetitive tasks, and collaboration slowed by tool mismatches. Designers work in one world, developers in another &mdash; and the bridge between them has always been shaky at best.</p>

<p>But what if you could just… skip the painful part?</p>

<p>That’s where <a href="https://dev.animaapp.com/">Anima Playground</a> comes in. It’s a tool that transforms your Figma designs into fully functional web apps automatically. No more pixel-matching marathons, no more manual UI rebuilding. Just a smoother, faster way to go from a design to a live product &mdash; with AI doing the heavy lifting.</p>

<h2 id="what-is-anima-playground">What Is Anima Playground?</h2>

<p>Anima Playground is an AI-powered development environment that makes the jump from design to code seamless. It turns your Figma designs into clean, editable, and production-ready React components &mdash; instantly. And unlike static design-to-code tools of the past, this one goes further: it lets you add business logic, connect to APIs, and preview real-time changes right inside the playground.</p>

<p>In short: it&rsquo;s not just a handoff tool. It&rsquo;s where design becomes a working app.</p>

<p><strong>Here’s what you can do with Anima Playground:</strong></p>

<ul>
<li>Import Figma designs exactly as they were created &mdash; layouts, styles, responsiveness, and all.</li>
<li>Generate React components instantly, with support for libraries like MUI and shadcn/ui.</li>
<li>Use AI prompts to add logic &mdash; from button clicks to dynamic lists and form validation.</li>
<li>Customize everything, with full code access and live previews.</li>
</ul>

<h2 id="how-it-works">How It Works</h2>

<p>Easily sync your Figma designs with Anima Playground. All it takes is four quick steps.</p>

<h3 id="1-import-your-figma-designs">1. Import Your Figma Designs</h3>

<p>No clunky exports, no third-party converters. Just paste your Figma link, and Anima syncs it directly. It preserves layout, typography, responsiveness, and component structure, exactly as designed.</p>

<p>This step sets the foundation: Anima translates your Figma layers into React code, respecting design fidelity down to the pixel. Designers can rest easy knowing their UI won’t get “lost in translation.”</p>

<h3 id="2-convert-designs-into-react-components">2. Convert Designs Into React Components</h3>

<p>Once imported, your Figma designs are instantly transformed into React components. This includes:</p>

<ul>
<li>Clean JSX structure</li>
<li>Tailwind, MUI, or shadcn/ui styling (you choose!)</li>
<li>Nested component trees</li>
<li>Auto-handling of responsive layouts</li>
</ul>

<p>You can switch between UI libraries with a simple prompt or setting change &mdash; no need to rewrite everything manually. Whether you&rsquo;re building a startup landing page or a complex dashboard, the output is dev-ready and easy to extend.</p>

<h3 id="3-add-logic-with-ai-powered-prompts">3. Add Logic With AI-Powered Prompts</h3>

<p>Want a button to open a modal? Or a form that sends data to an API? You don’t need to write all that boilerplate yourself.</p>

<p>Just describe what you want using natural language &mdash; for example:</p>

<blockquote><p>“Make this button open a signup modal.”</p></blockquote>

<p>Anima’s AI will generate the underlying code for you &mdash; complete with state management, handlers, and reusable logic. You can always dive in and tweak the output to fit your specific app structure.</p>

<p>This turns design into functional UI with a level of speed that traditional front-end workflows just can’t match.</p>














<figure class="
  
    break-out article__image
  
  
  ">
  
    <a href="https://www.animaapp.com/">
    
    <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/anima-playground-figma-designs-live-apps/use-ai-promts.png 400w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/anima-playground-figma-designs-live-apps/use-ai-promts.png 800w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/anima-playground-figma-designs-live-apps/use-ai-promts.png 1200w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/anima-playground-figma-designs-live-apps/use-ai-promts.png 1600w,
			        https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/anima-playground-figma-designs-live-apps/use-ai-promts.png 2000w"
			src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/anima-playground-figma-designs-live-apps/use-ai-promts.png"
			
			sizes="100vw"
			alt="Use AI prompts to add interactivity and logic effortlessly. "
		/>
    
    </a>
  

  
    <figcaption class="op-vertical-bottom">
      Use AI prompts to add interactivity and logic effortlessly. (<a href='https://files.smashing.media/articles/anima-playground-figma-designs-live-apps/use-ai-promts.png'>Large preview</a>)
    </figcaption>
  
</figure>

<h3 id="4-see-live-changes-instantly">4. See Live Changes Instantly</h3>

<p>As you make changes &mdash; whether through prompts or direct code edits &mdash; you see them reflected in real-time. Anima Playground acts as a visual IDE, combining the flexibility of code with the immediacy of design tools.</p>

<p>This live feedback loop means less context-switching and faster iterations. Whether you’re testing animations, layout tweaks, or new features, you get to <em>see it</em> before you commit to anything.</p>

<h2 id="more-than-just-design-to-code">More Than Just Design-to-Code</h2>

<p>While many tools promise “Figma to code,” <strong>Anima Playground goes beyond static conversion</strong>. It’s a fully interactive environment where real apps are born &mdash; with logic, data, and interactivity.</p>

<p><strong>Some powerful features include:</strong></p>

<ul>
<li><strong>One-click AI suggestions</strong> to enhance your UI with logic.</li>
<li><strong>Custom component support</strong>, allowing teams to inject their own building blocks.</li>
<li><strong>Component reuse</strong>, letting you structure apps in a scalable way.</li>
<li><strong>Flexible framework support</strong>, starting with React and planning to support more in the future.</li>
</ul>

<p>It’s not just for prototyping &mdash; it’s for building.</p>

<h2 id="why-it-matters">Why It Matters</h2>

<p>The design-to-code handoff has been broken for too long. Anima Playground isn’t just another tool. It’s a game-changer. Here’s why:</p>

<ul>
<li>🚀 Speed<br />
What used to take days now takes minutes. You skip the repetitive coding, layout guesswork, and context switching.</li>
<li>🎯 Accuracy<br />
Your designs stay true to the original. No more pixel-matching or guessing which font size the designer used.</li>
<li>🧩 Flexibility<br />
Developers get full access to the code. It&rsquo;s not a black box &mdash; it&rsquo;s fully transparent and editable.</li>
<li>🤝 Collaboration<br />
Designers and developers finally share the same playground &mdash; literally. This tightens feedback loops and shortens build cycles.</li>
</ul>

<p>By making the workflow smarter, <strong>Anima Playground helps teams build better products, faster</strong>, and with fewer headaches.</p>

<h2 id="who-is-it-for">Who Is It For?</h2>

<p>Whether you’re a <strong>designer</strong>, <strong>developer</strong>, <strong>startup founder</strong>, or <strong>PM</strong>, Anima Playground removes the barriers between your ideas and real products.</p>

<ul>
<li><strong>Designers</strong> can see their visions come to life, exactly as imagined.</li>
<li><strong>Developers</strong> can skip the grunt work and focus on logic, architecture, and business needs.</li>
<li><strong>Teams</strong> can work together in a unified environment &mdash; no more waiting for the “handoff.”</li>
</ul>

<p>It’s perfect for building landing pages, dashboards, internal tools, MVPs, and more.</p>

<h3 id="are-you-ready-to-try-it">Are You Ready To Try It?</h3>

<p>Anima Playground and the Anima API are redefining the connection between design and development in the era of AI-powered coding. Whether you&rsquo;re a designer, developer, product team member, marketer, or entrepreneur, Anima empowers you to transform visual ideas into concepts within minutes—and into fully functional products within hours.</p>

<p>If you’re tired of the endless design-to-development grind, <a href="https://projects.animaapp.com/signup">it’s time to give Anima Playground a spin</a>. Whether you’re a designer who wants to bring your vision to life or a developer looking to speed up the build process, this tool has your back.</p>

<p>Let your designs do more than look good &mdash; let them <em>work</em>!</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></channel></rss>