---
publishYear: 2025
name: Simed
title: Редизайн модуля записи к врачу
excerpt: Провели редизайн медицинской системы для переезда в веб и улучшили пользовательский опыт.
context: |
Компания [«Симплекс»](https://simplex48.ru/simed-clinic/) разрабатывает программные системы.
Одна из таких систем — медицинская информационная система СиМед с функциями CRM. Она состоит из нескольких модулей, каждый оцифровывает и автоматизирует часть рутины в медклинике: очередь к врачу, работу персонала, документооборот, регистратуру, оплату приемов, профосмотры, складской учет, колл-центр и так далее.
isNew: true
logo:
src: ~/assets/images/portfolio/simed/logo.svg
alt: Симплекс • Логотип
link: https://simplex48.ru/simed-clinic/
image: ~/assets/images/portfolio/simed/main.png
imageAlt: Собака Павлова • СиМед • Редизайн модуля записи к врачу
thumbnail:
src: ~/assets/images/portfolio/cards/simed.svg
alt: Собака Павлова • СиМед • Редизайн модуля записи к врачу
tags:
- med
- ux-design
- prof
- mass
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн под ключ](/services/ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-design
- text: |
### Наша экспертиза
Более 30 проектов, связанных с медицинскими интерфейсам, и [15 проектных кейсов](https://sobakapav.ru/portfolio#med).
### Наши статьи о медицинских интерфейсах
collection: post
page: medical-interfaces
- collection: post
page: professional-testing
- collection: post
page: before-interface-testing
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: erna
- collection: portfolio
page: tmh
- collection: portfolio
page: avicenna
- collection: portfolio
page: onkor
- collection: portfolio
page: tis
- collection: portfolio
page: raisa
- collection: portfolio
page: m-line
- collection: portfolio
page: medmarket
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: "750 000 ₽"
time: "4 месяца"
director: "Команда заказчика получила все, чтобы развивать интерфейс СиМед без дизайнеров — сразу в коде из готовых компонентов "
metadata:
canonical: https://sobakapav.ru/portfolio/simed
title: Редизайн модуля записи к врачу
description: "Провели редизайн медицинской системы для переезда в веб и улучшили пользовательский опыт."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/simed/badge.png'
width: 1200
height: 630
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import { YouTube, Tweet, Vimeo } from 'astro-embed';
import ImageSlider from '~/components/common/ImageSlider.astro'
<TOC>
[Вводные](#anchor1) • [Бизнес-задача](#anchor2) • [Дизайн-задача](#anchor3) • [Результат](#anchor4) • [Экстра-польза](#anchor5) • [Особенности](#anchor6) • [Нюансы процесса](#anchor7) • [Итог](#anchor8) • [Отзыв, цены, сроки](#anchor9)
</TOC>
## <a name="anchor1" />Вводные
Компания разрабатывала систему как десктопное приложение под Windows, причем во времена, когда дизайн не был конкурентным преимуществом на узком рынке. Поэтому использовала нативный дизайн Windows — и ориентировалась не на последние версии ОС, а на те, которые стоят в российских клиниках. То есть, в лучшем случае — на XP.
<a href="/images/portfolio/simed/1.jpg" target="_blank"></a>
<em>Старый вид системы</em>
Со временем это виндоус-наследие стало давить, да и конкуренты тоже подпирали. Все вокруг красивые, и главврачи, конечно, это видели. Выбирают-то по одежке. К тому же, какой главврач ходит без айфона? Все уже давно привыкли к красивому и хотели такого же на работе.
В 2024 году Симплекс решил обновить систему:
- поменять технологический стек;
- переехать в веб;
- улучшить пользовательский опыт;
- провести редизайн.
С последними двумя задачами Симплекс обратился в Собаку Павлову.
<a href="/images/portfolio/simed/2.png" target="_blank"></a>
_Системные уведомления_
## <a name="anchor2" />Бизнес-задача
### Перенести систему в веб
Не продавать программу, а дать доступ к облачной инфраструктуре. Возможно, даже перейти на сервисную модель. SAAS, как говорится.
### Сделать конкурентоспособный дизайн
Такой, чтобы СиМед выглядел красиво и ускорял рутинные задачи администратора в регистратуре. Ну и лучше продавался, разумеется.
<a href="/images/portfolio/simed/12.png" target="_blank"></a>
_Список врачей_
## <a name="anchor3" />Дизайн-задачи
1. Отредизайнить под веб модуль записи к врачу и оплаты приема.
2. Подготовить библиотеку компонентов, чтобы заказчик смог самостоятельно масштабировать интерфейс и перенести в веб другие модули СиМед.
3. Сформулировать основные принципы, как разрабатывать дизайн СиМед на Ant Design.
<a href="/images/portfolio/simed/6.png" target="_blank"></a>
_Карточка врача_
## <a name="anchor4" />Результат
Заказчик получил новый дизайн на свободно распространяемой дизайн-системе Ant Design от Alibaba Group.
<a href="/images/portfolio/simed/7.png" target="_blank"></a>
_Скролл карточки врача_
Часть интерфейса он собрал еще до того, как мы завершили проект. Это было сравнительно просто:
1. Мы везде где можно использовали стандартные компоненты Ant.
2. Заказчик забирал готовый код компонентов у разработчика Ant.
3. Сразу встраивал на сайт — и все работало, без проработки дополнительных состояний и анимаций.
<a href="/images/portfolio/simed/8.png" target="_blank"></a>
_Список пациентов_
Спустя малое время у заказчика уже был готовый продукт, который можно продавать. С готовой дизайн-системой путь от дизайна до первых клиентских заявок может занять недели вместо нескольких месяцев фронтенд-разработки.
<a href="/images/portfolio/simed/13.png" target="_blank"></a>
_Выбор пациента в документе приема_
1. Собрали и описали ключевые [пользовательские сценарии](https://docs.google.com/document/d/1NCKGNn7UYOPGW7mERuuuBdfU1xOKSRTh3EdgtK_akUE/edit?tab=t.kbvbc3fn7vm4#heading=h.jvwzg8u45e8u).
<ImageSlider slides={[
'/images/portfolio/simed/4-1.png',
'/images/portfolio/simed/4-2.png',
'/images/portfolio/simed/4-3.png',
'/images/portfolio/simed/4-4.png',
'/images/portfolio/simed/4-5.png',
'/images/portfolio/simed/4-6.png',
'/images/portfolio/simed/4-7.png',
]}/>
<em>User-flow «Создание пациента». <a href="/images/portfolio/simed/4-1.png" target="_blank">Создать нового пациента</a>, <a href="/images/portfolio/simed/4-2.png" target="_blank">выбрать пациента из базы ДМС</a>, <a href="/images/portfolio/simed/4-3.png" target="_blank">новый пациент</a>, <a href="/images/portfolio/simed/4-4.png" target="_blank">такой пациент уже существует</a>, <a href="/images/portfolio/simed/4-50.png" target="_blank">добавить информацию</a>, <a href="/images/portfolio/simed/4-60.png" target="_blank">добавить паспорт</a>, <a href="/images/portfolio/simed/4-70.png" target="_blank">карточка пациента</a></em>
2. Передали заказчику макеты, которые реализуют сценарии:
- создать пациента,
- посмотреть список пациентов и найти нужного,
- выбрать врачей и услуги,
- записать пациента на прием к одному или нескольким врачам,
- составить расписание приемов пациента;
- посчитать стоимость услуг,
- заполнить документы приема и оплаты,
- подписать документы обеим сторонам: пациенту и представителю клиники.
<ImageSlider slides={[
'/images/portfolio/simed/3-1.png',
'/images/portfolio/simed/3-2.png',
'/images/portfolio/simed/3-3.png',
'/images/portfolio/simed/3-4.png',
'/images/portfolio/simed/3-5.png',
'/images/portfolio/simed/3-6.png',
'/images/portfolio/simed/3-7.png',
]}/>
<em>User-flow «Выбор врача и услуги». <a href="/images/portfolio/simed//3-1.png" target="_blank">Начало</a>, <a href="/images/portfolio/simed/3-2.png" target="_blank">выбор врача</a>, <a href="/images/portfolio/simed/3-3.png" target="_blank">выбор услуги</a>, <a href="/images/portfolio/simed/3-4.png" target="_blank">материалы</a>, <a href="/images/portfolio/simed/3-50.png" target="_blank">услуга добавлена</a>, <a href="/images/portfolio/simed/3-6.png" target="_blank">документ оплаты</a>, <a href="/images/portfolio/simed/3-7.png" target="_blank">услуга оплачена</a></em>
Микросценариев было еще больше — все перечислены в документе выше.
3. Оформили и отдали библиотеку компонентов Ant Design в Figma. Объяснили, как развернуть её у себя и использовать в работе.
<ImageSlider slides={[
'/images/portfolio/simed/5-1.png',
'/images/portfolio/simed/5-2.png',
'/images/portfolio/simed/5-3.png',
'/images/portfolio/simed/5-4.png',
'/images/portfolio/simed/5-5.png',
'/images/portfolio/simed/5-6.png',
'/images/portfolio/simed/5-7.png',
'/images/portfolio/simed/5-8.png',
]}/>
<em>User-flow «Пациент подписывает документ». <a href="/images/portfolio/simed//5-1.png" target="_blank">Создать документ</a>, <a href="/images/portfolio/simed/5-2.png" target="_blank">создать электронную версию</a>, <a href="/images/portfolio/t1/5-3.png" target="_blank">документ создан</a>, <a href="/images/portfolio/simed/5-4.png" target="_blank">подписание документа на планшете</a>, <a href="/images/portfolio/simed/5-5.png" target="_blank">подписание документа по СМС</a>, <a href="/images/portfolio/simed/5-6.png" target="_blank">сохранить подпись</a>, <a href="/images/portfolio/simed/5-7.png" target="_blank">документ подписан</a>, <a href="/images/portfolio/simed/5-8.png" target="_blank">список документов</a></em>
## <a name="anchor5" />Экстра-польза
Мы протестировали готовый интерфейс с помощью нейросетей:
1. Задали контекст и познакомили с документами проекта.
2. Составили портрет администратора клиники, его задачи и привычки.
3. Отправили его по типовому сценарию и попросили проговаривать мысли вслух.
4. Получили оценку интерфейса, выявили неочевидные UX-проблемы.
5. Подготовили внутренний отчёт с выводами, критическими проблемами и предложениями по их решению.
6. Оценили в часах, сколько времени потребуется на доработки.
<a href="/images/portfolio/simed/11.png" target="_blank"></a>
<em>Тестируем с помощью нейросети <a href="/images/portfolio/simed/4-60.png" target="_blank">экран добавления иформации о пациенте</a></em>
Звучит просто, но сперва модель потребовалось обучить на других проектах. Зато теперь у нас есть ИИ-сотрудник, который умеет подсветить слабые месте в интерфейсах.
Разумеется, настоящих людей с реальным опытом работы она не заменит. Но отлично справляется там, где и у команды, и у заказчика уже замылен глаз.
## <a name="anchor6" />Особенности
Мы двигались быстро и постепенно наращивали детализацию макетов. Это позволило заказчику:
- примерять концепты сразу в коде;
- смотреть, как ведут себя те или иные компоненты, их анимации;
- тестировать работу интерфейса до того, как он будет закончен.
<a href="/images/portfolio/simed/9.png" target="_blank"></a>
_Мини-карточка пациента_
Так, к примеру, мы перешли от модальных окон к дроверам, потому что те оказались более подходящими для Симеда. Ничего с нуля перерисовывать не пришлось — просто переехали с компонента на компонент.
<a href="/images/portfolio/simed/14.png" target="_blank"></a>
_Фильтр по пациентам_
Другая особенность проекта, которая вытекает из первой, — количество итераций. Некоторые разделы мы сделали за шесть-семь итераций, а это многовато для обычного проекта. Но в случае СиМеда было оправданно: итерации были короткими, и во время каждой мы добавляли детали, улучшающие взаимодействие администратора клиники с интерфейсом.
<a href="/images/portfolio/simed/15.png" target="_blank"></a>
_Альтернативный вид списка врачей_
<a href="/images/portfolio/simed/16.png" target="_blank"></a>
_Альтернативный вид карточки врача_
Опять же, рисовали по минимуму — брали готовые компоненты из дизайн-системы. А вот если бы рисовали, проект вышел бы в разы дороже. Или с меньшим количеством итераций.
<a href="/images/portfolio/simed/17.png" target="_blank"></a>
_Несколько врачей_
## <a name="anchor7" />Нюансы процесса
Мы — опытные разработчики медицинских интерфейсов, и на этом проекте хотели проверить, можно ли переиспользовать наработки из предыдущих интерфейсов? Их-то у нас штук двадцать. Оказалось, что можно.
Правда, к этому эксперименту мы готовились сильно заранее: собрали с десяток ЭМК, списков пациентов, разных вариантов поиска и фильтраций, карточек и форм — и все перенесли на компоненты Ant.
<a href="/images/portfolio/simed/18.png" target="_blank"></a>
_Указание ДМС и гарантийного письма_
Звезды сошлись, когда пришел СиМед и согласился использовать предложенную дизайн-систему. На созвонах мы обкатали весь процесс:
- показывали заказчику уже готовые компоненты,
- брали те, которые по общему мнению решали интерфейсные задачи,
- вставляли их макеты и заполняли актуальным для СиМеда контентом.
<a href="/images/portfolio/simed/19.png" target="_blank"></a>
_Документ оплаты. Часть услуг оплачена_
Наш подход сработал — он здорово удешевил и ускорил разработку интерфейса.
Так что частично СиМед состоит из паттернов, которые мы уже изобрели и протестировали в других МИС.
<a href="/images/portfolio/simed/20.png" target="_blank"></a>
_Документ оплаты. Часть услуг клиент получил в долг_
## <a name="anchor8" />Итог
Приятный проект завершился на высокой ноте. Разработчики на наших глазах собирали рабочий интерфейс, и это отдельное дизайнерское удовольствие — шевелить руками ожившие макеты из Фигмы.
В свою очередь, заказчик получил все, чтобы развивать интерфейс сразу в коде. Кажется, ему даже больше не нужны дизайнеры — львиная доля компонентов из старой системы приобрела новый вид и готовый код. Осталось перенести на них другие модули продукта.
## <a name="anchor9" />