Corbo Chiropractic
Цифровое обновление
медицинской клиники
Полный редизайн веб-сайта в более интуитивно понятный, ориентированный на конверсию сайт, который соответствует бренду клиники и лучше обслуживает конечных пользователей.
UI enchancement
UX design
CRO
B2C
Interaction Design
COMPANY
Corbo Chiropractic
ROLE
UX Designer
EXPERTISE
UX/UI Design
YEAR
2025
Индекс
Проблематика
У Corbo Chiro был базовый сайт с плохой навигационной структурой, что привело к ряду проблем с пользовательским интерфейсом и непоследовательному визуальному брендингу на всех страницах.
Моей задачей было полностью переработать дизайн сайта, изменив при этом структуру представления большей части информации для большей ясности, удобства поиска и визуальной привлекательности.
Цели
Реструктурировать контент целевой страницы, чтобы повысить коэффициент конверсии, сократить длину прокрутки и улучшить находимость контента
Создать визуально привлекательный дизайн, соответствующий бренду Corbo Chiropractic и его целевой аудитории
Проектные решения и обоснование
Одна из главных проблем клиники — огромный объём контента. Их девиз, безусловно, был «чем больше, тем лучше».
Задача заключалась в том, чтобы перепроектировать и реструктурировать информацию и макет таким образом, чтобы контента было ровно столько, чтобы:
01
вызвать интерес к услугам для новых и существующих клиентов
02
сформировать правильные ожидания от обслуживания
03
предоставлять образовательную информацию БЕЗ длинных прокруток и многочисленных страниц, которые кажутся перегруженными
Страница «Услуги» до редизайна
corbochiro.com
Я пошла по пути упрощения и решилa избавиться от отдельной страницы для каждой услуги, расположенной во вкладке «Услуги» в меню навигации.
Это создавало разрозненность по сравнению со страницами «Услуги», которые и так уже содержали много информации о каждой услуге.
Ключевые дизайнерские решения
Интерактивные карты для реструктуризации контента
Улучшенная читаемость и снижение когнитивной нагрузки за счет более быстрой прокрутки и группировки информации на основе гештальт-принципов близости и сходства, сохраняя при этом наиболее важное содержание и информацию
Обеспечение визуального единообразия (цвета, шрифта, размера и формы каждой карточки) для дальнейшего укрепления связи между различными карточками и их
принадлежности к одной категории - Услуги
Сохраняет свободное пространство на странице, разместив дополнительную информацию в области наведения курсора (см. видео выше)
До
После
Редизайн лэндинга
Задача #1
Сохранение идентичности бренда для обеспечения преемственности, интуитивности и узнаваемости бренда
Решение: визуальные отсылки к природе, оттенки одной цветовой палитры, плавные переходы, фотографии, передающие суть бренда.
Несмотря на отсутствие устоявшегося брендбука, у Corbo Chiropractic были основные цвета, логотип и фирменный стиль, которые были в их промо материалах, офисе, веб-сайте и в маркетинговых каналах. Я работала вместе с клиентом, чтобы обеспечить преемственность опыта и одновременно визуальное развитие.
Немного
стратегии
задача #2
Создание своевременной стратегии призыва к действию, которая направляет пользователей в пути, обеспечивая плавное oриентирование за пределами прямых навигационных точек.
Исходная целевая страница содержала только одну кнопку с призывом к действию «Забронировать сейчас». С одной стороны, этого может показаться достаточно. В конце концов, это основное действие, которое мы хотим, чтобы пользователи совершили. Но было важно так же рассматривать путь пользователя более целостно.
Если это новый пользователь, и к тому же ещё не клиент компании, он, скорее всего, захочет получить больше информации. Целевая страница дает таким пользователям не только информацию, но и продуманные подсказки для перехода на другие страницы. Я добавила такие призывы к действию как «Познакомьтесь с командой» (“Meet the team”) и «Изучите все услуги» (“Explore all services”) в соответствующие разделы, которые позволят пользователям ознакомится подробнее с компанией и ее услугами и выработать доверие.
Тем не менее, я так же оставила кнопку «Забронировать сейчас» в самом первом блоке страницы. Хотя новые пользователи, скорее всего, не будут готовы к бронированию сразу, это даст быстрый доступ постоянным пользователям, не требуя дополнительных усилий с их стороны.
Перед началом редизайна я просмотрела всю доступную аналитику сайта. Оказывается:
43%
трафика приходилось на
мобильные устройства
9:41
Задача #3
Сосредоточиться на мобильной оптимизации и обеспечить адаптивность на различных типах устройств
Вот некоторые очевидные изменения, которые я внедрила в своем редизайне мобильной версии:
Правильный интервал — достаточные отступы/поля для комфортного чтения и визуальной иерархии
Читабельная типографика — уменьшение размера шрифта
Сенсорные кнопки — убедитесь, что размер кнопок и ссылок не менее 44x44 пикселей для удобства нажатия
Трудность
Перевод интерактивного веб-элемента в интуитивно понятный и функциональный мобильный дизайн
Интерактивные карты выполняли одну очень важную функцию: предоставляли больше места на странице и сокращали время прокрутки, одновременно гарантируя пользователю возможность легко получить дополнительную информацию о предоставленной услуге (с помощью наведения курсора — см. GIF-изображение ниже).
Перенос этой функциональности на мобильные устройства был особенно сложным из-за технических ограничений вертски в старом редакторе Wix, на котором создан сайт.
Решение
Изменение приоритетов иерархии контента
Чтобы сократить прокрутку и гарантировать, что одна карточка умещается на одном экране, я решила сократить отображаемую информацию. Ссылка «Читать далее» ("Read more") ведёт пользователя в нижнюю часть страницы, где я добавил раздел «Подробная информация», содержащий всю информацию о карточке и состояниях наведения курсора в веб-странице.
Такая иерархия контента с вспомогательными ссылками для удобной навигации сверху вниз по разделам позволит пользователю легко получить дополнительную информацию об услуге, не прокручивая весь контент для каждой услуги. Аналогичным образом, пользователи, не заинтересованные в дополнительной информации, смогут найти ссылку для бронирования нужных услуг всего за несколько секунд после перехода на страницу «Услуги» на мобильном устройстве.
«Забронировать сейчас» ("Book now") vs.
«Записаться на хиропрактику» ("Book Chiropractic")
В разделе «Подробная информация» я добавила кнопку бронирования с названием конкретной услуги так как:
— информация об одной услуге не помещается на одном экране мобильного устройства и требует прокрутки
Не видя названия услуги, пользователи могут запутаться и нажать «Записаться» не на ту услугу. Кнопка «Записаться на хиропрактику» помогает пользователю напомнить, где именно он находится на странице, и поддерживает навигацию.
9:41
Результаты
Больше вовлеченных посетителей, которые остаются на сайте дольше и реже уходят
255%
Увеличение средней продолжительности сеанса
12%
Снижение показателя drop off
Визуал
