Как быстро и без страданий сделать главную страницу сайта — MVP-подход
MVP в разработке позиционирования стартапа — на примере Serpstat Три года назад я стал CEO стартапа Serpstat и у меня оказалось всего две недели, чтобы качественно переделать главную сервиса и на время закрыть этот вопрос. Тогда я придумал метод, о котором сейчас хочу рассказать. Это бoмж-подход — фирменная разработка внутри Netpeak Group, эдакое MVP в мире дизайна сайтов: как все сделать «быстро, дешево, эффективно». Такие MVP важны не только в дизайне — первую статью о бoмж-подходе я посвятил
Призываю ли я делать именно так? Нет, конечно. Делайте правильно, как положено. Размещение блоков на главной — важное дело, но я считаю, что если CEO стартапа тратит на это уйму времени вместо работы над самим продуктом и его качеством, SaaS не будет работать в плюс. При этом в зрелых проектах, таких как агентство Netpeak, мы можем выделить время на длительные митинги и обсуждения для формирования техзадания по обновлению страниц сайта компании.
Вскоре после того как Prodvigator стал Serpstat, появилась проблема, с которой сталкиваются многие молодые проекты: сайт требовал существенных доработок, визуальных и функциональных. Сейчас, конечно, наша главная страница разработана профессиональными дизайнерами, но тогда мы столкнулись с необходимостью все сделать оперативно и качественно, чтоб спокойно сконцентрироваться на работе над продуктом.
Я в деле уже почти 15 лет и по опыту знаю: единственный метод все сделать быстро и без потерь месяцев на коммуникацию с дизайнером и программистом — составить одно большое, внятное техзадание, включающее в себя и дизайн, и контент сайта. Надо полностью продумать посадочную страницу в техзадании, тогда дизайнеру не придется ничего изобретать — нужно будет просто все качественно отрисовать.Наверное, вы замечали, что все страницы сервисов чем-то похожи, на них присутствуют аналогичные блоки с приблизительно идентичной информацией. Идентичной по структуре, не по содержанию. Кому-то удается подавать свои идеи лучше, кому-то хуже. Мир не стоит на месте и всегда можно улучшить подачу «блюда».
Я постоянно анализирую сайты коллег и их опыт вдохновляет на изменения. Так сформировалась привычка сохранять интересные фишки. Для чего?
Заимствовать творчески
У комaнды Serpstat была уйма своих идей, но я решил все же посмотреть, как с задачами по дизайну главной страницы сайта справляются коллеги из SaaS-продуктов. По-настоящему работающих идей не так много, поэтому не стоит бояться творчески заимствовать лучшие наработки и адаптировать их. Конечно, речь не о сайтах прямых конкурентов.
В Serpstat я завел структурированную «папочку» с примерами нормальных решений. Со временем открыл доступ всем — сейчас каждый сотрудник может поделиться интересными элементами.На первом этапе я не сохранял какие-то экстраординарные фишки. Наоборот, здесь как раз нужно искать эффективные кейсы: максимально простые, но тем не менее наиболее функциональные примеры. Благодаря подходу «понравилось — сохрани», нам существенно удается упростить себе жизнь. Особенно в моменты, которые требуют быстрых и качественных решений (к ним относится и процесс редизайна — он требует немало времени и средств, поэтому мы использовали на пpaктике бoмж-подход).
Наш небольшой мануал.
1. Заводим общий Google Docs для комaнды
Это простой и быстрый способ сохранять идеи. Я ежедневно просматриваю множество страниц SaaS-сервисов и сохранял элементы дизайна, месседжи и даже фразы. Теперь, когда какая-то идея нравится, каждый сотрудник может сохранить ее в общем документе:
2. Структурируем документ по тематическим блокам
Исходя из своих потребностей, я структурировали документ так: добавил блоки «первый экран», «экран фич», «экран информации о продукте», «ссылки на блог», «блок для сравнения с конкурентами» и так далее.
Как быстро написать текст — девять хитростей На что нажимать, чтобы увидеть структуру докса, читайте в пятом пункте статьи
3. Сохраняем блоки
Информацию добавляю в формате: ссылки, скриншоты, объяснения.
4. Добавляем блоки из докса в техзадание
В необходимый момент сдуваем пыль с этого документа и работаем с содержанием.
Я смотрел, что используют популярные в мире SaaS-сервисы, набросал для главной Serpstat все, что мне нравилось, а потом многое убирал. Убирать лишнее проще.
Например, для главной Serpstat я выделил такие блоки:
- хедер;
- первый экран;
- блок с видео (плавающая кнопка видео) ;
- блок фич — вопросы, на которые даются ответы картинкой;
- блок «Why Serpstat?»;
- блок с видеоотзывами;
- блок с клиентами;
- блок с White Papers;
- блок с фото юзеров с отзывами;
- блок с последним экшеном;
- блок с информацией о популярности в соцсетях и мотивацией подписаться;
- футер.
5. Убираем лишнее и выбираем доступные идеи
Какой блок соответствует цели сервиса и поможет в ее достижении, а какой нет — вот о чем я думал на данном этапе. После этого отобрал наиболее доступные по реализации идеи.
Например, взял отличную фишку на сайте mixrank: если вся соль в интерфейсе, показывать взаимодействие с интерфейсом, а для этого идеально подходят гифки.
Визуально понравился подход Wistia к блоку о преимуществах продукта:
Аналогичный блок на сайте Serpstat:
Блок с отзывами подсмотрели у Preact:
Реализация на главной Serpstat:
6. Оформляем техзадание
Важнее всего продумать все детали подачи информации — это не просто ТЗ по дизайну, а и ТЗ по контенту.
От контента и его подачи зависит восприятие информации, контент диктует целесообразность того или иного блока на странице. От этого зависит, каким будет ее формат и стиль.
Необходимо максимально детально все прописать: где будет находиться какая деталь блока, каким будет его наполнение, что за чем лучше размещать.
В итоге я получил структурированный документ со скриншотами «как надо» и с описанием «как будет у нас» — расписал все максимально детально с учетом особенностей продукта и целевой аудитории.
Подобную методику я использую и для других проектов. Например, вот техзадание по созданию сайта конференции SaaS-nation:
7. Наслаждаемся результатами
Так выглядел сайт сервиса до ребрендинга:
А этот, первый после ребрендинга сайт мы создали за 14 дней и он работал еще полгода, пока профессиональные дизайнеры рисовали современный вид главной Serpstat:
8. Продолжаем дополнять документ новыми идеями
После написания техзадания мы продолжили пополнять созданный Google Docs новыми идеями, которые могут пригодиться в следующий раз. Так как доступ к нему есть у всех в комaнде, это делается быстро и легко.
Вместо выводов
Мы быстро проапгрейдили визуальную составляющую сайта Serpstat в минимальные сроки и с минимальными затратами. При этом не бездумно копировали какой-то сайт, а компилировали удачные решения зарубежных сайтов.
После внедрения обновленной главной я начал получать обратную связь. Многие отмечали классный американский стиль новой главной Serpstat.
Почему бoмж-подход стал для нас оптимальным решением?
Существенную роль играла скорость. Обычно разработка какой-то концепции занимает много времени, а количество времени прямо пропорционально количеству людей, которые задействованы в проекте. Все начинают предлагать свои креативные идеи, обсуждать и критиковать других, а времени на реализацию остается очень мало.
Когда мы говорим о стартапе, нужно осознавать, что работать приходится в сжатые сроки и нет лишнего времени на возню. Бoмж-подход в этом плане оптимален: смотрим на простые и уже работающие идеи и адаптируем их под свои нужды. В Serpstat нам удалось добиться желаемой цели — создать интуитивно понятный и удобный дизайн сайта для наших клиентов. Заодно многому научились от крутых коллег.
Если вы будете делать подборки интересных кейсов, систематизируя их «на бумаге», а не в голове, то сможете в любой момент воспользоваться накопленным багажом для совершенствования своего проекта.
Мы перезапустили сайт Serpstat 10 мая 2016 года. За месяц при трехкратном увеличении количества поисковых запросов коэффициент конверсии также вырос на 5,63%. Увеличилось и количество вовлеченных клиентов. В дальнейшем коэффициент конверсии в регистрации немного снизился (на 0,75%) из-за роста трафика, который мы привлекли на новую главную.Наш метод вы можете смело применять как для лендингов, так и для сайтов — просто представьте, что вы разбили сайт на несколько страниц, среди которых посадочная — главная.
Бoмж-подход будет полезен тем, кто находится на ранних стадиях развития проекта, когда нет денег и времени заморачиваться над дизайном, а все силы хочется сосредоточить на качестве сервиса. Не копируйте — заимствуйте творчески.
Комментарии:
Начинаем серию постов в режиме реалити-шоу о подробностях продвижения крупного игрока бизнеса email- и sms-рассылок — компании UniSender....
31 08 2026 8:47:35
Одесские магазины, где продают вечерние и свадебные платья нуждаются в особом внимании интернет-маркетинга. Как настроить контекстную рекламу для малого и среднего бизнеса со скромными маркетинговыми бюджетами...
30 08 2026 7:26:30
Короткий прогон сервисов для аналитики активности в Твиттер....
29 08 2026 6:53:22
Создатель scrum model Джефф Сазерленд написал книгу о том, как использовать методику разработки программного обеспечения для развития бизнеса....
28 08 2026 23:35:54
Предположим, что оптимизация в аккаунте похожа на реальный мир и рассмотрим несколько примеров :)...
27 08 2026 4:33:47
Распределение бюджета на кампании в Google Рекламе. Обозревает Григорий Крутий....
26 08 2026 14:33:15
Правила, законы, платное и бесплатное продвижение в Telegram...
25 08 2026 12:36:49
Тестируем новый инструмент Яндекс.Директ — динамические объявления....
24 08 2026 17:18:29
Звук телефонного звонка важен и для пользователя интернета. Как точно рассчитать полученную прибыль и рентабельность инвестиций в рекламу...
23 08 2026 9:51:50
О работе, креативности, мотивации и многом другом....
22 08 2026 11:43:57
Джефф Безос, Стив Джобс, Билл Гeйтс, Джимм Керри и другие. Собрали для вас подборку крутых выступлений людей, которые знают, как добиться ... в общем-то, всего. Читайте их основные тезисы, а главное — послушайте....
21 08 2026 6:26:45
Прежде чем использовать феминитивы в коммуникации со своими клиентами и сотрудниками, убедитесь, что им это нужно и важно. Впрочем, ждите негатива при любом раскладе. Что с ним делать? Рассказываем....
20 08 2026 7:57:48
Если вы не можете улучшить свой уровень конверсий и поднять ставки, оптимизация показателя качества может быть вашим единственным выходом, чтобы сохранить высокий рейтинг без больших затрат. Статья, которая расставляет точки над «i»....
19 08 2026 0:32:31
Сторителлинг — это способ рассказывать истории, его цель — дать возможность читателю или зрителю почувствовать себя героем этой истории,...
18 08 2026 20:41:34
Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...
17 08 2026 17:43:41
Зачем нужны пользовательские сегменты клиентов и как их создавать — читайте в завершающей части серии «Как анализировать эффективность рекламы в Google ***ytics?»...
16 08 2026 6:54:24
89% предпринимателей не тестируют свои продающие тексты. О том, что и как нужно тестировать, рассказал в гостевом посте директор Студии эффективных текстов Владимир Руков....
15 08 2026 23:35:33
Быстрый инструмент для повышения CTR — дополнительные ссылки Google Рекламы...
14 08 2026 7:31:49
При создании проекта и выбора доменного имени важно взвесить плюсы и минусы использования домена с историей...
13 08 2026 4:19:30
Мы решили узнать, как дорого обходятся рекламодателям клики по объявлениям в разных странах и тематиках, чтобы читателям блога было удобнее планировать бюджет на рекламные кампании....
12 08 2026 8:58:16
Такое обозрение очередной новинки Google от Сергея Бахаря...
11 08 2026 9:22:58
Как эффективно выйти из карантина с помощью контекстной рекламы...
10 08 2026 4:51:54
На что обращает внимание система и менеджеры Google при проверке сайта и аккаунта....
09 08 2026 4:31:58
Как создать и внедрить баннеры об использовании куки-файлов с помощью Google Tag Manager и OneTrust...
08 08 2026 12:20:28
Как определить и повысить качество парсинга ключевых слов — лайфхак с применением Microsoft Excel....
07 08 2026 16:52:35
Для продвижения интернет-магазина женского нижнего белья мы решили попробовать новый источник привлечения клиентов....
06 08 2026 6:13:30
Не путайте с контент-менеджером, пожалуйста....
05 08 2026 19:18:46
Пример удачной рекламы. История о том, как маленький региональный магазин может получать хорошую прибыль с прайс-агрегаторов...
04 08 2026 7:34:18
Метод не для всех, но увлеченным веб-аналитикой точно понравится!...
03 08 2026 17:26:58
Непросто найти ответственного автора, готового проводить сео-оптимизацию своих статей, исправлять ошибки, вносить дополнения в материал. Это очень дорого? Узнать!...
02 08 2026 10:29:56
Мы уже писали о Google Shopping, в каких странах он доступен и как его настроить. В этом посте я покажу один из способов создания и загрузки фида данных. Это важный этап подготовки к запуску Google Shopping...
01 08 2026 2:17:51
Как специалисту сэкономить время для создания и оптимизации кампаний, проверки орфографии и другие фишки. Советы из пpaктики....
31 07 2026 5:30:23
Недавно у нас появился свой генератор мемов :) Во многих компаниях смешные слова и фразы стараются запомнить и передать следующим поколениям сотрудников. В Netpeak же долго работали над секретным проектом и... Читайте!...
30 07 2026 5:13:45
Поговорим о soft skills, потому что именно они, исходя из моего опыта, помогают строить поистине сильные комaнды....
29 07 2026 20:22:37
Что нового, Netpeak? Новые стратегии контекстной рекламы и email-маркетинга, новая рубрика в блоге, а также о специфике работы отдела продаж Netpeak в карантин и о законах построения партнерской программы — всё читайте в материале!...
28 07 2026 14:44:25
Как уменьшить время ответа сервера и повысить общий показатель скорости загрузки сайта...
27 07 2026 23:31:44
Агентство Netpeak закрыло сделку по покупке агентства мобильного маркетинга Радомира Новковича RadASO....
26 07 2026 2:49:23
Какие регионы и тематики наиболее выгодно продвигать в каждом из представленных рекламных сервисов, где наибольшая доля мобильного трафика, и другая полезная статистика....
25 07 2026 23:44:18
Структура обзора, правила написания и важные хаpaктеристики этого формата. Подача информации в обзоре и запрещенные методы, которые отпугнут клиентов. Узнать больше!...
24 07 2026 21:53:49
1 — меняй работу внутри работы, 2 — выбери то, что нравится больше всего и старайся делать это чаще, 3 — придумай себе развлечения. Подробности — в посте. Читать дальше....
23 07 2026 8:56:22
Решили составить список из семи улучшений. Что нового, Netpeak?...
22 07 2026 23:24:37
Гайд по рекламе для SMM-, PPC-специалистов, блогеров и владельцев бизнеса...
21 07 2026 11:30:39
Что, если бы покупка в супермаркете происходила так же, как в онлайн-магазине?...
20 07 2026 23:47:38
Пример использования пакета google***yticsR от Марка Эдмондса...
19 07 2026 20:54:42
Дропшип предполагает минимум затрат со стороны предпринимателя. Например, не нужно думать о логистике, держать склад. Можно минимизировать и траты на рекламу. Узнать как!...
18 07 2026 22:59:35
SEO-продвижение интернет-сайта, где можно заказать доставку цветов. Оплатой за трафик под Россию, Украину, Казахстан, Армению, Грузию...
17 07 2026 7:40:57
Инструкция с применением языка R. Полезно веб-аналитикам, которые работают с крупными интернет-магазинами. Например, на сайте еженедельно появляется примерно 1000 новых наименований и такое же количество позиций переходит в статус «нет в наличии»....
16 07 2026 10:36:20
О том, как рассчитать коэффициент ROI (ROMI) для выявления эффективности и прибыльности рекламных кампаний...
15 07 2026 3:19:39
Часто трафик проседает из-за удаления важных страниц или изменения URL-адресов. Анализ данных веб-архива позволит сохранить или восстановить посещаемость...
14 07 2026 21:49:25
Часто в распоряжении клиента только интерфейс конструктора сайтов, весьма ограниченный в функциональности. Тогда на помощь интернет-маркетологу приходит сервис Tag Manager, благодаря которому можно настроить необходимый код расширенной электронной торговли....
13 07 2026 13:41:17
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
