Сайт стоматологической клиники АГАМИ

Сайт стоматологической клиники АГАМИ

UX-проектирование
UI-дизайн
Time & Material
UX-исследование
Mobile first
Бизнес-анализ
Корпоративный сайт

О клиенте

«АГАМИ» — стоматологическая клиника в Москве с 25-летней историей. Её основатель Борис Павлович Агами — доктор медицины и имплантолог с мировым именем. Клиника работает на базе трёх основных принципов: лучшие врачи; современное оборудование, инновационные технологии и материалы; индивидуальный подход к каждому пациенту. У клиники два филиала, в которых ежедневно проводится 7–8 стоматологических операций, включая самые сложные.

logo-lanta

Проект

Заказчик обратился с задачей разработать новый сайт. Прошлый создавался несколько лет назад и со временем перестал отвечать требованиям бизнеса и ожиданиям пользователей. Из-за особенностей структуры сайта на нём было сложно найти новые услуги, а наполнение страниц выполнялось не по заложенному шаблону, из-за чего они выглядели пустыми.

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


Видео

Предпроектная аналитика

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

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


Веб-аналитика и конкурентный анализ

Веб-аналитика включала исследование поведения пользователей на сайте, составление портретов ЦА и воронки, ведущей к заявке. Мы выявили проблемные шаги в пользовательских сценариях, проанализировали посещаемость и взаимодействия с основными страницами сайта — главной, «Все врачи», «О клинике», «Контакты», а также изучили меню со списком услуг и сами страницы услуг.

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

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

Сценарии взаимодействия с сайтом визуализировали в схемах:

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

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

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

* Пользовательские гипотезы нужны на этапе дальнейших исследований — они используются для составления вопросов для интервью с респондентами.

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

Конкурентный анализ проводили методом сравнения. Информацию о юзабилити сайтов конкурирующих клиник фиксировали в таблице. Изучали главную, страницы услуг и врачей, кейсы, разделы «О клинике» и «Контакты». Задача была проанализировать подход компаний-конкурентов к формированию структуры сайта и организации контента.

Бизнес-интервью

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

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

Визуализация процесса интервью выглядит так:

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

Исследования пользователей

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

До интервью заказчики относили к своей ключевой аудитории людей старше 45 лет с проблемными зубами и запущенными случаями. В процессе общения стало понятно, что в клинику чаще обращаются люди 30–45 лет, которые следят за здоровьем зубов и при появлении проблем сразу обращаются за лечением.

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

— Максим, руководитель проекта со стороны «АГАМИ»

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

Гипотезы, которые составили на основе интервью с бизнесом, веб-аналитики и собственного опыта разбили, на три условные категории: «Уверены», «Предполагаем», «Ничего не знаем». Деление выполняли с помощью командного обсуждения. В первую категорию относили данные, в которых убеждены, во вторую — требующие проверки, в третью — то, что хотим узнать. Все гипотезы проверяются одинаково, а деление необходимо, чтобы правильно сформулировать вопросы. Такой подход помогает охватить разные аспекты исследуемого процесса.

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

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

В пользовательских интервью приняли участие семь респондентов — это были клиенты клиники, которых пригласили сотрудники «АГАМИ». Интервью проводили через Zoom, каждое заняло час-полтора.

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

  • Все опрошенные использовали для связи с клиникой телефон. → Упростили возможность позвонить и записаться — добавили в шапку заметную, удобную кнопку.
  • Больше половины респондентов отмечали консультацию главного врача в качестве преимущества клиники. → Сделали отдельную страницу для этой услуги, а также разместили переход на неё в шапке сайта.
  • Респонденты отметили, что при выборе стоматологии спрашивают: работают ли в клинике с их проблемой, какие врачи принимают, сколько стоят услуги. → Разработали удобную навигацию к страницам услуг и врачей. Выделили в отдельный блок цены, добавив пояснение о том, как они формируются.

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

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

— Максим, руководитель проекта со стороны «АГАМИ»

В результате интервью разработали портреты каждого респондента. Среди них выделили два ключевых сегмента, которые агрегировали информацию о других: клиенты 45+ с запущенными стоматологическими проблемами и люди 30–45 лет, которые заботятся о здоровье зубов.

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

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

Таблица помогла структурировать собранную информацию, а из рекомендаций составили и согласовали с клиентом требования к страницам для этапа проектирования.

Информационная архитектура (ИА)

Базовое понимание информационной архитектуры сложилось ещё на этапе веб-аналитики.

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

После построения ИА определили приоритеты, построили дорожную карту и приступили к проектированию. Начали с главной, страниц врачей и услуг, так как они были наиболее посещаемыми.

Интерфейсные решения

1. Форма подбора

Проект был формата mobile-first, поэтому при проектировании сделали фокус на мобильной версии.

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

2. Табы с врачами

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

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

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

