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

• О клиенте

• Задача

• Бизнес-анализ

• Конкурентный анализ

• Проектирование

• Дизайн

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

• Результат

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

• Семейная стоматология Михаила Агами (Стоматология AMBC);

• Клиника АГАМИ (Стоматология АГАМИ).

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

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

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

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

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

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

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

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

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

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

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

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

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

Работа над дизайном включала в себя несколько этапов: сборку мудборда, подготовку дизайн-концепции, дизайн всех страниц и адаптивов, работу над 3D-формами.

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

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

Клиент остановил свой выбор на блочной структуре сайта с популярной шрифтовой парой Arial для заголовков и Manrope – для основного текста. Из графических элементов ближе всего оказался вариант с 3D иллюстрациями.

Определившись с общей стилистикой, приступили к дизайн-концепции.

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

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

Финальный вариант стал светлее, чище и лучше расставляет смысловые акценты

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

​​При создании фотографий для сайта команда клиента опиралась на результаты исследования, проведённого для Стоматологии AMBC.

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

Подробнее об исследовании — в кейсе Стоматологии AMBC.

На основе ранее полученных данных доработали карточки врачей. Вместо специализации предложили сразу указывать, в решении каких проблем могут помочь врачи. Такой подход, ориентированный на пользователя (user-centered design), помогает потенциальным клиентам на этапе выбора нужного специалиста.

Плюсом добавили теги с ключевой информацией о враче — его опыт работы и звания (например, кандидат медицинских наук, топ-3 ортодонтов Москвы). Так мы подчёркиваем профессионализм врача и способствуем достижению одной из ключевых целей нового сайта.

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

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

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

Блок про формирование стоимости раскрывает один из главных принципов клиники — прозрачное ценообразование.

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

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

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

Для меню в мобильной версии разработали 3D-иконки, чтобы сохранить динамику форм на всем сайте и во всех разрешениях.

Разработали сайт, который стал визитной карточкой компании.

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

Функциональная страница с ценами не только отвечает на вопрос «Сколько это стоит?», но и подробно раскрывает, что входит в каждую услугу.

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