Воронка e-commerce від TOF до BOF: як продають AG1 та інші DTC-бренди на мільярд

Чоловік гортає стрічку перед сном і зупиняється на відео: Г'ю Джекман, склянка зеленого напою, одна ложка у воді зранку. Він тисне. Сторінка каже: мінус 40% на перший місяць. Через два екрани він дивиться на пакет, шейкер, банку і пʼять дорожніх саше, ціну €87, закреслену з €107, і рядок про те, що 93% клієнтів обирають підписку. Він ще нічого не вирішив купувати. Магазин уже вирішив, що він побачить далі.

У цього шляху є назва, воронка, і три поверхи: TOF, MOF і BOF, тобто верх, середина і низ воронки. Кожен серйозний інтернет-магазин міряє кожен поверх своїми числами. Нижче те, що таке кожен поверх, що на ньому вимірюють, як тип товару і тип магазину його змінюють і як будують свою воронку AG1, оцінений у $1,2 млрд, та інші DTC-бренди вартістю від мільярда. Далі наші власні магазини і чеклист для вашого.

Головне

• 01TOF міряють CTR. Верх воронки відповідає на одне питання: чи обіцянка змусила незнайомця клікнути.
• 02MOF це додавання в кошик, чекаут, покупка. Середина це місце, де продає сама сторінка, і кожен крок має власний відтік.
• 03BOF це повторні замовлення і LTV. Низ вирішує, чи перше замовлення окупило рекламу, чи тільки почало.
• 04Тип товару обирає сильний поверх. Вау-товари виграють угорі, рішення виграють унизу, вау + рішення може виграти обидва.
• 05Кожен зайвий клік забирає конверсію. У наших магазинах «Додати в кошик» є на кожному екрані, навіть усередині галереї фото, як на сторінці товару GUD.
• 06AG1 будує всі три на одному товарі. Набір і підписка на сторінці товару, допродажі на чекауті і 30-денний маршрут, який тримає підписника довше першого місяця.

Що таке TOF, MOF і BOF в e-commerce

TOF, top of funnel, верх воронки, це момент, коли незнайомець зустрічає товар: реклама в стрічці, відео, результат пошуку, огляд блогера. Тут магазин ще не продає. Він заробляє клік. Головне число це CTR, click-through rate: кліки, поділені на покази. Поруч стоять ціна цих показів і кліків, CPM і CPC, і кількість сесій, які справді доходять до сайту.

MOF, middle of funnel, середина воронки, це сам магазин: лендинг, сторінка товару, кошик і чекаут. Його вимірюють ланцюжком показників. Add to cart: кошики, поділені на сесії. Checkout: чекаути, поділені на кошики. Purchase: замовлення, поділені на чекаути, і конверсія, замовлення, поділені на сесії. Поруч AOV, середній чек, який піднімають набори і допродажі.

BOF, bottom of funnel, низ воронки, починається після першого замовлення. Repeat purchase rate: частка клієнтів, які замовляють знову. Для підписок утримання і відтік помісячно. І LTV, lifetime value: скільки клієнт приносить за всі стосунки. LTV поруч із CAC, ціною залучення цього клієнта, показує, чи заробляє вся воронка.

Вау, рішення чи обидва: як товар змінює воронку

Вау-товар продається з першого погляду. Він зупиняє палець у стрічці, тож виграє вгорі: високий CTR, дешеві кліки. Ризик унизу: друга покупка потребує причини, сильнішої за здивування. Liquid Death це найчистіший вау в категорії: вода в банці як у пива, смаки з назвами Mango Chainsaw і Severed Lime, перший екран, що обіцяє безкоштовну бензопилу до енергетика. Оцінка $1,4 млрд каже, що бренд цю причину постійно дає.

Товар-рішення продається на проблемі, яка в покупця вже є: енергія, травлення, раціон собаки, дешевший кашеміровий светр. Верх воронки складніший, бо проблема менш клікабельна за видовище. Середині потрібні докази: склад, дослідження, відгуки, гарантія. Винагорода внизу: проблема, яка повертається щоранку, робить підписку природною, і LTV росте разом з нею. AG1 і The Farmer's Dog це рішення.

Вау + рішення це рідкісний товар, який робить обидва. Oura це кільце, яке виглядає як прикраса і стежить за 50+ показниками здоровʼя; перша властивість виграє клік, друга тримає підписку. Skims називає себе брендом, орієнтованим на рішення, і продає білизну, про яку люди пишуть у соцмережах. Такі товари можуть виграти кожен поверх, тому в них одні з найбільших оцінок: Oura $11 млрд, Skims $5 млрд.

Один товар, ніша чи бренд: три типи магазину

