NetPeak Biz Tech    


Как быстро и без страданий сделать главную страницу сайта — MVP-подход

Как быстро и без страданий сделать главную страницу сайта — 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мж-подход будет полезен тем, кто находится на ранних стадиях развития проекта, когда нет денег и времени заморачиваться над дизайном, а все силы хочется сосредоточить на качестве сервиса. Не копируйте — заимствуйте творчески.



Комментарии:

Что такое SMM и как работает маркетинг в социальных сетях

Всё что нужно знать про SMM...

01 06 2026 18:12:53

SMM продвижение автомобильного бренда — «Дневники тест-драйвера»

Мы предложили фанам бренда прокатиться на автомобиле SEAT Altea Freetrack!...

31 05 2026 0:50:36

Как повысить эффективность своей работы — 17 советов от тимлида Netpeak

Как повысить эффективность своей работы — 17 советов от тимлида Netpeak Как добиться эффективности и самоорганизации. Читайте о системе тимлида Netpeak Андрея Коваля....

30 05 2026 7:56:13

Как ангел-хранитель Sammy помогает продвигать носки

Как ангел-хранитель Sammy помогает продвигать носки Как говорят легенды, на создание дизайна этих носочков Sammy Icon вдохновили рисунки на стенах храма Темпло Майор в древнем городе Теночтитлан. К сожалению, город сейчас разобрали перуанские строители, но память о нем осталась в киевских носках...

29 05 2026 15:21:25

Работа с автоматическими типами кампаний на Facebook

Работа с автоматическими типами кампаний на Facebook Как вести рекламные кампании и что делать на разных этапах настройки. Делимся опытом: примерами, кейсами и рекомендациями. Узнать больше и настроить свои РК, как боженька!...

28 05 2026 4:25:32

Контекстная реклама для интернет-магазина принтов на одежде в Украине — увеличение дохода на 130%

Контекстная реклама для интернет-магазина принтов на одежде в Украине — увеличение дохода на 130% История для заказчиков, которые самостоятельно запускают рекламу...

27 05 2026 5:15:25

Как узнать покупателя в лицо: сегментируем аудиторию и моделируем персоны

Как узнать покупателя в лицо: сегментируем аудиторию и моделируем персоны Знакомство с реальным и потенциальным клиентом. Как создать доверительные отношения? Для этого понадобится сделать сегментацию аудитории и определить, кто ваш покупатель: от рода занятий, до его самых сокровенных страхов. Узнайте больше!...

26 05 2026 10:16:32

Авторские права на веб-сайт — как защитить свой ресурс

Авторские права на веб-сайт — как защитить свой ресурс Надежный сайт позволит вести успешную деятельность, защитить плоды собственного труда и результаты работы исполнителей, с которыми вы сотрудничали. Для реализации задумки вам понадобятся авторские права....

25 05 2026 4:56:53

Как собрать миллион подписок на рассылку за год: советы от BuzzFeed

Как собрать миллион подписок на рассылку за год: советы от BuzzFeed Рассылка ежемecячно занимает второе место среди источников реферального трафика BuzzFeed. Уроки увеличения базы подписчиков от BuzzFeed от базы до метрик оценки. Принцип BuzzFeed — как можно быстрее внедрять в рассылку то, что нравится читателям....

24 05 2026 21:22:23

SEO-продвижение для службы доставки еды в Украине — рост бесплатного трафика на 477%

SEO-продвижение для службы доставки еды в Украине — рост бесплатного трафика на 477% Кейс продвижения Pizza House — ROMI 709,9%. От старта с дублями страниц и постановки целей и задач продвижения, проведения технического аудита, аналитики, анализа поисковых фраз, выбора контента до экспериментов с метатегами, увеличения среднего чека и планов на будущее...

23 05 2026 19:22:54

Как найти лидеров мнений в Twitter с помощью NodeXL

Как найти лидеров мнений в Twitter с помощью NodeXL Как найти в Twitter лидеров мнений и сети ботов с помощью надстройки для Excel...

