Дизайн единого сайта университетской клиники ПИМУ: пять институтов в одном интерфейсе

Клиника из пяти институтов

ПИМУ – Приволжский исследовательский медицинский университет Минздрава России. Он находится в Нижнем Новгороде и входит в тройку самых востребованных медицинских вузов страны. Кроме учёбы и науки, у университета есть своя клиника, и пациентов в ней принимают пять подразделений: Институт педиатрии, Институт стоматологии, Институт реабилитации, Институт травматологии и ортопедии и Центр ментального здоровья. Все они работают по разным адресам.

Почему сайты пришлось объединять

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

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

Что должно было получиться

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

Ещё три условия:

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

Восемь решений

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

Главная страница

Институты видны сразу и в двух местах: вкладками в шапке и плитками под слайдером. Слева постоянное меню: переключатель «Взрослым / Детям», «Услуги и цены», «Врачи», «Пациентам», «Контакты», «О клинике», вход в личный кабинет и кнопка «Записаться на приём». Во второй строке шапки собраны расписание, новости, отзывы, документы, вопросы и ответы, телефон колл-центра и версия для слабовидящих.

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

Как не потеряться между институтами

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

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

Взрослым и детям

Переключатель «Взрослым / Детям» стоит в левой колонке и доступен на любой странице. Он учитывает выбранный институт: если человек находится на странице Института травматологии и ортопедии и переключается на детское направление, он увидит детские услуги именно этого института.

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

Поиск по сайту

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

По общим запросам выдача бывает большой. Например, по запросу «МРТ шейного отдела» сайт может показать и саму услугу, и врачей, которые проводят процедуру, и новость о новом оборудовании. Поэтому над результатами есть теги: «Врачи», «Услуги и цены», «Новости», «Акции». Рядом счётчик результатов и выбор института, чтобы сузить выдачу ещё сильнее.

Прайс с подразделами

У одной услуги бывает несколько вариантов проведения, например стандартная или расширенная диагностика. Если вывести весь прайс одним списком, он получится очень длинным, и нужная строка потеряется.

Поэтому варианты мы сгруппировали: у такой услуги есть подразделы, которые раскрываются по нажатию. В каждой строке код по прейскуранту, цена и кнопка «Записаться». Услуги можно искать по врачу, специальности или направлению.

Для льготных категорий граждан на странице есть отдельная кнопка. Она открывает на новой странице документ со скидками и приказ о льготных категориях.

Отзывы и запись на приём

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

Сама запись занимает три шага в одном окне:

1. выбор института;
2. направление и удобная дата приёма, можно оставить комментарий;
3. имя, фамилия и телефон.

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

Мобильная версия

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

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

Итог

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

Если сайт вашей клиники разросся и пациенты в нём путаются, начните с UI/UX-проектирования: соберём структуру и прототипы, а потом сделаем дизайн. Если сайт просто устарел, посмотрите редизайн сайта.