Магазин одного товару продає одного героя і будує довкола нього все інше: набори, підписки, аксесуари, додатки. Увесь сайт штовхає до однієї кнопки, тож середина воронки коротка, а AOV росте на допродажах. AG1 продає один порошок; Oura продає одне кільце за $399 і членство за $5,99 на місяць поверх нього.

Нішевий магазин глибоко обслуговує одну аудиторію: власників собак, велосипедистів, скелелазів, молодих батьків. Він виграє на релевантності, бо кожна сторінка говорить з тією самою людиною, і на низу воронки, бо ця людина повертається. The Farmer's Dog, підписка на свіжий корм для собак з планом під породу, вік і вагу кожного пса, перевищив $1 млрд річної виручки і був оцінений у $1,46 млрд в останньому розкритому раунді.

Брендовий магазин продає світ, а не річ: багато товарів, яких тримає разом назва, стиль і обіцянка. Його воронка починається вгорі з контенту і спільноти, а повторні замовлення заробляє новими дропами. Skims відкривається кампанійним фото і новою колекцією; Quince, оцінений у $10,1 млрд, обіцяє якісні базові речі за радикальними цінами і ставить у меню кашемір за $50.

Воронка AG1 від стрічки до чекауту

AG1 це магазин одного товару для товару-рішення, і верх воронки він доручає обличчям. Перший екран це кампанія з Г'ю Джекманом; нижче цитати Льюїса Гамільтона, спортсменів і підприємців, кожна з іменем і титулом. Переваги це шість коротких блоків: енергія, імунітет, травлення, стрес, результати, шкіра. А пропозиція стоїть у верхній смузі кожної сторінки: мінус 40% на перший місяць. Хоч би яка реклама привела відвідувача, та сама обіцянка зустрічає його на сайті, тож клік і сторінка збігаються.

Середина воронки це одна сторінка товару, що робить три роботи. Пропозиція це набір, а не пакет: AG1 плюс вітальний набір, вітамін D3+K2 і пʼять дорожніх саше, €87 замість €107, а фото показує кожну річ з її вартістю. Вибір зведено до двох: одинарна підписка, 30 порцій, позначка «найпопулярніше»; подвійна, 60 порцій, позначка «найвигідніше». Тип покупки обрано наперед, Subscribe and Save, а над ним рядок соціального доказу: його обирають 93% клієнтів. Разова покупка є, за €107, одразу нижче.

Заперечення закрито поруч із кнопкою: гарантія повернення грошей 30 днів, безпечний чекаут, безкоштовна доставка для підписки, скасування одним кліком, доставка кожні чотири тижні.

Під кнопкою перший допродаж, order bump під назвою Complete Your Wellness Stack: риб'ячий жир Омега-3 за +€22, вітамін D3+K2 за +€24, кожен за один дотик. Тут AOV росте без другого рішення.

Buy Now оминає кошик і відкриває чекаут. Там чекають три речі. Зелений рядок, безкоштовну доставку розблоковано. Таймер: ми зарезервували ваш кошик на наступні десять хвилин. І в підсумку замовлення блок Add to this order з іншими добавками і кнопкою Add біля кожної. Експрес-оплата стоїть над формою, а поле email пише, що адресу використають для підтвердження замовлення і для нагадувань про кошик: магазин уже планує, як повернути відвідувача, який піде звідси.

Низ воронки починається ще до першого замовлення. На сторінці товару блок Your 30-Day AG1 Journey: дні 1–7, енергія; дні 8–14, імунітет; дні 15–30, травлення. Підписник, який знає, коли чекати результату, лишається достатньо довго, щоб його відчути, а друга доставка приходить на четвертий тиждень, саме коли маршрут закінчується. Довкола решта BOF: кабінет учасника, програма «приведи друга», email і WhatsApp для пропозицій.

Що взяти з AG1: одна обіцянка від реклами до верхньої смуги, один набір замість каталогу, підписка, обрана наперед, з доказом над нею, допродажі під кнопкою і на чекауті, і карта першого місяця, яка тримає друге замовлення.

Oura: одне кільце, одне членство

Oura, оцінена в $11 млрд, продає вау + рішення в магазині одного товару. Верх воронки чистий вау: Subtle. Power. The world's smallest smart ring is here, над срібним кільцем на чорному камені, по якому повзе сонечко. Рішення зʼявляється на один скрол нижче: зрозумійте своє тіло, 50+ показників здоровʼя, 86% учасників бачать, що здоровʼя покращилось, та історії учасників з іменем і діагнозом.

Сторінка товару прибирає єдине тертя, яке має кільце: розмір. Обираєте колір, далі безкоштовний набір для примірки перед покупкою. Низ воронки вбудовано в продукт: членство за $5,99 на місяць, перший місяць безкоштовно, яке відкриває аналітику і AI-помічника зі здоровʼя. Кільце це перше замовлення; членство це LTV.