22 05 2026 16:31:56

Увольнение сотрудника. Алгоритм действий от Netpeak

Сотрудник не справляется? Значит с ним пора прощаться. Эмоции в сторону, действуем по алгоритму....

21 05 2026 5:56:42

Как перевести свой аккаунт с Google ***ytics на Universal ***ytics

Как перевести свой аккаунт с Google ***ytics на Universal ***ytics Читайте простой мануал о том, как перейти на Universal ***ytics и не поломать весь сбор данных...

20 05 2026 14:54:32

App Campaign for Engagement. Как работать с кампаниями на взаимодействие с приложением в Google Ads

Человек скачал ваше приложение, воспользовался им один раз и … забыл. Что с этим делать, читайте в Netpeak Journal....

19 05 2026 19:46:23

Кейс по контекстной рекламе образовательных курсов в Казахстане: рост продаж с 0 до 12 мест за 1,5 месяца

Кейс по контекстной рекламе образовательных курсов в Казахстане: рост продаж с 0 до 12 мест за 1,5 месяца Тренинг по контекстной рекламе образовательных курсов в Google Ads, Яндекс.Директ, Target@mail...

18 05 2026 2:53:23

Как украинский бизнес меняет свой маркетинг во время карантина — подборка примеров

Как украинский бизнес меняет свой маркетинг во время карантина — подборка примеров Новые тактики в рекламных кампаниях, SMM и PR, которые использует бизнес в новых условиях...

17 05 2026 7:18:26

Интересные Telegram-каналы о бизнесе

Интересные Telegram-каналы о бизнесе От идеи для стартапа до плана развития и масштабирования бизнеса. Познавательные, полезные каналы, которые помогут реализовать смелые бизнес-цели. Узнать больше!...

16 05 2026 1:51:11

Как алгоритм Google Panda навсегда изменил SEO

Как алгоритм Google Panda навсегда изменил SEO Google «выкатил» алгоритм Панда 2.2, как пару недель назад обещал Мэтт Каттс....

15 05 2026 5:57:38

Как запустить рекламу в TikTok — руководство для новичка

Как запустить рекламу в TikTok — руководство для новичка От создания аккаунта до выбора пикселя — просто и понятно про TikTok....

14 05 2026 16:48:59

Сколько стоил клик в Google Ads и Facebook в Украине в четвёртом квартале 2018 года

Сколько стоил клик в Google Ads и Facebook в Украине в четвёртом квартале 2018 года Исследование по 38,5 миллионам кликов в 22 тематиках в 391 городе страны....

13 05 2026 10:42:26

Семь улучшений Netpeak: новые стратегии email-маркетинга, антикризисная PPC-стратегия Start и продвижение недвижимости

Семь улучшений Netpeak: новые стратегии email-маркетинга, антикризисная PPC-стратегия Start и продвижение недвижимости Что нового, Netpeak? Новые стратегии контекстной рекламы и email-маркетинга, новая рубрика в блоге, а также о специфике работы отдела продаж Netpeak в карантин и о законах построения партнерской программы — всё читайте в материале!...

12 05 2026 14:57:56

Гид по SEO для мобильных сайтов: инфографика

Гид по SEO для мобильных сайтов: инфографика Разработка, вёрстка и оптимизация мобильных версий сайтов — популярные темы последнего времени. Мы расскажем, что стоит и что не стоит делать в мобильном SEO....

11 05 2026 21:30:22

200 этапов настройки рекламной кампании — чек-листы

200 этапов настройки рекламной кампании — чек-листы Что такое【контекстная реклама】и как ее настроить? Подробный чек-лист ✅ в блоге Netpeak ⟁ ▷ 200 ступеней рекламной кампании в Google AdWords, Яндекс.Директ ⚡...

10 05 2026 10:41:49

Гeймификация: игровые сценарии для развития бизнеса

