Цели и задачи проекта
Процесс работы
Боли клиента и постановка задачи
Приоритет нашего заказчика — работа с крупными клиентами, которые понимают ценность качественных услуг и стоимость работы профессионалов в данной сфере. Старый сайт, к сожалению, не отображал данный подход к работе, выглядел не статусно и периодически ломался, что отчасти препятствовало привлечению новых клиентов из премиум сегмента.
Поэтому на старте мы определили цель проекта — создать впечатляющий, информативный и лидогенерирующий (в сегменте В2В) сайт для повышения доверия к компании «АльтРоСтрой», как к эксперту на рынке разработки ППР в РФ.
Процесс разработки эксклюзивного сайта — непростой, но очень интересный и занимательный. Проходит он в 4 этапа:
- Аналитика и проектирование.
- Дизайн.
- Верстка и программирование.
- Наполнение и тестирование.
Теперь подробнее.
Аналитика и проектирование
Аналитику проводили по трем показателям:
- Анализ текущей аудитории сайта.
- Анализ сайтов конкурентов.
- Популярные запросы по тематике.
Целевая аудитория: руководители и инженеры компаний, заинтересованные в качественной разработке ППР. Они ищут ответственного, опытного подрядчика и готовы заплатить крупную сумму за ППР, во избежание дополнительных затрат на работы.
На основе данных Яндекс. Метрика (на старом сайте), Similar Web (по сайтам конкурентов), а также, исходя из опросов нашего клиента: 74% — это мужчины, в возрасте от 25 до 55 лет, аналитического склада ума, с доходом выше среднего и высоким, как правило, имеющие высшее техническое образование.
Для понимания мотивов поведения пользователей (зачем они приходят на сайт, как они принимают решения и какие факторы на это влияют) методом персонажей, мы выделили несколько портретов из целевой аудитории:
P. S. Любое совпадение с реальными людьми не совпадение... Ну, а если серьёзно, никого не хотели обидеть, если вдруг кто-то из наших персонажей до боли похож на вас!
Как видно из портретов, у каждого пользователя, в зависимости от должности, свои цели и задачи на сайте. Нам нужно было представить информацию на сайте в понятном, доступном и презентабельном виде так, чтобы каждый не только нашел ответ на свой вопрос, но и сформировал приятное впечатление о компании.
Анализ конкурентов позволил нам определить слабые и сильные стороны каждого сайта, а также еще лучше разобраться в специфике сферы бизнеса и найти взаимопонимание с нашим заказчиком.
Изучение популярных запросов по тематике дало понимание о спросе на данные услуги и о тех вопросах, которые волнуют потенциальных клиентов в первую очередь.
Имея точное представление о том, для каких людей мы делаем сайт, какие вопросы их волнуют больше всего, какие подходы используют конкуренты и в чем их можно превзойти, а также, определив общее видение с заказчиком на то, что такое хорошо и что такое плохо, мы приступили к проектированию: продумали структуру и подготовили прототипы ключевых страниц сайта.
Прототип — это низко-детализированное представление дизайна. Он четко должен показывать:
- Основные группы содержимого. Что?
- Информационную структуру. Где?
- Описание взаимодействия пользователя с интерфейсом и его примерную визуализацию. Как?
Особое внимание мы уделили 3 страницам сайта:
- Проекты. На предыдущем сайте данный немаловажный раздел отсутствовал. А клиенту действительно было чем гордиться! Мы устранили эту «ошибку» и спроектировали данный раздел. В нем пользователь может ознакомиться детально с выполненными компанией проектами: посмотреть ППР и фото готового объекта, прочитать подробное описание, а также ознакомиться с отзывом от компании-заказчика. Также, есть возможность фильтрации проектов по отраслям деятельности, что удобно для тех, кого волнует опыт работы подрядчика именно в его отрасли.
- Отзывы. Мы не встречали клиента в сегменте В2В, которому так важна обратная связь о своей работе. В разделе «Отзывы» пользователь может ознакомиться с обратной связью от клиентов компании и оставить отзыв. Имеется возможность привязки видео и скана отзыва, а ключевые моменты вынесены на выделенные плашки. Также, есть возможность отфильтровать отзывы по направлениям деятельности.
- Команда. У клиента работают настоящие профессионалы, и данный раздел позволяет ознакомиться с трудовой деятельностью, достижениями каждого сотрудника, кому вы доверите разработку проекта производства работ.
После недолгих согласований прототипов, мы перешли ко второму этапу разработки — дизайну.
Этап дизайна
Перед нами встала задача разработать дизайн, который соответствовал бы следующим критериям:
- Минимализм: строгий, чистый, лаконичный дизайн.
- Тонкие чертёжные линии в элементах сайта (кнопки навигации, акцент на типографике и фотографиях).
- Аккуратная анимация элементов сайта, интерактивные переходы между экранами и блоками сайта.
- Типография: шрифты без засечек.
-
Цвета: строгие, вызывающие ассоциации «престижно», «статусно»,
«дорохо-бохато»«солидно».
Ранее мы говорили о том, что предыдущий сайт клиента был недостаточно презентабельным и неориентированным на сегмент «премиум». Поэтому мы отказались от сложных фонов, ярких цветов, разработали стильную инфографику, а также добавили в холодную цветовую гамму теплый желтый цвет, чтобы расставить акценты на формы обратной связи.
Утверждение дизайна происходило в конструктивном диалоге, как с заказчиком, так и с контекстологами и SEO-специалистами нашей студии. Каждый внёс свою лепту, но обоснованную.
Вёрстка и программирование
После того как все макеты были утверждены, мы перешли к третьему этапу разработки, где происходит основная магия: статичные макеты превращаются в полноценные динамичные страницы сайта. Секрет вуншпунша из таких инструментов как Bootstrap, FancyBox, AOS, Swiper, ScrollMagic + GSAP (TweenLite), amCharts4 известен только frontend-волшебникам, а пользователи лишь видят плавные анимации, красивые переходы и реакции элементов сайта, и самое важное — адаптивность дизайна сайта под любые разрешения, что позволяет сохранять удобство в его использовании с мобильных устройств.
В качестве панели управления была выбрана CMS 1C-Битрикс. Функциональные возможности сайта позволили не прибегать ни к каким собственным разработкам: для реализации всего функционала были использованы только стандартные компоненты. Поэтому быстродействие, с точки зрения сервера, максимально возможное на данной CMS.
Наполнение и тестирование
Затем мы наполнили сайт информацией. Нужно отдать должное заказчику, что весь контент предоставлялся оперативно и в хорошем качестве. Наши пожелания и требования учитывались, и поэтому итоговая картинка получилась гармоничной и информативной.
Тестирование проводилось несколькими способами:
- Сначала сайт был протестирован на кроссбраузерность и прошел проверку на популярных разрешениях экранов различных устройств, протестировались все формы обратной связи, сверилось выполнение верстки согласно макетам.
- Затем мы выслали ссылку на тестовый поддомен клиенту и нашим коллегам, чтобы выявить моменты, которые ранее были неочевидны, ввиду «замыливания» глаза проектной группы.
- И в завершении сайт прошел проверку в программе Netpeak Spider. Данная программа позволяет провести комплексный технический SEO-аудит сайта и, перед запуском проекта, устранить все замечания программы, препятствующие последующему продвижению сайта в поисковых системах.
Кстати, во время тестирования часто всплывают довольно-таки забавные моменты. И проект «АльтРоСтрой» без них не обошелся.
Вот например небольшой «глюк» в разделе Команда. Получилось криповенько.
А еще был момент, когда мы «потеряли» иллюстрацию с заказчиком на сайте, после чего появилась правка:
Как-то раз мы немножко увлеклись обработкой фото, и получился вот такой «шедевр»:
После прохождения всех тестирований и устранения недочетов сайт был готов к запуску и удачно перенесен на боевой домен.
В заключении нами были установлены системы аналитики и записаны подробные видео-инструкции для того, чтобы клиент мог самостоятельно администрировать свой сайт (да-да, заказывая у нас эксклюзивный проект, вы не только получаете готовый инструмент продаж, но и подробные инструкции по управлению этим инструментом).
Итоговый результат
Результатом нашей работы стал современный, лаконичный сайт, с уникальным контентом, подчеркивающий авторитетность компании в своей сфере: ppr.expert
Проект «АльтРоСтрой» очередной раз убедил нас в том, что только активная работа обеих сторон — гарант оперативности и результативности, а тщательная предпроектная аналитика дает четко поставить цели перед будущим сайтом для дальнейшего их достижения.
Отдельную благодарность хотелось бы выразить директору компании «АльтРоСтрой», Виктору Гутфройнду, за то, что вникал во все нюансы процессов, оперативно предоставлял информацию, все время был на связи, а также регулярно приезжал к нам в офис для фиксации контрольных точек. Нам было очень приятно, что он «влился» в проектную группу и наравне со всеми специалистами, принимал активное участие в разработке.
На текущий момент настроена рекламная кампания на сайт в Яндекс. Директ и Google. Ads, а также определяется стратегия дальнейшего продвижения сайта в поисковых системах. Для нас ценно, что и в данных услугах выбор был сделан в нашу пользу. Уверены в долгом и, главное, результативном сотрудничестве и дальше.