Skims і Quince: брендові магазини на верху воронки

Skims, оцінений у $5 млрд, веде магазин як журнал: кампанійне фото, назва сезону, Shop Now, далі дропи один за одним, нова лінія для сну, бюстгальтери, на які «переходять усі», добірка колаборації. Низ воронки на відстані одного SMS: надішліть SKIMS на короткий номер, щоб не пропустити дроп, а дрібний текст каже, що в цих повідомленнях будуть і нагадування про кошик. Для брендового магазину наступний дроп і є повторне замовлення.

Quince, оцінений у $10,1 млрд, продає рішення через бренд: розкішні матеріали за ціною, яка читається як помилка. Верхня смуга каже це пʼятьма словами, якісні базові речі за радикальними цінами, а перший пункт меню це ціна, кашемір за $50. Безкоштовна доставка і повернення протягом 365 днів знімають заперечення купувати одяг онлайн. Кожна картка товару має ціну й рейтинг, тож середина воронки відбувається вже на головній.

Olipop і The Farmer's Dog: рішення, які повертаються

Olipop, оцінений у $1,85 млрд, продає кращу газовану воду і вдягає рішення у вау: карамель стікає по зеленому яблуку, Drippin' in delicious. Клітковина, яка робить його рішенням, є на кожній картці, 9 г, поруч із рейтингом, порахованим сотнями відгуків. Середина воронки має два важелі: упаковка з 12 банок як одиниця продажу і поріг безкоштовної доставки $50, який повторює кошик: витратьте $50 або оформіть підписку, щоб доставка стала безкоштовною. Обидва піднімають AOV, а другий ще й штовхає BOF.

The Farmer's Dog це нішевий магазин у масштабі: свіжий корм для собак за підпискою, план під породу, вік, вагу і цілі щодо здоровʼя кожного пса, доставка порційними охолодженими пакетами. Компанія перевищила $1 млрд річної виручки і була оцінена в $1,46 млрд в останньому розкритому раунді. Для нішевого магазину персоналізація і є воронкою: план складають раніше, ніж показують ціну, а тому самому собаці той самий корм потрібен і наступного місяця.

E-commerce від Figmatica

Наші власні магазини лежать на тій самій карті. GUD, український бренд рюкзаків і сумок, це брендовий магазин; Poelle продає шкіряні сумки; Everscape перетворює 2D-фото на 3D-принти на склі, вау-товар; Ministry of Desserts це Shopify-магазин київських кондитерських, чий верх воронки живить SEO; Smash. це тенісний бренд; а для KFC Україна ми зробили промо-сайт з глибинним скролом, чистий верх воронки.

GUDУкраїнський бренд рюкзаків і сумок. Редизайн магазину, три кроки від головної до кошика.Everscape3D-принти на склі з 2D-фото. Сайт для вау-товару.PoelleУкраїнський бренд шкіряних сумок. Інтернет-магазин, розробили й підтримуємо.Ministry of DessertsShopify-магазин і SEO для київської кондитерської.KFC UkraineПромо-сайт з глибинним скролом у стилі Apple для кампанії KFC.Smash.Лендинг для тенісного бренду.

Кожен зайвий клік забирає конверсію

За цим правилом ми будуємо кожен магазин. Покупець, якому сподобався товар і який мусить шукати кнопку, починає сумніватися: може потім, може інший колір, може інший магазин. Тому в наших магазинах кнопка «Додати в кошик» є на кожному екрані, де покупець може вирішити, і вона ніколи не змушує його піти від того, на що він дивиться. GUD, український бренд рюкзаків і сумок, що продає в Україні й за кордоном, показує, як це працює на сторінці товару.

Перше, багато фото товару. Сторінка ROAD 2.0 відкривається їхньою сіткою: сумка з кожного боку, ремені, нутрощі, відділення для ноутбука, деталі зблизька. Поруч із сіткою права колонка тримається на місці, поки гортаєш: назва, ціна, колір, «Додати в кошик». Покупець роздивляється сумку, а кнопка завжди на відстані погляду.

Друге, кнопка всередині галереї. Натисніть будь-яке фото, і воно відкривається на весь екран, з мініатюрами збоку, стрілками, збільшенням, а внизу назва, ціна і «Додати в кошик». Таке трапляється рідко: більшість магазинів змушують закрити фото і гортати вгору, щоб купити. Тут покупець додає сумку, ще дивлячись на неї, а кошик виїжджає з трьома речами до неї, плечовим ременем, підсумком і шопером, у кожної своя кнопка «Додати в кошик».

Третє, сумка в реальному житті. Нижче на сторінці блок In real life: фото і короткі відео сумки на людях, у супермаркеті, на мотоциклі в горах, в авто, у майстерні. Кожна картка відкривається на весь екран як сторіз, з відтворенням, паузою і звуком. Покупець, який бачив сумку на полиці, тепер бачить її на людині, і це відповідає на питання, на яке фото на сірому тлі не відповість: як вона виглядатиме на мені.

