Предыстория

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

Мы начали с того, что решили объединить стоматологию с другими четырьмя направлениями, которые развивает сеть клиник Гарант: пластическая хирургия, косметология, челюстно-лицевая хирургия, и ЛОР.
После согласования концепции и функционала, мы начали работу по этапам разработки:
— Написание технического задания
— Mindmap-карта сайта, где мы видим все разделы, их содержимое, и то, как называются страницы
— Контент и прототипы страниц
— Испытание прототипов в фокус-группе, доработка
— Дизайн
— Программирование, верстка
— Подключение https-протокола
— Настройка аналитики
Этап 1. Техническое задание на работы по сайту
Перед стартом мы уже примерно понимали, чего хотим. Но ТЗ позволило нам увидеть всю работу системно. Мы вписали первую партию условий и функций, а потом вписали вторую, и начали замечать, что некоторые пункты не согласуются с предыдущими. Мы искали решения, совещались, и вырабатывали обходные пути, или вовсе — изменяли сам подход к реализации отдельных пунктов.

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

На прошлом этапе участники процесса договаривались о том, какие разделы, страницы и функции будут у сайта. На этапе схемы сайта мы спроецировали эти элементы на плоскости. Обозначили их название, расположение, и взаимодействие друг с другом.
В результате получилась большая и разветвленная схема из трех основных разделов сайта: услуги, врачи, и филиалы.
Этап 3. Создание контента сайта и прототипов страниц
Это очень напряженный этап, который потребовал слаженной работы со специалистами сети клиник Гарант. Мы консультировались с ними по каждой услуге и каждой процедуре, которую они оказывают.
Врачи Гаранта помогли нам рассказать пользователям не только о процедурах в целом, но и об особенностях подхода именно в Гаранте. Гарантовцы были очень мотивированы, болели за свою компанию и своё дело, поэтому мы все вместе, одной большой командой, были погружены в сложный процесс создания и редактирования контента.
На выходе получилось 88 страниц по 6 медицинским направлениям Гаранта. Это был самый объемный и разнопрофильный каталог медицинских услуг в Екатеринбурге на момент создания сайта.

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

Одновремено с контентом, мы работали и над устройством интерфейса. Создав контент для нескольких первых страниц, мы создали тестовую модель сайта, которую использовали при проведении фокус-группы.
Мы не собирали людей специально, не размещали их в комнате, и не задавали им разные вопросы на камеру. Вместо этого мы отправились в приемную одного из филиалов Гаранта, прихватив ноутбук, на котором была воплощена тестовая модель сайта.
Мы опросили всего 8 человек. Это были люди разного возраста и с разным опытом использования интернета. Самым молодым респондентом была девушка 19 лет, а самым пожилым — мужчина за 80. Каждый из них работал по анкете. Мы смоделировали ситуацию помощи при острой боли, и в анкете фиксировали шаги, которые предпринимал пользователь, а также просили оценить сложность каждого шага. Перед нами была задача добиться того, чтобы человек сразу мог найти то, что ему нужно, даже если он одной рукой держится за больной зуб.
Тесты подтвердили часть нашей концепции, но некотоыре вещи мы серьезно переработали по результатм анализа анкет и живого наблюдения за респондентами.
Скурпулёзный читатель может возразить нам, сказав, что 8 человек — это совсем немного. Мы можем сказать лишь, что это на 8 человек больше, чем опрашивает кто-то другой на нашем месте. Наш подход делает интерфейсы наших сайтов лучшими при невысокой стоимости разработки.
Этап 5. Дизайн
Гарант — крупная сеть клиник с историей. Они работают с 2004 года, поэтому их фирменный стиль уже устоялся, меняясь и адаптируясь под новые тенденции. Он выглядит современно в приёмных Гаранта. Они светлые, с аккуратным сочетанием белого и оранжевого цветов. Совсем нет ощущения «больницы», визуальный ряд интерьера располагает к спокойному и позитивному отношению.
Поэтому мы продолжили тему белого и оранжевого и в интерфейсе нового сайта. Яркий оранжевый задаёт ритм интерфейсу, а белый — добавляет объема и создаёт ощущение простора в блоках страниц.
Мы подобрали шрифт, который повторяет ту скурпулёзность и внимание к деталям, которое преподносит своим клиентам Гарант. Этот шрифт красиво выглядит и легко читается.
На всех фотографиях — реальные люди из Екатеринбурга. Гарант накопил картотеку фото за несколько лет, и мы смогли использовать некоторые из них в своей работе.
Мобильная версия отличается от десктопной. Страницы — короче, при сохранении того же объема текста. Навигация осталась прежней, но элементы — крупнее и контрастнее. Это нужно для того, чтобы пользователь мог пользоваться сайтом со смартфона и в тёмной комнате, и на солнечной улице.


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

Мы с заказчиком выбрали CMS WordPress для нашего проекта. Прежде всего, это даёт заказчику надежность и предсказуемость работы с CMS, и возможность без труда найти исполнителя на технические работы, ведь WordPress знают все. К тому же, он очень шустрый, контент быстро подгружается на устройства при открытии сайта.
Наши разработчики воплотили в жизнь идеи из предыдущих этапов, но это была только часть работы. После того, как сайт заработал, он обладал некоторыми детскими болезнями, свойственными новоиспеченному проекту. В частности, мы решали вопрос со скоростью загрузки страниц. Сам сайт загружался достаточно быстро, но мы использовали сторонний виджет GBooking для записи на приём, и встроенные видео из YouTube, и это серьезно ухудшало скорость открытия страниц.
Наши технические специалисты написали алгоритмы загрузки содержимого сайта, что ускоряло загрузку основных элементов, и ставило более тяжелые во вторую очередь.
Что касается вёрстки сайта, то это добротная кроссбраузерная и кроссплатформенная верстка, которая тестировалась нами как на эмуляторах, так и на физических устройствах — смартфонах, планшетах, ноутбуках с разными экранами, и на десктопах стационарных компьютеров с широким экраном.
Этап 7. Подключение 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 получит новый апдейт, где мы учтем наработанный опыт пользователей, который мы непрерывно фиксируем.
А что же со старым сайтом? Они не склеиваются? Нет. Поисковики реагируют на них по-разному. На новом сайте меньше брендовых запросов, зато больше ускоспециализированных, по названию конкретных услуг. Не исключено, что в скором времени мы сделаем-таки адрес старого сайта неосновным зеркалом нового.
Мы оказываем помощь предпринимателям
Пакет 1
Книга по SMM
Небольшая книга о том, как мы работаем с соц. сетями. Кейсы и личный опыт.
Легко читается, учит хорошему
Пакет 2
Социальные сети
Вовлекающий контент
Общение с подписчиками
Конкурсы и розыгрыши
Таргетированная реклама
Пакет 3
Сайт. Создание, продвижение, ведение
Уникальный контент
Настройка аналитики и целей
Карты и отзывы
Техническое сопровождение
СЕО-шмео