Как наши дизайнеры переосмыслили визуализацию услуг на сайте стоматологической клиники «АГАМИ»

Привет! Это Лена, редактор UX-студии Everest. Больше семи лет мы занимаемся разработкой цифровых решений с фокусом на пользовательский опыт: создаём личные кабинеты, корпоративные порталы, системы управления ресурсами и другие внутренние и внешние веб-сервисы, которые помогают автоматизировать и развивать бизнес наших клиентов.

Сегодня на примере кейса разработки сайта для стоматологической клиники расскажу, как дизайнеры «Эвереста» подходят к работе над визуалом.

Клиент и задача

«АГАМИ» — одна из ведущих стоматологических клиник в Москве. Специализируется на сложных случаях: имплантации, протезировании, удалении зубов, классическом лечении и лечении во сне. За 25 лет клиника помогла десяткам тысяч пациентов, установила более 60 000 имплантатов.

Сайт «АГАМИ» был создан несколько лет назад и со временем перестал отвечать требованиям бизнеса и ожиданиям пользователей. Появлялись новые услуги, которые было сложно найти из-за особенностей структуры. Наполнение страниц не соответствовало заложенному шаблону, из-за этого они выглядели пустыми и непрезентабельными.

Заказчик обратился к нам за разработкой нового сайта с логичной и интуитивно понятной структурой. Требовалось отразить ключевую экспертизу стоматологии — лечение сложных случаев — и проработать подачу контента: презентовать пользователям услуги и возможности клиники. Всё это в совокупности должно способствовать увеличению конверсии.

Идея сфер для визуализации услуг

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

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

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

Как наши дизайнеры переосмыслили визуализацию услуг на сайте стоматологической клиники «АГАМИ»

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

Гораздо лучше и правильнее, когда образы формируются «внутри» компании. Можно собрать всех руководителей, топов и устроить мозговой штурм. Подумать и ответить на вопросы: про что ваша компания, какие у неё ценности/ориентиры, что отличает вас в общей массе других компаний? И отказ от очевидных образов — один из способов показать собственную уникальность, самобытность.

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

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

Как наши дизайнеры переосмыслили визуализацию услуг на сайте стоматологической клиники «АГАМИ»

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

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

Сомнения и поиск других решений

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

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

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

Как наши дизайнеры переосмыслили визуализацию услуг на сайте стоматологической клиники «АГАМИ»

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

Возврат к сферам и доработка идеи

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

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

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

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

Результат и обратная связь от клиента

Весь процесс визуализации услуг занял около 3 недель. Дизайнеры подготовили примерно 30 решений для 11 услуг. Опыт с 3D-моделированием взяли на вооружение, чтобы использовать в работе над другими проектами.

Как наши дизайнеры переосмыслили визуализацию услуг на сайте стоматологической клиники «АГАМИ»

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

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

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

Интересная статья, хороший проект! Пишите больше о метафорах в проектах (и неудачных тоже). А в чём была изначальная метафора с созвездиями?

Ответить

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

1
Ответить

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

На какой платформе он собран?

Ответить

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

Ответить

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

Ответить

Ой как приятно 🥰
Мила, спасибо за ваш отзыв 😊

Ответить