I want one place that handles my service, billing, and trips, not five logins.It should already know my car and stop making me re enter everything.
Tell me before something is wrong, not after I am stranded.A nudge for the right service at the right time would actually help.
expected only standard remote services from the app, showing how low and habit-bound the baseline was.
would adopt an unfamiliar solution if it clearly resolved a real problem in how they use the vehicle.
Value-driven services and data
Predictive maintenance and trip planning stood out as the key needs
Key insight
Timely, predictive maintenance alerts and trip planning that saves time and money were the needs owners valued most.
Competitive analysis
Trip features earn use when they add vehicle-specific intelligence beyond a standard map
Pain points and psychological drivers
Time and stress are the burden; safety and control are the drivers
cited feelings of safety and control as what they care about most, beyond practical features, followed by convenience and peace of mind.
Driving is stressful enough. I want the car to quietly have my back.There is never one place I trust to tell me everything about my car.
How might we
Increase engagement by making the ownership app more{" "}
personalized,{" "}
anticipatory, and{" "}
emotionally supportive, so drivers feel safer, more certain, less stressed, and more efficient?
Adapt to how each owner actually uses their vehicle, rather than a fixed default.
Surface the right action before the owner has to go looking for it.
Speak in a reassuring, low-stress voice so the car feels like it has your back.
Quick actions
Commands that expand and rearrange around the owner
A compact list of commands expands from a plus control. Owners can drag and customize the
quick-action set so the actions they use most stay within thumb reach.
Vehicle alerts
The car shows you what is wrong, where it is wrong
A rotating illustration displays issues directly on the vehicle. Alert cards beneath route
straight into the relevant quick action, like navigating to a service station. Card priority
was ordered by user testing.
);
}
/* The live Figma-site prototype. Lives under the Agentic AI case's Testing tab. */
function AgenticTesting() {
const SRC = "https://trial-handle-00777350.figma.site";
return (
Testing
The live prototype, embedded from its Figma site.
Published from Figma Sites. Opens full-screen in a new tab.
);
}
/* Average daily returning unique visitors — 2025 vs 2024 line chart */
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 (
Monthly average daily returning unique visitors (thousands)
20252024
Notable monthly year-over-year increases: Mar +93.6K, Oct +92.6K, Nov +124.2K, Dec +145.1K. Largest gains land in Q4, especially November and December.
);
}
function RedesignOutcome() {
const { SectionHead, Bento, Stat } = window.CSKit;
return (
{/* headline stat + metric grid */}
+40.6%
Average daily total unique visitors grew from 399.8K to 562.1K, adding 162.3K daily users.
Year-end active usage growth, Nov to Dec 2024 versus Nov to Dec 2025.
{/* what drove it: four checkpoints */}
What drove it
Four checkpoints, from value clarity to information architecture
Pricing clarification on the Admin Portal, helping retailers understand, communicate, and make the sale.
A contactless payment flow that lifts conversion at the point of sale, including an interactive board that demonstrates service value.
Mobile user activation with responsive design and aligned systems across every surface.
Helping users find the information that matters and reach remote services when they need them, improving retention.
{/* returning-visitor retention */}
Retention signal
Average daily returning unique visitors, 2025 versus 2024
Returning visitors are a retention signal: users recognizing value over time are more likely to convert, renew, and contribute to revenue growth.
annual growth in average daily returning unique visitors, 97.6K daily in 2024 to 149.8K in 2025.
additional returning visitors per day, averaged across the twelve monthly averages.
Annual summary
Returning unique visitors equals total unique visitors minus new visitors. Annual average is the mean of the twelve monthly averages.
);
}
function SummaryRow(props) {
return (
{props.label}{props.value}
);
}
/* ===================== MYSUBARU ONBOARDING ===================== */
/* Vertical bar chart — on-palette, for the barriers-to-use data */
function BarChart(props) {
const data = props.data, max = props.max || 80;
const W = 820, H = 360, L = 40, R = 14, T = 16, B = 66;
const pw = W - L - R, ph = H - T - B, n = data.length;
const slot = pw / n, bw = Math.min(52, slot * 0.46);
const y = function (v) { return T + ph - (v / max) * ph; };
const grid = [0, 20, 40, 60, 80];
return (
);
}
/* Donut — single-value emphasis */
function Donut(props) {
const pct = props.pct, r = 82, c = 2 * Math.PI * r, on = (pct / 100) * c;
return (
);
}
/* Meta cell for the Opening */
function MetaCell(props) {
return (
{props.label}
{props.value}
);
}
function OnboardingOpening(props) {
const c = props.case;
const { Panel, Bento, ListBlock } = window.CSKit;
return (
{c.title}
{c.summary}
{c.tags.map(function (t) { return {t}; })}
{/* Why I prioritized onboarding enrollment */}
Why this project
Onboarding enrollment was the key business signal
Enrollment is the bridge that carries a new owner from purchase to real value. Four signals told me it
was the highest-leverage place to work.
To enroll, owners moved across the head unit, mobile device, and web portals: download the app,
sync with the head unit, confirm by email, and lean on retailer help at point of sale. Each
hand-off was a place to lose them.
Leadership tracked point-of-sale enrollment and initial enrollment directly. The moment right
after purchase begins the ownership journey, and it is where a complete experience is won or lost.
In our survey, 71% preferred to meet MySubaru the moment they bought the car, then again when they
downloaded the app. Waiting at the retailer, they have the time and attention to learn.
New tier names, reshuffled services, and an incremental pricing strategy created confusion inside
and outside the company. People did not know what had changed, or what MySubaru now provides.
STARLINK
becomes
MySubaru
{/* The North Star */}
The North Star
Driving enrollment into the advanced tier
Subaru Connected Service earns most of its profit from the advanced tier,
so the goal was to move more owners into it.
Reading the revenue composition, this case focuses on three levers inside the profitability model:
attachment rate at point of sale, enrollment start rate, and enrollment completion. Onboarding is
where all three are set.
);
}
function OnboardingResearch() {
const { SectionHead, Stat, Panel, Bento, ListBlock, Quote, Figure } = window.CSKit;
const barriers = [
{ label: "Unclear Value", value: 73 },
{ label: "Cost", value: 44 },
{ label: "Compatibility", value: 39 },
{ label: "Too Complicated", value: 29 },
{ label: "Awareness", value: 24 },
{ label: "Using Alternatives", value: 9 },
{ label: "Sign up barriers", value: 4 },
];
const groups = [
{ title: "Doubting the value", items: ["Unclear Value", "Using Alternatives", "Cost"] },
{ title: "Seeing it as hard to use", items: ["Sign up barriers", "Compatibility"] },
{ title: "Having a knowledge gap", items: ["Awareness", "Too Complicated"] },
];
const frictions = [
{ k: "Information", d: "Customers are not aware of the service." },
{ k: "Journey", d: "Customers encounter usability issues." },
{ k: "Value", d: "Customers are not convinced of the value." },
];
return (
{/* barriers bar chart */}
What holds owners back
Unclear value dwarfs every other reason for not using the app
Reasons cited by owners who do not use the app
{groups.map(function (g) {
return (
{g.title}
{g.items.map(function (it) { return {it}; })}
);
})}
{/* value gap: donut + quote */}
The core gap
Most non-users simply do not recognize the value
Among owners who do not use the app, 75% do not know, understand, or recognize its value.
I just don't find any value in it, to be honest. The only thing I liked was being able to locate
the vehicle if it's stolen. And the remote start screen. None of those are enough to pay for.
Owners generally do not understand what they are paying for, if they are paying at all. The
product was capable; the value was invisible.
{/* three frictions */}
Three kinds of friction
Awareness, usability, and value
{frictions.map(function (f) {
return (
{f.k}
{f.d}
);
})}
{/* locating friction */}
Locating friction
Where are these friction points located along the onboarding and returning journey?
);
}
function OnboardingIdeation() {
const { SectionHead, Panel, Bento, ListBlock, Figure } = window.CSKit;
function Shot(props) {
return (
{props.caption ?
{props.caption}
: null}
);
}
return (
Checkpoint I, Clarify value
Clarify tier value, starting inside the dealership
Tiers were confusing, with multiple payment terms and stacking levels. I designed a card-sorting
system in the retailer admin portal so staff could select and deselect tiers, then mirrored a
clear tier-detail view into the customer's mobile app.
Checkpoint II, Contactless payment
Fast, contactless payment at point of sale
A QR code enables contactless payment, taking the owner directly to a service selection page in
the browser so enrollment can begin without friction at the counter.
Checkpoint III, Guided sign-up
Intuitive sign-up with clear guidance
After point-of-sale payment, an email points owners to download the MySubaru app. The old app
had no account creation at all, so I proposed a guided journey: three required steps, links to
dealership setup, and a deliberately skipped PIN and biometric step to keep the path simple.
Three onboarding checkpoints, each mapped to a friction
Pricing clarification on the Admin Portal, helping retailers understand, communicate, and make the sale.
A contactless payment flow that lifts conversion at the point of sale, including an interactive board that demonstrates service value.
Mobile user activation with responsive design and aligned systems across every surface.
A fourth checkpoint, the information-architecture redesign, carried into the retention work covered in the MySubaru Experience Redesign case.
);
}
/* Panel registration for the three Subaru cases now lives in
subaru-onboarding.jsx, subaru-redesign.jsx and subaru-agentic.jsx,
which load after this file. This file is kept for the components
they still reuse: window.OnboardingMap (rendered by the case shell
via c.heroMap) and window.KioskPrototype, plus the shared charts. */
window.CASE_PANELS = window.CASE_PANELS || {};
/* ===================== Interactive enrollment-journey map =====================
Recreated from the Figma anchor map. Four checkpoints across a day-long
enrollment journey; clicking a checkpoint springs a highlight frame onto it
and it stays fixed there. Arrows step between checkpoints. On-palette. */
const JOURNEY = [
{
n: "I", title: "Clarify Pricing Tiers Value", surface: "Dealership, Admin Portal", friction: "Value",
q: "What is being sold? What service is included? Why is it valuable?",
steps: ["Car purchase", "Dealers introduce package information"],
time: "5:00 – 6:00, Internal alignment, then say hi to MySubaru",
icons: ["assets/onb-ic-2.png", "assets/onb-ic-1.png"],
},
{
n: "II", title: "Fast Payment at POS", surface: "Point of sale, Contactless", friction: "Journey",
q: "Retailers should have minimum friction helping customers subscribe.",
steps: ["Subscribe through contactless payment", "Receive an email to onboard"],
time: "7:00, Morning, learning",
icons: ["assets/onb-ic-3.png", "assets/onb-ic-7.png"],
},
{
n: "III", title: "Cross-surface Consistency", surface: "Email, MySubaru app", friction: "Information",
q: "When I leave the POS, can I continue onboarding easily?",
steps: ["Create an account on app", "Start using remote features", "Log in"],
time: "12:00 – 15:00, Finish setting up",
icons: ["assets/onb-ic-6.png", "assets/onb-ic-1.png"],
},
{
n: "IV", title: "Retention & Enhancements", surface: "App, Devices", friction: "Value",
q: "Do I want to keep using the service, and become an advocate?",
steps: ["Maintain subscriptions", "Subscribe to packages on app", "Success"],
time: "18:00 – 21:00, Almost there, then rest",
icons: ["assets/onb-ic-4.png", "assets/onb-ic-5.png"],
},
];
const FRICTIONS = {
Information: "Not aware of Companion, Companion+, or the benefits.",
Value: "Not convinced of value, plan fit, or upgrade path.",
Journey: "Technical issues: login, eligibility, hand-offs, payments.",
};
function OnboardingMap(props) {
const [step, setStep] = useState(0);
const wrapRef = useRef(null);
const colRefs = useRef({});
const [frame, setFrame] = useState({ left: 0, width: 0, ready: false });
const measure = useCallback(function () {
const el = colRefs.current[step], wrap = wrapRef.current;
if (!el || !wrap) return;
setFrame({ left: el.offsetLeft, width: el.offsetWidth, ready: true });
}, [step]);
useEffect(function () { measure(); }, [measure]);
useEffect(function () {
window.addEventListener("resize", measure);
return function () { window.removeEventListener("resize", measure); };
}, [measure]);
const cp = JOURNEY[step];
const go = function (d) { setStep(function (s) { return Math.max(0, Math.min(JOURNEY.length - 1, s + d)); }); };
return (
);
}
window.OnboardingMap = OnboardingMap;
/* ===================== Checkpoint II kiosk prototype (animated tour) ===================== */
function KioskPrototype(props) {
const frameRef = useRef(null);
const [playing, setPlaying] = useState(true);
const [loaded, setLoaded] = useState(false);
const reduced = window.usePrefersReducedMotion ? window.usePrefersReducedMotion() : false;
function post(action) {
const ifr = frameRef.current;
if (ifr && ifr.contentWindow) {
try { ifr.contentWindow.postMessage({ source: "kiosk-ctrl", action: action }, "*"); } catch (e) {}
}
}
// Autoplay is owned by the kiosk frame; parent just toggles it.
useEffect(function () {
if (reduced) { post("autoplay-off"); return; }
post(playing ? "autoplay-on" : "autoplay-off");
}, [playing, reduced, loaded]);
return (
Interactive board
This belongs to Checkpoint II, point of sale. It lives on the screen inside the retailer store and plays app highlights through short scenarios while customers wait for their vehicle to be handed off.
The tour advances on its own, and the board remains fully interactive should you wish to explore it directly.