назад

Foob — платформа для футболістів, перезібрана на дослідженнях у Нідерландах і США

Рік2024
СфераСпорт · SaaS
РольArt Direction · UX/UI
КомандаAnthracite Studio
Foob — обкладинка кейсу

Стикались із ситуацією, коли дизайн доводиться міняти посеред проєкту? Це провал чи шанс зробити краще? Це історія про те, як ми перевинаходили футбольну платформу — і як дослідження вело нас крізь зміни й давало адаптуватися швидко. Від пошуку сегментів до шліфування UX: у підсумку +22% до конверсії в реєстрацію і 60% тих, хто доходить до оплати. А бонусом — що дає бізнесу співпраця з дизайном за межами початкового скоупу.

Цей проєкт я вів як арт-директор у складі студії Anthracite — ми робили цифрові продукти через дизайн-мислення для стартапів та IT-компаній. Так ми й познайомилися з FOOB — бізнесом для футбольних ентузіастів.

0:0 Розминка

FOOB організовує аматорський футбол — ліги й сезони, для команд і окремих гравців. І це не лише про гру: у FOOB є власний бар, де гравці збираються після матчів.

Платформі — сайт, форма реєстрації та PWA — понад десять років. З роками метрики почали просідати, і щоб не поступитися молодшим конкурентам, FOOB вирішив: час змінюватися. Так вони прийшли до нас.

0:1 Проблема й задача

Головна проблема — платформа майже не генерувала лідів. Сайт не втримував увагу відвідувачів, а слабка форма реєстрації не перетворювала їх на клієнтів. Мій скоуп: провести дослідження, знайти сегменти клієнтів, їхні болі та барʼєри на шляху до продукту — і на основі результатів переробити платформу з новим UX/UI.

0:2 Метрики й аналітика

Нормальної аналітики у FOOB не було — продажі жили в Excel і CRM. Тож ми швидко підключили Google Analytics, щоб бачити поведінку людей на сайті й платформі, та Hotjar — щоб розбирати сесії в деталях. Це дало змогу перевірити вузькі місця воронки продажів, а надалі — чесно порівнювати старий дизайн із новим і закласти основу для A/B-тестів.

Щойно ми увімкнули трекінг, зʼявилося перше відкриття: абсолютна конверсія — 0,01% відвідувачів доходили до сторінки з формою реєстрації і зрізалися на оплаті. Далі тренд лише підтверджувався. Стало очевидно: сайт не вміє онбордити нових клієнтів, а слабкий UX форми відлякує більшість — на виході самі холодні ліди.

Воронка: понад 10% відвідувачів, 0,01% конверсія, 1 оплата

Тож ми перезібрали карту сайту, розписавши всі наявні сторінки — їх понад 100, бо FOOB працює в багатьох містах, — і виправили потенційні вузькі місця, глухі петлі та застарілі сторінки. Для порівняння — альтернативна навігація сайту, де всі проблеми обійдено, а шлях користувача до цілі коротший на кілька кліків.

Карта сайту: до і після

Паралельно ми вели масштабне дослідження користувачів у США та Нідерландах — FOOB працює в обох країнах.

0:3 Виклики дослідження

FOOB давно на ринку, тож спершу треба було знайти й перевірити наявні сегменти — і зрозуміти, який із них найпривабливіший. Починати з дослідження було необхідно: чи відрізняються мотивації футболістів у різних країнах, ми просто не знали.

Мета

  • Знайти наявні сегменти клієнтів і визначити їхні високорівневі джоби
  • Проаналізувати сегменти й запропонувати, де FOOB найперспективніше конкурувати
  • Сформулювати інсайти й гіпотези для покращень UX/UI під майбутні тести

Фреймворк

Ми хотіли закрити максимум питань одним інтервʼю, не тримаючись сліпо за один канонічний фреймворк — щоб даних для аналізу точно вистачило. Тому зібрали модульний підхід із найефективніших елементів:

  • JTBD — для інтервʼю: спершу валідація сегментів, потім робота з пріоритетними для бізнесу сегментами й розкриття всього дерева їхніх джобів. Це допомогло сформувати й перевірити перші гіпотези — про мотивації, барʼєри й тригери, які впливають на рішення користуватися продуктом;
  • CustDev — щоб зібрати додаткові факти про футбольні звички та вподобання клієнтів;
  • Монадичне тестування — щоб оцінити два дизайн-концепти окремо й отримати неупереджений фідбек про враження та вподобання;
  • І вишенька — швидкий юзабіліті-тест чинного флоу наприкінці кожного інтервʼю: просили учасника зареєструватися командою або соло. Це виявило нетипові баги на різних пристроях і показало, що саме плутає клієнтів у поточному флоу.

