Разработка интернет-магазина часов GENEVA

Сайты

Клиент

Сеть салонов Geneva является официальным дилером ведущих швейцарских часовых марок:
  1. Tissot;
  2. Certina;
  3. Hamilton;
  4. Longines;
  5. Tag Heuer;
  6. Rado;
  7. Cartier;
  8. Hublot;
  9. Ulysse Nardin;
  10. Omega.
Люксовое подразделение компании также реализует дорогие украшения и предметы интерьера.

Часовой бизнес (если мы говорим о часах, а не «распродаже конфиската, купи Tag Heuer за 5000 р. и получи Tissot в подарок») является очень традиционным и консервативным. Даже сами производители смотрят на интернет-магазины с подозрением — до сих пор у некоторых марок существует прямой запрет для дилеров продавать часы через глобальную сеть. Но против общей тенденции не пойдёшь — сейчас и дилеры и производители понимают, что надо выходить в онлайн.

Задача

Можно описать задачу, с которой к нам обратились кратко — перевести бизнес по продаже часов в интернет-магазин. Эта идея разделена на составляющие — разработка сайта, интернет-маркетинг, CRM. Начали с первого пункта.

У старого интернет-магазина было несколько серьезных проблем:
  1. Сильно устаревший дизайн;
  2. Представители часовых марок нервничали, т.к. ресурс не отвечал их требованиям;
  3. Интернет-магазин не имел адаптивности — с мобильных и планшетов пользоваться им неудобно;
  4. Каталога часов отсутствовал совсем — это минус и для покупателей и для SEO.
А у нас были (и есть, кстати):
  1. Классный дизайнер;
  2. Верстальщик, сделавший несколько десятков адаптивных сайтов со сложными js эффектами;
  3. Программист, для которого не то что электронный-каталог, а b2b личный кабинет с интеграцией с несколькими системами сделать — раз плюнуть;
  4. И скромный менеджер проекта (не буду себя хвалить).
Соревновательный дух добавляли сжатые (для разработки проекта с дизайном и адаптивной версткой и импортом каталога в несколько тысяч позиций) сроки — 3 месяца от старта, до запуска.

Решение

На что мы сделали особый упор:

Красота

Бизнес клиента — дорогие наручные часы. Это рынок, где особое значение имеет красивый, строгий дизайн. Осложняет ситуацию дюжина часовых брендов. Каждый со своей историей, стилем, алгоритмом формирования названий часов и т.д. Учесть все нюансы сложно, но мы справились. Расскажу о разработке трёх самых интересных визуальных решений на проекте.

Видео на фоне

Хотите создать у посетителя особенное впечатление — поместите красивое видео на фон. В нашем случае, это только в тему — красивые механизмы и корпусы часов очень фотогеничны. Плюс, у клиента имелся доступ к уже готовым видеороликам — производители неплохо поддерживают дилеров маркетинговыми материалами.

К сожалению, одновременно красиво и просто не бывает.:) Нам пришлось решить проблему с предзагрузкой видео (всё-таки до 10 Мб) и разными форматами для разных браузеров. Но итог получился достойным — все, кому мы демонстрировали интернет-магазин часов, говорили, что «видео решает».

Видеоролик заменяет собой слайдер, но, естественно, мы не стали лишать клиента возможности загрузить вместо видео простую картинку. Чтобы придать таким изображениям «жизни», мы добавили эффект приближения.

Классный и умный фильтр

Почти во всех интернет-магазинах и каталогах на Битриксе используется умный фильтр. Наш фильтр также умный, но кроме этого, он у нас еще и красивый.

Смотрите, как мы спроектировали выбор бренда, разделив, при этом, бренды по уровню: Умный фильтр — выбор бренда Умный фильтр — выбор бренда

Естественно, весь джентльменский набор мы также реализовали:
  1. Фильтр с подгрузкой товаров по аяксу (без нажатия на «применить»);
  2. Выбор количества элементов на странице;
  3. Сортировка;
  4. Указания, сколько элементов найдено и т.д.

Лаконичная и аккуратная карточка часов

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

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

Адаптивность

Новый интернет-магазин имеет адаптивную вёрстку. Тут больше даже писать нечего, т.к. фактически, это уже стандарт.

Мы делаем адаптив хорошо — у нас хороший верстальщик, а тестирование проводится на реальных устройствах. Часто бывает, что на планшетах и мобильных работать с сайтом даже удобнее, чем на ПК.

Выгружаем несколько тысяч моделей часов в интернет-магазин из разных источников

Обычно товары выгружают из 1С. Но в нашем случае, этот вариант не подходил — слишком уж «страшный» вид имели названия моделей в учётке. А ни о каких характеристиках и картинках речь и вовсе не шла.

Решили, что всю информацию по ассортименту мы соберем в .csv.

Всё звучит просто, но представьте, что загрузить из .csv надо и коллекции и бренды и особенности. А это не просто свойства товара, а полноценные сущности, со своими детальными страницами и логикой работы.

