Предыстория

Зарисовка нашей встречи с директором сети клиник Гарант в Екатеригбурге

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

— Склеится…
— Не склеится
— Склеится!
— Да не склеится!
— Говорю вам, склеится!
— Не склеится, зуб даю! — говорит один из нас. На том и порешили.

Аргументы прежнего исполнителя: название компании, адреса и телефоны — будут указаны и там, и там. Поисковик неминуемо заподозрит неладное, и склеит в выдаче новый сайт со старым к чертовой матери. И неизвестно, в какой конфигурации.
Наши аргументы: структура сайта, тексты, дизайн, расположение элементов, фотографии, мета-теги и мета-описание — всё это будет совершенно другим, и на другой CMS. Коллеги использовали самописную, а у нас в фаворитах — wordpress.

Концепция и этапы разработки

Концепция разработки сайта стоматологии

Мы начали с того, что решили объединить стоматологию с другими четырьмя направлениями, которые развивает сеть клиник Гарант: пластическая хирургия, косметология, челюстно-лицевая хирургия, и ЛОР.

После согласования концепции и функционала, мы начали работу по этапам разработки:
— Написание технического задания
— Mindmap-карта сайта, где мы видим все разделы, их содержимое, и то, как называются страницы
— Контент и прототипы страниц
— Испытание прототипов в фокус-группе, доработка
— Дизайн
— Программирование, верстка
— Подключение https-протокола
— Настройка аналитики

Этап 1. Техническое задание на работы по сайту

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

Техническое задание для сайта сети стоматологий Гарант в Екатеринбурге

Этап 2. Схема устройства будущего сайта

Схема сайта Гарант в Екатеринбурге

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

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

Этап 3. Создание контента сайта и прототипов страниц

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

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

На выходе получилось 88 страниц по 6 медицинским направлениям Гаранта. Это был самый объемный и разнопрофильный каталог медицинских услуг в Екатеринбурге на момент создания сайта.

Контент для сайта стоматологической клиники Гарант

Этап 4. Тесты пользовательского опыта на живых пользователях

Пользовательский опыт сайта стоматологии Гарант в Екатеринбурге

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

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

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

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

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

Этап 5. Дизайн

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

Поэтому мы продолжили тему белого и оранжевого и в интерфейсе нового сайта. Яркий оранжевый задаёт ритм интерфейсу, а белый — добавляет объема и создаёт ощущение простора в блоках страниц.

Мы подобрали шрифт, который повторяет ту скурпулёзность и внимание к деталям, которое преподносит своим клиентам Гарант. Этот шрифт красиво выглядит и легко читается.

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

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

Интерьер стоматологии Гарант
Дизайн сайта стоматологии Гарант ekb-garant.ru

Этап 6. Программирование и верстка сайта

программирование сайта Гарант

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

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

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

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

Этап 7. Подключение https-протокола соединения сайта

Перевод стоматологии с http на https

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

Здесь не обошлось без проблем. Изначально сертификат работал исправно, но когда мы установили один из сторонних виджетов для записи клиентов, то сертификат стал ругаться на него, из-за чего браузеры стали ругаться на наш https-протокол надписью «подкючение защищено не полностью». Всему виной одна маленькая картинка png, которая подгружалась на наш сайт через этот виджет по незащищенному протоколу http.

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

Этап 8. Настройка Google Analytics и Yandex.Metrk'и

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

При подключении аналитики мы используем менеджер тегов Google Tag Manager. Он не только вмещает в себя GA и YM, но и позволяет разместить код коллтрекинга для подсчета звонков в аналитике, пиксели ретаргетинга соц. сетей и контекстно-медийных сетей, а также воспользоваться кодами сервисов bigdata навроде carrotquest.

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

Системы аналитики для сайта стоматологии
Яндекс Метрика для сайта стоматологии Гарант в Екатеринбурге

Эпилог

Увеличились заявки во всех шести направлениях сети стоматологий Гаранта

Сайт ekb-garant.ru — в открытом доступе с 22 февраля 2018 года, когда мы открыли его для индексации поисковыми роботами Яндекс и Google. Наши смелые задумки воплотились в жизнь, у нас получился хороший и коммерчески успешный проект, который ежедневно выручает людей при острой зубной боли, проблемах ЛОР, челюстно-лицевой хирургии, и другим аспектам здоровья человека.

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

Эта опция пригодилась нам после ужесточения закона для клиник пластической хирургии. Это направление исчезло с сайта ekb-garant.ru, но мы выяснили, что часть услуг из этого раздела может делать косметология. Поэтому мы просто перенесли страницы с этими услугами в косметологию.

Мы продолжаем работать над сайтом, и в ближайшее время ekb-garant.ru получит новый апдейт, где мы учтем наработанный опыт пользователей, который мы непрерывно фиксируем.

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

Мы оказываем помощь предпринимателям

Канал связи

Расскажите о своем бизнесе

Нажимая кнопку "Отправить", вы соглашаетесь с   политикой конфиденциальности.