Гeймификация: игровые сценарии для развития бизнеса О том, как сделать сайты интереснее и эффективнее. Гeймификация — применение игровых сценариев и элементов вне игровых контекстов. Это не про создание игр, это про поиск решений, которые помогут сделать любую работу интереснее. Читайте дальше!...

09 05 2026 15:41:15

No-code решения для создания мобильных приложений

No-code решения для создания мобильных приложений 88% времени в телефоне люди проводят в приложениях. Рассказываем, как их можно создавать без написания кода....

08 05 2026 11:31:30

Новая реальность: боты принимают на работу и ходят на свидания

Новая реальность: боты принимают на работу и ходят на свидания История свидания двух ботов как иллюстрация развития искусственного интеллекта...

07 05 2026 8:18:11

Как эффективно использовать Network в Chrome DevTools

Как эффективно использовать Network в Chrome DevTools Чем полезна вкладка Network в DevTools для SEO-специалиста...

06 05 2026 13:11:11

120 пунктов продающей мобильной версии сайта — чек-лист

120 пунктов продающей мобильной версии сайта — чек-лист Пора сделать так, чтобы мобильная версия сайта приносила прибыль....

05 05 2026 14:17:53

Google Tag Manager: актуальные и неочевидные фишки (вторая часть)

Google Tag Manager: актуальные и неочевидные фишки (вторая часть) Как с помощью Google Tag Manager отслеживать исходящие ссылки на сайте и загрузки файлов с него...

04 05 2026 17:42:38

Масштабный редизайн блога UniSender — рост органического трафика

Масштабный редизайн блога UniSender — рост органического трафика Как за полгода обновить корпоративный блог, зачем это может быть нужно. О том, как начинали с сегментации, внедряли SEO-рекомендации, оптимизировали ЧПУ, трaнcлитерацию, пагинацию и структуру блога вплоть до конкретной работы со статьями, рейтингами и их страницами...

03 05 2026 8:17:51

Как сделать динамический ремаркетинг для корпоративного сайта

Как сделать динамический ремаркетинг для корпоративного сайта Фишка, которую можно позволить себе даже когда портал продает всего несколько товаров или услуг...

02 05 2026 1:24:25

Стратегия, позиционирование и бюджетирование: основные маркетинговые боли малого бизнеса Украины

Мы собрали и проанализировали ответы 270 владельцев и маркетологов...

01 05 2026 3:31:38

Кейс по таргетированной рекламе в тематике «одежда, обувь, аксессуары»: ROMI 348%

Кейс по таргетированной рекламе в тематике «одежда, обувь, аксессуары»: ROMI 348% Женский и мужской таргет отличаются друг от друга. Кейс магазина обуви, одежды и аксессуаров....

30 04 2026 16:30:44

50 ступеней продвижения мобильного приложения — подробный чек-лист

50 ступеней продвижения мобильного приложения — подробный чек-лист Как создать онлайн кампанию по продвижению мобильного приложения с максимальной отдачей....

29 04 2026 23:37:54

Сколько стоил клик в Google Ads в первом квартале 2017

Сколько стоил клик в Google Ads в первом квартале 2017 Анализ цены за клик в 25 тематиках и 852 городах Украины, России, Казахстана, Болгарии...

28 04 2026 2:25:38

Обновление Firebase ***ytics: настраиваем аналитику мобильных приложений и применяем новые фишки

Обновление Firebase ***ytics: настраиваем аналитику мобильных приложений и применяем новые фишки Мониторинг мобильных просмотр статистики Firebase в отчетах Google ***ytics и связь Firebase ***ytics с Google Рекламой...

27 04 2026 9:13:54

Как превратиться в робота и повысить продуктивность — советы для CEO

Как превратиться в робота и повысить продуктивность — советы для CEO Нет прокрастинации! Советы для личной эффективности от руководителя двух стартапов...

26 04 2026 6:45:12

Кейс по рекламе в прайс-агрегаторах в тематике «бытовая техника»: ROMI 817%

