Кейс — редизайн сайта
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 — после запуска сайта.
Выводы
Что дал этот проект
Сайт о грантах продаёт не дизайном, а понятностью: человек должен за минуту понять, какой формат поддержки его, что он получит и сколько это стоит во времени.
Больше всего здесь работает не новая графика сама по себе, а решение свести несколько услуг к трём сценариям выбора — именно оно решает, станет ли сайт рабочим инструментом продаж.
Выбор вместо каталога
Когда услуг несколько, главная должна предлагать не список, а выбор: три формата с разной глубиной погружения и ценой.
Квалификация на входе
Три поля выбора в форме экономят менеджеру первый звонок и показывают, с кем и о чём будет разговор.
Доверие фактами
В чувствительной теме убеждают имена экспертов, сертификация, отзывы и честный ответ о том, что гарантировать невозможно.
Связаться