Marketing Atlas
한국어
▽ Funnels & journeys

Omnichannel journey

옴니채널 여정

Keep customer context connected across web, app, and store.

···
html
<div class="omni"><div class="omni-stages"><div>WEB<i>SAVED</i></div><div>APP<i>READY</i></div><div>STORE<i>COLLECT</i></div></div><div class="omni-item"><small>YOUR ITEM</small><strong>FIELD NOTES / 01</strong><b id="omni-state">SAVED ON WEB</b></div><div class="omni-track"><span id="omni-cursor"></span></div></div>
css
.omni{width:min(88%,650px);display:grid;gap:clamp(9px,2.5vmin,20px);font:900 clamp(10px,max(2vmin,1vw),16px)/1 sans-serif}.omni-stages{display:flex;gap:6px}.omni-stages div{flex:1;display:grid;gap:6px;padding:clamp(7px,2vmin,16px);border:2px solid var(--line);transition:.4s}.omni-stages div.on{border-color:var(--accent);background:var(--accent-2);color:#211b19}.omni-stages i{font:700 clamp(10px,max(1.5vmin,1vw),12px)/1 sans-serif;font-style:normal}.omni-item{display:grid;gap:5px;border:2px solid var(--fg);background:var(--surface);padding:clamp(9px,3vmin,23px)}.omni-item small{color:var(--muted)}.omni-item strong{font-size:clamp(14px,3.4vmin,27px)}.omni-item b{color:var(--accent)}.omni-track{height:5px;background:var(--line);position:relative}.omni-track span{display:block;width:13px;height:13px;border-radius:50%;background:var(--accent);position:absolute;top:-4px;left:0;transition:left .55s}small{font-size:max(.833em,10px,1vw)}
js
const stages=[...document.querySelectorAll('.omni-stages div')],states=['SAVED ON WEB','OPENED IN APP','READY FOR COLLECTION'];let i=0;function show(){stages.forEach((s,n)=>s.classList.toggle('on',n===i));document.getElementById('omni-state').textContent=states[i];document.getElementById('omni-cursor').style.left=(i*48)+'%';i=(i+1)%3}show();setInterval(show,1600);
···

Touchpoint고객 접점

Each encounter with a brand can change the next step in a journey.

···

Path to purchase구매 경로

Different discovery and validation paths can lead to the same purchase.

···

Loyalty loop충성도 루프

Use, advocacy, and repeat purchase feed the next round of demand.

···

Post-purchase experience구매 후 경험

Delivery, use, and support after checkout shape the next decision.

An omnichannel journey preserves context as customers move between channels. The point is not the number of channels; it is avoiding a restart when someone changes one.

In the demo, a fictional customer saves a product on the web, confirms it in an app, and collects it in a store. The saved item travels with the journey.

Continuity requires reliable identity and consent. Do not force uncertain identities together or track people beyond their permissions.

When to use

Use it when designing handoffs such as online discovery and in-store collection.

Open as page ↗