Не буду утомлять вас описанием — проблему решили. Товары, их свойства, характеристики и картинки попали на готовые карточки. Довольны и SEO-шник (собирает теперь низкочастотный трафик) и пользователи (видят картинки и цены).

Набор элементов для самостоятельного формирования страницы

Работать с ведущими швейцарскими часовыми брендами почётно, но нелегко. У каждого из них свои, десятилетиями, а то и веками, выработанные правила оформления. Где и как должен располагаться логотип. Как изображение часов должно сочетаться с заголовком и текстом. И сотни других правил из брендбуков Tissot, Omega, Longines, Rado, Hublot, Cartier, Ulysse Nardin…

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

Но те, кто знаком с визуальными редакторами для публикации контента в вебе, знают, как это непросто. Мы решили задачу с помощью разработки так называемых сниппетов — набора элементов для самостоятельного конструирования экранов. Для клиента мы создали следующие блоки:
  1. Текст + картинка слева;
  2. Текст + картинка справа;
  3. Текст в две колонки;
  4. Текст + картинка на всю ширину;
  5. Картинки с подписями в две колонки;
  6. Важный текст.
Эти блоки могут использоваться в текстовых страницах (о компании, гарантии, сервис и т.д.), описаниях брендов и новостях.

Конечно, мы не отнимали возможность воспользоваться стандартным инструментарием визуального редактора (или вообще сверстать всё, используя html). Набор готовых элементов Набор готовых элементов

Вывод

Сейчас все понимают — сама по себе разработка интернет-магазина часов (даже такого стильного и функционального, как мы сделали:)) не принесет много пользы. Нужны комплексный маркетинг, интеграция с УС, подключение CRM, работа над визуальной составляющей продукта и т.д.

Сила ИНТЕРВОЛГИ, как веб-интегратора, как раз в том, что мы можем предложить весь спектр услуг — и сложные платформы соединить друг с другом, и над лидогенерацией поработать.

С geneva34.ru ситуация именно такая — непосредственно успешная разработка платформы лишь первый шаг. Дальше у нас запланирована интересная работа по интернет-маркетингу. Представители швейцарцев, производителей часов, еще не определились, как вести продвижение в интернете, поэтому наша задача — стать проводником в сложном мире современного интернет-маркетинга для классического, консервативного бизнеса.

Однако, важно не только привести больше посетителей и покупателей на посадки. Повышение конверсии (а следовательно и прибыли) и качественная обработка продаж невозможны без CRM, поэтому в планах также внедрение Битрикс24 и интеграция её с сайтом.


Если у вас есть такая комплексная и сложная задача, а все студии берутся только за какую-либо отдельную её часть — позвоните нам — интегрируем, продвинем, сделаем.
Результат
Над проектом работали
Артём З.
Антон Колодницкий
Александр К.
Дмитрий М.

Статьи по теме

12.01.2023
Tutorial по обмену с 1С. Часть пятая: Наш опыт настройки 1000 и 1 обмена В своей предыдущей статье я начала раскрывать тему того, как правильно настраивать обмен между крупными сайтами и B2B-системами на Битрикс с системами учет...
10.01.2023
Tutorial по обмену с 1С. Часть четвертая: Обмен через промежуточную базу данных В 2022 году на долю маркетплейсов приходится более 65% рынка онлайн-продаж в секторе B2C. На сегодняшний день площадки занимают основную долю рынка электро...
10.01.2023
Tutorial по обмену с 1С. Часть третья: Выжимаем максимум из стандарта. Что мы хотели бы знать 1000 проектов назад Всем привет! Я Дина, ведущий разработчик личных кабинетов и ecom-систем в ИНТЕРВОЛГЕ. Мы не делаем тривиальных проектов. Все что я буду описывать ниже – ун...
10.01.2023
Tutorial по обмену сайта с 1С. Часть вторая: зачем и как писать свой обмен с нуля на очередях и REST API Всем привет! Меня зовут Артем, я старший разработчик в ИНТЕРВОЛГЕ. Наконец дошли руки рассказать про «обмен с 1С с нуля».  Типовой интернет-маг...
10.01.2023
Tutorial по стандартному и нестандартному обмену сайта с 1С. Часть первая: стандартный обмен и его хитрости Имею желание купить дом, но не имею возможности. Имею возможность купить козу, но не имею желания. к/ф «Кавказская пленница» ...
10.01.2023
Как битриксоиды в React уходили Приятно познакомиться, мы битриксоиды. Да-да, те самые которые: вообще не модные, пишут НЕ на Laravel и Symphony, ...

Мы работаем по одному из двух форматов:

  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).

ИНТЕРВОЛГА предоставляет:

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

Для доработок и развития мы предлагаем формат 100 часов в месяц. Что можно сделать за это время:

  • новые нетиповые страницы или раздел;
  • 2 отчета с индивидуальными настройками;
  • 3-5 веб-сервисов интеграции;
  • замудренный калькулятор и т.п.

Поддержка «чтобы все работало как часы» стоит 45 тысяч рублей в месяц и описана тут.