Merz Aesthetics

Торговая марка Merz Aesthetics объединяет одну из крупнейших в мире продуктовых линеек препаратов для омоложения кожи. Дочерние предприятия компании работают в Испании, Франции и Канаде. Создано также направление по присутствию на рынке Бразилии. С января 2010 года в состав бизнес-группы Мерц вошла американская компания BioForm Medical, располагающая огромной базой пациентов в США и во всем мире.

Задача

Создать виртуальную клинику красоты для продвижения продукции Merz Aesthetics. Сайт не должен выглядеть как интернет-магазин. Нужна легкая, увлекательная презентация возможностей для красоты и здоровья, которые предлагает компания заказчика.

Интерактивные решения

Согласно разработанной концепции сайта, требовались не просто иллюстрации, а настоящая модельная съемка с последующим сведением фото в интерактивные модули. Работа по графическому оформлению велась агентством ONY. Наша студия отвечала за разработку, то есть мы выполняли программирование и собирали графику в финальном виде – так, как она выглядит сейчас на сайте заказчика.

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

Поэтому мы предложили, а потом реализовали другой подход – плавную смену кадров на JS. Благодаря замене видео на подборку фото объем радикально сократился, что благотворно сказалось на производительности сайта и сэкономило мощность сервера для обслуживания дополнительных пользователей. Между тем, результат выглядит похоже на видео.

Посмотрите сами: на главной странице сайта лицо модели реагирует на движения мыши. Информационно это слайдер с различными сообщениями. Но визуально картинка значительно интереснее обычной смены зацикленных баннеров.

Большинство страниц ресурса уникальны, со своими спецэффектами. По мере необходимости в разных ситуациях применяются затемнения, выезжающие элементы навигации, анимация. Например, если на главной странице сайта кликать по пунктам «Почему мы стареем», «Как помолодеть» и т.д. – приедет плашка.

По мере листания меню осуществляется горизонтальная прокрутка этих полей. При желании их можно закрыть, кликнув по крестику. Но для посетителей и владельцев ресурса значительно важнее кнопка [подробнее], с помощью которой пользователь проходит еще на уровень глубже – к той предметной информации, ради донесения которой мы и делали этот проект.

Игровое пошаговое вовлечение только кажется медленным. Тише едешь, дальше будешь. Заглядывая вглубь самостоятельно, посетитель уделит данным больше внимания. Он не без оснований полагает, что сам выбрал, более того – нашел нужный ему раздел. Органичный плавный переход от видео-кадров с моделью на входе к информативным внутренним страницам помогает перенаправлять внимание аудитории, параллельно усиливая его.

Несколько иначе действует скрипт для раздела «До и после». Тут перемещением мыши можно двигать границу между фото до применения препарата и после, рассматривая и сравнивая изображения. Это не только удобно, но и зрелищно. Игровой подход к демонстрации дает большое преимущество – провоцирует пользователей на действия, вовлекает их, превращает из пассивных наблюдателей в активных участников (http://merz-aesthetics.ru/before-after/).

Аналогичный подход был реализован для показа локальных воздействий различных препаратов с учетом пола пациентов, зоны коррекции и вида морщин. Получился мощный интерактивный пульт с минимум текстовых пояснений и максимальной визуализацией (http://merz-aesthetics.ru/before-after/?prep=0&zone=8&gender=0).

 Мы хотели показать все наглядно, просто, не прибегая к лишним описаниям. Например, разработали скрипт, который демонстрирует появление морщин на лице в зависимости от возраста – с помощью обычного ползунка можно перемещаться по шкале времени и на фото тут же отображаются изменения (попробуйте сами, это затягивает)

Помимо основного функционала, на сайте есть поиск по всем клиникам России, (вот http://merz-aesthetics.ru/where/) с фильтром по округам и городам, отображением на карте – по сути, одного этого хватило бы для создания полезного ресурса. Здесь такой каталог всего лишь небольшое дополнение.

Важный раздел на сайте о препаратах. Согласно федеральному закону, данная информация должна быть доступна только медицинским работникам. Поэтому при попытке посмотреть страницу препаратов, пользователю выйдет предупреждение и он должен будет подтвердить, что он врач. http://merz-aesthetics.ru/preparations/

На сайте несколько разделов с типовыми модулями, оформленными в общий стиль, вопрос-ответ, новости, статьи - http://merz-aesthetics.ru/faq/ и http://merz-aesthetics.ru/news/

Интранет

Вторая важная подсеть – профессиональная, для врачей.

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

Не меньший объем работы был проделан по систематизации данных для интерактивной части сайта. Для двух основных целевых групп посетителей – пациентов и врачей – были разработаны структуры фактически подсайтов.

Новости, статьи, вопросы и ответы, личные страницы пользователей, их комментарии и общение друг с другом, персональный доступ к специализированным вебинарам, фотогалереи и многое другое – небольшая социальная сеть внутри сайта для всесторонней помощи тем, кто заинтересован в использовании продукции Merz Aesthetics.

Личный кабинет каждого врача, вебинары, внутренняя переписка, файловые архивы, форумы, обсуждения, комментарии.

Корпоративные фотогалереи и видеозаписи с меропрятий, альбомы, рейтинги, комментарии.

За кадром

После того, как все было готово, сайт долго и тщательно тестировали. Отдельно проверяли кросс-браузерность, потому что было задействовано много программирования, скриптов.

Сложность программного кода по мере увеличения числа функций растет нелинейно. Другими словами, после добавления какой-то анимации или нестандартного вида управления нужно проверять не только его работу, а протестировать заново раздел, потом весь сайт. Иначе «побочные эффекты» от улучшения в одном месте могут нехорошо сказаться в другом.

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

Результат

Сайт получился абсолютно прикладным, он решает все поставленные задачи. При этом выглядит как арт-проект и никого не оставляет равнодушным.

И да, мы им гордимся! Это необычная работа, близкая к произведению искусства.

www.merz-aesthetics.ru