І на всю довжину сторінки за покупцем їде липка панель: ROAD 2.0 SAND, $225, «Додати в кошик». Хоч би що його переконало, фото, матеріали, відділення для ноутбука, відео на мотоциклі, кнопка вже поруч.

Довкола решта магазину тримається того самого правила. Головна відкривається однією сумкою, ROAD 2.0 BLACK, її описом і однією кнопкою, а бестселери починаються одразу під нею; з першого екрана до кошика три кроки. Ми почали з аналізу UX і структури старого магазину і поставили чотири цілі: коротший шлях до товару, простіші навігація і фільтри, сильніша айдентика, більше простору для конверсії.

На телефоні каталог це один довгий список: категорії картинками згори, далі сортування і фільтр, далі картки товарів з ціною і кнопкою «у кошик» на кожній, тож покупець може додати сумку, не відкриваючи її сторінку. Дизайн зайняв 5,5 тижня: тиждень досліджень з інтервʼю і конкурентами, тиждень UX з персонами за кожним рішенням, півтора тижні прототипів, два тижні UI. Уся дошка в кейсі GUD.

Сфокусоване і контекстуальне бачення: один магазин, різні очі

Скільки показувати на одному екрані, залежить від того, хто дивиться. Довго дизайн інтерфейсів спирався на ідею фігури й фону: мозок відокремлює головне від тла, тож дайте йому одне чітке головне. Культурна психологія зʼясувала, що в різних культурах це працює по-різному. В експериментах Масуди і Нісбетта американці спершу описували центральний обʼєкт сцени, а японці контекст і звʼязки між речами. Сфокусована увага більш характерна для користувачів США, Канади, Великої Британії; користувачі Японії і Тайваню демонструють контекстуальну увагу, спершу оглядаючи периферію інтерфейсу і звʼязки між елементами, а вже потім центр.

В e-commerce це видно з першого екрана. Західний магазин бінарний: для жінок, для чоловіків, один екран, одне рішення, короткий шлях за руку. Східний магазин відкривається як огляд сценаріїв: за колекцією, за категорією, за ціною, одразу до товару, тож покупець спершу обирає логіку покупки, а потім товар. Його сторінки товару відкривають усі фото одразу, з кожного ракурсу, і ставлять багато дій поруч, аж до додавання конкретного розміру одним дотиком. Західний дизайнер назвав би це помилкою на помилці; японська покупчиня пояснила, чому їй так подобається: що більше інформації, то впевненіше вона почувається, що все робить правильно.

Тож магазин мусить знати, під чиї очі він зроблений, а магазин, що продає на кількох ринках, може взяти з обох. GUD тримає одну чітку дію на кожному екрані, західну звичку, і дає покупцю багато фото й відео товару, ту насиченість, яку шукає контекстуальне око. Михайло Ємчура розбирає різницю між східним і західним веб-дизайном, на прикладі e-commerce, корпоративних сайтів і лендингів, у відео на каналі Фігматики: Східний vs західний вебдизайн, чому така різниця.

Сім DTC-брендів поруч

Чеклист інтернет-магазину, поверх за поверхом

Якщо ви пишете ТЗ на інтернет-магазин, візьміть цей перелік разом з референсами і перевірте кожен поверх.

• 01TOF: реклама і перший екран кажуть те саме. Одна пропозиція від креативу до верхньої смуги, обличчя або видовище, які заробляють клік.
• 02MOF: одна пропозиція, мало виборів. Набір замість каталогу, дві кількості, рекомендований варіант обрано наперед з доказом над ним.
• 03MOF: заперечення поруч із кнопкою. Гарантія, доставка, повернення, скасування, розмір, по одному рядку на кожне.
• 04MOF: «Додати в кошик» на кожному екрані. Поруч із фото, всередині повноекранної галереї, у липкій панелі, на кожній картці каталогу.
• 05MOF: допродаж у правильний момент. Допродаж під кнопкою, додатки на чекауті, поріг безкоштовної доставки в кошику.
• 06BOF: причина для другого замовлення. Підписка, членство, поповнення, новий дроп, карта того, що принесе перший місяць.
• 07BOF: шлях назад. Нагадування про кошик в email і SMS, кабінет учасника, реферали.

Ми проєктуємо і робимо інтернет-магазини на Shopify, Webflow і Next.js: брендові магазини, магазини одного товару з допродажами, нішеві магазини. Якщо папка референсів уже відкрита, надішліть її разом з товаром і числами вашої воронки, і на дзвінку ми пройдемо, на якому поверсі втрачається найбільше і що виправити першим.