Как создать удобный и современный сайт для медицинского сервиса? Разбираем кейс MedCare

Наши клиенты из MedCare запустили MVP, разработанный только программистом, и быстро поняли: что-то не так. Тогда они обратились к нам за исправлением ошибок и приведением дизайна в порядок.

В рамках этого проекта нам предстояло:

- Продумать пользовательский путь и недостающие UX-сценарии;

- Подготовить дизайн-концепт, чтобы согласовать наше видение нового дизайна с заказчиком;

- Обновить UI/UX дизайн, используя некоторые наработки из старых макетов;

- Отрисовать экраны для новых функций;

- Сделать адаптивный дизайн для мобильной версии сайта;

- Собрать UI-kit со всеми компонентами интерфейса, чтобы разработчикам было проще поддерживать сайт.

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

К нам обратилась компания MedCare — медицинский сервис, который помогает пациентам вызвать медсестру на дом для забора анализов. MedCare агрегирует предложения различных лабораторий, позволяя выбрать нужные исследования в одном месте. Это удобно: если анализы требуются в нескольких лабораториях, медсестра заберет биоматериал за один визит и передаст их в нужные центры. Компания работает в Москве и Московской области. 

Среди партнеров MedCare ведущие лаборатории: INVITRO, KDL, LabQuest, Metametrix и другие, а в каталоге свыше 2000 исследований — от общего анализа крови до исследования генома, которое выявляет риски по здоровью.  

Каталог медицинских исследований на сайте MedCare:

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

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

Макет из Figma заказчика со старой версией сайта — так выглядела главная страница:

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

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

Чтобы сайт MedCare не проигрывал конкурентам, заказчики решили привлечь внешнюю команду с сильной экспертизой в UI/UX дизайне, которая переработает логику сайта, спроектирует понятный пользовательский путь и улучшит визуальную составляющую. 

Этой командой стали мы, Purrweb. У нас уже был опыт работы с медицинскими проектами: мы разработали платформу Lytic Health, которая помогла заказчикам привлечь $400 000 инвестиций, веб-приложение Biogeek для анализа лабораторных исследований и сервис онлайн-консультаций с психотерапевтами «Поговорим.онлайн». Благодаря этому мы понимали, какие задачи должен решать медицинский веб-сайт — и с точки зрения бизнеса, и для удобства пользователей.

Чтобы продумать логику работы сервиса, мы всегда привлекаем системного аналитика — так было и с MedCare. Он подготовил BPMN-диаграммы — специальные схемы, которые показывают, какие шаги проходит пользователь и как обрабатываются данные внутри системы. 

BPMN-диаграмму можно сравнить с картой, где видно, какие действия происходят, в каком порядке и как они связаны между собой:

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

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

Так выглядели вайрфреймы для сайта MedCare:

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

Заказчик хотел сохранить несколько элементов из старого дизайна при обновлении сайта:

- Цветовую палитру — белый фон и зеленые акценты для кнопок с призывами к действию;

- Блочную структуру страницы;

- Логотип;

- Визуальный стиль баннеров и карточек — с фотографиями людей.

Мы переосмыслили эти элементы, чтобы создать современный, чистый и визуально привлекательный дизайн. Покажем на примерах.

◾️ Поработали с цветами и добавили более современную и интересную палитру. 

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

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

◾️ Сделали интерфейс дружелюбнее за счет скруглений и более мягких форм. Изначально в дизайне использовались острые и брутальные формы и геометрический шрифт Raleway. Вместе эти решения создавали ощущение строгости и отстраненности. 

Некоторые элементы со старой главной страницы:

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

Дизайн карточек на главной странице, которые рассказывают о преимуществах MedCare:

Дизайн корзины:

Для типографики выбрали шрифт Montserrat Alternates — он выглядит более плавным и дружелюбным. 

Разные начертания шрифта Montserrat Alternates, которые мы используем на сайте:

◾️ Органично вписали фотостиль в дизайн главной страницы. Фотографии вызывают доверие и делают стиль сайта более живым и близким пользователям. В хиро-пейдж на главной странице разместили фото медицинского специалиста, чтобы подчеркнуть профессионализм компании, а также добавили снимки, связанные с медициной.

Хиро-пейдж:

Карточки с акциями:

◾️ Добавили интерактивные элементы и сделали анимацию для раздела с блогом, которая подскажет, какие анализы сдавать при разных симптомах. 

◾️ Собрали все элементы в UI-kit — библиотеку готовых компонентов, чтобы ускорить добавление новых страниц и блоков, сохраняя единый стиль дизайна.

Один из блоков UI-kit — кнопки в разных состояниях:

На платформе есть две роли: пациент и медсестра. Страницу пациента могут просматривать все пользователи, а доступ к интерфейсу медсестры открыт только зарегистрированным специалистам.

Старшая медсестра выступает супер-админом и может просматривать вызовы младших медсестер:

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

Пройдемся по основным флоу со стороны пациента.

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

Если пользователь авторизован, с этой страницы он может сразу перейти в корзину. Если нет — предлагаем ему сначала ввести свои данные, и только потом перейти в корзину:

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

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

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

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

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

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

Большое число пользователей заходит на сайт MedCare с телефонов, поэтому мы сделали адаптивный дизайн для мобильной версии сайта.

Страницы сайта для мобильной версии:

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

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

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