/* ============================================================
   MySubaru Experience Redesign: case chapters, laid out
   natively in the portfolio's design language.

   Source: Genevieve's own case narrative plus the interview
   deck's own interactive builds in assets/subaru/embeds. The
   diagrams here are drawn natively rather than embedded as
   slide exports.

   Seven chapters, one arc:
     Opening     the category reframe
     Research    four studies, and the strategy they produced
     Ideation    principles, IA, the vehicle-first home, the system
     Testing     four experiments, each Question / Method / Result
     Iterations  the post-launch state-freshness cost constraint
     Prototype   the interactive rebuild of the shipped experience
     Outcome     retention movement, stated with honest attribution

   Registers into window.CASE_PANELS["mysubaru-redesign"],
   overriding the earlier registration in subaru.jsx. Loaded
   after subaru.jsx.
   ============================================================ */
(function () {
  const useState = React.useState;
  const useEffect = React.useEffect;
  const useRef = React.useRef;

  const K = window.CSKit;
  const SectionHead = K.SectionHead;
  const Stat = K.Stat;
  const Panel = K.Panel;
  const Bento = K.Bento;
  const ListBlock = K.ListBlock;
  const Quote = K.Quote;
  const Eyebrow = K.Eyebrow;

  const EMB = "assets/subaru/embeds/";
  const PP = window.PPKit;

  /* ---------- small shared bits ---------- */
  function col(span) { return { gridColumn: "span " + span, display: "flex", flexDirection: "column" }; }

  const H3S = { margin: "0 0 18px", fontSize: "clamp(19px, 2vw, 26px)", fontWeight: 300, maxWidth: 900 };

  function Head3(props) {
    return (
      <div>
        {props.kicker ? <Eyebrow style={{ marginBottom: 14 }}>{props.kicker}</Eyebrow> : null}
        <h3 className="pf-h2" style={H3S}>{props.title}</h3>
        {props.sub ? <p className="nmc-sub">{props.sub}</p> : null}
      </div>
    );
  }

  function Badge(props) {
    return <span className={"nmc-badge" + (props.val ? " val" : "")}>{props.children}</span>;
  }

  function BadgeRow(props) {
    return <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>{props.children}</div>;
  }

  function EvRow(props) {
    return (
      <div className="nmc-evrow">
        <div className="pf-glass nmc-card"><div className="nmc-idx">{props.fromLabel}</div><p>{props.from}</p></div>
        <div className="ar" aria-hidden="true">&rarr;</div>
        <div className="pf-glass nmc-card"><div className="nmc-idx">{props.toLabel}</div><p>{props.to}</p></div>
      </div>
    );
  }

  /* The native diagram vocabulary (Dia, TermCloud, ReachDiagram, OrderFlip,
     ChipSet, Composition, Instrument) is shared across the three Subaru
     cases and lives in subaru-proto.jsx as window.PPKit. */

  function Delta(props) {
    return (
      <div className="pf-glass" style={{ padding: "clamp(16px, 1.6vw, 22px)", display: "flex", flexDirection: "column", gap: 8, height: "100%" }}>
        <div className="pf-num" style={{ fontSize: "clamp(20px, 1.9vw, 26px)", fontWeight: 300, lineHeight: 1, color: "var(--accent)" }}>{props.value}</div>
        <div style={{ fontSize: 12.5, lineHeight: 1.5, color: "var(--label-secondary)" }}>{props.children}</div>
      </div>
    );
  }

  function BarStat(props) {
    return (
      <div>
        <div className="nmc-stat"><span>{props.label}</span><b>{props.value}%</b></div>
        <div className="nmc-bar" aria-hidden="true"><i style={{ width: props.value + "%" }} /></div>
      </div>
    );
  }

  /* ============================================================
     OPENING
     ============================================================ */
  function Meta(props) {
    return (
      <div className="pf-glass" style={{ gridColumn: "span 3", padding: "clamp(20px, 2vw, 28px)" }}>
        <div className="pf-eyebrow" style={{ marginBottom: 12 }}>{props.label}</div>
        <div className="pf-h3" style={{ fontSize: 17 }}>{props.value}</div>
      </div>
    );
  }

  function OpeningPanel(props) {
    const c = props.case;
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Opening" title="From remote control to vehicle ownership companion"
          lead="MySubaru is the connected-vehicle ecosystem of Subaru of America, serving more than 2M owners in the US. I was the Senior Product Designer embedded at Subaru of America and owned the retention half of the program: the app experience, from the homepage and information architecture outward. This chapter is the reframe the other six rest on." />

        <div className="nmc-grid">
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">The product was not broken</div>
            <p>
              MySubaru already performed its best known job well. Owners could start, lock, unlock,
              and locate their vehicle remotely, and they did. That utility created strong episodic
              value: real, repeatable, and genuinely sticky.
            </p>
            <div className="nmc-ev">What it did not create was a reason to return between those moments.</div>
          </div>
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">The assignment</div>
            <p>
              The work arrived as an engagement problem: usage was concentrated in a handful of
              commands, and the team wanted more of it. The available move was to optimize
              engagement inside the existing product structure.
            </p>
            <div className="nmc-ev">Optimizing inside the structure would have protected the structure, which was the thing limiting the ceiling.</div>
          </div>
          <div className="pf-glass nmc-card">
            <div className="nmc-idx">The reframe</div>
            <p>
              I proposed a broader transformation instead: move MySubaru from remote control to
              vehicle ownership companion. The question I wanted the team to answer was what would
              make an owner open the app when they are not actively trying to unlock, locate, or
              start the car.
            </p>
            <div className="nmc-ev">That reframe set the research question, the information architecture, and every experiment that follows.</div>
          </div>
        </div>

        <EvRow
          fromLabel="The question we were asking"
          from="What features are missing from our app? A question that can only ever return answers shaped like the product we already had."
          toLabel="The question I moved us to"
          to="What is missing from the connected-vehicle ownership category? A question that lets evidence come from outside the current feature list."
        />

        <hr className="pf-rule" style={{ margin: 0 }} />

        <Bento>
          <Meta label="Role" value={c.role} />
          <Meta label="Platform" value={c.platform} />
          <Meta label="Year" value={c.year} />
          <Meta label="Organization" value={c.org} />
        </Bento>

        <div className="nmc-grid">
          <Stat value="2M+">connected-vehicle owners in the US using the MySubaru ecosystem.</Stat>
          <Stat value="+40.6%">year-end active usage, comparing November to December 2024 against the same window in 2025.</Stat>
          <Stat value="97.6K &rarr; 149.8K">average daily returning unique visitors, 2024 against 2025.</Stat>
        </div>
        <p className="nmc-sub" style={{ fontSize: 13, color: "var(--label-tertiary)" }}>
          These numbers followed a staged product rollout rather than a controlled holdout. The Outcome
          chapter states exactly what they can and cannot be attributed to.
        </p>

        <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
          {c.tags.map(function (t) { return <span key={t} className="pf-chip">{t}</span>; })}
        </div>
      </div>
    );
  }

  /* ============================================================
     RESEARCH
     ============================================================ */
  function Cloud(props) {
    return (
      <Panel title={props.title}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
          {props.words.map(function (w, i) {
            return (
              <span key={w} style={{
                fontSize: i === 0 ? 18 : 15, fontWeight: i === 0 ? 500 : 400,
                color: i === 0 ? "var(--accent)" : "var(--label-secondary)",
                padding: "7px 14px", borderRadius: 999, background: "var(--fill-tertiary)",
                border: "1px solid var(--pf-hairline)",
              }}>{w}</span>
            );
          })}
        </div>
      </Panel>
    );
  }

  function ResearchPanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Research" title="Four studies, and the strategy they produced"
          lead="The reframe changed what counted as evidence. I ran a category and feature analysis, a set of deliberately incomplete interfaces, a competitive read on where a connected vehicle actually has an advantage, and a study of the ownership moments that did not fit our feature taxonomy. Each one closes with the decision it forced." />

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Research 01" title="Low expectations did not mean low opportunity"
            sub="I began with a category and feature analysis, including capabilities engineering had already identified as feasible but that had never reached a meaningful prioritization discussion. Working with our researcher, I paired that analysis with surveys and moderated conversations about current usage and expectations." />
          <p className="nmc-sub">
            Two patterns emerged. Owners wanted a more personalized, integrated system that could save
            time and money across driving, maintenance, and travel. And they wanted help before a
            problem became work: alerts and recommendations that surfaced the relevant action without
            requiring them to know where to look.
          </p>
          <Bento>
            <div style={col(6)}>
              <Panel kicker="Theme one" title="A personalized, integrated system that saves time and money across multiple areas">
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  <Quote>I want one place that handles my service, billing, and trips, not five logins.</Quote>
                  <Quote>It should already know my car and stop making me re enter everything.</Quote>
                </div>
              </Panel>
            </div>
            <div style={col(6)}>
              <Panel kicker="Theme two" title="Preemptive guidance through recommendations and alerts">
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  <Quote>Tell me before something is wrong, not after I am stranded.</Quote>
                  <Quote>A nudge for the right service at the right time would actually help.</Quote>
                </div>
              </Panel>
            </div>
            <div style={col(6)}><Stat value="70%">primarily expected standard remote-service functionality from a vehicle ownership app.</Stat></div>
            <div style={col(6)}><Stat value="80%">said they would use unfamiliar capabilities if those capabilities solved a meaningful ownership problem.</Stat></div>
          </Bento>
          <div className="pf-glass pf-glass--thick" style={{ padding: "clamp(24px, 2.6vw, 38px)" }}>
            <div className="pf-eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>The contrast that mattered</div>
            <p className="pf-h3" style={{ margin: 0, fontSize: "clamp(16px, 1.4vw, 20px)", fontWeight: 300 }}>
              Low expectations were not a low ceiling. The category had trained customers to expect
              very little, so an expectations survey was measuring the market's history rather than
              the product's potential.
            </p>
          </div>
        </section>

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Research 02" title="Blank interfaces revealed needs our feature list had missed"
            sub="Asking owners to react to our feature ideas would only have told us how well we had described our feature ideas. So I used deliberately incomplete interfaces instead: blank modules for areas such as Service and My Trips, and one question about what information or support belonged there." />
          <PP.Dia caption="The study as it was run, and the shape of the answers. Each module went out empty with one question attached, and the terms below are sized by how often owners reached for them. Service clustered on time, schedule, maintenance, cost, and dealer. Trips clustered on mileage, fuel economy, trip totals, and route.">
            <PP.TermCloud groups={[
              {
                module: "Service",
                terms: [["schedule", 3.4], ["maintenance", 3.1], ["time", 2.8], ["cost", 2.6], ["dealer", 2.2], ["due", 1.7], ["oil", 1.4], ["appointment", 1.3], ["history", 1.0], ["recall", 0.8], ["warranty", 0.6]],
                read: "Every frequent term is part of one decision: what is due, what it costs, and when to book it.",
              },
              {
                module: "My Trips",
                terms: [["mileage", 3.3], ["MPG", 3.0], ["trip total", 2.4], ["route", 2.2], ["fuel cost", 2.0], ["distance", 1.6], ["stops", 1.3], ["range", 1.1], ["history", 0.8], ["efficiency", 0.7]],
                read: "Not a request for maps. The frequent terms are all things only the vehicle knows about the journey.",
              },
            ]} />
          </PP.Dia>
          <div className="nmc-grid">
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Service</div>
              <h4>An anticipatory maintenance experience, not a service directory</h4>
              <p>
                Participants described what is due, why it matters, what it may cost, when to schedule
                it, and where to go. The unit of value was a decision they could act on, not a record
                they could look up.
              </p>
              <div className="nmc-ev">This became the service path that runs from a detected condition through to a booked appointment.</div>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">My Trips</div>
              <h4>The financial and mechanical reality of a trip</h4>
              <p>
                A less expected answer. People were not asking Subaru to rebuild Google Maps. They
                wanted vehicle-specific fuel economy, miles driven, estimated travel cost, vehicle
                condition, and useful stops chosen because of the car itself.
              </p>
              <div className="nmc-ev">The opportunity existed precisely because the vehicle could contribute information a generic map could not.</div>
            </div>
          </div>
          <Bento>
            <div style={col(6)}><Cloud title="Service" words={["service", "time", "schedule", "maintenance", "cost", "dealer", "date", "needed"]} /></div>
            <div style={col(6)}><Cloud title="Trips" words={["mileage", "trips", "trip", "mpg", "total", "miles", "route", "gas"]} /></div>
          </Bento>
        </section>

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Research 03" title="We chose to compete on data only the vehicle could provide"
            sub="Approximately 90% of participants already used Apple Maps or Google Maps. Trying to beat mature mapping products at routing would have created a large investment in a capability where Subaru had no structural advantage." />
          <Bento>
            <div style={col(6)}>
              <Panel title="What a standard map already does well">
                <ListBlock items={["Route", "Estimated arrival", "Traffic"]} />
              </Panel>
            </div>
            <div style={col(6)}>
              <Panel title="What only the connected vehicle knows" thick>
                <ListBlock items={["Fuel state and range-aware planning", "Mileage and vehicle-specific fuel economy", "Charge and EV estimation", "Service condition, tire status, ownership history"]} />
              </Panel>
            </div>
          </Bento>
          <p className="nmc-sub">
            I positioned trip planning around those signals rather than around navigation itself. The
            strategy became a sentence the team could apply without me in the room: compete where
            connected-vehicle data makes the experience meaningfully different, and integrate rather
            than rebuild everywhere else.
          </p>
        </section>

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Research 04" title="Safety and control mattered more than the emotion we had been designing for"
            sub="I also wanted the moments that did not fit our existing feature taxonomy. Instead of asking participants to rank predefined capabilities, I asked them to remember a recent moment when managing their vehicle felt stressful, uncertain, inconvenient, or time-consuming." />
          <Bento>
            <div style={col(7)}>
              <Panel title="The stories were specific">
                <ListBlock items={[
                  "Walking toward a parked car alone at night.",
                  "Seeing a low-tire warning while already late.",
                  "Not knowing whether an issue was safe to ignore.",
                  "Trying to decide what action needed to happen next.",
                ]} />
              </Panel>
            </div>
            <div style={Object.assign({}, col(5), { gap: 16 })}>
              <Stat value="74%">prioritized safety and control as the emotional outcome they cared about most, ahead of the convenience and peace-of-mind framing our team had assumed.</Stat>
            </div>
            <div style={col(12)}>
              <div className="pf-glass nmc-card">
                <div className="nmc-idx">Making feeling testable</div>
                <h4>I converted the qualitative findings into measurable proxies</h4>
                <p>
                  Task click-through, completion time, perceived stress, perceived safety, and
                  perceived control. Each emotional claim was tied to something a study could observe,
                  so tone and reassurance could be evaluated as product behavior rather than defended
                  as taste.
                </p>
                <div className="nmc-ev">Those five proxies are the measures the Testing chapter runs on.</div>
              </div>
            </div>
          </Bento>
        </section>

        <section className="pf-glass pf-glass--thick" style={{ padding: "clamp(30px, 5vw, 60px)", textAlign: "center" }}>
          <div className="pf-eyebrow" style={{ marginBottom: 20 }}>How might we</div>
          <p className="pf-h2" style={{ margin: "0 auto", maxWidth: 900, fontSize: "clamp(18px, 2vw, 27px)", fontWeight: 300 }}>
            Increase engagement by making the ownership app more{" "}
            <span style={{ color: "var(--accent)" }}>personalized</span>,{" "}
            <span style={{ color: "var(--accent)" }}>anticipatory</span>, and{" "}
            <span style={{ color: "var(--accent)" }}>emotionally supportive</span>, so drivers feel
            safer, more certain, less stressed, and more efficient?
          </p>
        </section>
      </div>
    );
  }

  /* ============================================================
     IDEATION
     ============================================================ */
  const PRINCIPLES = [
    {
      k: "Principle 01", t: "Personal habits",
      p: "Personalization should extend beyond choosing favorite remote commands. The structure of the experience can adapt around the tasks an owner repeatedly values, which means personalization is an architecture decision before it is a settings screen.",
      ev: "Becomes: a customizable quick-action set, a home ordered by what this owner actually uses.",
    },
    {
      k: "Principle 02", t: "Preemptive guidance",
      p: "Useful capabilities should surface when context makes them relevant, rather than depending on the customer to know that they exist. Discovery is the product's job, not the owner's.",
      ev: "Becomes: contextual cards, prioritized alerts, and next actions attached to conditions.",
    },
    {
      k: "Principle 03", t: "Supportive feelings",
      p: "Safety, certainty, and reduced stress are not visual polish. If they improve how confidently and efficiently someone completes a task, they are part of the product behavior and belong in the system.",
      ev: "Becomes: a tested voice, carried in the design system so alerts and recommendations stay consistent.",
    },
  ];

  function IdeationPanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Ideation" title="Turning the research into a system, not a set of screens"
          lead="Three principles carried the findings into design decisions. From there the work was structural: an information architecture that had to choose between breadth and focus, a home screen that reversed the legacy hierarchy, an alert pattern that had to survive more than one problem at once, and a component library the team could keep using after I left." />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Design 01" title="Three principles turned the research into a system" />
          <div className="nmc-grid">
            {PRINCIPLES.map(function (p) {
              return (
                <div key={p.k} className="pf-glass nmc-card">
                  <div className="nmc-idx">{p.k}</div>
                  <h4>{p.t}</h4>
                  <p>{p.p}</p>
                  <div className="nmc-ev">{p.ev}</div>
                </div>
              );
            })}
          </div>
        </section>

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Design 02" title="Information architecture was a prioritization decision, not a cleanup exercise"
            sub="I mapped existing and proposed functionality into a full taxonomy, tracking what stayed, what moved, what consolidated, what changed names, and what entered the system for the first time. Structure was the first place the reframe had to become real." />
          <BadgeRow><Badge val>TESTED + SHIPPED</Badge><span className="nmc-chip">Final arrangements selected by testing, not preference</span></BadgeRow>
          <div className="nmc-evrow">
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Arrangement A</div>
              <div className="pf-num" style={{ fontSize: "clamp(22px, 2.2vw, 30px)", fontWeight: 300, color: "var(--accent)", lineHeight: 1 }}>64 items &middot; 2 taps</div>
              <p style={{ marginTop: 12 }}>Breadth of discovery. More of the system is visible early, which helps owners find capabilities they never knew existed, and asks them to scan more at every level.</p>
            </div>
            <div className="ar" aria-hidden="true">&rarr;</div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Arrangement B</div>
              <div className="pf-num" style={{ fontSize: "clamp(22px, 2.2vw, 30px)", fontWeight: 300, color: "var(--accent)", lineHeight: 1 }}>36 items &middot; 3 taps</div>
              <p style={{ marginTop: 12 }}>Depth of focus. Less breadth at each level and a cleaner decision, at the cost of pushing capability one tap further from the owner.</p>
            </div>
          </div>
          <p className="nmc-sub">
            That tradeoff forced a choice between discoverability and focus. I reviewed the structures
            with the product owner and PMs rather than resolving them inside design, because
            information architecture is also a statement of product strategy: what an organization
            makes easy to find reveals what it believes customers should value.
          </p>
          <PP.Dia caption="The same three structures priced in what an owner can actually reach. Every option puts 20 items one tap away, so the real choice is the second row against the third: 64 items at two taps, or 36 at three. Laying the options out this way turned an argument about taste into an argument about what we wanted owners to find first.">
            <PP.ReachDiagram rows={[
              { label: "One tap from home", items: 20, taps: "all three options", note: "Identical in every candidate, so it was never the decision." },
              { label: "Two taps, broad structure", items: 64, taps: "option B", note: "Everything is reachable sooner, at the cost of denser levels above it." },
              { label: "Three taps, deep structure", items: 36, taps: "option C", dim: true, note: "Cleaner levels, but nearly half the product moves further away from the owner." },
            ]} />
          </PP.Dia>
          <PP.Wide src="taxonomy/index.html" w={1280} h={631} title="MySubaru information architecture explorer"
            badge="Information architecture, browsable"
            note="The full taxonomy as a working tool: top-level areas across the header, pages and sections as columns, every item carrying the description that defines its scope. Building it this way rather than as a static map is what let PMs and engineering interrogate the structure directly instead of taking a diagram on faith." />
        </section>

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Design 03" title="The home screen became a view of the vehicle before it became a command center"
            sub="The legacy homepage asked owners to issue a command before it showed them anything about the car. The redesign reverses that hierarchy: vehicle condition first, then the actions that condition implies." />
          <BadgeRow><Badge val>SHIPPED</Badge></BadgeRow>
          <PP.Dia caption="The reading order of the home screen, before and after. The legacy home opened with a command dial and pushed vehicle state into a single line of red text. The redesign inverts the first two rows and adds a permanent address for everything else, which is the whole of the category reframe expressed as a hierarchy.">
            <PP.OrderFlip
              before={[
                "Quick Start dial: issue a remote command",
                "Secondary command tiles",
                "One red status line, if something was wrong",
                "Vehicle name and image",
                "Everything else, behind a menu",
              ]}
              after={[
                "The vehicle itself, with its current condition",
                "Range and mileage",
                "Four customizable quick actions, plus the full set",
                "Prioritized alerts, each ending in an action",
                "Persistent bottom navigation: Home, Locate, Service, Social",
              ]} />
          </PP.Dia>
          <div className="nmc-grid">
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">The car key model</div>
              <p>
                The redesign treats the physical key as the mental model for the digital one. It
                combines vehicle status, customizable remote actions, prioritized alerts, and direct
                next steps in a single object the owner already understands.
              </p>
              <div className="nmc-ev">The command vocabulary comes straight off the key and the vehicle: engine, lock, unlock, climate, defrost, dog mode, tire, window, and the rest.</div>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">What stays sticky</div>
              <p>
                Remote commands remain highly accessible, because they are a proven source of
                stickiness and the redesign was never an argument against them. They now sit inside a
                broader model of ownership rather than defining the entire product.
              </p>
              <div className="nmc-ev">Protecting remote-command engagement became measurement pillar 01 in Testing.</div>
            </div>
          </div>
          <PP.Dia caption="The full remote-command vocabulary, taken from what the key and the vehicle can actually do. Naming the whole set first is what made the next decision possible: the four highlighted commands stay within thumb reach on the home screen, and the rest live one layer down in a set the owner arranges.">
            <PP.ChipSet groups={[
              { label: "Access", items: ["Lock", "Unlock", "Hood", "Gas tank", "Window", "Vent"], thumb: ["Lock", "Unlock"] },
              { label: "Climate", items: ["Engine", "Climate", "Heating", "AC", "Defrost", "Dog mode"], thumb: ["Engine", "Climate"] },
              { label: "Locate and safety", items: ["Flash", "Honk", "Fog light", "Navigate", "Alert", "Tire"], thumb: [] },
            ]} />
          </PP.Dia>
          <PP.Solo src="phone.html" demo="s43-home" title="MySubaru redesigned home screen"
            badge="Redesigned home" note="Vehicle first, then range and mileage, then the quick-action row with a plus control that opens the full command set for customizing. The moon control switches the whole system between its two modes, both defined in the design system below. Hover to take over." />
        </section>

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Design 04" title="Alert hierarchy had to work when more than one thing was wrong"
            sub="A single low-tire card is easy to design. The system question is what happens when low tire pressure, an open window, and a service reminder all occur at once, and the interface has to say which one matters." />
          <BadgeRow><Badge val>SHIPPED</Badge></BadgeRow>
          <Bento>
            <div style={col(7)}>
              <PP.Solo src="phone.html" demo="s39-2" title="MySubaru stacked vehicle alerts"
                badge="Alert stack, running"
                note="The stack resolving in place: the control beside the vehicle brings the alerts in, the top card opens to its explanation and its two actions, and the count stays visible so nothing is silently hidden. Severity decides the order, and every alert ends in an action rather than a notification." />
            </div>
            <div style={col(5)}>
              <Panel title="Why the stack, and not a list" thick>
                <p className="pf-body" style={{ margin: 0 }}>
                  I created the stacked pattern with an explicit severity hierarchy so critical
                  vehicle conditions do not compete visually with routine information. A flat list
                  gives a service reminder the same weight as a safety issue. The stack lets one card
                  own the moment while keeping the others countable and reachable.
                </p>
                <p className="pf-body" style={{ margin: "14px 0 0", fontSize: 14, color: "var(--label-tertiary)" }}>
                  Card priority order was set by user testing, not by internal preference.
                </p>
              </Panel>
            </div>
          </Bento>
        </section>

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Design 05" title="I built reusable behavior, not a collection of redesigned screens"
            sub="I built the component library with our senior UI designer using tokenized, reusable primitives. The purpose was not only visual consistency: a reusable system let the redesign ship incrementally across surfaces while preserving interaction logic, severity patterns, spacing, state behavior, and language." />
          <BadgeRow><Badge val>SHIPPED</Badge><span className="nmc-chip">Primitive, semantic, and component tokens</span><span className="nmc-chip">Two modes</span></BadgeRow>
          <PP.Dia caption="The same three pieces, composed twice. Defining the tile's behavior once, rather than drawing two screens, is what let both surfaces stay in step while the redesign rolled out one surface at a time.">
            <PP.Composition
              primitive="Command tile, row group, plus control"
              primitiveNote="Three primitives with one set of states: idle, pending, confirmed, unavailable, and being rearranged."
              compositions={[
                { label: "Composed as the home row", note: "Four tiles and the plus control, sized for thumb reach and reorderable in place. The plus is the only affordance that has to be learned." },
                { label: "Composed as the command sheet", note: "The same tile repeated under groups for climate, access, and locate and safety, with drag to promote a command into the home row." },
              ]} />
          </PP.Dia>
          <PP.Wide src="design-system.html" w={1380} h={606} hook="design-system-light"
            title="MySubaru design system browser" badge="Design system, browsable"
            note="The system as an artifact the team could keep using: foundations for color, type, spacing, radius, elevation, motion and iconography, three token tiers from primitive through semantic to component, then the components and patterns themselves with an inspector. The deliverable outlived my presence on the project, which was the point of building it this way." />
        </section>
      </div>
    );
  }

  /* ============================================================
     TESTING
     ============================================================ */
  const PILLARS = [
    {
      k: "01", t: "Remote-command engagement",
      p: "Protect the behavior that already creates product stickiness. Any new structure that reduced remote-command use would have traded a proven habit for an unproven one.",
    },
    {
      k: "02", t: "Navigation efficiency",
      p: "Measure whether multi-step tasks can be completed through the shortest path, without backtracking, and within an expected completion time.",
    },
    {
      k: "03", t: "Service awareness",
      p: "Test whether the homepage communicates capabilities that owners previously failed to discover at all.",
    },
    {
      k: "04", t: "Value through information architecture",
      p: "Determine whether making functionality visible and understandable changes perceived value and usage intent, not just findability.",
    },
  ];

  const RECALL = [
    {
      t: "Task 1: from memory", head: "90%",
      p: "One group viewed a homepage for thirty seconds, then selected the capabilities they believed were available with the screen hidden.",
      rows: [["Unlock door", 95, 92], ["Check vehicle status", 90, 88], ["Climate preset", 85, 82], ["Trip history", 45, 38], ["Locate vehicle", 40, 35]],
    },
    {
      t: "Task 2: while viewing", head: "80%",
      p: "A separate group answered the same question with the interface still visible, which separates what people remember from what they can find while looking.",
      rows: [["Unlock door", 93, 90], ["Check vehicle status", 88, 85], ["Trip planning", 42, 36], ["Locate vehicle", 38, 32], ["Valet parking", 30, 25]],
    },
  ];

  function RecallRow(props) {
    return (
      <div style={{ marginBottom: 15 }}>
        <div className="nmc-stat"><span>{props.label}</span><b>{props.a}% &middot; {props.b}%</b></div>
        <div className="nmc-bar" aria-hidden="true"><i style={{ width: props.a + "%" }} /></div>
        <div className="nmc-bar" aria-hidden="true" style={{ marginTop: 3 }}><i style={{ width: props.b + "%", opacity: 0.42 }} /></div>
      </div>
    );
  }

  function TestingPanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Testing" title="Four experiments, and what each one changed"
          lead="At the scale of MySubaru, a full redesign without predefined success criteria would have reduced testing to preference collection. I defined the measurement pillars before finalizing the structure, then ran four studies against them: feature recognition, navigation efficiency, contextual guidance, and voice." />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Framework" title="We defined success before selecting the design"
            sub="Each pillar was tied back to a research question, so we would not end up optimizing a number without knowing why it mattered." />
          <div className="nmc-grid">
            {PILLARS.map(function (p) {
              return (
                <div key={p.k} className="pf-glass nmc-card">
                  <div className="nmc-idx">Pillar {p.k}</div>
                  <h4>{p.t}</h4>
                  <p>{p.p}</p>
                </div>
              );
            })}
          </div>
        </section>

        <hr className="pf-rule" style={{ margin: 0 }} />

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Test 01" title="Visibility was being mistaken for lack of demand" />
          <BadgeRow><Badge val>TESTED + SHIPPED</Badge><span className="nmc-chip">Pillar 01 and 03</span></BadgeRow>
          <div className="nmc-qgrid">
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Question</div>
              <h4>Does the homepage structure change what owners believe the app can do?</h4>
              <div className="nmc-blk"><b>Method</b>Participants viewed alternative homepage structures for thirty seconds. One group then identified the available features from memory. A second group answered the same question while still viewing the interface, so recall and discoverability could be separated.</div>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Result</div>
              <h4>The horizontal customizable remote-command structure reached 90% feature recognition</h4>
              <div className="nmc-blk"><b>The finding underneath</b>Remote commands were recognized by nearly everyone in both versions. Trip planning and vehicle location sat at the bottom of every list, in both tasks, regardless of structure.</div>
            </div>
          </div>
          <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(290px, 1fr))" }}>
            {RECALL.map(function (r) {
              return (
                <div key={r.head} className="pf-glass nmc-card">
                  <div className="nmc-idx">{r.t}</div>
                  <div className="pf-num" style={{ fontSize: "clamp(24px, 2.2vw, 30px)", fontWeight: 300, color: "var(--accent)", lineHeight: 1, marginBottom: 12 }}>{r.head}</div>
                  <p>{r.p}</p>
                  <div style={{ marginTop: 18 }}>
                    {r.rows.map(function (row) {
                      return <RecallRow key={row[0]} label={row[0]} a={row[1]} b={row[2]} />;
                    })}
                  </div>
                  <div className="nmc-ev">Solid bar: version A. Muted bar: version B. Values are the share of participants who identified the capability as available.</div>
                </div>
              );
            })}
          </div>
          <PP.Dia caption="The instrument, including the options that were never there. Offering capabilities the interface did not have means a participant could be wrong in both directions, which is what separates recognition from agreeableness.">
            <PP.Instrument
              prompt="After thirty seconds with the home screen: which of the following can you do in this app? Select every one that applies."
              real={["Start and stop the engine", "Lock and unlock", "Climate and defrost", "Check vehicle condition", "Plan a trip", "Find the vehicle", "Schedule service"]}
              decoys={["Pay your vehicle loan", "Order parts and accessories", "Book a test drive", "Transfer ownership", "Buy insurance"]}
              note="Remote commands were recognized by nearly everyone in both versions. Trip planning and vehicle location sat at the bottom of every list, in both tasks, whichever structure the participant saw." />
          </PP.Dia>
          <div className="nmc" style={{ gap: 18 }}>
            <p className="nmc-sub" style={{ fontSize: 13.5 }}>
              Both arrangements, running side by side. They are the same application with the same
              commands and the same customization behavior: only the arrangement of the command set
              changes, which is what makes the recognition difference attributable to structure rather
              than to content. Each one demonstrates itself; hover to take over.
            </p>
            <PP.Row compare>
              <PP.Phone src="phone-horizontal.html" demo="s33-a" badge="A: horizontal, customizable"
                title="Version A, horizontal customizable commands"
                note="A short row of commands with the rest one layer down, arranged by the owner. This is the version that reached 90% feature recognition." />
              <PP.Phone src="phone-vertical.html" demo="s33-b" badge="B: vertical list"
                title="Version B, vertical list arrangement"
                note="The same commands as a full vertical list, also reorderable. More is visible at once, and fewer capabilities were remembered." />
            </PP.Row>
          </div>
          <div className="nmc-blk dec" style={{ maxWidth: "74ch" }}>
            <b>Design consequence</b>
            The wrong conclusion would have been that owners do not want trip planning. The stronger
            conclusion is that owners cannot value a capability they consistently fail to discover.
            That distinction justified investing in visibility rather than cutting the feature, and it
            set up the next test.
          </div>
        </section>

        <hr className="pf-rule" style={{ margin: 0 }} />

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Test 02" title="An explicit destination beat an ambiently visible module" />
          <BadgeRow><Badge val>TESTED + SHIPPED</Badge><span className="nmc-chip">Pillar 02</span></BadgeRow>
          <div className="nmc-qgrid">
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Question</div>
              <h4>Does surfacing trip planning on the home screen make owners more likely to use it?</h4>
              <div className="nmc-blk"><b>Method</b>Both versions used the same trip-planning flow after entry. Only the homepage path changed: one version carried a Trips and Location module on the home screen, the other removed it and led to the same flow through the labelled destination in the persistent bottom navigation. Holding the flow constant isolates the effect of the entry structure.</div>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Result</div>
              <h4>Version B, the explicitly labelled destination, won on every measure</h4>
              <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 12, marginTop: 16 }}>
                <Delta value="+12.5 pp">click-through to the trip-planning flow</Delta>
                <Delta value="33.4 s">faster task completion</Delta>
                <Delta value="+20%">participant preference</Delta>
              </div>
            </div>
          </div>
          <PP.Row compare>
            <PP.Phone src="phone.html" demo="s34-a" badge="A: ambient module"
              title="Version A, the map module on the home screen"
              note="The path the module offers: scroll to the Trips and Location card on the home screen, open it, and arrive at the same trip flow." />
            <PP.Phone src="phone.html" demo="s34-b" badge="B: labelled destination"
              title="Version B, the labelled Locate destination"
              note="The same trip flow, entered instead through the explicit address in the bottom navigation. Everything after the entry point is identical, which is what isolates the entry structure." />
          </PP.Row>
          <div className="nmc-blk dec" style={{ maxWidth: "74ch" }}>
            <b>Design consequence</b>
            The result challenged the team's original assumption that visibility on the home screen was
            the strongest lever. A clearly labelled destination helped people act more effectively than
            a module that was visually present but less explicit about its purpose. Presence is not the
            same as an invitation, and the navigation model kept the explicit address.
          </div>
        </section>

        <hr className="pf-rule" style={{ margin: 0 }} />

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Test 03" title="Guidance changed behavior even when people did not tap it" />
          <BadgeRow><Badge val>TESTED + SHIPPED</Badge><span className="nmc-chip">Pillar 02 and 04</span></BadgeRow>
          <div className="nmc-qgrid">
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Question</div>
              <h4>Does preemptive guidance actually help, or does it just add another card?</h4>
              <div className="nmc-blk"><b>Method</b>I tested contextual guidance using a community-event task. One experience surfaced a contextual message about an upcoming event at the top of the screen. The control version did not, leaving the same event reachable through the ordinary content below.</div>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Result</div>
              <h4>The guided version won, and then produced an unplanned finding</h4>
              <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 12, marginTop: 16 }}>
                <Delta value="+7 pp">click-through on the event task</Delta>
                <Delta value="Faster">task completion</Delta>
                <Delta value="+53 pp">participant preference</Delta>
              </div>
            </div>
          </div>
          <PP.Row compare>
            <PP.Phone src="phone.html" demo="s35-a" badge="A: guided"
              title="Version A, guided by the contextual card"
              note="The contextual message sits at the top of the community screen and leads straight to the event. Two taps, and the owner never has to scan the page." />
            <PP.Phone src="phone.html" demo="s35-b" badge="B: unguided control"
              title="Version B, the unguided control"
              note="The same event, reachable only through the ordinary content below. Badges, highlights, and the event listing itself are identical in both versions: the card is the only difference." />
          </PP.Row>
          <div className="pf-glass pf-glass--thick" style={{ padding: "clamp(24px, 2.6vw, 38px)" }}>
            <div className="pf-eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>The result I did not plan for</div>
            <p className="pf-h3" style={{ margin: 0, fontSize: "clamp(16px, 1.4vw, 20px)", fontWeight: 300 }}>
              Some participants saw the contextual message, did not select it, and still reached the
              event more quickly. The card was doing more than providing a shortcut. It was telling
              the owner that the capability existed, which changed how they read the rest of the
              interface.
            </p>
          </div>
          <div className="nmc-blk dec" style={{ maxWidth: "74ch" }}>
            <b>Design consequence</b>
            That insight expanded preemptive guidance from a single UI component into a system-level
            behavior. Guidance was no longer a card we placed where we wanted a click. It became a way
            of teaching the product's own scope, which is the same problem Test 01 exposed from the
            opposite direction.
          </div>
        </section>

        <hr className="pf-rule" style={{ margin: 0 }} />

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="Test 04" title="Supportive language became part of the interaction system" />
          <BadgeRow><Badge val>TESTED + SHIPPED</Badge><span className="nmc-chip">Pillar 04</span></BadgeRow>
          <div className="nmc-qgrid">
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Question</div>
              <h4>How should the vehicle talk to its owner about its own condition?</h4>
              <div className="nmc-blk"><b>Method</b>I tested vehicle-status communication on three dimensions, each as a forced choice between two complete versions of the same message, so participants chose a voice rather than rating adjectives.</div>
              <div style={{ marginTop: 20, display: "grid", gap: 14 }}>
                <BarStat label="Supportive over technical" value={80} />
                <BarStat label="Reassuring over anxious" value={90} />
                <BarStat label="Warm over cold" value={60} />
              </div>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">Result</div>
              <h4>I did not simply ship the winning version</h4>
              <p>
                Each dimension had a winner, but no single tested version was strongest on all three.
                Working with our copywriter, I combined the strongest clarity and tone characteristics
                into one shared voice: supportive, reassuring, warm.
              </p>
              <div className="nmc-blk trade">
                <b>Why combine rather than pick</b>
                A forced choice tells you which of two options people prefer, not which attributes did
                the work. Recombining the attributes and carrying them as a rule is what makes the
                finding reusable on messages that were never tested.
              </div>
            </div>
          </div>
          <div className="nmc-blk dec" style={{ maxWidth: "74ch" }}>
            <b>Design consequence</b>
            That language pattern became part of the design system rather than a copy deck, so alerts,
            recommendations, and next actions behave consistently across the product. Research 04 asked
            for safety and control as a feeling. This is where that feeling became something the system
            can reproduce without me writing each string.
          </div>
        </section>
      </div>
    );
  }

  /* ============================================================
     ITERATIONS: the post-launch cost constraint
     ============================================================ */
  function IterationsPanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Iterations" title="When better vehicle information met a real infrastructure cost"
          lead="This chapter happened after the redesign was already moving. Customer complaints reached Subaru headquarters in Japan about vehicle status that did not match the physical car. The issue arrived framed as bad data. I reframed it as a product problem: state freshness, interaction hierarchy, and latency." />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="Diagnosis" title="The interface could display stale information with complete confidence" />
          <div className="nmc-grid">
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">The mechanism</div>
              <p>
                Entering a screen did not necessarily trigger a new vehicle-data fetch. The interface
                had no way of expressing the difference between a state it had just confirmed and one
                it had cached, so it rendered both with identical certainty.
              </p>
              <div className="nmc-ev">The bug was not in the data. It was in an interface that had never been asked to represent its own freshness.</div>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">The instinct I argued against</div>
              <p>
                The fastest fix was to soften the copy: your door may be open. That removes the
                complaint by removing the claim, and it costs nothing to implement.
              </p>
              <div className="nmc-ev">It also weakens trust in every alert the system will ever send, including the ones that are correct and urgent.</div>
            </div>
            <div className="pf-glass nmc-card">
              <div className="nmc-idx">The constraint</div>
              <p>
                The better experience required fresher state, and fresher state meant more
                vehicle-data calls. At Subaru's scale, vehicle-data refresh behavior created an impact
                on the order of five million dollars.
              </p>
              <div className="nmc-ev">Which made this a design problem with a budget attached, not a copy problem.</div>
            </div>
          </div>
        </section>

        <section className="nmc" style={{ gap: 26 }}>
          <Head3 kicker="The model" title="Make refresh explicit, and stop paying for fetches nobody asked for"
            sub="Rather than fetching on every screen entry or apologizing in copy, I proposed a model where refreshing is an action the owner takes and can see the result of." />
          <BadgeRow><Badge>PROPOSED</Badge><span className="nmc-chip">Argument accepted on cost per active user</span></BadgeRow>
          <Bento>
            <div style={col(6)}>
              <Panel title="What the model changes" thick>
                <ListBlock items={[
                  "Explicit tap to refresh, on the control that owns vehicle state.",
                  "Pull to refresh on the home screen, using the gesture owners already expect.",
                  "Fewer surfaces fetching vehicle state independently of each other.",
                  "Denser status summaries, so one fetch answers more questions.",
                  "Visual diagnostics that show the condition on the vehicle itself.",
                  "Last-updated timestamps on every value that can go stale.",
                ]} />
              </Panel>
            </div>
            <div style={col(6)}>
              <Panel title="Why it costs less rather than more">
                <p className="pf-body" style={{ margin: 0 }}>
                  Honesty and frequency are different problems. A timestamp makes stale data
                  acceptable without fetching anything, which removes the pressure to poll. An
                  explicit refresh moves the remaining fetches to the moments an owner actually cares,
                  and consolidating surfaces stops the same state being requested three times in one
                  session.
                </p>
                <p className="pf-body" style={{ margin: "16px 0 0" }}>
                  The argument that ultimately landed was not simply that the design was better. It
                  was better design at a lower cost per active user.
                </p>
              </Panel>
            </div>
          </Bento>
          <div className="nmc" style={{ gap: 18 }}>
            <div className="nmc-olabel">Three refresh behaviors, and the two that shipped</div>
            <p className="nmc-sub" style={{ fontSize: 13.5 }}>
              All three put a visible spinner where the owner is already looking, so a refresh becomes
              something that happened rather than something that may have happened. We shipped the two
              that an owner performs deliberately and left the gesture out, because a pull that fires
              on every accidental over-scroll is a fetch we cannot attribute to intent.
            </p>
            <PP.Row compare tight>
              <PP.Phone src="phone-b.html" demo="s41-a" badge="01 Pull down" status="proposed, tested, not shipped"
                title="Pull to refresh, proposed and tested, not shipped"
                note="The gesture owners already expect. It stayed out because it fires on any over-scroll, which puts fetches back into exactly the moments the cost argument was trying to remove." />
              <PP.Phone src="phone-b.html" demo="s41-b" badge="02 Tap the alert control" status="winner, shipped"
                title="Tap to refresh, the winning behavior"
                note="Tap the control that owns vehicle state: it refreshes, then scrolls itself to the cards that changed. One deliberate action, a spinner in place, and a resolved value with a timestamp underneath." />
              <PP.Phone src="phone-b.html" demo="s41-c" badge="03 Scroll to the bottom" status="shipped with 02"
                title="Scroll-triggered refresh, shipped alongside the tap"
                note="No tap and no pull: reaching the bottom of the home screen fires one refresh. Getting there is reliable evidence that the owner is actually reading the state, so that is where the second fetch is spent." />
            </PP.Row>
          </div>
          <div className="nmc" style={{ gap: 18 }}>
            <div className="nmc-olabel">From an alert to the vehicle itself</div>
            <p className="nmc-sub" style={{ fontSize: 13.5 }}>
              The denser end of the model. One summary answers the whole question of how the car is, the
              top-down illustration puts the open windows and the affected tires on the vehicle, and
              every value carries its own last-updated time. Information honesty went up while the
              number of data calls went down.
            </p>
            <PP.Row compare tight>
              <PP.Phone src="phone-b.html" demo="s42-a" badge="Alert to diagnostics" status="live"
                title="The path from an alert through to diagnostics"
                note="Tap the alert control, the stack comes in, the top card opens to its detail, and the detail leads to the vehicle diagnostics page. This is the short path, and the one an owner takes most." />
              <PP.Phone src="phone-o1.html" demo="s42-b" badge="Predictions to diagnostics" status="live"
                title="The longer path, from a prediction through vehicle status to diagnostics"
                note="The same destination reached through a prediction and then the vehicle status summary. Showing both is how the cost conversation got specific: this is the longer chain, and prediction is the surface whose data is the most expensive to keep fresh." />
            </PP.Row>
            <p className="nmc-sub" style={{ fontSize: 13 }}>
              The prediction surface is also where this chapter meets the assistant work: when
              continuously modelled real-time vehicle data was priced out, the value it was carrying had
              to be rebuilt from signals we already had. That reframing is the AI Driving Assistant case.
            </p>
          </div>
        </section>

        <section className="nmc" style={{ gap: 20 }}>
          <Head3 kicker="What this chapter is for" title="The reframe is the transferable part" />
          <p className="nmc-sub">
            A complaint about wrong data arrived as an engineering ticket. Treating it as an interface
            problem about freshness, hierarchy, and latency is what turned it into a design decision
            with a business case, and the business case is what made it possible to argue for the more
            honest experience rather than the cheaper apology.
          </p>
        </section>
      </div>
    );
  }

  /* ============================================================
     PROTOTYPE
     ============================================================ */
  const PROTO_NOTES = [
    {
      k: "01", t: "Vehicle-first home",
      p: "High-frequency remote commands stay within thumb reach, while vehicle condition, alerts, and contextual next steps are visible before the owner goes looking for them.",
      d: "Try: drag the plus control to open the full command set, drag a command into the top row and save, open the stacked alerts, toggle the two modes with the moon control.",
    },
    {
      k: "02", t: "Connected-vehicle trip planning",
      p: "Intentionally not another navigation product. The trip experience uses vehicle-specific information to help owners understand the real cost and condition of a journey.",
      d: "Try: the Location destination in the bottom navigation, then the trip plan. Mileage, average MPG, gas stops with per-stop cost, a budget breakdown, and a trip summary with total distance and cost.",
    },
    {
      k: "03", t: "Service from condition to resolution",
      p: "Vehicle information becomes more useful when the interface can connect a detected condition directly to a resolution path, rather than ending at the notification.",
      d: "Try: open the low tire pressure alert, then locate a service station and schedule from the detail. The path from condition to confirmed appointment never leaves the flow.",
    },
    {
      k: "04", t: "Guest access, boundaries, and community",
      p: "The wider system the redesign made room for: secure guest access with speed, curfew and boundary alerts, and the community surface where preemptive guidance was tested.",
      d: "Try: the Social destination, and the guest access controls under the vehicle. These are the surfaces that only became reachable once the information architecture stopped being a list of remote commands.",
    },
  ];

  function PrototypePanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Prototype" title="The redesigned experience, running"
          lead="An interactive rebuild of the shipped design, assembled from the deck's own source components rather than recorded as a video. It boots on the home screen. Everything below is reachable from there: the customizable command set, the stacked alerts and diagnostics, trip planning and budget, the service path, and the community surface." />

        <BadgeRow>
          <Badge val>SHIPPED DESIGN</Badge>
          <span className="nmc-chip">Interactive rebuild, not the production app</span>
          <span className="nmc-chip">Vehicle data is canned</span>
        </BadgeRow>

        <PP.Solo src="phone.html" title="MySubaru redesigned experience, interactive prototype"
          badge="The full experience, yours to drive"
          note="Nothing is driving this one: it boots on the home screen and waits. Remote commands and customization, vehicle condition and stacked alerts, the trip map and trip plan, the service path from alert to confirmed appointment, and the community surface, in both modes." />

        <div className="nmc-grid">
          {PROTO_NOTES.map(function (n) {
            return (
              <div key={n.k} className="pf-glass nmc-card">
                <div className="nmc-idx">Experience {n.k}</div>
                <h4>{n.t}</h4>
                <p>{n.p}</p>
                <div className="nmc-ev">{n.d}</div>
              </div>
            );
          })}
        </div>

        <hr className="pf-rule" style={{ margin: 0 }} />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="The breadth" title="Every screen here won a test"
            sub="The reason to show the whole surface set rather than a single hero screen: the argument of this case is that MySubaru stopped being a remote control. That claim is only credible if the rest of the product has somewhere to live. Five scenarios run themselves below, one per surface. Hover any of them to take over." />
          <PP.Row compare tight>
            <PP.Phone src="phone-horizontal.html" demo="s39-1" badge="Remote commands"
              title="Remote commands, climate, access, and safety"
              note="Engine on and off, lock, unlock, then the full command set: drag a command into the top row and save. Still one tap away, now one part of the model rather than the whole of it." />
            <PP.Phone src="phone.html" demo="s39-2" badge="Condition and alerts"
              title="Vehicle condition and the alert severity hierarchy"
              note="The alert control brings the stack in, the top card opens to its explanation and its actions, and the count stays visible so nothing is silently hidden." />
            <PP.Phone src="phone.html" demo="s39-3" badge="Schedule a service"
              title="Scheduling a service, guided by the assistant"
              note="From the service surface through to a confirmed appointment: pick a time, confirm, done. The path from a detected condition to a resolution never leaves the flow." />
            <PP.Phone src="phone.html" demo="s39-4" badge="Trip planning"
              title="Trip planning with budget, fuel, and stop-by-stop cost"
              note="The trip map, the upcoming trip, then the plan itself: mileage, average fuel economy, gas stops with per-stop cost, and a budget breakdown. Reached both ways the tests compared, from the home module and from the labelled destination." />
            <PP.Phone src="phone-b.html" demo="s39-5" badge="Community"
              title="The community surface, events and badges"
              note="Where preemptive guidance was tested: the contextual message, the event detail, and joining an event. This surface only became reachable once the architecture stopped being a list of remote commands." />
          </PP.Row>
        </section>

        <div className="nmc-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", alignItems: "start" }}>
          <div className="pf-glass nmc-card" style={{ height: "auto" }}>
            <div className="nmc-idx">Prototype boundaries</div>
            <p>
              There is no live vehicle connection, so status, mileage, tire pressures, trip costs, and
              events are fixed sample data. Refresh, alerts, and confirmations simulate latency rather
              than performing real calls. Navigation, command customization with drag and save, mode
              switching, the alert and diagnostics path, the trip plan, and the service booking flow are
              all real.
            </p>
          </div>
          <div className="pf-glass nmc-card" style={{ height: "auto" }}>
            <div className="nmc-idx">Not in this set</div>
            <p>
              Subscription and activation belong to the Onboarding case, not to this one, so they are not
              in this set. The retailer tools, the contactless checkout, and the showroom kiosk live
              there for the same reason: they are the enrollment story, and this page is the ownership
              story.
            </p>
          </div>
        </div>
      </div>
    );
  }

  /* ============================================================
     OUTCOME
     ============================================================ */
  function Metric(props) {
    return (
      <div className="pf-glass" style={{ padding: "clamp(20px, 2vw, 28px)", display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 120 }}>
        <div style={{ fontSize: 13, fontWeight: 400, letterSpacing: "0.01em", color: "var(--label-secondary)", lineHeight: 1.4 }}>{props.label}</div>
        <div className="pf-num" style={{ fontSize: "clamp(20px, 1.9vw, 26px)", fontWeight: 300, marginTop: 14, color: props.accent ? "var(--accent)" : "var(--label-primary)" }}>{props.value}</div>
      </div>
    );
  }

  function SummaryRow(props) {
    return (
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, padding: "12px 0", borderBottom: props.last ? "none" : "1px solid var(--pf-hairline)" }}>
        <span style={{ fontSize: 13, color: "var(--label-secondary)" }}>{props.label}</span>
        <span className="pf-num" style={{ fontSize: 16, fontWeight: 300, color: props.accent ? "var(--accent)" : "var(--label-primary)" }}>{props.value}</span>
      </div>
    );
  }

  function Checkpoint(props) {
    return (
      <div className="pf-glass" style={{ padding: "clamp(20px, 2vw, 28px)", display: "flex", gap: 18 }}>
        <span className="pf-num" style={{ fontSize: 20, color: "var(--accent)", flexShrink: 0, width: 28 }}>{props.n}</span>
        <div>
          <div className="pf-h3" style={{ fontSize: "clamp(16px, 1.4vw, 19px)", marginBottom: 8 }}>{props.title}</div>
          <p className="pf-body" style={{ margin: 0, fontSize: 14.5 }}>{props.children}</p>
        </div>
      </div>
    );
  }

  /* Average daily returning unique visitors, 2025 against 2024. */
  function ReturningVisitorsChart() {
    const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const D25 = [165.1, 199.2, 222.1, 128.4, 110, 115.2, 118.1, 130.2, 122.3, 131.8, 165.6, 189.1];
    const D24 = [118.8, 130.6, 128.5, 113.2, 109, 105.5, 103.5, 115.5, 121.9, 39.2, 41.4, 44];
    const W = 960, H = 440, L = 52, R = 24, T = 46, B = 60;
    const pw = W - L - R, ph = H - T - B, yMax = 250;
    const x = function (i) { return L + (pw / 11) * i; };
    const y = function (v) { return T + ph - (v / yMax) * ph; };
    const pts = function (d) { return d.map(function (v, i) { return x(i) + "," + y(v); }).join(" "); };
    const area = pts(D25) + " " + x(11) + "," + y(0) + " " + x(0) + "," + y(0);
    const grid = [0, 50, 100, 150, 200, 250];
    return (
      <div className="pf-glass" style={{ padding: "clamp(28px, 3.2vw, 48px) clamp(18px, 2vw, 30px)", maxWidth: 780, margin: "0 auto" }} data-om-raster="true">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginBottom: 16 }}>
          <div className="pf-eyebrow">Monthly average daily returning unique visitors, thousands</div>
          <div style={{ display: "flex", gap: 16, fontSize: 12, color: "var(--label-tertiary)" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><span style={{ width: 16, height: 1.4, background: "var(--accent)", display: "inline-block" }} />2025</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><span style={{ width: 16, height: 0, borderTop: "1.2px dashed var(--label-tertiary)", display: "inline-block" }} />2024</span>
          </div>
        </div>
        <svg viewBox={"0 0 " + W + " " + H} width="100%" role="img" aria-label="Line chart of monthly average daily returning unique visitors, 2025 against 2024" style={{ display: "block", overflow: "visible" }}>
          {grid.map(function (g) {
            return (
              <g key={g}>
                <line x1={L} x2={W - R} y1={y(g)} y2={y(g)} stroke="var(--pf-hairline)" strokeWidth="1" />
                <text x={L - 10} y={y(g) + 3} textAnchor="end" fontSize="9" fontWeight="300" fill="var(--label-tertiary)">{g}K</text>
              </g>
            );
          })}
          <polygon points={area} fill="var(--accent)" opacity="0.055" />
          <polyline points={pts(D24)} fill="none" stroke="var(--label-tertiary)" strokeWidth="1.1" strokeDasharray="5 5" strokeLinejoin="round" opacity="0.7" />
          <polyline points={pts(D25)} fill="none" stroke="var(--accent)" strokeWidth="1.4" strokeLinejoin="round" />
          {D24.map(function (v, i) {
            return <circle key={"a" + i} cx={x(i)} cy={y(v)} r="2" fill="none" stroke="var(--label-tertiary)" strokeWidth="1" opacity="0.7" />;
          })}
          {D25.map(function (v, i) {
            return (
              <g key={"b" + i}>
                <circle cx={x(i)} cy={y(v)} r="2.4" fill="var(--accent)" />
                <text x={x(i)} y={y(v) - 9} textAnchor="middle" fontSize="8.5" fontWeight="300" fill="var(--label-secondary)">{v}</text>
              </g>
            );
          })}
          {MONTHS.map(function (m, i) {
            return <text key={m} x={x(i)} y={H - 30} textAnchor="middle" fontSize="9.5" fontWeight="300" fill="var(--label-tertiary)">{m}</text>;
          })}
        </svg>
        <p className="pf-body" style={{ margin: "12px 0 0", fontSize: 12.5, fontWeight: 300, color: "var(--label-tertiary)" }}>
          Notable monthly year-over-year increases: Mar +93.6K, Oct +92.6K, Nov +124.2K, Dec +145.1K.
          The largest gains land in Q4, especially November and December.
        </p>
      </div>
    );
  }

  function OutcomePanel() {
    return (
      <div className="nmc cs-tab">
        <SectionHead kicker="Outcome" title="Retention that compounded into daily use"
          lead="The redesign expanded MySubaru's value beyond episodic remote commands: better feature discovery, clearer vehicle status, a trip experience built on connected-vehicle data, a service path that ends in a resolution, and contextual guidance that teaches the product's own scope. The movement that followed is below, along with a precise statement of what it can be attributed to." />

        <Bento>
          <div style={col(5)}>
            <div className="pf-glass pf-glass--thick" style={{ padding: "clamp(26px, 3vw, 42px)", display: "flex", flexDirection: "column", height: "100%", justifyContent: "center" }}>
              <div className="pf-num" style={{ fontSize: "clamp(26px, 2.6vw, 34px)", fontWeight: 300, lineHeight: 1, color: "var(--accent)" }}>+53.4%</div>
              <p className="pf-h3" style={{ margin: "20px 0 0", fontSize: "clamp(16px, 1.4vw, 19px)", fontWeight: 300 }}>
                Average daily returning unique visitors grew from approximately 97,600 in 2024 to
                149,800 in 2025: roughly 52,000 additional returning owners per day.
              </p>
              <p className="pf-body" style={{ margin: "16px 0 0", fontSize: 14, color: "var(--label-tertiary)" }}>
                Returning visitors are the retention signal this case was built to move: an owner who
                comes back is an owner who found a reason to.
              </p>
            </div>
          </div>
          <div style={col(7)}>
            <div className="pf-bento" style={{ gridTemplateColumns: "repeat(2, 1fr)", gridAutoRows: "auto", height: "100%" }}>
              <Metric label="Active usage, year end" value="+40.6%" accent />
              <Metric label="Average daily returning users" value="+53.4%" accent />
              <Metric label="Average daily returning unique visitors" value="97.6K to 149.8K" />
              <Metric label="Total daily unique visitors" value="399.8K to 562.1K" />
            </div>
          </div>
        </Bento>

        <div className="pf-glass" style={{ padding: "clamp(24px, 2.6vw, 38px)", borderLeft: "2px solid var(--accent)" }}>
          <div className="pf-eyebrow" style={{ marginBottom: 14, color: "var(--accent)" }}>How to read these numbers</div>
          <p className="pf-body" style={{ margin: 0, maxWidth: "74ch", color: "var(--label-primary)" }}>
            These results followed a staged product rollout rather than a clean experimental holdout.
            They are evidence of product and business movement associated with the redesign, not proof
            that a single interface change caused the entire increase. Three of the four figures are
            distinct measures and are worth keeping distinct: 40.6% is year-end active usage growth,
            comparing November to December 2024 against the same window in 2025. The 53.4% figure is
            average daily returning unique visitors. The move from 399.8K to 562.1K is total daily
            unique visitors, returning and new together.
          </p>
        </div>

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="The wider program" title="Four workstreams ran in the same window, and only one of them was this redesign"
            sub="Naming them is part of the attribution. Retention was my half of the program; the other three shaped who arrived and how they were enrolled, which is exactly the kind of overlap a staged rollout cannot separate." />
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <Checkpoint n="1" title="Value clarity as a prerequisite to decision making">
              Pricing clarification on the retailer admin portal, helping retailers understand,
              communicate, and make the sale.
            </Checkpoint>
            <Checkpoint n="2" title="Point-of-sale enablement">
              A contactless payment flow that lifts conversion at the point of sale, including an
              interactive board that demonstrates service value in the showroom.
            </Checkpoint>
            <Checkpoint n="3" title="Cross-surface consistency">
              Mobile activation with responsive design and aligned systems across web, mobile, head
              unit, and watch.
            </Checkpoint>
            <Checkpoint n="4" title="Information architecture and app redesign">
              The work in this case: helping owners find the information that matters, reach remote
              services when they need them, and return between those moments.
            </Checkpoint>
          </div>
        </section>

        <section className="nmc" style={{ gap: 24 }}>
          <Head3 kicker="Retention signal" title="Average daily returning unique visitors, 2025 against 2024"
            sub="Returning visitors are the honest measure for a retention thesis: an install can be bought and a first session can be prompted, but a second visit has to be earned. The 2024 line collapsing in Q4 is the legacy experience; the 2025 line rising through the same months is the period following rollout." />
          <Bento>
            <div style={col(4)}><Stat value="+53.4%">annual growth in average daily returning unique visitors, from 97.6K daily in 2024 to 149.8K in 2025.</Stat></div>
            <div style={col(4)}><Stat value="+52.2K">additional returning visitors per day, averaged across the twelve monthly averages.</Stat></div>
            <div style={col(4)}>
              <div className="pf-glass" style={{ padding: "clamp(20px, 2vw, 28px)", height: "100%" }}>
                <div className="pf-eyebrow" style={{ marginBottom: 14 }}>Annual summary</div>
                <SummaryRow label="2024 daily average" value="97,603" />
                <SummaryRow label="2025 daily average" value="149,762" accent />
                <SummaryRow label="Absolute increase" value="52,159" />
                <SummaryRow label="Growth rate" value="53.4%" accent last />
              </div>
            </div>
            <div style={col(12)}><ReturningVisitorsChart /></div>
          </Bento>
          <p className="pf-body" style={{ margin: 0, fontSize: 13, color: "var(--label-tertiary)" }}>
            Returning unique visitors equals total unique visitors minus new visitors. The annual
            figure is the mean of the twelve monthly averages.
          </p>
        </section>

        <hr className="pf-rule" style={{ margin: 0 }} />

        <section className="nmc" style={{ gap: 22 }}>
          <Head3 kicker="What carried forward" title="The behavior this case proved, and the question it left open" />
          <EvRow
            fromLabel="Established here"
            from="Preemptive guidance is a useful product behavior. Test 03 showed it changes what owners do even when they do not tap it, because it teaches them what the product is capable of."
            toLabel="The next question"
            to="Where is its boundary? When should a system move from surfacing information to acting on the owner's behalf? That question became the Agentic AI in Subaru Driving exploration."
          />
        </section>
      </div>
    );
  }

  /* ---------- register ---------- */
  window.CASE_PANELS = window.CASE_PANELS || {};
  const reg = window.CASE_PANELS["mysubaru-redesign"] = window.CASE_PANELS["mysubaru-redesign"] || {};

  reg.Opening = OpeningPanel;
  reg.Research = ResearchPanel;
  reg.Ideation = IdeationPanel;
  reg.Testing = TestingPanel;
  reg.Iterations = IterationsPanel;
  reg.Prototype = PrototypePanel;
  reg.Outcome = OutcomePanel;
})();
