MedEvrika (App)

Приложение MedEvrika. Задача была — облегчить пользователю работу с платформой на мобильных устройствах.

Medevrika (app)

Приложение MedEvrika. Задача была — облегчить пользователю работу с платформой на мобильных устройствах.

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

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

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

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

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

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

Данный этап не отличался от этапа анализа других проектов (МедЭврика и Медисити) и включал в себя:

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

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

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

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

Проектирование интерфейса проходило в 3 этапа: низкодетализированный прототип, высокодетализированный прототип и финальное визуальное оформление с учетом правок, которых на разных этапах было немало. Интерфейс проектировался сразу в светлой и темной темах и с учетом различий платформ: спроектированы версии для Android и iOS.

Развитие ДС

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

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

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

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

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

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

Макеты

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

Вход/авторизация

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

Загрузочный экран, авторизация, вход и регистрация. Светлая (дефолтная) версия.

Те же экраны. Темная версия.

Основные разделы.

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

Экран основных разделов. Светлая версия.

Экран основных разделов. Темная версия.

Раздел клинических рекомендаций.

На данных скриншотах представлены список клинических рекомендаций, экран конкретной клинической рекомендации в различных состояниях (по умолчанию, с занесенным в конспект отрывком, а также в режиме "Конспекта"). Режим конспекта нужен пользователю для отображения частей контента, которые были занесены в конспект либо закреплены в закладках. Все это нужно для дальнейшей работы с контентом, чтобы лучше усвоить информацию. Кроме того, внутри каждой страницы клинической рекомендации есть часть с AI-ассистентом, а также есть и темная тема.

Раздел клинических рекомендаций. Светлая версия.

Раздел клинических рекомендаций. Темная версия.

Раздел работы с заметками.

Выделенные и отмеченные пользователем части контента мы видим в разделе "Заметки", там же мы можем как удалить все заметки (эта возможность предусмотрена в каждом из подразделов и шагов редактирования контента), так и работать с определенной, редактируя ее. Для редактирования заметки предусмотрен небольшой встроенный текстовый редактор, чтобы заметка была информативной.

Раздел Заметки. Светлая версия.

Раздел Заметки. Темная версия.

Настройка AI-ассистента.

В этом разделе пользователь имеет возможность задать нужные ему параметры для дальнейшей работы с AI-помощником. Мы можем выбрать определенную модель помощника, прописать конкретный промпты или настроить все от и до самостоятельно.

Настройка AI-ассистента. Светлая версия.

Настройка AI-ассистента. Темная версия.

Чат с AI-помощником.

Чат имеет 2 режима: "Общие знания" и "Анализ контента". Внутри клинической рекомендации доступен еще и дополнительный режим — "Поиск по контенту". После того как пользователь задал вопрос, помощник обрабатывает его и выдает как короткий, так и подробный ответ. Кроме того, есть широкий функционал для работы с помощником: поиск по чатам и сохраненным чатам, настройки, текстовая и видеоинструкция, а также история чатов, чтобы в любой момент вернуться к нужному разговору. Также можно создать новый чат. Как и все приложение, чат есть в светлой и темной версиях.

Меню чата, чат по умолчанию и во время набора. Светлая версия.

Чат с AI-помощником. В процессе и результат работы с ним. Светлая версия.

Меню чата, чат по умолчанию и во время набора. Темная версия.

Чат с AI-помощником. В процессе и результат работы с ним. Темная версия.

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

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