Флагман · личный продукт
MedLog
Privacy-first медицинский журнал семьи. Записывать визиты, лекарства и анализы — локально, без передачи данных в облако. От гипотезы и UX-аудита до живого PWA.
- Роль
- Research, дизайн, сборка
- Стек
- React 19 · PWA · local-first
- Платформа
- Веб / iPhone-first
- Статус
- Живой прод
Проблема
Семьи теряют медицинскую историю, а пациенты на сложных схемах забывают, что и когда принимали.
Выписки в Google Drive, анализы в почте, заметки педиатра в WhatsApp — на поиск истории уходит 20 минут. Бабушка забывает, приняла ли таблетку. Не вспомнить дату последнего анализа ребёнка.
Существующие сервисы (СберЗдоровье, Яндекс Здоровье) — это маркетплейсы клиник, а не личный архив: требуют аккаунт и собирают данные. Личного, приватного, локального инструмента — нет.
Исследование
-
Конкурентный аудит
Apple Health, MyChart, СберЗдоровье — все облачные, требуют аккаунт. Ниши «локальный личный архив» никто не закрывает.
-
Типографика под кириллицу
Inter признан слабым для кириллицы (type.today). Перешла на Source Sans 3 (UI) + IBM Plex Mono (данные и моно) — качество на кириллице, читаемость на мелких размерах.
-
Паттерны и доступность
Исследование NN/g: glassmorphism проваливает контраст на медданных. On-grey-элевация и тональные слои — читаемее.
Точка отсчёта — UX-аудит по WCAG 2.2
Аудит вскрыл провалы контраста на стекле, невидимый focus-ring, отсутствие alt-текстов и «тихое» закрытие форм без обратной связи. Это стало триггером редизайна.
Гипотеза
Local-first + узнаваемые метафоры + доступный минимализм = инструмент, которому доверяют чувствительные данные.
Процесс · решения и трейд-оффы
Главное в кейсе — не картинки, а «почему так». Каждое решение я могу защитить и назвать, чем за него заплатила.
Local-first, без бэкенда
Медданные — чувствительные. Данные живут в браузере (localStorage + IndexedDB), без регистрации и сбора. Приватность по умолчанию.
Чем заплатила: Нет синка между устройствами — осознанно отложено.
Шеринг через QR в hash-фрагменте
Ссылка для врача кодируется в #-фрагменте URL — он не уходит на сервер. Можно ограничить срок и объём.
Чем заплатила: Длина payload ограничена — режем до активного и важного.
Органайзер таблеток (скевоморфизм)
Сетка 7 дней × приёмы — узнаваемая метафора аптечной коробки. «5/7 принято» видно сразу, без графиков. Низкая когнитивная нагрузка для пожилых.
Чем заплатила: Выглядит менее «трендово», чем флэт-чарты — но понятнее.
Де-стекление → shadcn-минимал
Glassmorphism проваливал контраст на медданных (исследование NN/g). Перешла на сплошные карточки, on-grey-элевацию, тёплую палитру.
Чем заплатила: Пришлось переписать токены и компоненты в середине проекта.
Soft-delete вместо удаления
Медзаписи не должны исчезать навсегда. Помечаю deletedAt, селекторы фильтруют. Возможность восстановить.
Чем заплатила: Накопление данных — нужен будущий cleanup.
PIN-гейт на цикл-лог
Чувствительные данные цикла скрыты за SHA-256 PIN и исключены из шеринга и PDF. Модель «скрытых фото» iPhone.
Чем заплатила: Данные в IndexedDB пока не шифруются — ограничение зафиксировано.
Решение
Чистый shadcn-минимал, тёплая палитра, действие-ориентированные CTA («Записать визит»), 48dp тач-таргеты.
Результат
61 → 7 ✓
Все 7 критичных ошибок аудита закрыты редизайном: lang, focus-ring, alt-тексты, контраст, обратная связь форм.
≥ 90
Целевой Lighthouse PWA / Accessibility — следующий замер после PWA-фазы.
5 чел.
Юзабилити-тест на 5 участниках — запланирован как следующий шаг (честно: ещё не проведён).
Что бы сделала иначе
Зафиксировала бы дизайн-направление раньше — палитра менялась трижды (mint → navy → blue), это стоило переписывания токенов. И провела бы юзабилити-тест до редизайна, а не после, чтобы приоритизировать правки данными, а не аудитом.