Value proposition

가치 제안

Connect what a customer gains to what the product enables.

···
html
<div class="fit"><div class="piece job">CUSTOMER JOB<br><b>FIND A SLOT</b></div><div class="plus">+</div><div class="piece tool">PRODUCT<br><b>LIVE CALENDAR</b></div><div class="result">BOOK IN MINUTES <span>✓</span></div></div>
css
.fit{width:min(92%,520px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(5px,1.5vmin,12px);font:800 clamp(10px,max(1.65vmin,1vw),13px)/1.3 sans-serif;text-align:center}.piece{min-width:0;border:2px solid var(--fg);padding:clamp(7px,2vmin,18px) 3px;background:var(--surface);color:var(--muted)}.piece b{display:block;color:var(--fg);margin-top:5px;font-size:clamp(10px,max(2.2vmin,1vw),20px)}.job{animation:job 4s ease-in-out infinite}.tool{animation:tool 4s ease-in-out infinite}.plus{font-size:clamp(13px,4vmin,30px)}.result{grid-column:1/-1;padding:clamp(8px,2vmin,18px);background:var(--accent);color:white;font-size:clamp(13px,3.5vmin,30px);opacity:0;animation:reveal 4s infinite}.result span{float:right}@keyframes job{0%,12%{transform:translateX(-35%);opacity:.3}35%,90%{transform:none;opacity:1}100%{opacity:.3}}@keyframes tool{0%,25%{transform:translateX(35%);opacity:.3}42%,90%{transform:none;opacity:1}100%{opacity:.3}}@keyframes reveal{0%,25%{opacity:0;transform:translateY(8px)}36%,87%{opacity:1;transform:none}100%{opacity:0}}@media(min-width:700px){body>div{transform:scale(1.8)}}

A value proposition connects a customer's job with the benefit a product delivers. It focuses on the change in the customer's work, rather than the length of a feature list.

Find recurring jobs and pains in customer interviews, then map a real capability to a useful outcome. In the demo, the result appears when the job and capability meet.

Prefer outcomes customers can verify over vague convenience claims or unsupported savings figures.

When to use

Use when writing a landing page or sales pitch and checking the link between customer job and benefit.

Open as page ↗