// FullProductStudyPage.jsx — "Full product study" (AutoEase). // End-to-end product story told as numbered steps: idea → market scan → // assumptions → research → prioritization → lowfi → hifi → working // prototype. Research content sources from autoease/Case Study/ (2026 // re-synthesis); hi-fi comps are live screens of the Vercel prototype. // ── 02 · Market scan — configurator-style feature comparison ────────────── // Services read as columns (like trims on a configurator, or tiers on a // pricing page); AutoEase sits at the end as the highlighted "tier" that // combines the capabilities worth keeping. 2 = full, 1 = partial, 0 = none. const FPS_MARKET_SERVICES = ['Edmunds', 'CarMax', 'KBB', 'Auto Trader', 'Carvana', 'eBay Motors']; const FPS_MARKET_FEATURES = [ { f: 'Upfront, fixed pricing', v: [1, 2, 1, 0, 2, 0], note: 'CarMax and Carvana: the price on screen is the price. Edmunds/KBB publish benchmarks, not prices.' }, { f: '5-year ownership cost', v: [2, 0, 2, 0, 0, 0], note: 'Edmunds True Cost to Own® and KBB 5-Year Cost to Own — the two that treat a car as a financial decision.' }, { f: 'History & reliability', v: [1, 2, 0, 1, 2, 1], note: 'CarMax and Carvana include reports free; elsewhere it’s an upsell or seller-provided.' }, { f: 'Unbiased reviews', v: [2, 0, 2, 1, 0, 0], note: 'Edmunds and KBB carry real editorial benches; marketplaces don’t review what they sell.' }, { f: 'Side-by-side comparison', v: [1, 1, 1, 1, 0, 0], note: 'Exists everywhere in some form — nowhere as a first-class decision tool.' }, { f: 'No-contact browsing', v: [0, 1, 1, 0, 2, 2], note: 'Carvana is self-serve until checkout; eBay is anonymous until you bid. Lead-gen sites gate on contact info.' }, ]; // ── 03 · Assumptions carried into the featureset ────────────────────────── const FPS_ASSUMPTIONS = ['The price on the screen is the price', 'Total 5-year cost beats sticker price', 'History & reliability shown before contact', 'Reviews with no dealership incentive', 'Side-by-side comparison as a first-class tool', 'Browsing never costs your phone number']; // ── 04 · Research — participants + persona trade-off matrix ─────────────── const FPS_PARTICIPANTS = 'Emma Wood · George Hayes · Hamid Jahandar · Jackson Hayes · Nancy Gillespie · Octavio Vidal · Ulrich Lachler · Priya Raman · Marcus Bell'; const FPS_PERSONAS = [ { name: 'Alex — the Spreadsheet Buyer', body: 'Wants every number and the sources behind it. Builds his own comparison stack across six sites today. AutoEase wins him by letting him dig without hitting a lead-gen wall.' }, { name: 'John — the Fixed-Price Traditionalist', body: 'Hates haggling more than he hates paying a premium. Named CarMax and Tesla unprompted — the price on the screen is the price. AutoEase wins him by never making price a negotiation.' }, { name: 'Emma — the Delegating Optimizer', body: 'Wants a confident answer, not a research project. Will happily hand the decision to a tool she trusts. AutoEase wins her with one defensible number per car and a short path to done.' }, ]; // Spectrum data: each dimension is a Low → High track; the three personas // sit at their position along it (0 low · 1 mid · 2 high). const FPS_SPECTRUM = [ ['Appetite for raw data', 2, 1, 0], ['Wants the decision made for them', 0, 1, 2], ['Will do the research themselves', 2, 1, 0], ['Sensitivity to sales pressure', 1, 2, 2], ['Monthly-cost mindset', 2, 1, 1], ['Fixed-price mindset', 1, 2, 2], ['Trust in brand reputation', 1, 2, 2], ['Trust in third-party data', 2, 2, 2], ]; const FPS_PERSONA_KEYS = [ { k: 'A', name: 'Alex', color: '#3D5448' }, { k: 'J', name: 'John', color: '#D45A1B' }, { k: 'E', name: 'Emma', color: '#14211C' }, ]; // One dimension row: label + track with dodged persona markers. const SpectrumRow = ({ dim, values, isMobile }) => { // group markers that share a position so they fan out instead of stacking const groups = {}; values.forEach((v, i) => { (groups[v] = groups[v] || []).push(i); }); const posPct = [8, 50, 92]; return (
{dim}
{[0, 1, 2].map(p => (
))} {values.map((v, i) => { const group = groups[v]; const gi = group.indexOf(i); const dodge = (gi - (group.length - 1) / 2) * 24; const p = FPS_PERSONA_KEYS[i]; return ( {p.k} ); })}
); }; // ── 05 · Feature prioritization — evidence chart ────────────────────────── // One dot per interview participant (9 total): filled = the feature came up. // Cut tier carries reasons instead of counts — those weren't outvoted, they // were dropped on the evidence. const FPS_TIERS = [ { name: 'Core — built now', tone: 2, items: [ { f: 'Transparent, upfront pricing', n: 8, ev: 'Raised unprompted in nearly every interview' }, { f: 'Side-by-side comparison tool', n: 6, ev: 'The decision is always between cars, never about one' }, { f: '5-year cost of ownership estimate', n: 6, ev: 'Sticker price isn’t the number that matters' }, { f: 'Vehicle history + reliability score', n: 6, ev: 'The single biggest trust checkpoint' }, { f: 'Independent / user reviews', n: 5, ev: 'Verdicts with no dealership incentive' }, ]}, { name: 'Later — earned consideration', tone: 1, items: [ { f: 'No-contact / anonymous browsing', n: 5, ev: 'Strong signal, but a stance more than a feature' }, { f: 'Financing calculator (monthly view)', n: 4, ev: 'Monthly-cost mindset, mostly Alex’s cohort' }, { f: 'Insurance estimator', n: 3, ev: 'Adjacent cost — belongs inside the 5-year number' }, { f: 'Location-specific inventory filtering', n: 2, ev: 'Rare, but acute where it hit — Emma was blocked on it' }, ]}, { name: 'Cut — deliberately dropped', tone: 0, items: [ { f: 'Online transaction processing as a headline', ev: 'Users still want to see the car in person first' }, { f: 'Personalized recommendations', ev: 'Nobody asked — they asked for better filters' }, { f: 'Visual / interactive car tours', ev: 'Never prioritized over the cost-transparency problem' }, ]}, ]; // Nine-dot evidence strip — one dot per participant. const EvidenceDots = ({ n, tone }) => ( {Array.from({ length: 9 }, (_, i) => ( ))} {n}/9 ); // Harvey ball — full / half / empty circle, far easier to scan than glyphs. const Harvey = ({ v, size = 15 }) => { const color = v === 2 ? '#3D5448' : v === 1 ? '#B0801F' : 'rgba(20,33,28,0.22)'; return ( {v === 1 && } ); }; // Traffic-light tones tuned to the palette. const FPS_TONE = [ { bg: 'rgba(178,58,45,0.1)', fg: '#9C3527', b: 'rgba(178,58,45,0.22)' }, // 0 — weak / cut { bg: 'rgba(217,164,65,0.16)', fg: '#8A6414', b: 'rgba(217,164,65,0.35)' }, // 1 — partial { bg: 'rgba(61,84,72,0.13)', fg: '#3D5448', b: 'rgba(61,84,72,0.3)' }, // 2 — strong ]; // ── 06 · Lowfi wireframes — Andy's actual sketch ────────────────────────── // The real thing, from image-sources/AutoEase/Image 1.png (copied to // images/autoease/sketch-lowfi.png — intentionally outside the manifest's // naming scheme so it never lands in the gallery). const FPS_SKETCH = 'images/autoease/sketch-lowfi.png'; // ── 07 · Hi-fi — live prototype screens in phone bezels ─────────────────── const FPS_HIFI = [ { src: 'https://autoease-prototype.vercel.app/', label: 'Home — the hub, not a funnel' }, { src: 'https://autoease-prototype.vercel.app/results/', label: 'Results — one number per car' }, { src: 'https://autoease-prototype.vercel.app/sell/', label: 'Sell — same grammar as Browse' }, { src: 'https://autoease-prototype.vercel.app/price-check/', label: 'Price check — the math, visible' }, ]; const HifiPhone = ({ shot }) => (