Synapse — лендинг медицинской системы для клиник
Сделали одностраничный сайт для Synapse — системы управления клиникой: интерфейс продукта в первом экране, шесть ключевых функций и короткий путь к демонстрации. Страница загружается меньше чем за 1,5 секунды, а Lighthouse ставит ей 98 баллов из 100.
Задача
Synapse — команда из Ташкента, которая разрабатывает Synapse Medical System, платформу управления клиникой: электронные медкарты, запись пациентов, финансы, склад медикаментов и интеграция с лабораториями. Продукт рассчитан на руководителей клиник и медицинских центров.
Synapse Medical System объединяет в одном продукте медкарты, запись пациентов, финансы, склад и документы клиники. Такой продукт трудно продать абзацем текста: руководителю клиники нужно за пару минут увидеть, что система закрывает его задачи. Отсюда и задача — лендинг медицинской системы, который объясняет сложный продукт на одной странице и ведёт к демонстрации.
Медицинские организации выбирают софт осторожно: на кону данные пациентов и работа врачей, которую нельзя остановить. Общие обещания здесь не работают — нужно показать сам интерфейс и честно рассказать, как проходит переход, чтобы у клиники не возникло страха перед простоями.
Цель страницы — заявка на демо. Значит, путь к контактам должен быть коротким из любой точки страницы, а не прятаться в подвале, а кнопка записи — оставаться под рукой, пока человек читает о возможностях системы.
Скриншоты интерфейса, фотографии и анимации утяжеляют страницу, а открывать её будут и с рабочих компьютеров клиник, и с телефонов. Нужно было сохранить быструю загрузку и высокую оценку Lighthouse при насыщенном визуале и уложиться при этом в четыре дня.
Решение
Мы собрали страницу как короткую презентацию продукта. Первый экран показывает настоящий интерфейс Synapse — модуль лабораторных исследований с таблицей анализов и карточкой результатов. Дальше идут три главных преимущества, сетка из шести функций, три шага подключения, отзывы и контакты.
Кнопка «Забронировать» закреплена в шапке и вместе с кнопкой первого экрана ведёт к блоку контактов: штаб в Ташкенте, телефон с часами работы и почта для вопросов продаж и поддержки. Навигация по якорям подсвечивает раздел, который человек читает, поэтому к нужному месту легко вернуться.
Лендинг сделан на связке React и TypeScript, а сборкой занимается Vite. Разделы ниже первого экрана загружаются отдельными частями по мере прокрутки, изображения отдаются в WebP с отложенной загрузкой, а анимации появления на Framer Motion срабатывают, только когда блок попадает в экран. Хостинг — Vercel.
Живой интерфейс в первом экране
Вместо абстрактной иллюстрации первый экран показывает рабочий экран системы: таблицу лабораторных исследований с пациентами, врачами, статусами и сроками готовности, а под ней — карточку с назначением и результатами анализов рядом с референсными значениями.
Три причины доверять
Блок «Создано экспертами» коротко отвечает на главные вопросы клиники: полная история болезни пациента, аналитика доходов и загрузки персонала в реальном времени и защита данных. Рядом — фотография врача, чтобы разговор шёл о людях, а не только о софте.
Шесть функций в одной сетке
Медкарты, умное расписание врачей, финансовый учёт, склад медикаментов с уведомлениями об остатках, электронные документы в PDF и интеграция с лабораториями уложены в бенто-сетку. Интеграцию с лабораториями выделили акцентным цветом.
Переход в три шага
Регистрация клиники, настройка профилей врачей, услуг и графиков, запуск работы — так раздел «Как это работает» показывает внедрение. Короткая схема снимает страх перед сложным переходом и долгими простоями.
Путь к демо из любой точки
Кнопка «Забронировать» не уходит из шапки, а кнопка первого экрана ведёт туда же — к контактам со штабом в Ташкенте, часами работы и почтой отдела продаж. Заинтересованному руководителю клиники не нужно искать, куда писать.
Лёгкая страница с богатым визуалом
Разделы ниже первого экрана подгружаются отдельными модулями, изображения идут в WebP с отложенной загрузкой, а анимации запускаются только при появлении блока. Поэтому насыщенная страница быстро открывается и на телефоне, и на рабочем компьютере в клинике.
Результаты
Главные итоги проекта в цифрах.
- 6Ключевых функций продукта
Медкарты, расписание, финансы, склад, документы и лаборатории показаны в одной бенто-сетке.
- <1.5 сЗагрузка страницы
Разделы и изображения подгружаются по ходу прокрутки, поэтому страница открывается меньше чем за полторы секунды.
- 98/100Оценка Lighthouse
Автоматический аудит Lighthouse поставил лендингу 98 баллов из 100.
- 4 дняОт старта до публикации
От первого дня работы до публикации лендинга прошло четыре дня.
Дизайн и интерфейсы
Ключевые экраны и интерфейсы проекта.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Vercel
- TypeScript
- React
- Vite
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.