Customer lifecycle

고객 생애주기

Map customers through new, active, dormant, and returning states.

···
html
<div class="life"><div class="track"><span>NEW</span><span>ACTIVE</span><span>DORMANT</span><span>RETURN</span><i></i></div><div class="signal">SIGN UP → PURCHASE → PAUSE → REVISIT</div></div>
css
.life{width:min(92%,650px);font:900 clamp(10px,max(1.6vmin,1vw),14px)/1.2 sans-serif}.track{position:relative;display:flex;justify-content:space-between;gap:3px;border-bottom:3px solid var(--line);padding:0 0 25px}.track span{padding:clamp(7px,2vmin,16px) clamp(4px,1vw,16px);border:1px solid var(--line);background:var(--surface);color:var(--muted)}.track i{position:absolute;left:8%;bottom:-9px;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--bg);animation:travel 7s steps(3,end) infinite}.signal{text-align:center;color:var(--accent);margin-top:20px;letter-spacing:.04em}@keyframes travel{0%,20%{left:8%}25%,45%{left:36%}50%,70%{left:65%}75%,100%{left:91%}}

The customer lifecycle expresses a relationship as states, from the first contact through repeat use and possible inactivity. It helps teams set a different objective for each state.

The dot in the demo moves from purchase to active, then dormant after inactivity, and returning after another visit. In practice, define the events and time windows that change each state.

A short dormancy threshold can mistake a normal purchase cycle for churn. Check the natural buying interval for each product.

When to use

Use it to connect onboarding, repeat purchase, and win-back programs.

Open as page ↗