Кейс: редизайн сайта интернет-маркетолога

Речь пойдёт обо мне и об этом сайте fladex.ru. Но далее по тексту буду писать в обычном стиле для кейсов, поэтому не удивляйтесь третьему лицу и т.д. Этот кейс будет актуален для любого частного специалиста, а такой стиль повествования позволит легче спроецировать проделанную работу на вашу нишу.

Исходные данные

Старая версия сайта представляла из себя блог на wordpress. Дизайн — стандартный шаблон с уникализированной шапкой и подвалом. На главной странице выводятся последние публикации в хронологическом порядке. Дополнительно есть несколько служебных страниц. Сайт выглядит устаревше, главная страница не несёт навигационной роли.

Исходная версия дизайна главной страницы сайта

Логотип

Перед разработкой дизайна сайта был проведен дизайн логотипа.

Согласованный логотип был дополнительно подкреплен логобуком, в котором задокументирована следующая информация:

  • сетка логотипа
  • полная и сокращенная вариации
  • фирменная палитра
  • монохромные версии для светлого и темного фона
  • горизонтальная и вертикальная версии
  • фирменный знак

На самом сайте была добавлена интерактивная анимация для десктоп-версии. Каждый раз при наведении курсора на логотип срабатывает разный эффект анимации логотипа, что дополнительно может развлечь посетителя.

Анализ конкурентов

Первым делом были проанализированы конкуренты. Прямых конкурентов — частных интернет-маркетологов — практически не нашлось, поэтому решено было взять смежные ниши. С одной стороны, это небольшие интернет-агентства и веб-студии, что соответствует тематике. С другой стороны, это частные специалисты по контекстной рекламе, SEO, дизайну — тематика не соответствует, но они позволят понять позиционирование частного IT-специалиста.

Пример интересного визуального решения, найденного у конкурента — так называемое «колесо навыков». Представляет из себя круг, на радиусах которого отмечены точки от 0 до 10, соответствующие уровню знания того или иного навыка. Далее соседние точки соединяются и в идеале получается «колесо», визуализирующее компетентность специалиста.

Структура сайта

На основе старого сайта и анализа конкурентов была проработана структура нового сайта. Какие страницы должны быть в новом сайте, какие из них включать в навигационные меню, какая иерархия у страниц. В ходе этой проработки, например, страница со списком последних записей из блога ушла с главной страницы и стала отдельной страницей «Блог», что более соответствовало новой концепции сайта — ухода от блога к коммерческому сайту.

Структура страниц

Следующим этапом нужно было продумать блоки, из которых затем собирались бы страницы.

К примеру, на всех страницах есть шапка и подвал — но нужно определить, что именно будет в них выводиться. Или главная страница, которой, по сути, ранее вообще не существовало — значит, требуется проектирование с полного нуля.

Именно главной странице в итоге было уделено больше всего внимания. У неё появилось 2 роли:

  • навигационная — показать посетителю все основные ресурсы сайта и перенаправить его на нужный
  • информационная — рассказать посетителю о специалисте, кратко, но с разных сторон; продемонстрировать экспертность и улучшить конверсию.

Например, у эксперта есть дипломы. Логично их все расположить на отдельной странице. Но на главной странице можно вывести 2-3 самых основных диплома и дать ссылку на просмотр всех на отдельной странице. Аналогично можно сделать с услугами, кейсами.

Пройдёмся по основным смысловым блокам главной страницы.

Фото и видео

На специально проведенной для редизайна фотосессии были сделаны качественные студийные фотографии. Но кроме стандартных фото, дополнительно сделали серии фотографий, на которых эксперт показывает базовые жесты. Машет рукой, перелистывает страницы книги, показывает пальцем в сторону и т.д. По задумке, эти серии фото дальше будут преобразованы в gif-анимации или короткие видеоролики, чтобы использоваться в рекламных креативах вместо статичных фотографий.

Отдельно было отснято заглавное видео. Это короткие сцены по 3-7 секунд с разных ракурсов, показывающие специалиста за работой. Отснятый материал был смонтирован видеомонтажером и размещен на первом экране главной страницы как фоновое видео.

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

Для нужного эффекта нужны 9 ракурсов лица
В результате получается эффект слежения головы за курсором

Колесо знаний

Отдельный блок главной страницы посвящён навыкам эксперта. В дополнение к текстовому описанию с численными показателями была сделана визуализация в формате «колеса навыков». Данное решение было подсмотрено на сайте одного из смежных конкурентов.

Колесо знаний представляет из себя радиусы, исходящие из одной центральной точки. На каждом радиусе отмечается шкала от 1 до 10 (в некоторых случаях от 1 до 5) и подписывается название навыка. По каждому из навыков проставляется оценка, где 10 — максимальный уровень владения навыком. Далее точки соседних радиусов соединяются линиями, внутренняя область закрашивается.

Колесом данная визуализация называется потому, что при одинаковом уровне навыков, когда ни один из них не проседает, закрашенная область оказывается кругом. А вот если навыки сильно различаются, то фигура сильно отличается от круга — и на таком «колесе» якобы далеко не уедешь.

В случае конкретного эксперта специально был добавлен навык с уровнем ниже среднего, чтобы он давал контраст остальным. На уровне бизнеса это означает, что данный эксперт не владеет этим навыком для самостоятельной работы, но владеет достаточно, чтобы найти и работать с другими специалистами именно в этой сфере.

Услуги

