Design, tech, engineering and science. Head of Design and User Research.
XYZ Hypothesis
Business idea analysis from The Right Ithttps://www.youtube.com/watch?v=4sZMHAMN0DQ. Set your goal and hypothesis:
// Minimum market share
viewof xPercent = Inputs.range([0, 100], {
label: "At least",
step: 1,
value: urlParams.x ? Math.min(Math.max(parseInt(urlParams.x), 0), 100) : 20
})
// Target market
viewof y = Inputs.text({
label: "percent of",
value: urlParams.y || "Netflix DVD subscribers"
})
// Hypothesis about what Y will do
viewof z = Inputs.text({
label: "will",
value:
urlParams.z || "switch to a streaming-only subscription for $8.90 per month"
})
<span style="font-size: 0.8em;">_Link to this hypothesis${url}_</span>
---
Results
At least ${Math.round(x * 100)}% of ${y} will ${z}.
viewof dataInputs = {
const obj = _.keyBy(_.range(0, maxExperimentCount), (i) => "experiment" + i);
const inputs = _.mapValues(obj, (i) => {
const value = urlParams["e" + (i + 1)]
? Math.min(Math.max(parseInt(urlParams["e" + (i + 1)]), 0), 100)
: 0;
return Inputs.range([0, 100], {
label: `Experiment ${i + 1} (%)`,
step: 1,
value
});
});
return Inputs.form(inputs);
}
---
html`${experimentCount ? ` Based on ${experimentCount} experiment${experimentCount > 1 ? 's' : ''}, the probability of success is <span style="
display: inline-block;
padding: 0.3em 0.5em;
font-size: 1.2em;
line-height: 1;
font-weight: bold;
font-family: sans-serif;
border-radius: 1000px;
background-color: ${getColor(probability)};
color: white;
">${ toPercentageString(probability) }</span>` : `👆 Enter results from your experiments<span style="
display: inline-block;
padding: 0.3em 0.5em;
font-size: 1.2em;
line-height: 1;
font-weight: bold;
font-family: sans-serif;
border-radius: 1000px;
opacity: 0;
">0%</span>`}`
viewof resultsView = Inputs.radio(["Simplified results", "Detailed results"], { value: "Simplified results", disabled: !experimentCount })
resultsView === 'Detailed results' ? getResultsTable() : getSimplifiedResultsTable()
---
Background
This notebook is based on a formula and video series by Alberto Savoiahttps://www.albertosavoia.com/resources.html, who is a product innovation consult and speaker.
youtube("FVsLt9-m-zA")
Alberto has a YouTube video series called Math of Successhttps://www.youtube.com/playlist?list=PLStagpRSnu69I60CxqiWcDHccEVVhuyyo and a book called The Right Ithttps://www.youtube.com/watch?v=4sZMHAMN0DQ where he presents the XYZ hypothesis and the math behind it. The formula is also available as an Excel version on his web site (direct linkhttps://www.albertosavoia.com/uploads/1/4/0/9/14099067/simple_bayes_formula_for_product_manager.xlsx).
Get free book on pretotyping.orghttps://www.pretotyping.org/resources.html.
Thanks for the shout-out, Albertohttps://www.linkedin.com/posts/albertosavoia_xyz-hypothesis-activity-7031663726135058432-yh9x?utm_source=share&utm_medium=member_desktop.
---
Source
probability = _.last(results) || 0
results = _.filter(_.map(experiments, 'verdict'))
colors = results.map(getColor)
experiments = {
const data = [];
const raw = _.values(dataInputs).map(p => p / 100);
for (let i = 0; i < raw.length; ++i) {
const result = raw[i];
const previousResult = i ? data[i - 1].weightedResult : 0;
const relativeResult = result / x;
// Reliability
let reliability = 0;
if (i) {
reliability = 0.1;
if (relativeResult >= 2) {
reliability = 0.9;
} else if (relativeResult >= 1) {
reliability = 0.7;
} else if (relativeResult >= 0.5) {
reliability = 0.3;
}
}
// Weighted result
// For first experiment this is always set at 0.1
let weightedResult = 0;
if (result) {
weightedResult = 0.1;
if (i) {
weightedResult = result
? (previousResult * reliability) /
(previousResult * reliability +
(1 - previousResult) * (1 - reliability))
: 0;
}
}
// Final verdict
let verdict = 0;
if (weightedResult >= 0.8) {
verdict = 0.9;
} else if (weightedResult >= 0.6) {
verdict = 0.7;
} else if (weightedResult >= 0.4) {
verdict = 0.5;
} else if (weightedResult >= 0.2) {
verdict = 0.3;
} else if (weightedResult) {
verdict = 0.1;
}
data.push({
result,
relativeResult,
reliability,
weightedResult,
verdict
});
}
return data;
}
---
Math behind this notebook. You don't have to worry about these.
maxExperimentCount = 5
x = xPercent / 100
experimentCount = results.length
colorValues = [
'#ff205b',
'#f1612d',
'#de7e15',
'#a9ad31',
'#62d198'
]
---
getColor = (val, max) => {
const maxVal = max || 1;
const r = val / maxVal;
if (r < 0.3) {
return colorValues[0]
}
if (r < 0.5) {
return colorValues[1]
}
if (r < 0.7) {
return colorValues[2]
}
if (r < 0.9) {
return colorValues[3]
}
return colorValues[4]
}
getResultsTable = () => {
return Inputs.table(
experiments.map((e, i) => {
const data = { ...e }
return {
name: 'Experiment ' + (i + 1),
..._.omit(data, ['reliability'])
};
}),
{
format: {
result: toPercentageString,
relativeResult: toPercentageString,
reliability: toPercentageString,
weightedResult: toPercentageString,
verdict (v) {
if (v) {
return html`${toPercentageString(v)} <span style="
display: inline-block;
border-radius: 100px;
height: 8px;
width: 8px;
background-color: ${getColor(v)};
" />`
}
return '–'
}
}
}
)
}
getSimplifiedResultsTable = () => {
return html`
<div style="display: flex; text-align: center;">
${experiments.map((e, i) => {
const n = i + 1;
const ord = n === 1 ? "st" : n === 2 ? "nd" : n === 3 ? "rd" : "th";
const percentage = Math.round(e.verdict * 100);
const color = e.verdict ? getColor(e.verdict) : "#fafafa";
return `
<div style="width: 6em; text-align: center;">
<div style="margin-left: auto; margin-right: auto; text-align: center; border-radius: 1000px; width: 2.6em; height: 2.6em; line-height: 2.6em; font-size: 1em; font-family: sans-serif; font-weight: bold; background-color: ${color}; color: ${
e.verdict ? "#fff" : "#bbb"
};">
${
percentage
? `${percentage}<span style="font-size: 0.6em;">%</span>`
: `–`
}
</div>
<div style="margin-top: 0.8em; font-size: 0.85em; line-height: 1.1;">
<div>After ${n}<span style="font-size: 0.7em;">${ord}</span></div>
<div style="font-size: 0.7em;">experiment</div>
</div>
</div>
`;
})}
</div>
`;
}
---
url = makeUrl(liveUrlParams)
liveUrlParams = {
const experimentParams = {}
for (let i = 0; i < experimentCount; ++i) {
if (experiments[i].result) {
experimentParams['e' + (i + 1)] = experiments[i].result * 100
}
}
return {
x: x * 100,
y,
z,
...experimentParams
}
}
---
toPercentageString = (float) => {
return Math.round(float * 100) + "%";
}
import { urlParams, makeUrl } from "@jerryjappinen/url-params"
import { youtube } from "@jerryjappinen/embed"
---
import { baseStyles } from "@jerryjappinen/ui"
baseStyles
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
