Как быстро и без страданий сделать главную страницу сайта — 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мж-подход будет полезен тем, кто находится на ранних стадиях развития проекта, когда нет денег и времени заморачиваться над дизайном, а все силы хочется сосредоточить на качестве сервиса. Не копируйте — заимствуйте творчески.
Комментарии:
И как проверить релевантность на своем сайте. Если речь идет о страницах (сайтах), подразумевается соответствие контента запросу. Чем точнее страница отвечает на запрос, решает задачу пользователя, тем (при прочих равных) выше ее позиция в поисковой выдаче....
01 06 2026 10:32:44
Краткая инструкция по поиску идеального кандидата, потому что (как видим) многим на рынке все еще сложно найти хорошего маркетолога. Да и понять, стоит ли вкладывать в сотрудника силы, время, средства с первой встречи достаточно сложно....
31 05 2026 7:35:31
Нужно ли начинать работу с Google Marketing Platform, и если да, то на каком этапе развития бизнеса?...
30 05 2026 11:21:53
SEOmoz создал систему, которая определяет релевантность страницы поисковому запросу....
29 05 2026 2:59:40
Признаки того, что магазин находится под фильтром и шаги по выводу из него...
28 05 2026 13:54:46
Простая инструкция для новичков, как легко создать анимированные баннеры для рекламных кампаний с помощью бесплатного инструмента Google Web Designer. При создании баннера сервис предложит создать файл с нуля либо использовать шаблон. Узнайте обо всех возможностях!...
27 05 2026 4:23:38
Какие возможности дает Chrome DevTools для SEO-оптимизации...
26 05 2026 8:32:30
О ловушке медиа, Стивене Пинкере и почему в любой ситуации важно оставаться оптимистом....
24 05 2026 6:17:26
Метод не для всех, но увлеченным веб-аналитикой точно понравится!...
23 05 2026 9:57:42
Повышение эффективности продаж через звонки с помощью call tracking....
22 05 2026 6:58:51
Как научиться продвигать мобильные приложения и заpaбатывать на этом....
21 05 2026 22:54:21
Дмитрий Шахов, Алексей Чекушин и другие эксперты поделились своим опытом решения сложных вопросов SEO на примере больших проектов....
20 05 2026 16:39:16
Расскажу, как подобрать картинку на рабочий стол объявления в Рекламной сети Яндекса, и приведу небольшой кейс о том, как это делали мы для агентства путешествий...
19 05 2026 18:18:14
Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...
18 05 2026 1:34:52
All about internet mail. Примеры того, что стоит внедрить в рассылках почты онлайн....
17 05 2026 12:41:26
Сортировка мусора, использование велосипедов вместо автомобилей, озеленение города... В Украине, как правило, так представляют экофрендли бизнес. Зарубежные компании идут дальше....
16 05 2026 6:17:57
О том, как сделать сайты интереснее и эффективнее. Гeймификация — применение игровых сценариев и элементов вне игровых контекстов. Это не про создание игр, это про поиск решений, которые помогут сделать любую работу интереснее. Читайте дальше!...
15 05 2026 16:38:30
Узнай, как бэкофис группы помогает развиваться компаниям, и выиграй iPhone — подбери крутое название для нашей группы....
14 05 2026 5:44:53
Ошибка на странице 404 может выглядеть креативно. Страница не найдена и не может быть найдена, потому что она в розыске, утеряна, украдена ниндзей, путь заснежен и дороги дальше нет, а принцесса находится в другом замке. О чем это?...
13 05 2026 13:57:50
Без понимания того, какие данные заложены в основу воронки продаж получается... — читайте в статье...
12 05 2026 20:21:41
Советы и даже требования SEO-специалистов к разработчикам сайтов....
11 05 2026 16:26:34
Человеку стало плохо, он теряет сознание. Те, кто рядом, хотят помочь, но не знают, как это сделать. Давайте разбираться....
10 05 2026 7:37:50
Как за один час собрать самые популярные темы для информационных статей с помощью Serpstat и Key Collector?...
09 05 2026 3:24:23
Узнаем расширенную информацию о посещениях сайта с помощью языка R — кейс Netpeak...
08 05 2026 23:42:44
Перед внедрением ремаркетинга следует хорошенько поработать над составлением базовых портретов аудитории сайта...
07 05 2026 10:18:27
История Affise от фаундера компании, рассказанная на SaaS Nation....
06 05 2026 17:53:54
Как узнать слабые места ваших рекламных кампаний с помощью бесплатного скрипта....
05 05 2026 16:14:41
Узкие специализированные ниши и широкие, которые, как правило, уже заняты лидерами рынка — в каждой найдется место для онлайн-издания с полезным контентом. Узнать больше!...
04 05 2026 6:10:55
Новое исследование стоимости клика в Казахстане в четвертом квартале 2018 года...
03 05 2026 1:44:13
Мария Гoлyб устала отвечать на вопрос «Какие преимущества PPC-отдела в Netpeak?» и решила написать об этом пост....
02 05 2026 16:57:50
Настроенная бизнес-страница компании в Instagram и на Facebook помогает в продвижении товаров и услуг в интернете. Поэтому так важно сделать их seo-friendly. Читать!...
01 05 2026 2:40:41
Для продвижения интернет-магазина женского нижнего белья мы решили попробовать новый источник привлечения клиентов....
30 04 2026 11:44:52
Рассказываем об интересных диджитал-специальностях и зарплатах, как обучиться этим профессиям с нуля (в том числе в зрелом возрасте) и можно ли работать удалённо....
29 04 2026 1:42:22
2 любопытные истории и 8 успешных стартапов, которые вас удивят....
28 04 2026 21:41:46
Клиентоориентированный бизнес должен знать, чего хотят покупатели. И лучше понять это еще на этапе идеи. Как — читайте чек-лист от Влада Ноздрачева....
27 04 2026 22:33:21
Как настроить автоматическое обновление данных о товарах с помощью таблиц Google....
26 04 2026 8:44:37
Мы решили определить и раскрыть самые популярные вопросы по работе нового алгоритма Google Колибри...
25 04 2026 14:42:59
Всё, что вы хотели знать о функциях вычисляемых полей, но боялись спросить....
24 04 2026 21:10:54
Считаем SEO-эффект от нового дизайна сайта и работы над usability...
23 04 2026 19:31:14
Все про kpi охват в социальных медиа или как оценивать эффективность работы SMM-специалиста?...
22 04 2026 3:21:34
Callback от Ringostat: пример того, как увеличить конверсии с помощью формы заказа обратного звонка...
21 04 2026 22:52:37
Экс-CEO, а теперь просто сотрудник и «волшебник страны Moz» Рэнд Фишкин поделился с читателями блога рассказом о своем видении будущего SEO, перспективах анонимизации сети и причудах американских клиентов....
20 04 2026 8:44:20
Что нужно делать на старте работ с интернет-магазином и как минимизировать риски для бизнеса онлайн, используя такие инструмента как SEO, PPC и Email-маркетинг — советы от эксперта. Читать дальше!...
19 04 2026 9:36:46
Многие недооценивают триггерное письмо после оформления покупки, а зря. И вот почему....
18 04 2026 18:24:32
Работаете со скриптами R регулярно? Потратьте десять минут на настройку автозапуска и избавьтесь от необходимости активировать R-скрипты вручную...
17 04 2026 0:49:42
Как использовать игровые механики для вовлечения аудитории....
16 04 2026 9:34:54
Андрей Чумаченко про будни топ-менеджера, постановку, декомпозицию, помощь и контроль выполнения задач сотрудниками комaнд, которые входят в состав департамента маркетинга, а также о регулярных встречах и тонкостях работы. Узнать больше!...
15 04 2026 18:12:19
Триггер — способ ненавязчивого воздействия на потенциального клиента путем использования психологических приемов в текстах, заголовках и остальном контенте...
14 04 2026 15:46:54
Технологии решают, но не всегда....
13 04 2026 18:12:59
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::