Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Every game-changing product begins as a dangerous bet.

James Dyson built 5,127 failed prototypes over fifteen years, risking his entire savings to replace disposable vacuum bags with dual-cyclone airflow.

How do designers push radical, unproven ideas without bankrupting a company or harming users and the planet?

In product design, **incremental innovation** involves making small, low-risk refinements to existing products, such as upgrading a smartphone sensor or shaving weight off a shoe sole.

**Radical innovation** introduces completely new technologies or processes that disrupt existing markets, carrying much higher commercial and technical uncertainty.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #f8fafc;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .matrix-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .matrix-body {
      display: flex;
      align-items: stretch;
      gap: 10px;
      width: 100%;
    }

    /* Y-Axis Styling */
    .y-axis {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 24px;
      padding: 6px 0;
    }

    .axis-label {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .y-label {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .axis-limit {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
    }

    /* 2x2 Grid Layout */
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
      flex: 1;
      aspect-ratio: 1 / 1;
    }

    .quadrant {
      position: relative;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 12px;
      text-align: center;
      transition: box-shadow 0.3s ease, background-color 0.3s ease;
      cursor: pointer;
    }

    .quad-icon {
      font-size: 24px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
    }

    .quad-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    /* Incremental */
    .quad-incremental {
      background-color: #ffffff;
      border: 1.5px solid #e2e8f0;
      color: #64748b;
    }
    .quad-incremental:hover {
      box-shadow: 0 4px 12px rgba(100, 116, 139, 0.12);
      border-color: #cbd5e1;
    }

    /* Architectural */
    .quad-architectural {
      background-color: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      color: #334155;
    }
    .quad-architectural:hover {
      box-shadow: 0 4px 12px rgba(51, 65, 85, 0.12);
      border-color: #94a3b8;
    }

    /* Disruptive */
    .quad-disruptive {
      background-color: #eff6ff;
      border: 1.5px solid #bfdbfe;
      color: #1d4ed8;
    }
    .quad-disruptive:hover {
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
      border-color: #3b82f6;
    }

    /* Radical (Featured / High Risk & Reward) */
    .quad-radical {
      background-color: #faf5ff;
      border: 2px solid #8b5cf6;
      color: #6b21a8;
      animation: radicalPulse 3s ease-in-out infinite;
    }

    .quad-radical:hover {
      box-shadow: 0 0 20px 3px rgba(124, 58, 237, 0.35);
    }

    .risk-badge {
      position: absolute;
      top: -10px;
      background: linear-gradient(135deg, #7c3aed, #6d28d9);
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.03em;
      padding: 3px 8px;
      border-radius: 999px;
      box-shadow: 0 2px 6px rgba(109, 40, 217, 0.35);
      white-space: nowrap;
      text-transform: uppercase;
    }

    /* X-Axis Styling */
    .x-axis {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 34px;
      padding-right: 4px;
    }

    .x-label {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    @keyframes radicalPulse {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.2), inset 0 0 0 1px #a78bfa;
      }
      50% {
        box-shadow: 0 0 14px 2px rgba(139, 92, 246, 0.35), inset 0 0 0 1.5px #7c3aed;
      }
    }

    @media (max-width: 380px) {
      .quad-title {
        font-size: 13px;
      }
      .quad-icon {
        font-size: 20px;
      }
      .risk-badge {
        font-size: 9px;
        padding: 2px 6px;
      }
      .axis-label {
        font-size: 12px;
      }
      .axis-limit {
        font-size: 10px;
      }
    }
  </style>
</head>
<body>
  <div class="matrix-container">
    <div class="matrix-body">
      
      <div class="y-axis">
        <span class="axis-limit">High</span>
        <div class="axis-label y-label">Tech Novelty →</div>
        <span class="axis-limit">Low</span>
      </div>

      
      <div class="grid">
        
        <div class="quadrant quad-architectural">
          <span class="quad-icon">📐</span>
          <span class="quad-title">Architectural</span>
        </div>

        
        <div class="quadrant quad-radical">
          <div class="risk-badge">High Enterprise Risk + High Reward</div>
          <span class="quad-icon">✦</span>
          <span class="quad-title">Radical</span>
        </div>

        
        <div class="quadrant quad-incremental">
          <span class="quad-icon">⚙️</span>
          <span class="quad-title">Incremental</span>
        </div>

        
        <div class="quadrant quad-disruptive">
          <span class="quad-icon">⚡</span>
          <span class="quad-title">Disruptive</span>
        </div>
      </div>
    </div>

    
    <div class="x-axis">
      <span class="axis-limit">Low</span>
      <div class="axis-label x-label">Market Impact →</div>
      <span class="axis-limit">High</span>
    </div>
  </div>
</body>
</html>

What keeps a bold, high-risk concept from turning into an ethical or commercial disaster?

**Responsible design** evaluates the ethical, environmental, and social impacts of a product alongside its commercial viability and aesthetics.

Pioneering designers align risky technical concepts with the **circular economy**—an industrial system restorative by intention, prioritizing reuse, disassembly, and non-toxic materials over single-use disposal.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

    .header {
      text-align: center;
      margin-bottom: 8px;
    }

    .badge-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      border-radius: 9999px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.02em;
      transition: all 0.4s ease;
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .scale-stage {
      position: relative;
      width: 100%;
      max-width: 540px;
      height: 240px;
      margin: 10px 0;
    }

    .fulcrum-base {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 36px solid transparent;
      border-right: 36px solid transparent;
      border-bottom: 60px solid #cbd5e1;
      z-index: 1;
    }

    .fulcrum-pillar {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 70px;
      background: #94a3b8;
      border-radius: 4px;
      z-index: 2;
    }

    .beam-assembly {
      position: absolute;
      top: 95px;
      left: 50%;
      width: 86%;
      height: 10px;
      transform-origin: center center;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      margin-left: -43%;
      z-index: 5;
    }

    .beam-bar {
      width: 100%;
      height: 10px;
      background: #475569;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .pivot-gauge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 32px;
      height: 32px;
      background: #fff;
      border: 3px solid #10b981;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
      transition: border-color 0.4s ease;
    }

    .pan-string-left, .pan-string-right {
      position: absolute;
      top: 10px;
      width: 2px;
      height: 48px;
      background: #94a3b8;
    }
    .pan-string-left { left: 16px; }
    .pan-string-right { right: 16px; }

    .pan-plate-left, .pan-plate-right {
      position: absolute;
      top: 56px;
      width: 130px;
      height: 8px;
      background: #64748b;
      border-radius: 4px;
      box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    }
    .pan-plate-left { left: -49px; }
    .pan-plate-right { right: -49px; }

    .pan-counter-rotate {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: center top;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 580px;
    }

    .column-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .col-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .col-title.left { color: #ea580c; }
    .col-title.right { color: #0284c7; }

    .item-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .item-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 7px 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      text-align: left;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .item-btn.active-left {
      background: #fff7ed;
      border-color: #fdba74;
      color: #c2410c;
      box-shadow: 0 0 0 1px #fdba74;
    }

    .item-btn.active-right {
      background: #f0f9ff;
      border-color: #7dd3fc;
      color: #0369a1;
      box-shadow: 0 0 0 1px #7dd3fc;
    }

    .item-btn .indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      flex-shrink: 0;
      transition: background 0.2s;
    }

    .item-btn.active-left .indicator { background: #ea580c; }
    .item-btn.active-right .indicator { background: #0284c7; }

    .weights-stack {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: 3px;
    }

    .weight-block {
      height: 8px;
      border-radius: 3px;
      transition: all 0.3s ease;
      opacity: 0.2;
    }
    .weight-block.active { opacity: 1; }

    .weight-left { background: #f97316; width: 44px; }
    .weight-right { background: #0284c7; width: 44px; }
  </style>
</head>
<body>

  <div class="header">
    <div id="statusBadge" class="badge-status">
      <span>⚖️</span>
      <span id="statusText">Sustainable Innovation</span>
    </div>
  </div>

  <div class="scale-stage">
    <div class="fulcrum-pillar"></div>
    <div class="fulcrum-base"></div>

    <div id="beam" class="beam-assembly">
      <div class="beam-bar"></div>
      <div id="gauge" class="pivot-gauge">✦</div>

      
      <div class="pan-string-left"></div>
      <div class="pan-plate-left">
        <div id="counterLeft" class="pan-counter-rotate">
          <div class="weights-stack">
            <div class="weight-block weight-left" id="wL0"></div>
            <div class="weight-block weight-left" id="wL1"></div>
            <div class="weight-block weight-left" id="wL2"></div>
            <div class="weight-block weight-left" id="wL3"></div>
          </div>
        </div>
      </div>

      
      <div class="pan-string-right"></div>
      <div class="pan-plate-right">
        <div id="counterRight" class="pan-counter-rotate">
          <div class="weights-stack">
            <div class="weight-block weight-right" id="wR0"></div>
            <div class="weight-block weight-right" id="wR1"></div>
            <div class="weight-block weight-right" id="wR2"></div>
            <div class="weight-block weight-right" id="wR3"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="cards-grid">
    
    <div class="column-panel">
      <div class="col-title left">
        <span>⚡</span>
        <span>Creative Risk</span>
      </div>
      <div class="item-list">
        <button class="item-btn active-left" data-side="L" data-idx="0">
          <span>Unproven Materials</span>
          <div class="indicator"></div>
        </button>
        <button class="item-btn active-left" data-side="L" data-idx="1">
          <span>Radical Form</span>
          <div class="indicator"></div>
        </button>
        <button class="item-btn active-left" data-side="L" data-idx="2">
          <span>High R&D Tooling</span>
          <div class="indicator"></div>
        </button>
        <button class="item-btn active-left" data-side="L" data-idx="3">
          <span>Market Disruption</span>
          <div class="indicator"></div>
        </button>
      </div>
    </div>

    
    <div class="column-panel">
      <div class="col-title right">
        <span>🛡️</span>
        <span>Practice Filters</span>
      </div>
      <div class="item-list">
        <button class="item-btn active-right" data-side="R" data-idx="0">
          <span>Life Cycle Analysis</span>
          <div class="indicator"></div>
        </button>
        <button class="item-btn active-right" data-side="R" data-idx="1">
          <span>Modular Repair</span>
          <div class="indicator"></div>
        </button>
        <button class="item-btn active-right" data-side="R" data-idx="2">
          <span>Safety / Ergonomics</span>
          <div class="indicator"></div>
        </button>
        <button class="item-btn active-right" data-side="R" data-idx="3">
          <span>Ethical Sourcing</span>
          <div class="indicator"></div>
        </button>
      </div>
    </div>
  </div>

  <script>
    const state = {
      L: [true, true, true, true],
      R: [true, true, true, true]
    };

    const beam = document.getElementById('beam');
    const counterL = document.getElementById('counterLeft');
    const counterR = document.getElementById('counterRight');
    const gauge = document.getElementById('gauge');
    const statusBadge = document.getElementById('statusBadge');
    const statusText = document.getElementById('statusText');

    function updateScale() {
      const countL = state.L.filter(Boolean).length;
      const countR = state.R.filter(Boolean).length;
      const diff = countL - countR;

      let angle = 0;
      if (diff > 0) angle = Math.min(14, diff * 3.8);
      else if (diff < 0) angle = Math.max(-14, diff * 3.8);

      beam.style.transform = `rotate(${-angle}deg)`;
      counterL.style.transform = `rotate(${angle}deg)`;
      counterR.style.transform = `rotate(${angle}deg)`;

      // Update Weights visual
      state.L.forEach((val, idx) => {
        const el = document.getElementById(`wL${idx}`);
        if (val) el.classList.add('active');
        else el.classList.remove('active');
      });

      state.R.forEach((val, idx) => {
        const el = document.getElementById(`wR${idx}`);
        if (val) el.classList.add('active');
        else el.classList.remove('active');
      });

      // Status Badge logic
      if (diff === 0 && countL > 0) {
        statusBadge.style.background = '#ecfdf5';
        statusBadge.style.color = '#059669';
        statusBadge.style.borderColor = '#a7f3d0';
        gauge.style.borderColor = '#10b981';
        gauge.style.color = '#10b981';
        statusText.textContent = 'Sustainable Innovation';
      } else if (diff > 0) {
        statusBadge.style.background = '#fff7ed';
        statusBadge.style.color = '#ea580c';
        statusBadge.style.borderColor = '#fdba74';
        gauge.style.borderColor = '#f97316';
        gauge.style.color = '#f97316';
        statusText.textContent = 'High Commercial Risk';
      } else if (diff < 0) {
        statusBadge.style.background = '#f0f9ff';
        statusBadge.style.color = '#0284c7';
        statusBadge.style.borderColor = '#7dd3fc';
        gauge.style.borderColor = '#0284c7';
        gauge.style.color = '#0284c7';
        statusText.textContent = 'Over-Constrained Form';
      } else {
        statusBadge.style.background = '#f1f5f9';
        statusBadge.style.color = '#64748b';
        statusBadge.style.borderColor = '#cbd5e1';
        gauge.style.borderColor = '#94a3b8';
        gauge.style.color = '#94a3b8';
        statusText.textContent = 'Stagnant Concept';
      }
    }

    document.querySelectorAll('.item-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const side = btn.getAttribute('data-side');
        const idx = parseInt(btn.getAttribute('data-idx'), 10);
        state[side][idx] = !state[side][idx];

        if (side === 'L') {
          btn.classList.toggle('active-left', state[side][idx]);
        } else {
          btn.classList.toggle('active-right', state[side][idx]);
        }
        updateScale();
      });
    });

    updateScale();
  </script>
</body>
</html>

How does an enterprise balance these competing forces in a real consumer product?

Dutch company **Fairphone** took an enormous commercial risk by rejecting industry-standard glued enclosures in favor of an entirely user-repairable, modular smartphone.

Their design team accepted higher tooling costs and a slightly thicker casing to ensure components like the camera, battery, and screen could be swapped out with a standard screwdriver.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      user-select: none;
    }

    /* Interactive controls */
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      z-index: 10;
    }
    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2,132,199,0.3);
    }

    /* Main comparison container */
    .stage {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 620px;
      min-height: 380px;
    }

    .column {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .title-tag {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .tag-sealed { color: #dc2626; }
    .tag-modular { color: #16a34a; }

    /* Phone visualization window */
    .view-box {
      width: 100%;
      height: 330px;
      position: relative;
      background: #f8fafc;
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Phone Base SVG Layers */
    .phone-svg {
      width: 100%;
      height: 100%;
      max-width: 200px;
    }

    .part {
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    }

    /* Exploded transforms */
    .exploded #fair-cam { transform: translate(-30px, -45px); }
    .exploded #fair-bat { transform: translate(35px, -15px); }
    .exploded #fair-usb { transform: translate(-25px, 45px); }
    .exploded #fair-scr { transform: translate(0px, 30px); }
    .exploded #fair-labels { opacity: 1; pointer-events: auto; }

    .exploded #seal-glue { stroke-dasharray: 4; stroke: #ef4444; opacity: 1; }
    .exploded #seal-warn { opacity: 1; transform: scale(1); }

    /* Overlay metrics for Lifecycle view */
    .metrics-overlay {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.94);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
    .show-metrics .metrics-overlay {
      opacity: 1;
      pointer-events: auto;
    }

    .metric-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .metric-label {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
    }
    .metric-val {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .bar-bg {
      height: 8px;
      background: #e2e8f0;
      border-radius: 4px;
      overflow: hidden;
      width: 100%;
      margin-top: 2px;
    }
    .bar-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.6s ease;
    }

    /* Tooltip / Status tag */
    .status-badge {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 12px;
      text-align: center;
    }
    .badge-bad { background: #fee2e2; color: #991b1b; }
    .badge-good { background: #dcfce7; color: #166534; }

    @media (max-width: 480px) {
      .view-box { height: 290px; }
      .metrics-overlay { padding: 8px; }
      .metric-val { font-size: 12px; }
      .title-tag { font-size: 11px; }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn active" id="btnAssembly" onclick="setMode('assembled')">Assembled</button>
    <button class="btn" id="btnExploded" onclick="setMode('exploded')">Exploded View</button>
    <button class="btn" id="btnImpact" onclick="setMode('impact')">Lifecycle Impact</button>
  </div>

  <div class="stage" id="stage">
    
    
    <div class="column">
      <div class="title-tag tag-sealed">✕ Sealed Design</div>
      
      <div class="view-box" id="sealedBox">
        <svg class="phone-svg" viewBox="0 0 160 260">
          
          <g id="seal-phone">
            <rect x="35" y="25" width="90" height="210" rx="18" fill="#1e293b" stroke="#334155" stroke-width="2"/>
            <rect x="40" y="32" width="80" height="196" rx="12" fill="#0f172a"/>
            
            <circle cx="55" cy="48" r="6" fill="#334155"/>
            <circle cx="55" cy="48" r="3" fill="#0284c7"/>
            
            <rect id="seal-glue" x="37" y="27" width="86" height="206" rx="16" fill="none" stroke="#ef4444" stroke-width="2.5" opacity="0"/>
          </g>

          
          <g id="seal-warn" class="part" opacity="0" transform="scale(0.9)" style="transform-origin: center;">
            <circle cx="80" cy="130" r="28" fill="#fee2e2" stroke="#ef4444" stroke-width="2"/>
            <text x="80" y="125" text-anchor="middle" font-size="20" fill="#dc2626">🔒</text>
            <text x="80" y="145" text-anchor="middle" font-size="10" font-weight="bold" fill="#991b1b">GLUED SHUT</text>
          </g>
        </svg>

        
        <div class="metrics-overlay">
          <div class="metric-row">
            <div class="metric-label">Lifespan</div>
            <div class="metric-val" style="color:#dc2626;">⏳ 2 – 3 Years</div>
            <div class="bar-bg"><div class="bar-fill" style="width: 25%; background:#ef4444;"></div></div>
          </div>
          <div class="metric-row">
            <div class="metric-label">Repair Difficulty</div>
            <div class="metric-val" style="color:#dc2626;">⚠️ Specialist Tooling</div>
            <div class="bar-bg"><div class="bar-fill" style="width: 90%; background:#ef4444;"></div></div>
          </div>
          <div class="metric-row">
            <div class="metric-label">E-Waste Risk</div>
            <div class="metric-val" style="color:#dc2626;">📈 Critical (Total Scrap)</div>
            <div class="bar-bg"><div class="bar-fill" style="width: 85%; background:#ef4444;"></div></div>
          </div>
        </div>
      </div>

      <div class="status-badge badge-bad" id="badgeLeft">Low Risk, High Waste</div>
    </div>

    
    <div class="column">
      <div class="title-tag tag-modular">✓ Modular Design</div>
      
      <div class="view-box" id="modularBox">
        <svg class="phone-svg" viewBox="0 0 160 260">
          
          <rect x="35" y="25" width="90" height="210" rx="18" fill="#f1f5f9" stroke="#94a3b8" stroke-width="2"/>
          
          
          <g id="fair-scr" class="part">
            <rect x="40" y="32" width="80" height="196" rx="12" fill="#0284c7" opacity="0.85"/>
            <text x="80" y="215" text-anchor="middle" font-size="8" fill="#ffffff" font-weight="600">Quick-Release Screen</text>
          </g>

          
          <g id="fair-bat" class="part">
            <rect x="45" y="90" width="70" height="85" rx="6" fill="#10b981" stroke="#059669" stroke-width="1.5"/>
            <text x="80" y="132" text-anchor="middle" font-size="9" font-weight="bold" fill="#ffffff">🔋 Battery</text>
            <text x="80" y="145" text-anchor="middle" font-size="7" fill="#d1fae5">No Glue</text>
          </g>

          
          <g id="fair-cam" class="part">
            <rect x="45" y="38" width="34" height="42" rx="6" fill="#3b82f6" stroke="#2563eb" stroke-width="1.5"/>
            <circle cx="62" cy="55" r="7" fill="#ffffff"/>
            <circle cx="62" cy="55" r="4" fill="#1e293b"/>
            <text x="62" y="73" text-anchor="middle" font-size="7" font-weight="bold" fill="#ffffff">📷 Lens</text>
          </g>

          
          <g id="fair-usb" class="part">
            <rect x="45" y="185" width="70" height="35" rx="6" fill="#f59e0b" stroke="#d97706" stroke-width="1.5"/>
            <rect x="73" y="208" width="14" height="4" rx="2" fill="#ffffff"/>
            <text x="80" y="200" text-anchor="middle" font-size="8" font-weight="bold" fill="#ffffff">⚡ Port Unit</text>
          </g>

          
          <g id="fair-labels" opacity="0" style="transition: opacity 0.4s ease;">
            <circle cx="48" cy="42" r="2" fill="#ef4444"/>
            <circle cx="75" cy="42" r="2" fill="#ef4444"/>
            <circle cx="48" cy="189" r="2" fill="#ef4444"/>
            <circle cx="111" cy="189" r="2" fill="#ef4444"/>
          </g>
        </svg>

        
        <div class="metrics-overlay">
          <div class="metric-row">
            <div class="metric-label">Lifespan</div>
            <div class="metric-val" style="color:#16a34a;">⏳ 8 – 10+ Years</div>
            <div class="bar-bg"><div class="bar-fill" style="width: 95%; background:#16a34a;"></div></div>
          </div>
          <div class="metric-row">
            <div class="metric-label">Repair Time</div>
            <div class="metric-val" style="color:#16a34a;">⚡ &lt; 2 Minutes (DIY)</div>
            <div class="bar-bg"><div class="bar-fill" style="width: 15%; background:#16a34a;"></div></div>
          </div>
          <div class="metric-row">
            <div class="metric-label">Supply Chain</div>
            <div class="metric-val" style="color:#16a34a;">✦ 100% Fair-Trade Gold</div>
            <div class="bar-bg"><div class="bar-fill" style="width: 100%; background:#16a34a;"></div></div>
          </div>
        </div>
      </div>

      <div class="status-badge badge-good" id="badgeRight">High Risk, Sustainable</div>
    </div>

  </div>

  <script>
    function setMode(mode) {
      const stage = document.getElementById('stage');
      const btnAssembly = document.getElementById('btnAssembly');
      const btnExploded = document.getElementById('btnExploded');
      const btnImpact = document.getElementById('btnImpact');
      
      const badgeLeft = document.getElementById('badgeLeft');
      const badgeRight = document.getElementById('badgeRight');

      // Reset button states
      btnAssembly.classList.remove('active');
      btnExploded.classList.remove('active');
      btnImpact.classList.remove('active');

      stage.classList.remove('exploded', 'show-metrics');

      if (mode === 'assembled') {
        btnAssembly.classList.add('active');
        badgeLeft.textContent = 'Low Risk, High Waste';
        badgeRight.textContent = 'High Risk, Sustainable';
      } else if (mode === 'exploded') {
        btnExploded.classList.add('active');
        stage.classList.add('exploded');
        badgeLeft.textContent = 'Glued & Non-Servicable';
        badgeRight.textContent = 'Modular Snap-In Parts';
      } else if (mode === 'impact') {
        btnImpact.classList.add('active');
        stage.classList.add('show-metrics');
        badgeLeft.textContent = 'Planned Obsolescence';
        badgeRight.textContent = 'Circular Life Cycle';
      }
    }
  </script>
</body>
</html>

How do design engineers systematically identify and eliminate hazards before committing to expensive production tooling?

Design teams use **FMEA** (**Failure Mode and Effects Analysis**), a structured method to identify every way a component could fail, assess the severity of that failure, and engineer preventive solutions.

Coupled with **iterative prototyping**—rapid cycles of building, testing, and refining physical mockups—designers de-risk unproven mechanisms before tooling up mass production lines.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    /* Controls Header */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }
    .btn:active { background: #e2e8f0; }
    .step-pills {
      display: flex;
      gap: 6px;
    }
    .pill {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .pill.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.2);
    }

    /* Diagram Canvas */
    .diagram-area {
      position: relative;
      width: 100%;
      max-width: 480px;
      aspect-ratio: 1 / 0.82;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 16px;
      padding: 10px;
    }

    /* SVG Overlay for Connections */
    .svg-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .flow-line {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      stroke-dasharray: 4 4;
      fill: none;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }
    .flow-line.active {
      stroke: #22b7ff;
      stroke-width: 3.5;
      stroke-dasharray: none;
    }

    .feedback-line {
      stroke: #f59e0b;
      stroke-width: 2.5;
      stroke-dasharray: 5 4;
      fill: none;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }
    .feedback-line.active {
      stroke: #d97706;
      stroke-width: 3.5;
      stroke-dasharray: none;
    }

    /* Node Cards */
    .node {
      position: relative;
      z-index: 2;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }
    .node:hover {
      border-color: #94a3b8;
    }
    .node.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.25);
      background: #f0f9ff;
    }

    .node-num {
      position: absolute;
      top: 6px;
      left: 8px;
      font-size: 11px;
      font-weight: 800;
      color: #94a3b8;
    }
    .node.active .node-num {
      color: #0284c7;
    }

    .node-icon {
      font-size: 24px;
      line-height: 1;
      margin-bottom: 4px;
    }
    .node-title {
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      color: #0f172a;
    }
    .node-sub {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }
    .node.active .node-sub {
      color: #0369a1;
    }

    /* Badge Callout */
    .feedback-tag {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      background: #fef3c7;
      border: 1px solid #fde68a;
      color: #92400e;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 999px;
      pointer-events: none;
      white-space: nowrap;
      opacity: 0.6;
      transition: opacity 0.3s ease;
    }
    .feedback-tag.active {
      opacity: 1;
      border-color: #f59e0b;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn" id="playBtn" aria-label="Play/Pause">⏸</button>
    <div class="step-pills">
      <div class="pill active" data-step="0">1</div>
      <div class="pill" data-step="1">2</div>
      <div class="pill" data-step="2">3</div>
      <div class="pill" data-step="3">4</div>
    </div>
  </div>

  
  <div class="diagram-area">
    <svg class="svg-layer" viewBox="0 0 100 100" preserveAspectRatio="none">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#cbd5e1"/>
        </marker>
        <marker id="arrow-active" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#22b7ff"/>
        </marker>
        <marker id="arrow-warn" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#d97706"/>
        </marker>
      </defs>

      
      <path id="path12" class="flow-line" d="M 46 25 L 54 25" marker-end="url(#arrow)" />
      
      
      <path id="path23" class="feedback-line" d="M 68 45 C 60 55, 40 45, 32 55" marker-end="url(#arrow-warn)" />

      
      <path id="path34" class="flow-line" d="M 46 75 L 54 75" marker-end="url(#arrow)" />

      
      <path id="path41" class="flow-line" d="M 75 55 C 88 50, 88 25, 75 25" style="display:none;" />
    </svg>

    
    <div class="feedback-tag" id="feedbackTag">High Risk Feedback ⚡</div>

    
    <div class="node active" data-step="0">
      <span class="node-num">01</span>
      <div class="node-icon">💡</div>
      <div class="node-title">Radical<br>Concept</div>
      <div class="node-sub">Disruptive Bet</div>
    </div>

    
    <div class="node" data-step="1">
      <span class="node-num">02</span>
      <div class="node-icon">📊</div>
      <div class="node-title">FMEA<br>Scoring</div>
      <div class="node-sub">S × O × D</div>
    </div>

    
    <div class="node" data-step="2">
      <span class="node-num">03</span>
      <div class="node-icon">🖨️</div>
      <div class="node-title">Rapid<br>Prototype</div>
      <div class="node-sub">Fast Iteration</div>
    </div>

    
    <div class="node" data-step="3">
      <span class="node-num">04</span>
      <div class="node-icon">🌱</div>
      <div class="node-title">LCA &amp;<br>Validation</div>
      <div class="node-sub">User Verified</div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let playing = true;
    let timer = null;

    const nodes = document.querySelectorAll('.node');
    const pills = document.querySelectorAll('.pill');
    const playBtn = document.getElementById('playBtn');
    const path12 = document.getElementById('path12');
    const path23 = document.getElementById('path23');
    const path34 = document.getElementById('path34');
    const feedbackTag = document.getElementById('feedbackTag');

    function updateView(idx) {
      currentStep = idx;
      nodes.forEach((n, i) => n.classList.toggle('active', i === idx));
      pills.forEach((p, i) => p.classList.toggle('active', i === idx));

      // Path active markers
      path12.classList.toggle('active', idx === 0 || idx === 1);
      path12.setAttribute('marker-end', (idx === 0 || idx === 1) ? 'url(#arrow-active)' : 'url(#arrow)');

      const isRiskStep = (idx === 1 || idx === 2);
      path23.classList.toggle('active', isRiskStep);
      feedbackTag.classList.toggle('active', isRiskStep);

      path34.classList.toggle('active', idx === 2 || idx === 3);
      path34.setAttribute('marker-end', (idx === 2 || idx === 3) ? 'url(#arrow-active)' : 'url(#arrow)');
    }

    function nextStep() {
      updateView((currentStep + 1) % 4);
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, 3200);
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
    }

    function setPlaying(play) {
      playing = play;
      playBtn.textContent = playing ? '⏸' : '▶';
      if (playing) startTimer();
      else stopTimer();
    }

    playBtn.addEventListener('click', () => setPlaying(!playing));

    pills.forEach((pill, idx) => {
      pill.addEventListener('click', () => {
        setPlaying(false);
        updateView(idx);
      });
    });

    nodes.forEach((node, idx) => {
      node.addEventListener('click', () => {
        setPlaying(false);
        updateView(idx);
      });
    });

    startTimer();
  </script>
</body>
</html>

A common misconception is that strict sustainability standards and safety regulations kill creative freedom.

In reality, tight environmental and user constraints act as creative catalysts, forcing designers to invent smarter joinery, cleaner energy systems, and longer-lasting materials.

When you pitch your next design project, ask: does the creative reward justify the ecological footprint and financial investment?

design-and-technology

Taking Design Risks: Innovation and Enterprise in Product Design. Evaluate how designers balance creative risk-taking with responsible design practice to produce innovative products.

The Double Diamond Framework for Innovation: Balancing Exploration, Risk, and Delivery

Circular Design Guide: Methods for Responsible Enterprise & Systemic Innovation

AQA A-Level Design and Technology: Product Design Specification & Responsible Practice Guidance

To achieve top-band evaluative mastery at UK A2 Level (Year 13), students must avoid purely descriptive accounts of 'cool gadgets' and instead demonstrate rigorous synoptic critique. Lessons should integrate structured debate using multi-criteria weighted matrices, pairing deep commercial/financial acumen (enterprise, unit margins, patenting) directly with ecological ethics (LCA, material scarcity, circular closed-loops).

Taking Design Risks: Innovation and Enterprise in Product Design

Radical vs. Incremental Innovation

The Responsible Design Filter