Кейс — редизайн сайту
Granty.org.ua
Міжнародна платформа польських та українських експертів: пошук грантів, підготовка заявок, супровід проєктів і навчання. Ми переробили сайт так, щоб кожна аудиторія за хвилину знайшла свій формат підтримки — і залишила заявку.
Обговорити проєкт →
Точка А — з чим звернулись
Багато форматів, немає вибору
Відеолекції, консультації менеджерів, курс із сертифікатом VCC і офлайн-тренінг — чотири формати з різними аудиторіями. Сайт мав звести їх в одну систему й не стати каталогом.
- Формати важко порівняти: кому досить лекції, а кому потрібен курс
- Немає єдиної точки входу — відвідувач губиться між розділами
- Заявка приходить без контексту: етап проєкту й потрібний менеджер невідомі
- Ключові кнопки губляться серед описів послуг
Процес і аналітика
Ключові точки росту
Почали з простого питання: з чим людина заходить на сайт про гранти. Виявилося — із трьома різними станами: «потрібні кошти, але не знаю, з чого почати», «уже пишу заявку і застряг», «хочу навчитися й отримати сертифікат».
Ми розклали шлях користувача:
пошук або рекомендація → головна сторінка → вибір формату підтримки → форма консультації чи запис на курс.
- Звели всі послуги до трьох варіантів підтримки: від самостійного навчання до повного супроводу проєкту
- Поставили блок вибору одразу після першого екрана — людина бачить свій сценарій, не гортаючи сторінку
- Додали кваліфікацію просто у форму: менеджер, тема запиту та зручний канал зв’язку
- Підсилили доказову базу: експерти з іменами, відеовідгуки випускниць, сертифікація VCC
- Зробили FAQ інструментом продажу: чесні відповіді про гарантії, вартість і формат оплати
- Звели заклики до дії до двох: записатися на консультацію або перейти до навчання
Дизайн і структура
Спершу макет, потім верстка
Зібрали повний макет: ритм секцій, чергування синього, кремового і жовтого, довжину скролу цілком. Так стало видно, де сторінка провисає, а де на відвідувача падає забагато тексту — ще до того, як почалася верстка. Ті самі правила — сітка, кольори, типографіка, стиль карток — далі розійшлися на внутрішні сторінки сайту.
Синій тримає ключові смислові блоки: перший екран, консультацію та курс. Кремовий — для «спокійних» секцій із вибором і поясненнями. Жовтий працює як акцент: кнопки, чекбокси та блок команди.
- Темно-синійшапка, футер, глибина фону
- Синійключові блоки: hero, консультація, курс
- Жовтий акценткнопки, позначки, блок команди
- Кремовийфон секцій із вибором і поясненнями
Результат у русі
Сторінка в прокрутці
Процес — як працювали
6 кроків від макета до сайту
Головне рішення кейсу просте: спершу сценарії аудиторії, потім структура, і тільки після цього — дизайн і верстка.
-
1. Сценарії аудиторії
Описали три стани, у яких людина шукає гранти, і закріпили за кожним свій блок сторінки та свою дію.
-
2. Структура сайту
Вибудували порядок головної: перший екран → вибір формату → деталі кожного варіанта → доказова база → зняття заперечень → фінальна дія. Навігацію звели до п’яти пунктів, щоб внутрішні сторінки не конкурували з вибором формату.
-
3. Макет і кольорові акценти
Зібрали макет усієї сторінки, щоб побачити ритм секцій і довжину скролу до того, як почалася верстка.
-
4. Тексти й меседжі
Переписали заголовки під вигоду, а не під назву послуги. Перевірили тон: без обіцянок гарантованого гранту.
-
5. Форми з кваліфікацією
Три вибори у формі — менеджер, тема запиту й канал зв’язку. Менеджер отримує заявку вже з контекстом:
- з якої країни потрібен фахівець;
- на якому етапі перебуває проєкт;
- де людині зручно спілкуватися;
- що саме вона хоче отримати.
-
6. Верстка та мобільна версія
Перенесли макет у чинну CMS без зміни хостингу й адрес сторінок, потім окремо перевірили довжину блоків, розміри кнопок і форму на смартфоні.
Потрібен сайт, який приведе кожного клієнта до своєї послуги?
Розкладемо послуги за сценаріями аудиторії та зберемо структуру й тексти так, щоб відвідувач за хвилину знайшов свій формат і залишив заявку.
Точка Б — результати
Точка Б
СталоСайт після редизайну
3
варіанти підтримки в одному блоці вибору
4
мінікурси з переходом на платформу навчання
10
запитань у FAQ, які знімають заперечення
- Сайт веде три різні аудиторії до трьох різних дій
- Форма консультації сама кваліфікує запит: менеджер, тема, канал зв’язку
- Соціальний доказ на місці: шість експертів з іменами та відеовідгуки випускниць курсу
- Структура готова до масштабування: новий формат — це ще одна картка, а не ще одна сторінка
Обсяг: сайт: структура + дизайн + тексти + форми
Сайт відповідає на три питання відвідувача: який формат мій, що я отримаю і як почати.
Відгук
Що каже клієнт
«У Hil Studio ми замовили дизайн нового лендингу для проєкту Granty.org.ua. Створена графіка була естетична й функціональна. На її основі запрограмували сайт, який хвалять користувачі. Рекомендую».
Кшиштоф Лонтка, Granty.org.ua — після запуску сайту.
Висновки
Що дав цей проєкт
Сайт про гранти продає не дизайном, а зрозумілістю: людина має за хвилину зрозуміти, який формат підтримки її, що вона отримає і скільки це коштує в часі.
Найбільше тут працює не нова графіка сама собою, а рішення звести кілька послуг до трьох сценаріїв вибору — саме воно вирішує, чи стане сайт робочим інструментом продажів.
Вибір замість каталогу
Коли послуг кілька, головна має пропонувати не список, а вибір: три формати з різною глибиною занурення й ціною.
Кваліфікація на вході
Три поля вибору у формі економлять менеджеру перший дзвінок і показують, з ким і про що буде розмова.
Довіра фактами
У чутливій темі переконують імена експертів, сертифікація, відгуки й чесна відповідь про те, чого гарантувати неможливо.
Зв’язатися