Рекрутинг

  • Клієнт дав список задоволених і незадоволених клієнтів — це 50% респондентів;
  • Ще частину ми добрали таргетом у Facebook — футбольні ентузіасти, які не користуються жодним рішенням;
  • Через Instagram рекрутили клієнтів конкурентів;
  • А для оптимізації бюджету підключили особисті канали — слідкуючи, щоб респонденти не були знайомі між собою.
Схема рекрутингу респондентів

0:4 Інсайти

Більшість респондентів прикипіли до футболу ще з раннього дитинства — і пронесли цю пристрасть через життя. Розуміння цієї глибокої привʼязаності — ключ до того, як FOOB говорити з потенційними клієнтами, щоб його чули.

Цитати респондентів

Джоб-сторіз і сегментація

First Time Activation: перший контакт із FOOB — мотивації, барʼєри й бажані результати новачків.

Мігранти в Нідерланди чи США
Новоприбулі шукають, як соціалізуватися й потоваришувати через футбол — щоб відчути спільноту та звикнути до нового середовища.

«[коли] я приїхав у нову для мене країну, [я хочу] соціалізуватися в спільноті й знайти людей зі спільними інтересами, [щоб] відчути належність до спільноти, менше самотності й розгубленості»

Барʼєри: мовний барʼєр, розрив у рівні гри, страх грати з професіоналами й нерозуміння, де шукати нормальні майданчики.

Гравці-змагальники
Тим, хто шукає змагальний футбол, важлива гарантована, чесна й безпечна гра, де перемога щось означає — і підтверджує їхню майстерність.

«[коли] ми цілеспрямовано шукали футбол зі змагальним режимом, [я хочу] перемагати й мати хорошого суддю, який стежить за грою, [щоб] відчути азарт справжньої гри»

Барʼєри: листи очікування та складність знайти партнерів свого рівня.

Зручна логістика
Обираючи, де грати, люди насамперед дивляться на близькість і доступність — щоб не витрачати час на дорогу.

«[коли] я шукав місце пограти у футбол, [я хочу] щоб воно було на велосипедній відстані, [щоб] не витрачати зайвий час на дорогу»

Барʼєри: незрозуміла інформація про локації, відсутність майданчиків у місті та задовга дорога — в ідеалі до 15 хвилин велосипедом.

Сегменти I–III

Continue Playing: досвід постійних користувачів — мотивації, барʼєри й що тримає в грі.

Гравці-змагальники / команди
Змагальним гравцям потрібні перемоги, які щось значать, — підтвердження їхньої майстерності й сили команди. Вони шукають організовану змагальну гру.
Барʼєри: недостатня винагорода за перемогу та неявки команд ламають досвід.

Гравці без команди
Соло-гравцям потрібен організований футбол, щоб прокачувати навички без стресу збирати склад, — акцент на структурованій грі.
Барʼєри: складно знайти партнерів і лякає соціальна динаміка.

Second Level Job: глибші мотивації досвідчених користувачів — що насправді тримає їх у FOOB.

Фітнес-ентузіасти
Для них футбол — спосіб бути у формі й отримувати задоволення від руху та спілкування.
Барʼєри: ризик травм, скасовані матчі й обмеження майданчиків заважають грати регулярно.

Після гри
Гравці цінують спілкування після матчу — звʼязки та спільнота важать не менше за рахунок.
Барʼєри: комусь соціальна частина футболу не заходить, а скасований матч — це ще й скасований вечір.

Сегменти IV–VII

Визначення сегмента FOOB

Щоб обрати пріоритетні сегменти, ми зважували: платоспроможність, частоту використання, значущість джоба, розмір сегмента та конкуренцію з наявними рішеннями. Ідеальний сегмент FOOB — гравці, які шукають у футболі соціальні звʼязки, і ті, кого веде змагальний азарт.

Не сегмент FOOB: гравці, яким футбол потрібен лише для скілів чи фітнесу, без соціальної складової. Їм і так добре з рішеннями, що ставлять гру вище спілкування. А тим, кому головне фітнес, можуть більше пасувати падел чи теніс — там менше залежиш від команди.

З готовим аналізом ми нарешті розуміли, для кого проєктуємо. Це дає створювати цінність для правильного сегмента — того, чий джоб FOOB може закрити краще за конкурентів.

0:5 Дизайн-процес і впровадження результатів дослідження

Визначивши найперспективніші сегменти, ми зібрали всі гіпотези докупи. Назвали це «пулом гіпотез» — у якийсь момент здалося, що ми в них тонемо. Щоб не потонути, відсортували все за ICE: Impact, Confidence, Ease of implementation. І почали дизайн із найвпливовіших і найреальніших.

Кожен блок сайту закриває конкретну гіпотезу — так дизайн-рішення стоять на інсайтах користувачів і перевірених припущеннях. На головній ми запровадили сторітелінг: кожен блок має свою роль — відповідає на потребу або знімає барʼєр, підводячи людину до зрозумілої дії.