Блок выполняет навигационную услугу. Через него посетители могут попасть на основные коммерческие страницы сайта — именно там, где и происходят заказы услуг. Поэтому данный блок на главной странице расположен достаточно высоко. Хотя и не в самом верху, так как перед ним лучше дать чуть информации об эксперте.

Из списка услуг было выбрано несколько наиболее ключевых. Остальные услуги приведены на отдельной странице услуг, чтобы не загромождать главную и не расфокусировать внимание посетителя. Ссылка на страницу услуг также приведена в блоке.

Из выбранных услуг отмечена одна, являющая якорной. Это бесплатная услуга — консультация эксперта. Она активно участвует в воронке продаж, так как в отличие от других услуг не имеет психологического барьера для потенциального клиента в виде стоимости. Визуально карточка этой услуги показана большего размера и с иллюстрацией.

Кейсы

Ещё один важный блок — выполненные экспертом работы. В зависимости от тематики, этот блок может называться «портфолио» (например, фотографы, модели), «кейсы» (маркетинг), «мои работы», «выполненные проекты».

На главной странице в этом блоке выводится только несколько кейсов в виде карточек с ссылкой на страницу с подробным описанием. Полный список кейсов приведен на отдельной странице, ссылка на которую также добавлена в этот блок.

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

дизайн блока кейсы на главной странице сайта

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

Публикации

Мощное доказательство экспертности во многих сферах — наличие публикаций в тематических СМИ. В данном случае у эксперта было несколько тематических публикаций и несколько интервью/упоминаний в региональных СМИ. Было решено это показать по уже отработанной схеме: карточки публикаций с названиями и логотипом СМИ, ссылка с которых ведёт на сохранённую копию материала или оригинал публикации.

Сертификаты, лицензии, дипломы

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

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

Причем решено было разместить и несколько нетематических — как, например, диплом об участии в массовом забеге. Такие вещи иногда позволяют построить дополнительную коммуникацию на личностном уровне между потенциальным клиентом и экспертом.

Например, если человек ищет, у кого бы заказать разработку сайта, и среди найденных вариантов видит эксперта, который при этом ещё занимается бегом на любительском уровне. И если этот человек сам занимается бегом, то для него при прочих равных факторах это будет доводом выбрать именно этого специалиста на основе общего интереса.

Таймлайн (история эксперта)

На сайтах часто пишут фразы вроде «работаю с 1999 года». Это хороший вариант продемонстрировать свой профессиональный опыт. Но часто это ничем другим не подкрепляется. Некоторые компании спекулируют этим и просто пишут любой год для красоты, пусть даже они фактически работают менее года.

Поэтому для дополнительного доказательства и красивой визуализации часто используется формат таймлайна. Это полоса с отмеченными важными датами в хронологическом порядке и небольшим текстовым и фото-комментарием.

В данном случае нужно было показать опыт эксперта с 2008 года. Поэтому по результатам опроса эксперта составили таймлайн, где на каждый год выписали 1-3 факта, подтверждающих постепенное и уверенное профессиональное развитие.

Инвестирование

Ни у кого из конкурентов такого блока не было, его придумали именно для этого сайта. Так как эксперт занимается инвестированием на фондовом рынке именно в компании, работающие в той же сфере, было решено показать это на сайте.

Инвестирование в IT-компании, при этом дающие хорошие финансовые показатели (в случае эксперта это 20-50% годовых), является ещё одним, хоть и косвенным, показателем экспертности в области интернет-маркетинга.

Для визуализации блока дизайнер использовал официальные тикеры компаний из портфеля эксперта, финансовые показатели на старте и в моменте, а также разницу (прирост) между ними.

На всякий случай, хоть это и не является профильной услугой эксперта, была добавлена форма заказа консультации именно по инвестированию.

Стикеры

Чисто маркетинговая фишка — продвинуть через сайт тематический набор стикеров, чтобы потом через эти стикеры можно было продвигать сам бренд. Ранее комплект стикеров для телеграм был сделан на основе локальных мемов нескольких нишевых чатов и имеет более 100 установок.

Отзывы

Социальное доказательство экспертности и надежности — отзывы реальных людей, ранее воспользовавшихся услугами специалиста. Обычные текстовые отзывы оказывают мало доверия, так как их слишком легко подделать.

Поэтому для сайта было запрошено несколько видеоотзывов, с последующей их загрузкой на ютуб. Дополнительно приведены текстовые отзывы, но с доказательствами в виде ссылок на социальные сети и профессиональные форумы, где можно отследить реальность как самих отзывов, так и их авторов.

Комментарии

К публикациям в блоге посетители сайта могут оставлять комментарии. Чтобы показать общую активность комментаторов, на главную страницу был добавлен блок с последними комментариями в обратном хронологическом порядке.

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

Некоммерческая инициатива

Блок с информацией об организации Mozilla Firefox был добавлен по просьбе эксперта. Данная некоммерческая организация выступает за свободный и открытый интернет, не будучи при этом финансово заинтересованной в лоббировании крупных компаний. Эксперт посчитал важным для здоровья всей области поддерживать такие объединения, чем решил поделиться и с посетителями своего сайта.

Максим Истляев аватар
Истляев Максим

Интернет-маркетолог. В интернете также известен под ником FladeX.

В данный момент занимаюсь интернет-маркетингом для b2b и сферы услуг.

Ранее несколько лет занимался изучением и модернизацией phpBB, вёрсткой и интеграцией шаблонов под различные CMS, фронтэнд-разработкой, инвестициями в информационные сайты.

Заинтересован в сотрудничестве. Вы можете заказать у меня услуги по интернет-маркетингу, лидогенерации, технической настройке сайтов, SEO.