«Линия жизни»
Корпоративный сайт для ведущей клиники репродуктологии Москвы
«Линия жизни»
Корпоративный сайт для ведущей клиники репродуктологии Москвы
Для некоторых пар путь к желанной беременности непростой и долгий. Столкнувшись с такой деликатной проблемой, они начинают сомневаться в себе, боятся осуждения и давления со стороны общества и врачей.
Клиника репродукции «Линия жизни» помогает стать родителями в атмосфере заботы и понимания. Здесь работают внимательные и тактичные доктора, предоставляется профессиональная психологическая помощь, и нет места токсичности. Такой подход помогает парам чувствовать себя уверенно и сосредоточиться на главном — осуществлении мечты о ребенке.
Клиника репродукции «Линия жизни» помогает стать родителями в атмосфере заботы и понимания. Здесь работают внимательные и тактичные доктора, предоставляется профессиональная психологическая помощь, и нет места токсичности. Такой подход помогает парам чувствовать себя уверенно и сосредоточиться на главном — осуществлении мечты о ребенке.
- «Линия жизни» — сеть московских клиник ЭКО мирового уровня с собственными эмбриологическими лабораториями, прошедшими международный аудит, и донорским банком. С 2014 года Центр репродукции помогает осуществить заветную мечту своих пациентов — стать мамой и папой. Больше 5000 малышей родилось благодаря специалистам «Линии жизни».
Заказчик хотел, чтобы новый сайт был таким же эмпатичным, отражал ценности бренда, был удобным и понятным для пользователей, и конечно, закрывал все бизнес-потребности.
Аналитика и прототипы
Корпоративные сайты часто кажутся простыми при проработке структуры — но только на первый взгляд. Часто там много структурно похожих страниц с несколькими уровнями вложенности. Поэтому на этапе агрегации требований нам предстояла большая работа — распутать взаимосвязи и навести в них порядок.
Анастасия
QA-менеджер и аналитик
— К моменту старта проекта у заказчика уже была собрана аналитика: описание целевой аудитории, статистика по заявкам, описание болей пользователей. Всё это помогло нам на агрегации требований и прототипировании — например, детально проработать UX и пути пользователей на сайте с учетом их болей, а также разработать персоны, максимально близкие к реальному клиенту.
Чтобы сделать структуру сайта прозрачной для пользователей, мы тщательно проработали навигацию на прототипах. Заказчику было важно уже на этом этапе увидеть структуру страниц максимально подробно.
Дизайн
Репродуктология — деликатная сфера. В клинику ЭКО люди приходят за шансом (возможно, последним) стать родителями. Для них важна деликатная и понятная коммуникация на всех этапах взаимодействия с медицинской организацией. Поэтому дизайн сайта клиники должен создавать ощущение комфорта и безопасности и показывать — это не больница или поликлиника, а место, где можно чувствовать себя уверенно.
В поисках той-самой-концепции мы разработали основную версию дизайна главной страницы и два варианта-альтернативы. Сначала — в цветах фирменного брендбука, с которым к нам пришел заказчик. Одно «но»: фирменная гамма оказалась хороша только для полиграфии — в вебе эти цвета смотрелись слишком блеклыми.
Альтернативный вариант мы сделали более смелым, добавив интерактив и необычную механику перехода между блоками. Вторую альтернативную версию оставили строгой по структуре, но добавили ярких градиентов, сочетающихся с фирменными цветами.
В поисках той-самой-концепции мы разработали основную версию дизайна главной страницы и два варианта-альтернативы. Сначала — в цветах фирменного брендбука, с которым к нам пришел заказчик. Одно «но»: фирменная гамма оказалась хороша только для полиграфии — в вебе эти цвета смотрелись слишком блеклыми.
Альтернативный вариант мы сделали более смелым, добавив интерактив и необычную механику перехода между блоками. Вторую альтернативную версию оставили строгой по структуре, но добавили ярких градиентов, сочетающихся с фирменными цветами.
Слева направо: сновная и две альтернативных версии главной страницы, а также старый сайт заказчика
Полина
Руководитель проекта
— У заказчика было четкое представление, каким он хочет видеть сайт, поэтому все пожелания к дизайну были очень конкретными. По итогу у нас получился приятный структурированный дизайн в современных цветах, который останется актуальным несколько лет.
Денис
Арт-директор и дизайнер проекта
— На старом сайте заказчика кое-где были сломаны пути пользователей по сайту, которые должны строиться исходя из базовых паттернов поведения. Поэтому на этапе прототипирования мы занялись проработкой навигации — чтобы сделать ее логичной и понятной. Приятно, что заказчик был супер-включенным в процесс.
После прототипирования мы провели брейншторм, где придумали сразу несколько идей для дизайна. В такой тематике нужно быть очень аккуратным, поскольку легко вызвать не те ассоциации и столкнуться с непониманием.
В итоге концепций получилось две: базовая, максимально приближенная по структуре к прототипу, и альтернативная с большей степенью свободы.
В итоге заказчик выбрал базу, мы же добавили к ней больше цветности и дополнительно поработали с промо-блоком. Так родилась финальная версия, про которую клиент сразу сказал: «Да, это именно то, что мы представляли!».
После прототипирования мы провели брейншторм, где придумали сразу несколько идей для дизайна. В такой тематике нужно быть очень аккуратным, поскольку легко вызвать не те ассоциации и столкнуться с непониманием.
В итоге концепций получилось две: базовая, максимально приближенная по структуре к прототипу, и альтернативная с большей степенью свободы.
В итоге заказчик выбрал базу, мы же добавили к ней больше цветности и дополнительно поработали с промо-блоком. Так родилась финальная версия, про которую клиент сразу сказал: «Да, это именно то, что мы представляли!».
Интеграция с «Медворк»
На сайте «Линии жизни» пользователи могут самостоятельно записаться к нужному специалисту. За бронирование временных слотов врачей клиники отвечает сервис «Медворк», с которым мы настроили интеграцию. Доступное для записи время выводится на странице каждого доктора и на общей странице расписания.
Когда пользователь бронирует время, заявка сохраняется в админ-панели сайта, а администратору приходит уведомление. Далее операторы связываются с пользователем, подтверждают запись и финально бронируют слот в «Медворке». Сервис настроен так, чтобы каждые 8 минут отдавать на сайт файл с актуальным расписанием — так на сайте постоянно выводятся актуальные свободные и зарезервированные слоты.
Полина
Руководитель проекта
— Страницу расписания мы долго проектировали на прототипах и на дизайне, поскольку важно было сохранить функциональность для пользователей и на десктопе, и на адаптиве. По-моему, вышло клёво :)
Дмитрий
Разработчик
— Мы сделали единое расписание специалистов с возможностью записи к любому врачу и удобными фильтрами: пользователь может сразу выбрать нужный филиал клиники и специализацию — сайт тут же покажет подходящих под эти критерии докторов.
Форма записи на приём
Чтобы пользователи могли удобно записаться на приём онлайн, мы также тщательно проработали форму записи. В ней выводим максимум информации: филиал клиники, время приёма, доктор, вид приёма (первичный или вторичный, сразу с ценой) и данные пользователя. Это помогает уже на берегу снять многие вопросы пациентов и снизить нагрузку на администраторов клиники в офлайне.
Тонкости контента и SEO
На момент старта разработки у заказчика был старый сайт с неудобной админ-панелью, который не устраивал по структуре. Кроме того, сайт уже несколько раз переживал переезд с одной CMS на другую (по сути — импорт контента), что добавляло лишних артефактов в админке. При всех минусах это были годы наработок по SEO и контенту, которыми клиент очень дорожил.
Важно было это аккуратно перенести на новый сайт так, чтобы навести порядок в структуре контента в админ-панели и при этом сохранить все страницы с их привычными URL.
Важно было это аккуратно перенести на новый сайт так, чтобы навести порядок в структуре контента в админ-панели и при этом сохранить все страницы с их привычными URL.
Полина
Руководитель проекта
— Оказалось, что это — задача со звездочкой. Контент мы переносили частями с помощью инфоблоков. Какие-то страницы перенести было несложно: структура контента на старом сайте была вполне логичной. Но ключевые страницы услуг и программ были настолько запутаны в старой админке, что нам потребовался не один звонок с заказчиком, чтобы разобраться, что и откуда берется.
Леонид
Разработчик
— На старом сайте заказчика после переезда с другой CMS на «Битрикс» была структура страниц, заданная через «универсальный» каталог в инфо-блоках. Мы же решили перенести некоторые разделы в отдельные инфоблоки так, чтобы они логично соответствовали направлениям деятельности. Это помогло сократить количество свойств, которые необходимо заполнять при создании контента, а значит — значительно упростить работу контент-менеджеров заказчика.
Кроме того, важно было сохранить структуру URL — для этого мы взяли за базу стандартный механизм «Битрикса» по подключению компонентов и дописали к нему подключение шаблонов и компонентов от корня сайта. Это помогло сохранить структуру URL и разделить визуальный дизайн и функциональное взаимодействие в зависимости от разделов.
Кроме того, важно было сохранить структуру URL — для этого мы взяли за базу стандартный механизм «Битрикса» по подключению компонентов и дописали к нему подключение шаблонов и компонентов от корня сайта. Это помогло сохранить структуру URL и разделить визуальный дизайн и функциональное взаимодействие в зависимости от разделов.
Сопоставление URL по всем страницам при переносе сайта с тестового сервера на боевой потребовало много ручной проверки: некоторые страницы мы разместили в новых папках в админ-панели, поэтому для них требовались редиректы. Всё это очень тщательно тестировалось, что не потерять ценный SEO-трафик.
Готовый проект
