Однажды компания «ПСК Фарма» обратилась к нам в студию для разработки информационного портала для пациентов — «Дыши легко». Потом пришла идея сделать заодно и сайт корпоративный, и понеслось…) но об этом в другом кейсе :)

Сайт «Дыши легко» создавался как информационный портал для поддержки людей, болеющих астмой и ХОБЛ (за время разработки мы все выучили, как это расшифровывается). Статьи, тесты, полезные материалы — всё, чтобы рассказать пациентам, как жить полной жизнью, несмотря на диагноз.

Кодовое название сайта у заказчика — пациентский, которое с легкой рукой нашего разработчика превратилось в «пацанский» ;)

В ходе агрегации требований мы максимально погрузились в понимание целевой аудитории (в частности, выяснили, что ХОБЛ чаще всего поражает более взрослое население). И пришли к выводу, что сайт будет полезен не только пациентам, но и их лечащим врачам. Поэтому мы предложили удобную структуру разделов с экспертными статьями, которые врачи могут рекомендовать пациентам. Также мы предусмотрели возможности для быстрого шаринга статей и их печати прямо с сайта.

С самого начала работы над проектом у нас был четкий референс от заказчика — сайт breathefree.com, который отличался консервативным дизайном. Да и общие пожелания на визуальном брифе звучали в стиле: «Нравится динамика на странице, но в меру — для сайта и его целевой аудитории не подойдут вычурные анимированные переходы».

Мы опасались, что развернуться будет негде, и в результате представили целых три концепции: основную, «медицинскую» и альтернативную:

1. Основная концепция — включала элементы, ассоциирующиеся с процессом дыхания: видео в промоблоке, фоновая типографика с ассоциативным рядом, транслирующим гармонию и легкость дыхания. Мы также уделили внимание образам пациентов, чтобы пользователь мог ассоциировать себя с изображениями на сайте.

2. Медицинская концепция, она же обезличенная. Здесь мы, наоборот, отошли от изображений людей и сконцентрировались на трансляции экспертности. Взяли за основу логотип компании, который — вхуж — и превращается в дерево. Дополнив все это классным анимированным фоном.

3. Альтернативная концепция. Затем мы решили немного отойти от пожеланий заказчика по умеренности анимации («немного анимации еще никому не помешало 😁»), но в то же время органично вписать её в тематику инфопортала.

При проработке альтернативной концепции у нас возникла идея — добавить на сайт функционал дыхательной гимнастики. Поэтому появился акцентный элемент, её символизирующий.

Интерактивные дыхательные гимнастики задумывались как фишка сайта. Когда на сайт можно зайти не только за скучными информационными материалами, но и в режиме реального времени потренировать свои легкие.

В итоге блок с Дыхательными гимнастиками остался на сайте, но в более статичном формате — заказчик решил, что заставлять пациентов с астмой дышать в онлайне может быть небезопасно.

Результатом стало соединение трёх концепций. Заказчику понравилось и то, и это. Поэтому мы взяли лучшее от всех версий: ассоциации дыхания первой, экспертность второй и анимированные переходы третьей (с дыхательными гимнастиками в придачу).

Заодно мы отрисовали логотип по аналогии с лого «ПСК Фарма» ну и, конечно, все внутренние страницы.

После верстки главная страница ожила и появился тот самый «Вау!» — с плавными переходами и динамическим элементом, который реагировал на движение курсора, моделируя процесс дыхания. Такие механики, завязанные на курсор, мы часто используем в проектах, но каждый раз они раскрываются по-новому.

Мы создали механизм тестирований, который позволяет создавать тесты, которые пользователи смогут проходить прямо на сайте. В админке задается список вопросов с привязкой баллов и варианты результатов с подходящими интервалами баллов — и вуаля!

На проекте классный поиск, который ищет не только по статьям, но и по файлам и видео.

Ну и обязательная для всех медицинских сайтов версия сайта для слабовидящих.

Все тексты статей и тестов нам предоставим заказчик, что гарантировало их достоверность и соответствие медицинским стандартам. Мы, со своей стороны, подготовили визуальное сопровождение, которое согласовывалось с отделом пульмонологии «ПСК Фарма». Особое внимание уделили созданию инфографики, которая делала сложные медицинские данные доступными и понятными для пользователей.

Мы создали сайт, который не просто выполняет информационную функцию, но и вдохновляет на позитивный взгляд на жизнь, несмотря на диагноз. Яркий и жизнерадостный, но при этом строго выдержанный в соответствии с медицинскими стандартами, сайт стал отличным примером того, как можно сделать полезный и нескучный ресурс для пациентов и врачей.