Два продукта — один подход: UX-аудит и редизайн цифровых сервисов для генетической лаборатории

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

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

Несколько интересных фактов о проекте:

— Ожидание результатов ДНК-теста может занимать несколько месяцев, и интерфейс должен поддерживать пользователя всё это время;

— Личный кабинет был ключевой точкой взаимодействия с сервисом;

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

Контекст и задачи

На старте проекта ключевая часть пользовательского пути — личный кабинет — работала через WebView. Так называют технологию, которая позволяет встроить веб-страницы внутри приложения. Из-за этого интерфейс загружался медленнее, казался разрозненным, а переходы между экранами были менее предсказуемыми для пользователя. Ситуацию усложняла и специфика самого продукта. ДНК-тест — это не мгновенный сервис: между покупкой набора и получением результатов проходит длительное время. В этот период пользователь не может активно «двигаться» по продукту, но при этом ожидает понимать:

— на каком этапе он находится;

— что сейчас происходит с его анализом;

— какие действия доступны и зачем они нужны.

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

Перед нами стояли такие задачи:

— проанализировать текущий личный кабинет и выявить проблемы в навигации и восприятии;

— описать ключевые сценарии и задачи пользователя на разных этапах пути;

— разработать структуру экранов сервиса так, чтобы пользователь легко понимал, где он находится и что можно сделать на каждом этапе;

— заложить основу для дальнейшего развития личного кабинета — через продуманные UX-решения.

Работу мы начали с анализа и постепенно двигались от общего понимания продукта к более конкретным решениям — через UX-аудит, карту пользовательского пути и черно-белые вайрфреймы.

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

UX-аудит и анализ существующего решения

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

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

Карта пользовательского пути и работа с состояниями пользователя

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

Чтобы зафиксировать эту логику, мы построили карту пользовательского пути (CJM) и начали смотреть на продукт не через набор функций, а через последовательность состояний.

Мы выделили несколько базовых этапов взаимодействия с сервисом, среди которых, например:

• выбор и покупка теста;

• ожидание доставки;

• ожидание результатов анализа;

• работа с результатами и сервисом дальше.

Для каждого этапа мы описали:

• контекст пользователя и его ожидания;

• ключевые вопросы, которые у него возникают;

• возможные точки напряжения и неопределенности;

• сценарии, которые интерфейс должен поддерживать в этот момент.

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

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

Вайрфреймы и пересборка структуры личного кабинета

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

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

В процессе работы мы:

• пересобрали структуру экранов с опорой на состояния пользователя;

• упростили навигацию и связи между разделами;

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

• заложили основу для сценариев, которые помогают пользователю ориентироваться во время ожидания результатов.

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

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

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

Редизайн мобильного приложения медицинского сервиса

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

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

Мы работали с готовым продуктом и действовали максимально бережно:

• сохраняли существующие пользовательские флоу;

• обновляли визуальный язык и компоненты интерфейса;

• приводили экраны к единой системе — по цветам, типографике, отступам и состояниям;

• прорабатывали все экраны и их состояния так, чтобы интерфейс был готов к передаче в разработку.

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

Редизайн интерфейсов и дизайн-система

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

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

В рамках этого этапа мы:

• переосмыслили цветовую палитру и типографику с учетом обновленной айдентики;

• унифицировали кнопки, поля ввода, иконки и состояния интерфейса;

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

• проработали экраны по пользовательским флоу — от главных сценариев до вспомогательных состояний.

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

В проекте с личным кабинетом для ДНК-тестов мы:

• разобрали текущие UX-проблемы и точки напряжения;

• описали пользовательские сценарии и состояния;

• собрали CJM, чтобы увидеть путь пользователя целиком;

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

В проекте с медицинским приложением:

• привели интерфейсы к единому визуальному стилю;

• собрали и расширили дизайн-систему;

• детально проработали ключевые пользовательские флоу и все состояния экранов;

• добавили недостающие сценарии, которые делают повседневное использование приложения более цельным и предсказуемым.

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

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