Дизайн сайта международной сети лабораторий Хеликс

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

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

Новый процесс оформления заказа

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

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

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

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

Здесь действуют медицинские регламенты:

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

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

Обновление акций и скидок

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

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

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

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

Обновление карты

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

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

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

Результат

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