Институт ревматологии
rheumatolog.su ↗Государственное учреждение, объединяющее несколько направлений: науку, клинику и образование. Необходимо соблюсти требования из приказа по наполнению сайта относительно постановлений МЗ РФ и Минобрнауки о наполнении сайта организации информационным контентом.
Моя роль
UX/UI-дизайнер (переработка структуры, разработка дизайна с учётом масштабирования, согласование со стейкхолдерами)
Период
2024–2025
Команда
Frontend-разработчик
Backend-разработчик
Медицинские эксперты
Руководитель проекта
UX/UI-дизайнер
Проблемы и результаты
Информационная свалка
Новые разделы добавлялись в меню без поддержки структуры. Образовалась чрезмерно глубокая иерархия, где в одном меню соседствуют страницы из разных областей.
Решение
Провела сегментацию аудитории, выделила 3 чётких направления — наука, клиника, образование — и распределила страницы по ролям пользователей — пациенты, специалисты, абитуриенты.
Нарушение правил типографики
«Простыни» текста без подзаголовков, мелкий шрифт, отсутствие контраста.
Решение
Тексты структурированы, выделены подзаголовками для быстрого сканирования текста пользователями.
Отсутствие мобильной версии
Решение
Продумано поведение элементов и созданы адаптивные макеты под 4 разрешения экрана.
Цель
Сократить путь пользователя до получения необходимых инструкций по записи на приём, упростить поиск нужного специалиста.
Бенчмаркинг
Был проведён анализ сайтов других организаций, в которых сочетаются процессы медицины, образования и науки с целью выявления лучших практических решений, чтобы учесть их при разработке вайрфрейма.
Приведен анализ структуры блоков главных страниц.
Выводы
Добавить блок с цифрами на главный экран, т.к. исследования показывают, что такой блок укрепляет доверие пользователей.
Блок со схемой проезда также решено вынести на главную страницу, т.к. приоритетно организация ведёт очные приёмы.
Структура
Ниже представлена часть структуры, на которой перечислены типы страниц будущего сайта. Фиолетовым выделены страницы, которым нужен будет макет. Остальные страницы заполняются через CMS с помощью шаблонных стилей, которые разработаны специально с учётом наличия CMS.
Реорганизация структуры сайта может плохо сказаться на SEO. Поэтому у многих страниц остались прежние URL-ссылки, сохранено большинство заголовков и мета-теги.
Оптимизация сценария поиска врача: от бесконечного скролла к целевому действию
Проблемы:
-
Есть поиск только по фамилии, (если пользователь знает врача, то найдёт), в сумме с отсутствием на карточке врача указания специальности, выбрать специалиста без дополнительных знаний — проблематично.
-
Большие карточки — 2 на экран. Это приводило к бесконечному скроллу.
Гипотеза 1
Если мы будем искать не только по имени, то пациент найдёт нужного врача быстрее
Решение
Проведён бенчмаркинг, по результатам которого добавлены фильтры поиска по специальности врача и направлению лечения.
Результат
Увеличилось количество заявок в личном кабинете с выбором конкретного специалиста на 30%.
Гипотеза 2
Если на экране будет размещено больше врачей одновременно, то эффективность просмотра для пользователя увеличится.
Решение
Переделать сетку на четырёх колоночную и сделать карточку компактной.
Результат
Проведён A/B тест, в котором 7 из 10 пользователей отметили, что просматривать врачей в сетке на четыре колонки быстрее и удобнее, чем в 1 колонке.
Гипотеза 3
Если мы будем выводить рейтинг и специализацию врача сразу на его карточке, то снизится нагрузка на контактный центр.
Решение
Переделана карточка врача, на неё сразу выведена дополнительная информация.
Результат
Гипотеза подтвердилась — мы увидели снижение числа обращений в контактный-центр по уточнению специализации врача.
Решения от которых пришлось отказаться:
Одной из идей был сценарий, при котором пациенту было бы доступно расписание врача и выбор времени (тут же в карточке врача). Но разработчики сказали, что реализовать функционал из личного кабинета на страницах сайта в существующие сроки не представляется возможным.
Дизайн-система
Дизайн построен на принципах атомарного подхода и системы компонентов. Это позволяет сократить время разработки.
Например, карточка врача используется как на странице, где перечислены все врачи, так и на странице с подробным описанием врача и на странице подразделений (чтобы показать заведующего и сотрудников подразделения).
Реорганизация хедера
Приоритизация целевых действий
-
Ссылки «Как записаться» и «Личные кабинеты» терялись в общем массиве текста.
-
Пункт «Версия для слабовидящих» вынесен в правый верхний угол и снабжён иконкой очков. В старой версии это была просто текстовая ссылка, которую сложно заметить. Теперь она соответствует стандартам доступности госучреждений и медицинских организаций.
Уменьшение количества ссылок в меню:
-
помогает избежать паралича выбора
-
является следствием чёткого разделения аудитории сайта на категории
-
готовит хедер к адаптивной вёрстке
Создание графики
Для этого проекта были подобраны фотографии, предоставленные заказчиком, сделана ретушь, сделана цветокоррекция.
Растровая графика создана с помощью нейросети Recraft и доработаны в Photoshop. Векторная графика также была создана в Recraft.
Мобильная версия
Структура страниц продумана так, чтобы её можно было легко адаптировать. Макеты всех страниц были сделаны для брейкпоинтов 1920px, 1024 px, 768 px и 360 px.
Обсуждение с разработчиками
Провела дизайн-ревью с разработчиками до передачи макетов — уточнили, какие части макетов динамические, а какие статичные.
Также в макетах учтены состояния, когда контент выходит за пределы поля: длинные заголовки страниц, ФИО, названия карточек. Все состояния элементов также есть в макетах.
Результаты
-
Реорганизована структура сайта, благодаря чему навигация стала понятнее.
-
Разработана масштабируемая дизайн-система и адаптивные макеты (160+ экранов) для всех ключевых устройств, что упростило дальнейшее развитие проекта.
-
Оптимизирован сценарий поиска врача: после внедрения новых фильтров количество заявок с выбором конкретного специалиста выросло на 43%.
-
Улучшена читаемость и доступность: переработаны типографика, меню сайта.
-
После введения сайта сверстала более 100 страниц дополнительно, используя разработанные компоненты.