Smart-подход
к интернет-магазину «Вертикаль»
к интернет-магазину «Вертикаль»
Для тех, кто с интернетом на «Вы»
Smart-подход
к интернет-магазину «Вертикаль»
Для тех, кто с интернетом на «Вы»
«Вертикаль» — один из российских лидеров оптовых продаж лакокрасочных, строительных и отделочных материалов. Мы уже работали над проектом личного кабинета для оптовых клиентов компании, автоматизируя процесс «позвонил менеджеру — решил вопрос».
«Вертикаль» приняла решение масштабироваться и выйти на рынок в качестве розничного агента. Теперь нам предстояло разработать торговую площадку для обычных покупателей.
«Вертикаль» приняла решение масштабироваться и выйти на рынок в качестве розничного агента. Теперь нам предстояло разработать торговую площадку для обычных покупателей.
Задачи
1
Сформировать сильную дизайн-концепцию сайта, нетипичную для сферы клиента, и обеспечить узнаваемость.
2
Сделать сайт удобным и интуитивно понятным для пользователя с любым уровнем опыта онлайн покупок.
Аналитика
Сайт для розничных покупателей создавался с нуля — метрик, естественно, никаких не было. Но были у их оптового сайта :) Мы понимали, что данные с оптового сайта не смогут подойти для прогнозирования и описания ЦА в полной мере, но кое-что может оказаться полезным. Мы взяли данные метрик за год для их оптового сайта за год и сделали выводы:
- Среди пользователей, которые пришли из поисковых систем, большинство делают именно брендовые запросы — мы учли это в структуре нового сайта.
- Судя по тепловой карте сайта, пользователи легко находили товар, который искали. Структура каталога была интуитивно понятной — мы ее сохранили.
- Среди пользователей смартфонов заметили значительно больший процент отказов — этот показатель на 6% выше, чем для ПК. Для сферы розничной торговли строительных и отделочных материалов наличие адаптивной версии — так же маст хэв.
Целевые персоны
Без релевантных метрик ЦА все еще оставалась загадкой. Аналитик выделил 5 типов пользователей, описав их демографические признаки, потребности и цели, боли и мотивы и что может сайт предложить конкретно каждому из них.
Общий вывод стал очевиден: для всех групп потребителей будет важна программа лояльности. Важно, чтобы она была реализована, как у большинства конкурентов: за покупку необходимо начислять баллы, которые можно использовать для частичной оплаты следующих покупок.
Для обычного потребителя это может быть не так важно, но для тех, кто зарабатывает на отделке и ремонтах — это дополнительная мотивация на постоянные покупки.
Для обычного потребителя это может быть не так важно, но для тех, кто зарабатывает на отделке и ремонтах — это дополнительная мотивация на постоянные покупки.
Структура сайта
Чтобы охватить потребности и боли каждой группы пользователей, важных функций и возможностей накопилось очень много много:
- акционные механики и скидки,
- главная страница с различными блоками: бренды, колонка эксперта, подписка на рассылку и пр.,
- личный кабинет пользователя,
- отдельная страница успешного завершения заказа,
- корзина с расширенными функциями и многое другое.
У клиента был дедлайн по завершению проекта, и мы разделили проект на две части: основную, вошедшую в первый релиз, и план развития проекта.
Прототип
Прототип сайта мы сделали подробно, чтобы и заказчику, и дизайнеру, и разработчикам было ясно, что и где находится. Аналитик постарался на славу: в прототип вошли стейты, выпадающее меню каталога, шильдики и прочие мелкие, но важные вещи.
Дизайн
Дизайн прошлого проекта (для опта) и нынешнего (для розницы) отличается. Необходимо было создать сайт, совершенно не похожий на сайты конкурентов. Например, обычно — это желтые и зеленые цвета. Мы выбрали самый неожиданный цвет для строительной сферы — красный.
Заказчику было важно, чтобы интернет-магазин с первого взгляда создавал впечатление, что пользоваться им легко. Дизайн-концепция строилась на smart-подходе, где сайт всячески помогает своему пользователю: акценты на крупных карточках товара, подсказки, промоблоки, поиск и пр.
Заказчику было важно, чтобы интернет-магазин с первого взгляда создавал впечатление, что пользоваться им легко. Дизайн-концепция строилась на smart-подходе, где сайт всячески помогает своему пользователю: акценты на крупных карточках товара, подсказки, промоблоки, поиск и пр.
Логотип
Начали мы с него. Заказчик пришел к нам с логотипом, подготовленным для этого проекта. Мы его освежили, используя графический визуал из концепции сайта.
Просто, как забить гвоздь!
Нужно было смягчить требовательный тон обычного интернет-магазина («вы уже знаете что делать — осталось только оплатить») и настроить пользователя на безболезненный подбор товаров (особенно для строительных магазинов). Мы придумали промоблок, в котором прямо говорим, что сделать заказ на этом сайте так же легко, как выполнить любое другое простое движение — и все это на языке пользователя.
Технологии
Умный фильтр и еще умнее поиск
Штатный компонент Битрикса «Умный фильтр» ускоряет поиск товара и работу всего каталога благодаря фасетным индексам товара по одному свойству (вес, цена, производитель и пр.). Так сайту не приходится перебирать все товары при фильтрации, а это не нагружает сервер.
Поиск по каталогу реализован через поисковую машину Sphinx, который по функциональности напоминает поисковую строку, например, в Яндекс. Можно писать с ошибками, можно не менять язык на клавиатуре, можно не знать, как правильно пишется бренд — сайт все поймет, простит и покажет варианты, которые пользователь возможно ищет.
Поиск по каталогу реализован через поисковую машину Sphinx, который по функциональности напоминает поисковую строку, например, в Яндекс. Можно писать с ошибками, можно не менять язык на клавиатуре, можно не знать, как правильно пишется бренд — сайт все поймет, простит и покажет варианты, которые пользователь возможно ищет.
Интеграции
Чтобы не менять конфигурацию 1С
Посмотрите на карточку товара: эта краска может быть в трех объемах и двух типов базиса.
Посмотрите на карточку товара: эта краска может быть в трех объемах и двух типов базиса.
Вы видите это как один товар, в 1С — это шесть разных товаров. Чтобы не вносить изменения в 1С мы использовали товары с торговыми предложениями (SKU), которые «собираются» на стороне сайта.
Чтобы несколько простых товаров объединялись в один с торговыми предложениями, необходимо, чтобы у них был единый признак (в 1С его нет). Для этого мы завели свойства для товаров (тот самый признак) и внедрили обработчик событий. При сохранении простого товара в каталоге на сайте обработчик ищет товары с одинаковыми свойствами и автоматически создает карточку товара с SKU.
В протоколе интеграции это выглядело всего лишь так.
Чтобы несколько простых товаров объединялись в один с торговыми предложениями, необходимо, чтобы у них был единый признак (в 1С его нет). Для этого мы завели свойства для товаров (тот самый признак) и внедрили обработчик событий. При сохранении простого товара в каталоге на сайте обработчик ищет товары с одинаковыми свойствами и автоматически создает карточку товара с SKU.
В протоколе интеграции это выглядело всего лишь так.
Модуль для колеровки краски
Ребята из Израиля придумали модуль Robotint исключительно для колеровки строительной краски. В интернет-магазине мы использовали этот модуль для краски бренда Tikkurila. Еще бы: бренд насчитывает более 20 000 оттенков. Колеруй — не хочу! Модуль оказался сырым. Общались с его разработчиками часто, но дорабатывали сами.
Готовый результат
Благодарим Даниила Евдокова, управляющего партнера компании «Вертикаль», и Алексея Доленко, Head of e-commerce.