Весной 2012 года к нам обратился модный дом Versace с весьма необычной задачей — создать интернет-магазин, но… не для продаж. Новый е-commerce сайт должен был стать в первую очередь каналом коммуникации с глобальной аудиторией и площадкой для расширения влияния бренда онлайн. Versace стремились транслировать модный месседж не только своим покупателям, но и тем, кто пока не осмеливается зайти в реальный магазин с вывеской Versace. Еще одной целью клиента было формирование портрета целевой аудитории в интернете. Таким образом, на дизайн нового магазина оказались возложены не совсем типичные задачи, и, благодаря им, он оказался важнейшей и самой интересной частью проекта.
Донателла Версаче — не только креативный директор Versace, но, без преувеличения, душа и сердце марки. Обращаясь к наследию Дома, тонко его чувствуя, она постоянно модернизирует и обновляет бренд. В ее глазах, Versace — это беззаветная любовь к гламуру, чувственности, властной энергичности, бескомпромиссности, всегда свежая трактовка роскоши. Все эти качества надлежало придать новому онлайн-магазину, не забыв при этом про вполне материальные черты и стиль офлайновых бутиков.
Вот первые три варианта дизайна, которые мы предложили заказчику:
После нескольких итераций вышеприведенных вариантов мы получили комментарии клиента в виде концепции от итальянского креативного агентства, с которым сотрудничает Versace. Суть концепции: темный фон, готический стиль, круги как опорный элемент, разные цветовые темы для разделов. Мы предложили новую версию:
В дизайне для именитого бренда очень важно сохранять единообразие, поэтому первоначально над дизайном интернет-магазина работал один человек. Когда основные элементы были отрисованы и согласованы с заказчиком, мы составили Style Sheet — перечень основных цветовых и графических составляющих, ховеров, слотов, иконок и других элементов. Только после этого был привлечен дополнительный дизайнерский ресурс. Ключевые вещи (цвета, шрифты) мы взяли из брендбука Versace. Но была и обратная связь — наработки наших дизайнеров дополнили брендбук марки.
Но и этот вариант дизайна не оказался окончательным. Донателла хотела, чтобы в качестве фона использовался рисунок мозаики “Косматеско”. Как видно на картинке выше, мы использовали нечто подобное, но картинка была далека от идеала. Оказалось, что для нужного эффекта и мозаика требуется особая — из базилики IX века Santa Prassede в Риме. Рисунок пола этой церкви используется в оформлении офлайновых магазинов Versace, его же надлежало “постелить” в виртуальном бутике. Таким образом, клиент решил перенести дух бренда из реального мира в онлайн, подарить пользователю ощущение, будто он буквально находится на территории Versace. Долгое время нам не могли предоставить качественные фотографии этой мозаики — в базилике велась реконструкция. Наконец, мы их получили:
Перекроили и подложили:
Исходный вес фоновой картинки-мозаики, перекроенной дизайнером, составил катастрофические 26 Мб. В норме, для хорошей загрузки страницы, фоновая картинка должна весить около 200 Кб. Мы провели несколько хитрых манипуляций с разрешением и типами файлов, сохраняя по несколько раз в разных форматах, добиваясь нужного качества фона при небольшом размере файла.
Поэкспериментировали с фильтрами:
Изначально, в соответствии с советами итальянцев, для каждого раздела сайта было решено применить разные цветовые темы. Один из примеров — авторский раздел Донателлы Версаче Donatella’s Hot Picks, ее личное “Избранное” на сайте. Этот раздел со временем убрали, как и цветовые темы — теперь фон одинаковый на всех страницах. Цветовое кодирование разделов реализовано в футере, иконках, плашках, при этом в общем в оформлении сайта преобладает черно-белая гамма.
Раздел Donatella’s Hot Picks пропал, зато появился раздел SALE. Как правило, лакшери-бренды не делают распродаж в своих офлайновых магазинах. А многие марки вроде Chanel, Dior и Celine принципиально не продают одежду онлайн. Во-первых, они боятся оттока клиентов из офлайн-магазинов. Продажи в интернете, по их мнению, разрушают ауру эксклюзивности и лишают покупателя удовольствия от физического соприкосновения с вещами, убивают церемонию премиум-шоппинга. Во-вторых, они приводят снобистский аргумент о том, что “продажи для нас не главное”, и консервативно стремятся сохранить идентичность бренда, играя в “hard to get”.
Исходя из подобных соображений, раздел SALE изначально на сайте не планировался. Но американское подразделение компании настояло на скидках, и в итоге этот раздел был разработан специально для магазина в США. Сейчас он подключен на всех локальных версиях. E-commerce-платформа Demandware, на которой созданы сайты Versace, позволяет администратору легко убирать или добавлять стандартные разделы на сайт, поэтому SALE может появляться и исчезать в разных локальных версиях магазина Versace уже без нашего участия. Остается только догадываться, почему на фоне других лакшери-игроков наш клиент все же решил радовать своих онлайн-шопперов время от времени.
С локализацией тоже вышла интересная история. С разработкой payment/shipping-опций особых проблем не возникло, но вот с текстами были нюансы. При переводе оказалось, что слова не помещаются в стандартные круглые слоты. Мы сбалансировали размер и расположение текстовки, чтобы сохранить визуальное единообразие:
Versace не ставили перед собой особо амбициозных целей по продажам. Ни для кого не было секретом, что и haute couture, и pret-a-porter продаются в основном в оффлайне. Но аналитика по регионам за декабрь 2012 года (сразу после запуска проекта) показала, что повод для оптимизма все же есть, и не один. В Германии (versace.de) средний чек составил 439 евро, средняя продолжительность пребывания на сайте 5,25 мин. На сайте французского магазина (versace.fr) покупатели в среднем оставляли 546 евро, топовыми запросами были сезонные куртки и шапки. Как ни странно, итальянцы (versace.it) оказались самыми экономными — в среднем 265 евро, в лидерах продаж — туалетная вода Eros и солнцезащитные очки. Британцы оказались падкими на гламурные аксессуары — сумма среднего чека 391 фунт, решение о покупке в среднем принималось за 3.59 мин, а искали на сайте по большей части часы и очки. Самыми преданными и щедрыми оказались американцы — наибольшая посещаемость среди всех сайтов Versace, средний чек 739 долларов, и это всего за 3,04 минуты в среднем, в предпочтениях — топовые очки и пояса. Любопытно, что самыми активными покупателями американского интернет-магазина Versace стали пользователи русского происхождения.
Несколько слов о разработке
Сайт реализован на платформе Demandware и представляет собой стандартное e-commerce решение с глубокой визуальной кастомизацией. С точки зрения заказчика, интернет-магазин на Demandware достаточно удобен для содержания и администрирования. Это облачная система, заказчику не нужно платить за сервер, содержать дополнительный персонал. Платформа берет на себя все технические аспекты, взимая абонплату, которая рассчитывается как процент от оборота.
Но есть и другая сторона медали. Сложность разработки сайтов на Demandware в том, что его решение «из коробки» — не самое лучшее для старта работы над проектом вроде Versace. SiteGenesis — основное приложение платформы Demandware — было перенасыщено html-разметкой и css-стилями, лишними для нашего лакшери-клиента. Для Versaсe мы создали референсное приложение — оно базировалось на SiteGenesis, но включало в себя все, что было нужно заказчику (и не включало того, чего ему не требовалось). На базе этого референса мы создали все локальные сайты бренда.
После запуска основного магазина клиент вернулся с новым заказом — “магазин в магазине” для суббренда Versace, молодежной линии Versus. Здесь нам предоставили полную свободу действий, но об этом проекте — в следующем посте….
Донателла Версаче — не только креативный директор Versace, но, без преувеличения, душа и сердце марки. Обращаясь к наследию Дома, тонко его чувствуя, она постоянно модернизирует и обновляет бренд. В ее глазах, Versace — это беззаветная любовь к гламуру, чувственности, властной энергичности, бескомпромиссности, всегда свежая трактовка роскоши. Все эти качества надлежало придать новому онлайн-магазину, не забыв при этом про вполне материальные черты и стиль офлайновых бутиков.
Вот первые три варианта дизайна, которые мы предложили заказчику:
После нескольких итераций вышеприведенных вариантов мы получили комментарии клиента в виде концепции от итальянского креативного агентства, с которым сотрудничает Versace. Суть концепции: темный фон, готический стиль, круги как опорный элемент, разные цветовые темы для разделов. Мы предложили новую версию:
В дизайне для именитого бренда очень важно сохранять единообразие, поэтому первоначально над дизайном интернет-магазина работал один человек. Когда основные элементы были отрисованы и согласованы с заказчиком, мы составили Style Sheet — перечень основных цветовых и графических составляющих, ховеров, слотов, иконок и других элементов. Только после этого был привлечен дополнительный дизайнерский ресурс. Ключевые вещи (цвета, шрифты) мы взяли из брендбука Versace. Но была и обратная связь — наработки наших дизайнеров дополнили брендбук марки.
Но и этот вариант дизайна не оказался окончательным. Донателла хотела, чтобы в качестве фона использовался рисунок мозаики “Косматеско”. Как видно на картинке выше, мы использовали нечто подобное, но картинка была далека от идеала. Оказалось, что для нужного эффекта и мозаика требуется особая — из базилики IX века Santa Prassede в Риме. Рисунок пола этой церкви используется в оформлении офлайновых магазинов Versace, его же надлежало “постелить” в виртуальном бутике. Таким образом, клиент решил перенести дух бренда из реального мира в онлайн, подарить пользователю ощущение, будто он буквально находится на территории Versace. Долгое время нам не могли предоставить качественные фотографии этой мозаики — в базилике велась реконструкция. Наконец, мы их получили:
Перекроили и подложили:
Исходный вес фоновой картинки-мозаики, перекроенной дизайнером, составил катастрофические 26 Мб. В норме, для хорошей загрузки страницы, фоновая картинка должна весить около 200 Кб. Мы провели несколько хитрых манипуляций с разрешением и типами файлов, сохраняя по несколько раз в разных форматах, добиваясь нужного качества фона при небольшом размере файла.
Поэкспериментировали с фильтрами:
Изначально, в соответствии с советами итальянцев, для каждого раздела сайта было решено применить разные цветовые темы. Один из примеров — авторский раздел Донателлы Версаче Donatella’s Hot Picks, ее личное “Избранное” на сайте. Этот раздел со временем убрали, как и цветовые темы — теперь фон одинаковый на всех страницах. Цветовое кодирование разделов реализовано в футере, иконках, плашках, при этом в общем в оформлении сайта преобладает черно-белая гамма.
Раздел Donatella’s Hot Picks пропал, зато появился раздел SALE. Как правило, лакшери-бренды не делают распродаж в своих офлайновых магазинах. А многие марки вроде Chanel, Dior и Celine принципиально не продают одежду онлайн. Во-первых, они боятся оттока клиентов из офлайн-магазинов. Продажи в интернете, по их мнению, разрушают ауру эксклюзивности и лишают покупателя удовольствия от физического соприкосновения с вещами, убивают церемонию премиум-шоппинга. Во-вторых, они приводят снобистский аргумент о том, что “продажи для нас не главное”, и консервативно стремятся сохранить идентичность бренда, играя в “hard to get”.
Исходя из подобных соображений, раздел SALE изначально на сайте не планировался. Но американское подразделение компании настояло на скидках, и в итоге этот раздел был разработан специально для магазина в США. Сейчас он подключен на всех локальных версиях. E-commerce-платформа Demandware, на которой созданы сайты Versace, позволяет администратору легко убирать или добавлять стандартные разделы на сайт, поэтому SALE может появляться и исчезать в разных локальных версиях магазина Versace уже без нашего участия. Остается только догадываться, почему на фоне других лакшери-игроков наш клиент все же решил радовать своих онлайн-шопперов время от времени.
С локализацией тоже вышла интересная история. С разработкой payment/shipping-опций особых проблем не возникло, но вот с текстами были нюансы. При переводе оказалось, что слова не помещаются в стандартные круглые слоты. Мы сбалансировали размер и расположение текстовки, чтобы сохранить визуальное единообразие:
Versace не ставили перед собой особо амбициозных целей по продажам. Ни для кого не было секретом, что и haute couture, и pret-a-porter продаются в основном в оффлайне. Но аналитика по регионам за декабрь 2012 года (сразу после запуска проекта) показала, что повод для оптимизма все же есть, и не один. В Германии (versace.de) средний чек составил 439 евро, средняя продолжительность пребывания на сайте 5,25 мин. На сайте французского магазина (versace.fr) покупатели в среднем оставляли 546 евро, топовыми запросами были сезонные куртки и шапки. Как ни странно, итальянцы (versace.it) оказались самыми экономными — в среднем 265 евро, в лидерах продаж — туалетная вода Eros и солнцезащитные очки. Британцы оказались падкими на гламурные аксессуары — сумма среднего чека 391 фунт, решение о покупке в среднем принималось за 3.59 мин, а искали на сайте по большей части часы и очки. Самыми преданными и щедрыми оказались американцы — наибольшая посещаемость среди всех сайтов Versace, средний чек 739 долларов, и это всего за 3,04 минуты в среднем, в предпочтениях — топовые очки и пояса. Любопытно, что самыми активными покупателями американского интернет-магазина Versace стали пользователи русского происхождения.
Несколько слов о разработке
Сайт реализован на платформе Demandware и представляет собой стандартное e-commerce решение с глубокой визуальной кастомизацией. С точки зрения заказчика, интернет-магазин на Demandware достаточно удобен для содержания и администрирования. Это облачная система, заказчику не нужно платить за сервер, содержать дополнительный персонал. Платформа берет на себя все технические аспекты, взимая абонплату, которая рассчитывается как процент от оборота.
Но есть и другая сторона медали. Сложность разработки сайтов на Demandware в том, что его решение «из коробки» — не самое лучшее для старта работы над проектом вроде Versace. SiteGenesis — основное приложение платформы Demandware — было перенасыщено html-разметкой и css-стилями, лишними для нашего лакшери-клиента. Для Versaсe мы создали референсное приложение — оно базировалось на SiteGenesis, но включало в себя все, что было нужно заказчику (и не включало того, чего ему не требовалось). На базе этого референса мы создали все локальные сайты бренда.
После запуска основного магазина клиент вернулся с новым заказом — “магазин в магазине” для суббренда Versace, молодежной линии Versus. Здесь нам предоставили полную свободу действий, но об этом проекте — в следующем посте….
