Как наши дизайнеры переосмыслили визуализацию услуг на сайте стоматологической клиники «АГАМИ»
Привет! Это Лена, редактор UX-студии Everest. Больше семи лет мы занимаемся разработкой цифровых решений с фокусом на пользовательский опыт: создаём личные кабинеты, корпоративные порталы, системы управления ресурсами и другие внутренние и внешние веб-сервисы, которые помогают автоматизировать и развивать бизнес наших клиентов.
Сегодня на примере кейса разработки сайта для стоматологической клиники расскажу, как дизайнеры «Эвереста» подходят к работе над визуалом.
Клиент и задача
«АГАМИ» — одна из ведущих стоматологических клиник в Москве. Специализируется на сложных случаях: имплантации, протезировании, удалении зубов, классическом лечении и лечении во сне. За 25 лет клиника помогла десяткам тысяч пациентов, установила более 60 000 имплантатов.
Сайт «АГАМИ» был создан несколько лет назад и со временем перестал отвечать требованиям бизнеса и ожиданиям пользователей. Появлялись новые услуги, которые было сложно найти из-за особенностей структуры. Наполнение страниц не соответствовало заложенному шаблону, из-за этого они выглядели пустыми и непрезентабельными.
Заказчик обратился к нам за разработкой нового сайта с логичной и интуитивно понятной структурой. Требовалось отразить ключевую экспертизу стоматологии — лечение сложных случаев — и проработать подачу контента: презентовать пользователям услуги и возможности клиники. Всё это в совокупности должно способствовать увеличению конверсии.
Идея сфер для визуализации услуг
После завершения предпроектной аналитики и согласования прототипов материалы по проекту перешли дизайнерам, которым предстояло разработать дизайн-концепцию главной страницы.
Работы начались со сборки мудборда, который помог выявить у клиента желаемое направление и стилистику будущего сайта. Особых пожеланий к визуализации услуг у клиента не было, но он и команда с нашей стороны с самого начала были единодушны в том, что на сайте не нужны очевидные решения.
Посещая сайты стоматологических услуг, пользователи часто сталкиваются с типовыми стоковыми изображениями широко улыбающихся людей, медицинских стоматологических инструментов. Эти образы используют в логотипах и рекламных материалах. В целом многие компании выбирают очевидные метафоры, поскольку такие дизайн-решения просты с точки зрения донесения смысла, но бренды, которые их используют, рискуют потерять свою индивидуальность.
В поисках идей для дизайна клиники зачастую смотрят на конкурентов или тех, кто работает в смежных областях. Это сокращает время поиска идей, но из-за того, что так делает большинство компаний, их дизайн наполняется однотипными образами. На конкурентов смотреть, конечно, нужно, но лишь для того, чтобы понимать контекст, а не для копирования. Изучив решения других компаний, стоит задать себе вопрос: а как можно ещё?
Гораздо лучше и правильнее, когда образы формируются «внутри» компании. Можно собрать всех руководителей, топов и устроить мозговой штурм. Подумать и ответить на вопросы: про что ваша компания, какие у неё ценности/ориентиры, что отличает вас в общей массе других компаний? И отказ от очевидных образов — один из способов показать собственную уникальность, самобытность.
Поэтому, работая над дизайн-концепцией и создавая блок с услугами, наша команда обратилась к метафорам. С их помощью хотели передать определённые эмоции (спокойствие, профессионализм, качество), подчеркнуть бережный подход клиники как к пациентам, так и к своему бренду.
В итоге решили использовать для визуализации услуг сферы — абстрактные объекты, которые отличались формой и текстурой на разных страницах сайта. Они демонстрировали принадлежность «АГАМИ» к премиум-сегменту и хорошо вписывались в общую концепцию чистого, светлого сайта услуг.
Стандартные фотостоковые улыбки на сайтах стоматологии уже моветон. То же самое касается надкусанных яблок, инструментов и прочего. Конечно, когда пользователь попадает на сайт стоматологии, у него должно быть чёткое понимание — где он находится и как ему найти нужную информацию. Поэтому мы в первую очередь сделали упор на крупный текст, удобную навигацию, а затем уже гармонично вписали нейтральные как по цвету, так и по смысловой нагрузке фигуры в виде сфер, уникальные для каждого направления.
Сомнения и поиск других решений
После согласования дизайн-концепции предстояло отрисовать сферы для всех услуг клиники (а их было больше десяти). Создать очевидное пересечение между услугой и образом оказалось трудно. В какой-то момент абстрактные фигуры начали напоминать зубы и подушечки жвачки, от которых стремились уйти.
Решили поискать альтернативные идеи и попробовать образы из других отраслей, чтобы сравнить разные варианты и выбрать среди них тот, который будет наиболее удачно дополнять сайт.
Попробовали применить к услугам образы созвездий. Отрисовали их в разных видах. Лучше всего созвездия смотрелись на чёрном фоне, но это повлияло бы на общую светлую концепцию сайта, которая не предполагала тёмных бэкграундов. Искали образы в архитектуре, но когда подобрали несколько вариантов — поняли, что они несут дополнительную нагрузку для восприятия, а не облегчают подачу материала. Смотрели экзотические растения с интересными силуэтами: мягкие формы цветов для терапии и острые для хирургии. Но и это решение осталось на уровне идеи.
Все варианты обсуждали с клиентом и вместе приходили к выводу, что они не подходят. Эти образы уже несут в себе культурный, исторический и личный контекст, который пользователь невольно переносит на услугу. У человека возникают собственные ассоциации, которые могут не совпадать с теми, которые закладываются клиентом и дизайнерами, поэтому лучше использовать нейтральные образы.
Возврат к сферам и доработка идеи
Перепробовав разные визуализации, коллективно решили, что лучше всего подходят сферы. Чтобы получить наиболее удачные вариации образов, запросили у клиента текстовые ассоциации с каждой услугой. Это стало базой, от которой смог оттолкнуться дизайнер при создании фигур. Дальше искали подходящие заготовки на стоках и дорабатывали их, используя обратную связь от клиента. Выстроенный таким образом процесс сократил работу, и в итоге оставались лишь косметические правки.
Концепция сфер сразу понравилась, так как с первого знакомства в голове легко возникали образы. Были и другие идеи, среди которых отметил для себя созвездия, но реализация задумки на сайте оказалась слишком сложной и требующей ресурсов. Не обошлось и без опроса фокус-группы.
Со сферами мы ориентировались на ассоциации. Например, сфера для направления ортопедической стоматологии напоминает подготовленные под коронки зубы, сфера ортодонтии — установленные брекеты, а гигиены — защитную профилактическую оболочку. Как и с любой идеей, при переносе из мыслей в реальный образ возникали сложности. Но в итоге, на мой взгляд, у нас всё получилось!
Результат и обратная связь от клиента
Весь процесс визуализации услуг занял около 3 недель. Дизайнеры подготовили примерно 30 решений для 11 услуг. Опыт с 3D-моделированием взяли на вооружение, чтобы использовать в работе над другими проектами.
Весь процесс работы над проектом, включая этап аналитики и проектирования, можно прочитать в подробном кейсе.
Все мы знаем: сколько людей — столько и мнений. Даже на этапе согласования не всем зашла идея со сферами, но когда был готов итоговый результат по направлениям, большинство коллег изменили своё отношение. С посетителями сайта гораздо сложнее — измерить их настроение и отношение в цифрах сложно, но конверсионные показатели, которые мы отслеживаем, стали выше. Это, конечно, результат комплексной работы, но уверен, что влияние таких фоновых элементов, как сферы, в нем есть.