Дизайн и разработка МЕДСИ SmartLab

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

На сайте SmartLab пользователь может добавить в корзину набор нужных анализов и оплатить их до посещения клиники. Это проект, созданный по принципу лабораторного супермаркета, поэтому его UX должен комфортным для шоппинга, а сам сайт должен иметь хорошую скорость и органично вписываться в стилистику продуктов МЕДСИ.
Группа компаний «МЕДСИ» — ведущая федеральная сеть частных клиник, предоставляющая полный спектр медицинских услуг — от первичного приема и скорой медицинской помощи до высокотехнологичной диагностики, сложных хирургических вмешательств и реабилитации.

ГК «МЕДСИ» включает 114 клиник по России. В их числе — 45 клиник в Москве и Московской области (клиники первичного приема, клинико-диагностические центры, детские клиники, клинические больницы, цифровые клиники SmartLab), 69 клиник в регионах России. В актив ГК «МЕДСИ» также входит медицинский велнес, служба помощи на дому. В МЕДСИ работают более 12 500 сотрудников, в числе которых более 5600 врачей. Выручка ГК «МЕДСИ» в 2021 году составила 30,1 млрд рублей.

Один из проектов МЕДСИ — цифровая лаборатория SmartLab, которая была запущена в 2021 году.
задача
1. Выделить и показать лабораторные предложения МЕДСИ
  • составить Customer Journey Map
  • разработать архитектуру раздела и каталога
  • собрать MVP и разработать дизайн
2. Отстроить SmartLab от основного сайта МЕДСИ
  • кастомизировать SmartLab под раздел лабораторного супермаркета
  • переработать UX
  • акцентировать ссылки на информационные страницы
  • уменьшить блок на мобильной версии
Полный цикл разработки
ТЕСТИРОВАНИЕ
АНАЛИТИКА
ФРОНТ И БЭК
UX
ДИЗАЙН
Для запуска SmartLab мы составили Customer Journey Map, разработали архитектуру и дизайн, собрали MVP и создали дизайн. Для разработки комфортного UX дизайнеры опирались на паттерны, которые используют маркетплейсы.
Дизайн
Дизайн SmartLab повторяет стилистику главного сайта — минимум информации и темно-бирюзовые акценты. Они появляются при наведении курсора на блок, нажатии на кнопки и управляют вниманием пользователя. На странице «О лабораторном супермаркете» дизайнер добавил элементы в форме линий, чтобы подчеркнуть цифровой стиль SmartLab.
UX
Аналитика
Для упрощения поиска мы передвинули раздел «Популярные анализы» наверх, сразу под ним поместили поиск. Аналитика показала, что на главной странице сайта МЕДСИ люди постоянно кликают по карте, чтобы найти ближайшую больницу. Для SmartLab мы тоже добавили карту. Также переработали футер и создали карту сайта исключительно по лабораторным страницам.
Интерфейс SmartLab создан по принципам Data Driven Design. Перед оптимизацией UX аналитики провели исследование в Яндекс. Метрике и Google Optimize. Мы выяснили, что показатель отказов и выходов был высоким, пользователи часто кликали по поиску и кнопке «Показать еще», до плашки с популярными анализами не долистывали, то есть найти нужный анализ было непросто.
Дизайн
Дизайн SmartLab повторяет стилистику главного сайта — минимум информации и темно-бирюзовые акценты. Они появляются при наведении курсора на блок, нажатии на кнопки и управляют вниманием пользователя. На странице «О лабораторном супермаркете» дизайнер добавил элементы в форме линий, чтобы подчеркнуть цифровой стиль SmartLab.
UX
Аналитика
Для упрощения поиска мы передвинули раздел «Популярные анализы» наверх, сразу под ним поместили поиск. Аналитика показала, что на главной странице сайта МЕДСИ люди постоянно кликают по карте, чтобы найти ближайшую больницу. Для SmartLab мы тоже добавили карту. Также переработали футер и создали карту сайта исключительно по лабораторным страницам.
Интерфейс SmartLab создан по принципам Data Driven Design. Перед оптимизацией UX аналитики провели исследование в Яндекс. Метрике и Google Optimize. Мы выяснили, что показатель отказов и выходов был высоким, пользователи часто кликали по поиску и кнопке «Показать еще», до плашки с популярными анализами не долистывали, то есть найти нужный анализ было непросто.
Разработка
SmartLab превратился в полноценный сайт, который связан с главным сайтом только пунктом меню. Он разработан на стандартном стеке: PHP/Bitrix/JavaScript. Для регистрации логов использовали Elastic Kibana, для функционала поиска — SphinxSearch, для настройки пуш-уведомлений клиентам — Redis. Фронтенд написан на Vue. js с использованием JQuery.
Результаты
человеко-часов отработала команда
5 000
посещений за февраль-апрель 2022
111 830