Візуальний стиль: великі жирні шрифти для чіткості й читабельності — важливе одразу впадає в око. Це рішення народилося після бенчмарк-аналізу: ми хотіли, щоб FOOB неможливо було переплутати з кимось іще. А жорстка сітка тримає структуру й порядок у макеті.

Новий сайт FOOB
Більше візуалу цього проєкту, включно з брендингом, — у кейсі на Behance.

Значущість трофею

Гіпотеза: трофей — відчутне втілення спільних зусиль і відданості команди протягом сезону. Він символізує спільні досягнення й зміцнює командний дух.

WIN WITH FOOB — блок про трофей

Збалансована гра

Гіпотеза: людям потрібна безпечна й помірна участь у дозвіллі — це їхній «час для себе». Вони цінують чесну гру й надійність, і саме це складає задоволення від відпочинку.

FOOB IS ABOUT — блок про збалансовану гру

Традиція прогресу команди

Гіпотеза: людям приносить задоволення бачити поступ своєї команди — підтримувати цей рух стає традицією. Дехто грає одразу в кількох командах: настільки глибока відданість справі.

Розклад і прогрес команди в застосунку

Після гри

Гіпотеза: людьми рухають ностальгія і тяглість — величезне задоволення зберігати заняття з юності. Вони цінують інклюзивне середовище однодумців і можливість поспілкуватися після гри — незалежно від освіти чи національності.

AFTER THE GAME — блок про третій тайм

0:6 UX-флоу

Флоу реєстрації та оплати ми стиснули до двокрокової форми: інформація розкривається поступово, крок за кроком, і не перевантажує. Замість самих лише радіокнопок і дропдаунів — візуально живі елементи, з якими простіше розібратися в кожному блоці форми.

Окремо взялися за місце, де люди зривалися: неочікувану ціну на останньому кроці. Ми переробили подачу: тепер повна вартість для команди зрозуміла одразу, і її можна розділити між гравцями — сума лишається підйомною для кожного. Прозора ціна без сюрпризів — менше шоку і менше відвалів на критичному кроці реєстрації.

START PLAYING WITH FOOB — нова форма реєстрації

0:7 Друга ітерація дизайну і перевинайдення UX-флоу

Коли перша ітерація пішла в тести, клієнт почав хвилюватися, чи достатньо вона резонує з чоловічою аудиторією. Хоча FOOB відкритий для всіх — є жіночі ліги та змішані матчі, — ми вирішили дослідити альтернативну версію дизайну.

Головна різниця між версіями була в UI сайту, тож ми провели монадичний тест — метод, де кожен респондент оцінює лише один концепт, щоб уникнути упередженості. Для повноцінного фідбеку ми ретельно підібрали пул прикметників — «сучасний», «теплий», «спортивний» — і дивилися, яка версія ближча до наших дизайн-цілей. Респондентів для обох концептів набирали на різних платформах, щоб охопити ширшу вибірку.

Монадичний тест: результати і дві версії дизайну

У другій фазі ми зважилися й на сміливе перевинайдення UX-флоу. Вийшло швидко — виручив пул гіпотез, з якого ми дістали інші гіпотези й зібрали другий альтернативний флоу на основі наших знахідок. Реєстрацію ми перетворили на щось схоже на e-commerce checkout, а сторітелінг із першого дизайну поєднали зі сміливішим візуальним стилем.

Дві версії дизайну на тесті

Дві версії дизайну викликали в користувачів різні реакції. Обговоривши результати з клієнтом — а його ядро, попри жіночу лігу, становила чоловіча аудиторія, — ми обрали другу версію. Це збігалося з баченням клієнта й гарантувало, що дизайн влучить у головну аудиторію FOOB.

0:9 Фінальні результати й більше

Весь проєкт, разом із дослідженням, зайняв два місяці. Тісна співпраця з бізнесом дала глибоко зрозуміти його потреби — і ухвалювати рішення ефективно. За результатами тестів, після спрощення й покращення UX конверсія в реєстрацію зросла до +22%, і 60% із тих, хто почав, доходять до фінального кроку — оплати.

За час співпраці ми настільки занурилися в продукт і його користувачів, що вийшли за межі скоупу з додатковими ідеями: розвиток комʼюніті, колаборації, вітальні івенти. Все — щоб збагатити досвід користувачів і зміцнити звʼязок FOOB з аудиторією.

Одну з пропозицій втілили ще під час роботи: клієнт погодився створити мережу WhatsApp-чатів для всіх міст. Тепер футбольні ентузіасти легко знаходять заміну на матч — досвід кращий, задоволеність сервісом вища. Спершу ми планували цю функцію в застосунок на майбутнє, але прямо зараз головним було інше: щоб бізнес працював, а користувачі були задоволені.

Підсумки: 2 місяці, +22%, 415 активних учасників

Сподобався підхід?

Більше візуалу цього проєкту — включно з брендингом — є на Behance. А якщо у вас схожа задача — напишіть, розберемось.