Как мы трансформировали простой сайт-визитку в мощный инструмент продаж: кейс для девелопера

О клиенте

САМОВАР ДЕВЕЛОПМЕНТ ГРУПП — это строительно-девелоперская компания полного цикла. На рынке с 2018 года. 

Компания берет на себя широкий спектр задач: от исследования возможностей рынка до строительства “под ключ”.

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

Помня предыдущий позитивный опыт совместной работы с командой itb, маркетолог предложила руководству обратиться к нам. После согласования условий и сроков мы приступили к работе.

Какую задачу нужно было решить

Целью проекта было разработать новый сайт для клиента. 

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

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

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

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

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

Стартовая страница прежнего сайта клиента

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

Один из таких примеров

От нового сайта клиент хотел получить: 

• Увеличение трафика на сайте с помощью органических посещений.
• Высокую конверсию продаж с посадочных страниц.
• Понятную структуру и юзабилити сайта которые соответствовали брендбуку компании.

Подготовительный этап

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

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

Например: 

• Разворачивание и настройка тестового сервера.
• Уникальный дизайн на основе существующего примера, с учетом фирменного стиля компании.
• Верстка по макету.
• Перенос контента, необходимого для наполнения разделов сайта.
• Страница “Политика конфиденциальности” и другие.

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

Предварительная структура сайта

После утверждения наших предложений клиентом, мы приступили к разработке сайта.

Разработка: визуальные и технические решения

Новый сайт мы разработали на платформе «1С-Битрикс». Она позволяет интегрировать сайт в любые российские сервисы и масштабировать архитектуру сайта, если бизнес будет расширяться. 

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

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

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

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

Было

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

Стало

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

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

Примеры из  брендбука

Основные цвета бренда: теплые оттенки белого, приглушенный серый и яркий бирюзовый.

Яркие акценты на важных деталях

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

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

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

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

Видео запускается при наведении курсора

Также мы адаптировали сайт для мобильной версии, чтобы все разделы отображались корректно.

Итоги

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

Удобство взаимодействия с сайтом поможет оформлять заявки даже совсем неопытным пользователям сети. Что мы уже видим в подключенной к сайту CRM-системе. Для более детального анализа конверсии прошло недостаточно времени с момента запуска сайта. Отследить изменения в числах сможем позже.

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

Заключение

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

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