Кейс по рекламе в прайс-агрегаторах в тематике «бытовая техника»: ROMI 817% Пример удачной рекламы. История о том, как маленький региональный магазин может получать хорошую прибыль с прайс-агрегаторов...

25 04 2026 10:52:18

Как мотивировать сотрудников вести блог компании и писать тексты для СМИ

Как мотивировать сотрудников вести блог компании и писать тексты для СМИ Мотивация сотрудников к работе с текстами. Опыт бюро копирайтинга Texbroker...

24 04 2026 20:40:21

SEO-продвижение интернет-магазина в тематике «бытовая техника»: ROMI 1130%

SEO-продвижение интернет-магазина в тематике «бытовая техника»: ROMI 1130% Пример, как 4000+ гривен превращаются в 45000+ гривен. Ниша интернет-магазинов, да еще и бытовой техники уже давно является высококонкурентной. Но при правильном продвижении даже новичок может добиться результатов....

23 04 2026 3:15:35

Как перестать платить за мусор в ссылочном индексе — исследование Serpstat

Как перестать платить за мусор в ссылочном индексе — исследование Serpstat При выборе SEO сервиса принято ориентироваться на объем ссылочной массы, но надежен ли такой подход? Большая база не всегда значит качество содержащихся в ней данных, а количество нередко обеспечивают спамные ссылки в отчетах....

22 04 2026 15:28:54

Как создать личный бренд в компании — кейс Алексея Селезнёва, руководителя отдела аналитики Netpeak

Как создать личный бренд в компании — кейс Алексея Селезнёва, руководителя отдела аналитики Netpeak Создание репутации крутого специалиста — дело рук крутого специалиста....

21 04 2026 3:59:20

Email-маркетинг, который приносит заявки, продажи, лояльность и всё на свете — версия Netpeak

Email-маркетинг, который приносит заявки, продажи, лояльность и всё на свете — версия Netpeak Email-маркетинг — хороший полицейский, спам — плохой....

20 04 2026 11:55:30

Как провести интервью: инсайты и секреты Head of Content Inweb Наты Заяць

Как провести интервью: инсайты и секреты Head of Content Inweb Наты Заяць Как подготовиться и сделать из интервью полноценную историю, которая будет интересна аудитории...

19 04 2026 23:54:57

Руководство для брендов по Playable Ads

Руководство для брендов по Playable Ads Рассказываем о перспективном формате рекламы, который привлекает внимание потребителя даже в эпоху повсеместной «баннерной слепоты»....

18 04 2026 8:45:57

Кейс: учим поисковый движок распознавать грамматические ошибки

Кейс: учим поисковый движок распознавать грамматические ошибки Что поможет написать объявление без грамматических ошибок? В недрах агентства Netpeak рождается новый полезный сервис...

17 04 2026 18:23:45

Как грамотно работать с Директ Коммaндер

Как грамотно работать с Директ Коммaндер Директ Коммaндер от Яндекса позволяет легко работать с большими кампаниями...

16 04 2026 0:28:33

Что такое VPN-соединение и как им пользоваться

Что такое VPN-соединение и как им пользоваться VPN — технология анонимного сетевого подключения. Она позволяет организовать подсеть в уже существующем соединении. Поверхностная сеть закрыта от внешнего доступа, потому вмешаться в нее не смогут. Чтобы узнать больше, читайте дальше!...

15 04 2026 17:20:48

Стратегия ведения контекстной рекламы по воронке продаж на примере SaaS: шаблон и инструкция

Стратегия ведения контекстной рекламы по воронке продаж на примере SaaS: шаблон и инструкция Как найти индивидуальный подход к аудитории на каждом этапе воронки продаж? В этом вам поможет правильно составленная стратегия контекстной рекламы....

14 04 2026 23:54:56

Facebook Like или Share?

Facebook Like или Share? Facebook buttons. Пора поделиться самым волнующим вопросом 2011-го года...

13 04 2026 3:31:18

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::