Разработка сайта ветеринарной клиники ЕВРОВЕТ

О КЛИЕНТЕ

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

Что требовалось реализовать: современный дизайн с основным упором на мобильный трафик (более 80% от общего числа), расписание врачей, запись на прием на конкретную дату и время, список услуг, общий прайс-лист, возможность удобного обновления данных о ценах и расписании врачей через панель администрирования, пересобрать модуль онлайн-диагностики животных, настроить сайт для сбора статистики. Также важно было учесть накопленный годами контент сайта, позиции сайта в поиске по ключевым словам.

РЕЗУЛЬТАТ

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

Это мы протестировали, когда появилась новая услуга эндоскопии.

В течение первой недели все услуги, связанные с эндоскопическим аппаратом, вышли в ТОП 10, а вторая неделя вывела их в ТОП 1-5. Нам ничего для этого не надо было отдельно настраивать. Теперь любая новая услуга выходит в ТОП быстро, и экономит бюджет на SEO и контекстную рекламу, начиная приносить прибыль в короткие сроки.  

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

1. Агрегация требований

2. Дизайн сайта (figma) с акцентом на мобильные устройства и отказ от планшетной верстки.

3. Особенности и достижение целей проекта.

4. Фронтенд (html, css, js) и бэкенд-разработка (php, Yii2).

5. Локальное альфа-тестирование сайта и панели администрирования.

6. Перенос контента с текущего сайта.

7. Beta-тестирование на тестовом хостинге.

8. Составление карты переезда.

9. Обновление сайта на боевом хостинге.

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

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

— анализ текущего состояния сайта: контент, структура, модули, интеграции;

— анализ конкурентов: преимущества/недостатки, основные технические показатели, видимость в поисковых системах, общая оценка конкурентоспособности;

— интервьюирование заинтересованных лиц: операторы колл-центра, маркетолог;

— портрет целевой аудитории.

В результате проведенного этапа мы определили, что основной трафик сайта — мобильный (более 80%), пользователи с планшетов составили всего 1-2% от общего числа, остальное забрал десктоп.

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

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

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

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

ПОИСК

Поиск по сайту выводит все найденные услуги в прайс-листе, выделяя только те разделы, в которых найден запрос. Для пользователя все выглядит как сортировка прайс-листа по его запросу.

ВРАЧИ

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

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

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

ЗАПИСЬ НА ПРИЕМ

Записаться на прием можно разными способами:

— форма обратной связи «Заказать звонок»;

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

— запись на прием на странице ветеринара, если вам важен специалист;

— запись на прием на странице клиники, если вам важно место;

— со страницы прайс-листа, где у каждой услуги есть возможность записи;

— страница услуги;

— онлайн-диагностика.

ОНЛАЙН ДИАГНОСТИКА

ЭТО НЕ КВИЗ! Терпеть не можем обманные тесты, где за результат просят контактные данные. Этот сервис реально помогает людям сузить круг возможных заболеваний. Он был реализован еще на прошлом сайте, но мы, конечно же, нашли, что улучшить и как сделать его более удобным для пользователя.

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

Только если вы сами решите, что вам это надо!

УСЛУГИ

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

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

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

Создали максимально информативную страницу услуг с описаниями, ценами, списком врачей, адресами клиник и преимуществами. Это дало нам хорошие показатели вовлеченности пользователей: 8-12% конверсии в заявку или звонок у всех, кто посетил страницы услуг и более 55% всех пользователей, которые постили какую-либо страницу услуг общее число просмотренных страниц за посещение не менее 3-х.

ВАКАНСИИ

В ветеринарной клинике ЕВРОВЕТ особое внимание уделяется врачам и команде в целом. В коллективе царит дух единства и общего дела. На странице вакансий мы постарались передать этот дух всем, кто ищет работу или хотел бы профессионально развиваться в хорошей компании.

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

FRONTEND

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

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

BACKEND

Больших интеграций и обмена данными, как на других наших проектах, на данном проекте не было.

Мы уже делали предыдущий сайт, поэтому многие наработки сохранили или доработали. Проект выполнен на фреймворке Yii2, с удобной панелью администрирования проработанной под SEO. Настройки многих СЕОшных функций доступны прямо из админки: canonical, мета-теги, установка сторонних скрипотов в <head> и <body>, <alt> для картинок, настройка ЧПУ, установка email получателей обращений с сайта и т.д.

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

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

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

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

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

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

Благодаря грамотной внутренней и внешней работе, новые страницы услуг попадают в ТОП поисковых систем практически моментально. Достаточно проработать контент с точки зрения SEO и показать поисковикам, что появилась новая страница. Это мы протестировали, когда появилась новая услуга эндоскопии. В течение первой недели все услуги, связанные с эндоскопическим аппаратом, вышли в ТОП 10, а вторая неделя вывела их в ТОП 1-5. Нам ничего для этого не надо было отдельно настраивать. Теперь любая новая услуга выходит в ТОП быстро, и экономит бюджет на SEO и контекстную рекламу, начиная приносить прибыль в короткие сроки.