Medevrika

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

Medevrika

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

Задачи проекта

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

Этапы работы над проектом

Ознакомление с проектом

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

Получив информацию, перешел к следующим этапам работы.

Анализ проекта

Следующим этапом стал полный аудит проекта. На этом этапе моими задачами были:

  • Полный аудит проекта
  • Анализ флоу и технического функционала
  • Анализ конкурентов
  • Понимание картины "среднего пользователя"
  • Поиск болей пользователя

Первичная организация

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

Проектирование интерфейса

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

Развитие ДС

Одновременно с проектированием интерфейса продолжалось и развитие дизайн-системы. Был сделан фокус на компоненты, стили, токены, чтобы обеспечить консистентность интерфейса, ускорение разработки проекта и внедрение новых фич.
За все время было разработано более 500 компонентов.

Тестирование

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

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

Заключительные мероприятия

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

Макеты

В данном блоке приведены макеты проекта. Так как проект очень большой, то для каждой его важной части я буду выделять по 1–3 скриншота с пояснениями, чтобы не делать кейс еще длиннее.

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

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

Каталог клинических рекомендаций

Данная страница представляет собой каталог клинических рекомендаций. Для получения более точного результата есть фильтр по параметрам: статусу клинической рекомендации, году внедрения, возрастной группе, статусу действия и т. д. Кроме того доступен поиск по алфавиту.
Страница каталога клинических рекомендаций
Фильтр по клиническим рекомендациям.

Контентная часть интерфейса

Типовая страница клинической рекомендации. Имеет разнообразный функционал для работы с контентом (сохранение важной части, цитирование, поиск по странице и т. д.), а также встроенный AI-помощник, который работает с темой страницы. Как и весь сайт, страница имеет помимо светлой темы еще и темную. На данный момент спроектировано 304 экрана. Ниже будут приведены некоторые из них для наглядности.
Часть страницы конкретной клинической рекомендации.
Эта же страница, после выделения и сохранения заметок.
Интерфейс работы с заметками.

Страница поиска препаратов

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

Страница поиска понятий

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

Страница AI-помощника

Эта страница представляет собой минималистичный интерфейс: поле ввода с двумя режимами — "Общие знания" и "Анализ контента". Первый анализирует общую информацию из сети, второй — весь массив данных внутри сервиса. Также слева расположено боковое меню для управления чатом. Для кастомизации под свои нужды присутствуют настройки чата.
Чат с ИИ-помощником.
Настройки чата.

Итоги проекта

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