Для создания сайта мы выбрали CMS WordPress, чтобы заказчик мог самостоятельно формировать контент и публиковать его без помощи внешних специалистов.
О клиенте
ДиЛуч - современный SPA-комплекс в Анапе, предоставляющий услуги массажа и ухода за телом. На территории комплекса находится сауна, тренажерный зал и акватермальный комплекс.
Нашим клиентам приходится самостоятельно набирать номер телефона, указанный на сайте или приезжать лично, чтобы узнать какие услуги доступны. Это существенно снижает конверсию.
Задача
Главный запрос заказчика заключался в привлечении новых клиентов. Потенциальные покупатели не могли полноценно взаимодействовать с сайтом компании, так как на нём не было ни информации о предоставляемых услугах, ни формы заявки.
По этой причине клиенты SPA-центра могли узнать подробнее о ценах и услугах только в случае прозвона по номеру телефона или личного посещения центра. Это существенно снижало конверсию. Чтобы решить данную проблему, заказчик написал про услуги на сайте, но очень обобщенно. Этого оказалось недостаточно, чтобы настроить правильную коммуникацию с пользователями, поэтому он обратился за помощью к нам.
Ещё одним запросом по проекту стало самостоятельное наполнение сайта контентом. Это помогло заказчику сэкономить бюджет на внешнем специалисте по обслуживанию сайта.
Сайт до редизайна
Цели
Перед началом работ мы поставили следующие цели:
Создать главную страницу с полным перечнем услуг, а также отдельные страницы по каждой услуге
Добавить блоки с отзывами клиентов, скидками, абонементами и подарочными сертификатами
Настроить админ-панель сайта для простоты создания и редактирования контента
Разработать модальное окно заявок с формой обратной связи, чтобы заявки поступали на почту SPA-комплекса
Создать современный и удобный дизайна сайта с использованием фирменного стиля компании
Процесс работ
Сначала мы провели анализ сайта и определили план работ. Далее отрисовали полный вид всех страниц сайта, составили подробное ТЗ по структуре и наполнению и согласовали его с заказчиком.
Этап 1
Дизайн сайта
Клиенту важно было правильно показать перечень услуг на главной и сделать удобную внутреннюю страницу каждой услуги.
Шаг 1
Для начала мы разработали структуру и базовое расположение блоков, согласовали работы с заказчиком. Затем приступили к дизайну макетов самого сайта.
Шаг 2
При разработке макетов мы регулярно показывали заказчику промежуточные итоги работы. В некоторых блоках разместили абстрактные иллюстрации в стиле брендбука компании. Для блока преимуществ нарисовали недостающие иконки.
Шаг 3
Когда десктопная версия была закончена, мы адаптировали сайт для мобильных устройств. Мы аккуратно перенесли каждый блок и переработали логику для взаимодействия пользователя с адаптивной версией. Также не забыли и про дизайн 404 страницы.
Этап 2
Настройка шаблона и вёрстка страниц
После успешного согласования макета мы принялись за написание вёрстки, стилей и скриптов.
Сначала создали всю статическую структуру сайта. Затем поверх неё написали стили для отображения информации и скрипты для динамического взаимодействия с сайтом. Например: открыть модальное окно, оставить заявку или отзыв, переключить вкладки на странице услуг, пролистать слайдеры.
Форма связи передаёт на почту также и тип услуги, на которую оставили заявку
Мобильная версия
В первую очередь после вёрстки основной структуры сайта мы занялись переносом новых стилей из макетов на сайт
Перенос макета из Figma и последующая вёрстка сайта
Хотите улучшить свой сайт?
Напишите нам и получите бесплатный аудит
Этап 3
Перенос сайта на CMS Wordpress
Сайт перенесли на CMS WordPress. Чтобы удобно редактировать контент, настроили админ-панель.
С помощью админ-панели стало возможным без особых специальных навыков менять цены или добавлять новые услуги на сайт SPA-комплекса. Также админ-панель позволила публиковать, редактировать и удалять новости.
Далее мы создали страницы, разместили изображения и иконки; настроили вкладку с услугами и их описанием; создали и настроили метрику отслеживания количества посетителей сайта.
Отзывы клиентов
Мы предложили клиенту добавить на сайт форму для отзывов, чтобы другие посетители также могли их прочитать. Клиенту понравилось наше предложение и мы его реализовали.
Эта механика увеличивает шансы на получение новой заявки и повышает лояльность пользователей к компании.
Удобная навигация по услугам
Также мы создали удобный формат для изучения услуг компании. Ранее на сайте перечень услуг был представлен списком без дополнительной информации. Мы разбили услуги на вкладки, внутри которых открываются конкретные категории, чтобы пользователь мог легко дойти до нужной услуги, не отвлекаясь на другие.
Внизу каждой страницы мы установили форму обратной связи. Если пользователь не может найти нужную услугу или хочет узнать о ней подробнее, форма поможет ему быстро и легко оставить заявку.
Этап 4
Тестирование
В конце работ мы провели тестирование: нашли и исправили ошибки, проверили скрипты и удобство редактирования контента.
Проверка необходима для того, чтобы пользователи не наткнулись на проблемный блок сайта, который не позволит изучить услуги комплекса или оставить заявку.
C какими проблемами мы столкнулись
Единственной проблемой во время создания сайта стала настройка вывода услуг по категориям на странице.
В результате мы решили создать вложенные категории, которые правильно и быстро бы обрабатывались в коде и не замедляли загрузку сайта.
Результат
В результате работы мы создали 9 уникальных типовых страниц для удобного отображения всей необходимой информации.
Настроили админ-панель для быстрого и удобного редактирования контента, с помощью которой заказчик сэкономил бюджет на привлечении внешнего специалиста.
Также мы создали блок отзывов от клиентов, который нацелен на повышение лояльности посетителей SPA-комплекса и увеличение конверсии в заявки. В дополнение мы разработали окно для получения заявок, оставленных через сайт, чтобы отслеживать их количество и исключать потери.
Дизайн сайта сделали удобным, современным и комфортным для пользователей.
Сайт: spa.diluch.ru
Контакты для связи
Давайте вместе создадим что-то уникальное
Не любите формы?