3. Нижняя навигация

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

4. Приоритетная услуга

Одна из задач проекта — увеличение конверсии на «Лечение во сне» и создание ассоциации между этой услугой и стоматологией «АГАМИ». Для этой страницы спроектировали отдельный макет, который отличался от других на сайте. Блок о возможности вылечить зубы во сне добавили на страницы других услуг.

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

5. Выполненные работы

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

Дизайн

Работа над дизайн-концепцией

Стартовали работы по дизайну со сборки мудборда, где выявили с клиентом направление и стилистику будущего дизайна. В качестве основного референса был взят сайт ветеринарной клиники vet.city. Клиенту понравилось настроение, которое передаёт сайт, современный дизайн и фотографии врачей: их эмоции, качество.

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

Прошлая стилистика выглядела довольно строго и не особо выделяла бренд среди конкурентов. Чтобы обновить образ бренда, предложили на выбор несколько шрифтовых пар, которые подчеркнут его технологичность и профессионализм. Клиент остановился на шрифтовой паре Manrope + Circe. Первый гротеск использовали в элементах заголовков и навигации, а Circe применили на объёмные блоки текста, чтобы повысить читаемость объемной полезной информации на сайте.

Композиция на первом экране в дизайн-концепции задаёт настроение всему сайту. Через графику старались передать живые эмоции, дружелюбие, коммуникабельность и командную работу специалистов «АГАМИ». Не прибегали к стоковым решениям, составляли ТЗ для фотографий, которые использовались в коллаже.

Фотографии и карточки врачей

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

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

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

«Меня смущают чёрно-белые фото и закрытая поза. Они улыбаются, а руки при этом скрещены на груди» — цитата респондента.

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

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

Страницы услуг

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

Иконки

Разработали индивидуальные иконки, чтобы они подходили под стилистику проекта.

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

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

Заключение

В процессе работы над проектом мы:

  • провели более 10 интервью с клиентами и сотрудниками клиники;
  • проработали более 40 пользовательских гипотез;
  • разработали новую структуру сайта на основе веб-анализа, анализа конкурентов и пользовательской аналитики;
  • спроектировали и разработали дизайн для двух версий сайта — мобильной и десктопной;
  • регулярно ревьюировали и консультировали команду разработчиков.

Здобнов Максим
Руководитель проекта со стороны «АГАМИ»
Весь этот «глобальный» проект для нашей компании своих целей достиг, но что особенно ценно — в заранее поставленные сроки и бюджет. Работы предстоит ещё достаточно много, хотя с момента публикации сайта мы ежемесячно его «обновляем», пополняем бэклог, добавляем новые функции.
Работать с командой «Эвереста» нам понравилось! Так как мы стоматологическая клиника, а не айти-компания с большим количеством компетенций, то для нас было важно найти партнёра, который бы сделал всё от начала и до конца «по-взрослому»: с погружением в тему, анализом поведения пользователей на сайте, с интервью с реальными пациентами, прототипированием и даже настройкой скорости работы сайта на сервере. И это всё удалось.
Хочется отметить, что всё взаимодействие происходило в онлайне через переписку, встречи, комментарии в Figma. Мы так ни разу и не встречались в офлайне, хотя нам, как клинике, привычно видеть и общаться с нашими клиентами вживую. Это был новый опыт, который оказался интересным и современным.

Смена позиционирования и дизайна

Новый сайт опубликовали в сентябре 2022 года, а в начале 2023-го руководство АГАМИ приняло решение о смене позиционирования. И команда со стороны клиента снова обратилась к нам с задачей — обновить дизайн под новые смыслы.

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

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

Изменили и шрифт. До этого для заголовков использовали «Manrope», а поменяли на утончённый «Stapel». Одна из его отличительных особенностей — акцент на тонких примыканиях штрихов. А вместе с широкими буквами он добавляет дизайну уверенность и спокойствие.

Результат работы можно посмотреть по ссылке или ниже на анимированном баннере.

Над проектом работали

icon
Евгения
Аккаунт-менеджер
icon
Антон
Руководитель проектов
icon
Таня
UX-аналитик
icon
Рома
UI-дизайнер
icon
Стёпа
UX/UI-дизайнер

Другие кейсы

Корпоративный сайт для «Сибирской горно-металлургической компании»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1

Продуктовый листинг и товарный лендинг для «Ангстрема»

UX-проектирование
UI-дизайн
E-commerce
+ ещё 3

Лендинг к 10-летию Российского научного фонда

UI-дизайн
Спецпроект
Анимации
+ ещё 2

Корпоративный сайт для «Нового Втормета»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1
Сайт для новой государственной компании «Роскадастр»

Сайт для новой государственной компании «Роскадастр»

UX-проектирование
UI-дизайн
Битрикс
+ ещё 1
Обсудить проект