Как быстро и без страданий сделать главную страницу сайта — 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мж-подход будет полезен тем, кто находится на ранних стадиях развития проекта, когда нет денег и времени заморачиваться над дизайном, а все силы хочется сосредоточить на качестве сервиса. Не копируйте — заимствуйте творчески.
Комментарии:
Данные по 24 миллионам кликов в 24 тематиках и 391 городу...
15 10 2026 22:38:39
Парсинг сайтов: как избавиться от головной боли и сэкономить сотни часов рутинного труда...
14 10 2026 18:47:28
Технологии решают, но не всегда....
13 10 2026 2:50:21
Как сделать приятно подписчику в день его рождения, на Новый год и в любой другой праздник....
12 10 2026 2:16:51
Интеграция видео в маркетинговую кампанию – решение, которое повысит ценность каждого посетителя сайта....
10 10 2026 8:14:13
21 апреля Google официально начнет учитывать совместимость с мобильными девайсами в качестве одного из факторов ранжирования сайта в мобильном поиске. Что это значит для владельцев сайтов и вебмастеров? Мы подготовили небольшой FAQ по теме для рубрики «SE...
09 10 2026 14:36:24
О списках исключенных мест размещения будет интересно узнать тем, кто хочет облегчить себе работу с контекстно-медийными сетями....
08 10 2026 11:52:57
Почему лендинги на Тильде выгодны бизнесу, какие задачи он решает, о форматах работы по услуге, детально о ее составе и спецпредложениях от Netpeak и наших партнеров по настройке контекстной рекламы, сервисов на лендинге и даже промокод на скидку Yagla...
07 10 2026 8:52:20
Казахстанские реалии: данные по более 1 млн кликов в 23 тематиках и 15 городах....
06 10 2026 12:24:22
Что такое App Store optimization и как раскручивать мобильные приложения...
05 10 2026 0:30:48
Как контролировать множество сайтов — полезные сервисы и советы для вебмастеров. Одно дело — несколько десятков сайтов, а что если сотни или тысячи? Как раз это подробно и разберем....
04 10 2026 13:37:51
Информация о любой организации распространяется в интернете очень быстро, особенно негативная. Поэтому необходимо учиться управлять своей репутацией....
03 10 2026 11:43:19
Бонус в статье: как собрать аудитории для ремаркетинга на брошенную корзину...
02 10 2026 1:10:42
В аккаунте ***ytics появилась возможность подключения ремаркетинга в поисковой сети Google. Расскажем о результатах применения инструмента на примере кейса крупного проекта ecommerce....
01 10 2026 20:15:44
Как связываться с клиентами и что делать, чтобы качество обслуживания не просело. Менеджер, который обpaбатывает звонки со своего мобильного, остается без контроля, поэтому АТС оказывается идеальным решением. Разбираемся в статье!...
30 09 2026 16:54:42
Правила Facebook позволяют пользоваться автоматизированным контролем над эффективностью рекламы. Читайте, как уменьшить количество ручной работы с помощью автоматических правил...
29 09 2026 5:26:23
Фотоконкурс для стимуляции активности в сообществе, прироста фанов и поощрения лояльной аудитории....
28 09 2026 17:57:29
Менеджмент и лидерство: 4 разных типа руководства организацией и нескучные иллюстрации в стиле South park....
27 09 2026 18:23:34
Экспорт/импорт с помощью Excel-файла или таблиц Google позволит скопировать и перенести кампании, группы объявлений и объявления в Facebook вместе с креативами, текстами, ссылками и utm-метками...
26 09 2026 11:21:14
Пример удачной рекламы. История о том, как маленький региональный магазин может получать хорошую прибыль с прайс-агрегаторов...
25 09 2026 7:33:37
Чтобы привлечь представителей малого и среднего бизнеса, мы разработали стратегии по контекстной рекламе. Это открывает двери агентства Netpeak проектам с самым скромным бюджетом...
24 09 2026 5:55:44
Всё о вебхуках. Как настроить механизм получения уведомлений о событиях с помощью функций обратных вызовов....
23 09 2026 1:47:23
Крутые площадки для нового инструмента: контекстщикам на заметку!...
22 09 2026 5:46:41
Как отключить блокировку API запрещенных сервисов в скриптах R и продолжать использовать пакеты ryandexdirect, rvkstat, rmytarget, Google Sheets и BigQuery...
21 09 2026 16:50:54
Алексей Селезнев проанализировал 29 млн кликов, и в этой статье вы прочитаете, как дорого обходятся рекламодателям клики в Google Ads....
20 09 2026 21:47:58
Список рекомендаций для SMM-специалистов. Статья будет полезна SMM-менеджерам, проектным менеджерам, а также владельцам бизнеса, которые предпочитают самостоятельно ставить комaнде задачи и отслеживать выполнение целей....
19 09 2026 5:19:36
Опции скриншутера, которые упростят вам жизнь....
18 09 2026 10:29:16
Часто руководители, которые прекрасно справляются с работой в мирное время, в период войны перестают быть эффективными. У них нет навыков кризис-менеджмента. Чтобы удержать ситуацию на плаву, кризис-менеджером должен стать главный руководитель компании....
17 09 2026 2:50:21
Private Blog Network для ниши безопасности, доставки цветов, товаров сантехники, туризма и выпекания. Сетки сайтов работают не всегда и это нормально. Узнать больше!...
16 09 2026 10:13:58
Как создавать интеpaктивные рассылки-сайты и чем они хороши...
15 09 2026 16:53:54
Все, что нужно знать об UTM-метках: зачем использовать, как правильно сгенерить и анализировать....
14 09 2026 10:53:11
Будь мобильным — заливай видео на Youtube с телефона...
13 09 2026 0:50:45
Делаем первые шаги к созданию системы email-коммуникаций бренда....
12 09 2026 9:11:23
Лучшие плагины WordPress для SEO и продвижения сайта в поисковой системе Google и 10 советов для WordPress, которые помогут вам продвигать свой сайт...
11 09 2026 22:45:37
Занимайтесь оптимизацией определенной категории товаров за полгода до скачка спроса....
10 09 2026 12:13:27
Наибольший эффект по продвижению сайта при минимальных затратах — именно таков принцип SEO growth hacking. Как найти кратные точки роста, читайте статье....
09 09 2026 15:34:36
Хасан Исламов о развитии Chocofamily, крупнейшего интернет-холдинга Казахстана....
08 09 2026 12:42:14
Чтобы увеличить количество заявок и получить волну новых заказов, нужен комплексный подход...
07 09 2026 17:21:55
Один из лучших способов выбрать подрядчика — провести брифинг для компаний. При этом важно предоставить максимум информации: откройте доступ к реальным данным по проекту. Узнать больше!...
06 09 2026 5:42:50
Сооснователь SUPERLUDI Влад Ноздрачев рассказал в своем подкасте о развитии инфобизнеса. Предлагаем вам вольный пересказ....
05 09 2026 10:40:24
Как вести рекламные кампании и что делать на разных этапах настройки. Делимся опытом: примерами, кейсами и рекомендациями. Узнать больше и настроить свои РК, как боженька!...
04 09 2026 11:18:10
Система почтового маркетинга. Как удержать доверия подписчиков одним приветственным письмом...
03 09 2026 0:41:30
Ежегодный прирост рынка фриланса в Украине составляет в среднем 35%. В прошлом году зарегистрировано более 200 тысяч проектов на общую сумму 385 млн гривен....
02 09 2026 6:18:28
Как улучшить видимость сайта в результатах поисковой выдачи, когда основные требования по оптимизации уже выполнены...
01 09 2026 14:53:12
Всё, что важно узнать о лидогенерации и работе с целевой аудиторией....
31 08 2026 21:17:38
Изучаем на примере тестирования товарных кампаний в момент смены логотипа и ренейминга...
30 08 2026 20:19:45
Интересные маркетинговые методы, эффективные профессиональные хитрости и много другое прозвучало на круглом столе по фишкам контекстной рекламы...
29 08 2026 7:16:36
Видеомаркетинг должен стать обязательной частью рекламной онлайн-стратегии, и мы собрали несколько подтверждений этому в нашей инфографике....
28 08 2026 12:36:41
Работа с умными рекламными кампаниями с оплатой за конверсии в контекстно-медийной сети. Особенности настройки и оптимизации в кейсе продвижения недвижимости. Узнать больше!...
27 08 2026 12:44:55
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
