Как мы делали Luxury. Создание e-commerce сайта Versace в картинках

    Весной 2012 года к нам обратился модный дом Versace с весьма необычной задачей — создать интернет-магазин, но… не для продаж. Новый е-commerce сайт должен был стать в первую очередь каналом коммуникации с глобальной аудиторией и площадкой для расширения влияния бренда онлайн. Versace стремились транслировать модный месседж не только своим покупателям, но и тем, кто пока не осмеливается зайти в реальный магазин с вывеской Versace. Еще одной целью клиента было формирование портрета целевой аудитории в интернете. Таким образом, на дизайн нового магазина оказались возложены не совсем типичные задачи, и, благодаря им, он оказался важнейшей и самой интересной частью проекта.





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

    Вот первые три варианта дизайна, которые мы предложили заказчику:

    image

    image

    image

    После нескольких итераций вышеприведенных вариантов мы получили комментарии клиента в виде концепции от итальянского креативного агентства, с которым сотрудничает 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. Здесь нам предоставили полную свободу действий, но об этом проекте — в следующем посте….
    AstoundCommerce
    Компания
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 15

      –3
      Круто!)
        +4
        лакшери-бренды
        транслировать модный месседж
        беззаветная любовь к гламуру
        амбициозных целей по продажам
        разрушают ауру эксклюзивности

        Хабр, что ты делаешь, прекрати…
          +5
          Мне одному кажется что дизайн просто отвратительный? Пестрый сложный фон, после нажатия половины кнопочек страница плавно уезжает куда-то. На некоторых страницах вообще так сложно сразу понять где товар, а где просто кусок фона. Зайдите хотябы на zappos.com, это далеко не идеал конечно, но гораздо лучше.
          Хотя в принципе дизайн должно быть соответствует продукции, куча пафоса, пыль в глаза и никакой практической ценности.
          Скрин для примера
            0
            На вкус и цвет товарища нет. Каждому свое, как говорится.
              +2
              Это то понятно, некоторые и Ладу Калина покупают.
              Но когда я вижу такое:
              Оказалось, что для нужного эффекта и мозаика требуется особая — из базилики IX века Santa Prassede в Риме
              Первая ассоциация это: «Наши перчатки связаны из меха особых горных козлят возраста 333 дней, бережно собранные руками 20-летних девстенниц на закате в полнолуние.»
              +3
              Нет, не одиноки… Я точно такого же мнения.
              +5
              Омг, мои глаза.

              Черный вариант с кучей ярких красок всех цветов похож на ларек дешевой одежды у цыганки
                0
                К планшету не адаптируется.
                +4
                Обилие слов «премиум/лакшери» и так далее меня ставит в тупик. Это рекламная статья или техническая?
                  +2
                  Видимо никто уже совсем не покупает это переоцененное барахло, вот и вынуждены хоть как-то крутиться чтобы втюхать. Это как пылесос kirby, понтов много, но понты, к сожалению, пылесосить не помогают.
                    –5
                    Как вы поняли, статья о том, как велась работа над дизайном магазина Versace… Солова «премиум/лакшери» характеризуют бренд, его ценовой сегмент, аудиторию, стиль. Если кто-то в целом против существования данного сегмента, пожалуй, это его личные трудности, но не проблема товаров побАгАтому Premium. Есть люди, которые ходят в одной hoodie до дыр, а есть, которые покупают наряды Haute Couture, а кому-то «ларек дешевой одежды у цыганки» ближе… Есть вполне себе самодостаточная ниша на рынке, у нее в свою очередь, вполне самодостотачная аудитория, и есть даже философия бренда, которая формировалась десятилетиями, и которая отражается в дизайне. У работы в таких рамках есть своя специфика, которую мы и описали…
                      0
                      Вот только сайт вы неправильно выбрали для описания. Вам бы найти где тусуются нувориши и прочий подобный контингент (как вы сказали — самодостаточная ниша, но в другом месте). Обычно здесь людей не купишь таким дешевым разводом.
                      Если хотите описать как делали сайт — опишите технические детали, это может и будет интересно (насколько может быть интересна кастомиция движка интернет-магазина).

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

                        Пользователям с мобильных устройств вообще лучше не заходить, чтобы не травмироваться. У сайта там даже фон не отцентрирован.
                      0
                      Наблюдая за сайтами многих модных брендов, мне всегда было интересно *как* они умудряются иногда делать такой технологический отстой. КОгда верстка сыпется на планшете, или процесс чекаута сделан настолько неудобно, что хочется рыдать.
                      Спасибо, Хабр, что приоткрыл для меня тайну — кто делает таких уродцев.

                      UPD: ПРочитал финал статьи
                      > SiteGenesis — основное приложение платформы Demandware — было перенасыщено html-разметкой и css-стилями, лишними для нашего лакшери-клиента.

                      Понял, что если владельцев luxury бренда волнует перенасыщенность html разметки и css стилями, то надо бежать. пофигу куда, но бежать как Форрест Гамп, со словами «Шит хаппенс»
                        0
                        Я когда-то посмотрел видео про историю дизайна. Там делали модные стулья. Коллекционер честно сказал: «Он красивый и оригинальный, но сидеть на нем ужасно неудобно».

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое