Лакшери-сайт
для Mr.Diamond
для Mr.Diamond
Сверкающий проект для интернет-магазина ну очень люксовых ювелирных украшений
Приготовьте экранную лупу — сегодня в нашем кейс-меню бриллиантовые россыпи :) Утонченный и искрящийся всеми гранями сайт — интернет-магазин Mr. Diamond, который специализируется на продаже люксовых украшений в поиске новых хозяев.
Красивейшие кольца, серьги и ожерелья от мировых брендов вроде Cartier или Tiffany тоже могут надоесть, несмотря на своё громкое имя и блеск. И что делать? Безвременно хранить в шкатулке изделие за 1,5 миллиона? Пожалуй, лучше подыскать ему нового владельца. А себе заодно купить что-нибудь не менее красивое по интересной цене (которая может быть в 3 раза дешевле от цены в бутике, а разницы часто никакой — бриллианты ведь не изнашиваются и не стареют).
У заказчика уютный шоурум в центре Москвы — там каждого гостя принимают на таком уровне сервиса, которого в России вряд ли где ожидаешь. Сайт при этом часто выступает лидогенератором, и важно, чтобы человек чувствовал себя особенным на всех стадиях знакомства с Mr.Diamond.
В этом проекте нам предстояло полностью обновить интернет-магазин и обрамить его в лакшери-упаковку, но при этом не забыть про комфорт пользователей с разными типами устройств. И конечно — добавить уюта и поводов вернуться.
Красивейшие кольца, серьги и ожерелья от мировых брендов вроде Cartier или Tiffany тоже могут надоесть, несмотря на своё громкое имя и блеск. И что делать? Безвременно хранить в шкатулке изделие за 1,5 миллиона? Пожалуй, лучше подыскать ему нового владельца. А себе заодно купить что-нибудь не менее красивое по интересной цене (которая может быть в 3 раза дешевле от цены в бутике, а разницы часто никакой — бриллианты ведь не изнашиваются и не стареют).
У заказчика уютный шоурум в центре Москвы — там каждого гостя принимают на таком уровне сервиса, которого в России вряд ли где ожидаешь. Сайт при этом часто выступает лидогенератором, и важно, чтобы человек чувствовал себя особенным на всех стадиях знакомства с Mr.Diamond.
В этом проекте нам предстояло полностью обновить интернет-магазин и обрамить его в лакшери-упаковку, но при этом не забыть про комфорт пользователей с разными типами устройств. И конечно — добавить уюта и поводов вернуться.
Задачи
1
Донести до посетителей, почему Mr. Diamond — это выгодно.
2
Создать стильный дизайн под запросы аудитории.
3
Показать преимущества (удачное расположение в центре Москвы, трансфер до бутика, индивидуальный подход, сертификаты).
4
Развеять предрассудки об украшениях «с хозяином».
5
Разместить информацию о подлинности изделий.
6
Сделать акцент на геммологической экспертизе и подлинности изделий.
Аналитика
Изучая задачи проекта, конкурентов и ожидания клиента, первоначально мы планировали сделать сайт таким:
Вместо промо-слайдера фоновое видео, за навигацию бы отвечали плашки с иконками по типам изделия, ниже спецпредложения и акции, отзывы и пошаговая инструкция, как купить. Но по ходу работы стало ясно — у людей могут быть разные задачи и интересы: кто-то хочет продать изделие, а кто-то купить. Так на брейншторме появилась идея блока с разделением функций: покупки украшений и продажи.
Обычно на сайтах ювелирных интернет-магазинов всегда есть блок со спецпредложениями: скидками, акциями и товарами дня. Но поскольку каждое изделие на сайте Mr. Diamond в единственном экземпляре, и текущим клиентам гораздо более интересны новые поступления, на новой версии прототипа также появился блок с лучшими товарами из каталога.
Дизайн
Клиент хотел выделиться на фоне остальных игроков рынка, поэтому ждал от нас нестандартных решений в своей отрасли. Типичные представители сферы ювелирных е-коммерс казались скучными — хотелось более интересной подачи, но при этом важно было сохранить легкость и воздушность.
 |
 |
Sokolov, который среди ювелирных е-коммерс выглядит довольно стильно, клиенту не нравился — внутри проекта всё обыкновенно. В то же время активная верстка не по сетке, где границы блоков размыты, показалась чрезмерной. Мы нашли оптимальное сочетание интересного визуала и строгости структуры.
Дарья
Дизайнер
Клиенту предложили две версии: светлую и темную. На основной — та самая лёгкость, воздушность и акцент на самих изделиях. Темные подложки на базовом контенте Заказчика хорошо вписались в альтернативную версию, выполненную в тёмных тонах.
На основной версии мы всё-таки рискнули сделать нестандартную верстку, но зря :)
Пункты меню, которые наползали на картинку, однозначно никому не понравились — все, кому я показывал, считали это каким-то багом вёрстки. Поэтому решили отказаться от этой идеи.
Евгений Матвеев
Mr.Diamond
На итоговой главной появился и блок с разделением по задаче (купить или продать), который планировался на прототипе. Он призван генерировать поток новых товаров, а заодно снимает вопросы вроде «А у вас что, изделия не новые?!», сразу показывая пользователю, что рынок вторичный.
Светлый вариант заказчику всё-таки понравился больше (хотя под него и пришлось переделывать весь контент) — в его стиле выдержаны и остальные страницы сайта.
Было много сомнений и разговоров по контенту, а битриксовый оптимизатор добавил проблем тем, как сжимал картинки с белым фоном. Однако в конце концов белые фотографии всех покорили.
Дина
Руководитель проектов
Когда мы переходили на белые фотографии, конечно, было много негатива от постоянных покупателей. Я даже делал несколько тестовых фотосессий на черном фоне, но на конверсии это никак не сказывалось, и люди постепенно привыкли к новому контенту.
Евгений Матвеев
Mr.Diamond
Фото с чёрными подложками кое-где пока остались — например, в разделе «Распродажа»
Карточки в каталоге выглядят строгими, но при этом лёгкими, хотя туда уместилось максимум информации об изделии: и вес, и материалы, а ещё слайдер с фото и важные кнопки.
С одной стороны, неплохо, когда в карточке всего одна картинка — пользователь лезет внутрь детальной страницы, соответственно, кликабельность и глубина просмотра увеличиваются. И если было бы 10 изделий — ладно, но у нас большой ассортимент, и мы пошли навстречу потребителю, чтобы он мог сразу, на уровне списка товаров, отбраковывать то, что ему не нравится.
Конечно в режиме предпросмотра кнопку «в корзину» вообще можно было бы убрать, потому что обычно у нас никто не покупает из меню — все заходят внутрь карточки и внимательно изучают информацию. Но в то же время так пользователям проще отбирать товары.
Конечно в режиме предпросмотра кнопку «в корзину» вообще можно было бы убрать, потому что обычно у нас никто не покупает из меню — все заходят внутрь карточки и внимательно изучают информацию. Но в то же время так пользователям проще отбирать товары.
Евгений Матвеев
Mr.Diamond
Внутри карточки тоже уютный порядок: зум на фото, блок с информацией справа (куда Заказчик может прикрепить документы — например, сертификат геммологической экспертизы), нужные кнопки, а также возможность поделиться в социальных сетях или намекнуть другу, что этот товар хочется получить в подарок.
Разработка
Одна из фишек сайта — анимация карточек товаров в списке каталога: вместо стандартного развёртывания вниз они раскрываются в стороны.
С версткой карточек пришлось помаяться — проблема была в том, что они наплывают друг на друга, и могут мешать просмотру, а ещё внутри самой карточки появляется слайдер, переключаемый наведением мышки: вместе та ещё задачка. Мы долго с этим воевали, но всё-таки победили :)
Алексей
Разработчик
Фильтры в каталогах е-коммерс часто бывают сложными и длиннющими — но не в случае с Mr.Diamond. Мы спроектировали фильтр так, чтобы поместились все важные критерии, и при этом он не выглядел бы громоздким и им было удобно пользоваться:
Отдельная хитрость — фильтр по виду украшения, который на самом деле — раздел. Нетипичная для битриксовой разработки фишка, но очень интересная для клиента в данном сегменте: можно просматривать сразу кольца и браслеты, чтобы подобрать сочетающиеся.
Дина
Руководитель проекта
Фишка фильтра в том, что в параметре «тип изделия» можно миксовать сразу несколько видов украшений, где каждый вид параллельно является разделом каталога. С любым набором параметров, будь то микс нескольких разделов каталога или изделия одного бренда, есть возможность настраивать короткие ссылки. Этот функционал особенно придётся по душе заказчику для SEO-задач.
Алексей
Разработчик
У корзины и избранного — удобные попапы: пользователь всегда может посмотреть список товаров и отредактировать его, не заходя на отдельную страницу:
На 404-й спряталась забавная анимация:
Оформить заказ на сайте Mr. Diamond — проще простого: достаточно заполнить простую пошаговую форму, которая раскрывается на странице корзины по клику:
Ещё одна форма прячется на странице «Онлайн-оценка» — пользователи могут прикрепить фото украшений и отправить запрос на рассмотрение.
На самом деле, новый сайт делался ради адаптивности на мобильных устройствах. Эта задача была основной, поскольку старый сайт был неадаптивным и процент отказов среди мобильных устройств был около 45%. Из-за этого нам приходилось в Яндекс. Директе и Гугл. Адвордс отключать трафик с мобильных устройств. Раньше его доля была 50%, а спустя пару недель после запуска проекта — уже 77%!
Евгений Матвеев
Mr.Diamond
Уже в день запуска проекта постоянная клиентка Mr. Diamond оставила про новый сайт отличный отзыв:
Всегда интересно работать, когда клиент горит и душой болеет за свое дело. Здесь именно тот случай, и на каждом этапе прям хотелось сделать что-то особенное, эдакое, новое, интересное. Несколько решений были рисковыми и потребовали серьезной отладки и «допилки» перед запуском, но в итоге новый сайт вышел ярким, свежим, и радует глаз. Строгий интерфейс отлично контрастирует с сочными продуктовыми фото товаров. По жизни я носить украшения не люблю, но тут каждый раз захожу и залипаю на красивые штуки :3
Дина
Руководитель проекта
Что мне очень понравилось в работе с Сибириксом — сейчас мало компаний, которые берут на себя весь спектр ответственности. Они пропадают, начинают не брать трубки, откладывать на потом и всё такое. У нас получилось наоборот — два раза в неделю созвон, все баги принимались и быстро исправлялись, ну и параллельно дорабатывался функционал, зачастую бесплатно, хотя этого и не было в смете. В целом я доволен работой и рекомендовать студию могу однозначно, потому что чистоплотность и оперативность реагирования — это важно!
Евгений Матвеев
Mr.Diamond
Готовый проект