Получить 50+ способов увеличения продаж в интернет-магазине

Интернет-каталог с возможностью заказа для компании “Алкотека”

Иван Киселев
Время чтения: Время чтения: 20 мин.
Нет времени читать?

Привет, совершеннолетний читатель! Если вдруг ты таковым не являешься, и 18-ти лет с даты твоего рождения не прошло, прошу немедленно остановиться, и ознакомиться с другими нашими кейсами.

Всех остальных - приглашаем в “Алкотеку”!

Примечание автора: у автора этого текста красный диплом по журналистике и он, естественно, графоман.

Если Вы хотите сразу перейти к конкретике, нажмите сюда. В качестве бонуса за “многабукв” в конце Вас ждёт небольшой лайфхак.

Предыстория этого проекта весьма поучительна и интересна. Давным-давно, в далёкой-далёкой галактике, наша студия получила заказ на вёрстку и сборку сайта для горячо любимой “Алкотеки”. Дизайн принёс с собой клиент, был он неплохой, но, как говорится, “не фонтан”. Зато дёшево!

Сайт сверстали, собрали, заинтегрировали с 1С, синхронизировали остатки в паре сотен магазинов с остатками на сайте, и даже внедрили общепринятый сценарий покупки с весьма неожиданной, но приятной развязкой (об этом - чуть ниже).

Однако на боевой домен сайт так и не переехал, и вот несколько тому причин.

  1. Алкотека - крайне сильный игрок на Краснодарском рынке торговли спиртными напитками. Бренд узнаваемый, магазины красивые, персонал вежливый, цены приятные, фирменный стиль - на высоте.
    Сайт, увы, визуально был на порядок ниже, и делать его полноценный релиз было боязно - высока вероятность “просадки” бренда.
  2. Логично, что тратить время IT-отдела на отладку обмена 1С, когда сайт “висит” на тестовом сервере, совсем не хочется. Если Вы занимаетесь ритейлом, Вашим айтишникам всегда есть, чем заняться.
  3. С контентной работой (новости, статьи, текстовые страницы “О компании” и т.п.) ситуация аналогичная п.2 - сайт на тесте, релиз не планируется, заполнять бессмысленно.

Но наступил день икс, и в “Алкотеку” пришла маркетолог Екатерина (за что ей уже огромное спасибо, ибо она - классный специалист). Екатерина запросила просчёт доработок визуальной и архитектурной части сайта. Немного, чуть больше половины.

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

Мораль:

1) пропуск любой стадии создания сайта неминуемо скажется на его качестве.

2) проектировать должен специалист по UX, создавать дизайн - веб-дизайнер. Попытки сэкономить на качестве этих специалистов обычно ведут к куда более значительным тратам в дальнейшем.

3) когда настаёт время тяжелых решений, есть 2 варианта - либо принять его прямо сейчас, либо отложить до более удобного момента.

Заказчик решил не откладывать.

Поставленные перед новым сайтом задачи.

Коммерческие:

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

Информационные:

  • создание карты магазинов (177 штук в 43 населённых пунктах) с возможностью поиска ближайшего;
  • отображение актуального наличия товара в каждом из магазинов;
  • информирование об акциях и мероприятиях от “Алкотеки”;
  • размещение информации о бонусной программе;
  • донесение потенциальным поставщикам условий работы.

Презентационные:

  • презентация компании, её ценностей и мероприятий.

Срок проекта от подписи договора до финиша (со всеми согласованиями, праздниками и выходными) - 3,5 месяца.

Так вышло, что над проектом работали люди, которым бренд “Алкотеки” давно знаком, а ближайший магазин - посещается ежедневно еженедельно.

Каждый из кожи вон лез, чтобы получилось круто.

Проектирование

Был разработан полнообъёмный прототип сайта с проработкой как архитектуры сайта, так и основных сценариев поведения.

На данном этапе была проработана реализация некоторых сложных и нестандартных моментов, таких, как:

  1. создание карты магазинов в 43 населённых пунктах с удобным поиском нужного покупателю.
  2. внедрение блока с такой картой в карточку товара для просмотра наличия в нужном пользователю магазине. Логику при этом сохранили общую, чтобы покупатель не учился двум разным интерфейсам.
  3. решили проблему с демонстрацией части свойств в страницах каталога без увеличения области превью товара.
  4. в оформлении заказа закрепили состав заказа для контрольной проверки.

Дизайн

Рецепт хорошего дизайна прост:

  • менеджер проектов с головой;
  • дизайнер с желанием и умением решать задачи, а не просто “рисовать красиво”;
  • хорошо проработанный прототип, желательно полного объёма;
  • адекватный фирменный стиль.

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

С остальными ингредиентами проблем в нашей студии нет.

В общем, дизайн получился что надо. Я вам пару страниц покажу, их хватит для общей картинки. Кому не хватит - милости просим на сайт (если Вам есть 18 лет).

А вот как в дизайне были реализованы те самые “сложные и нестандартные вещи” - это пожалуйста.

Карта магазинов

Она же в карточке товара

Демонстрация важных для выбора свойств без “перегрузки” превью карточки на странице каталога.

Оформление заказа и закреплённый состав заказа в нём (для тех, кто забывает добавить к заказу пару банок пива пачек сока).

Вёрстка

Некий Микеланджело Буанаротти сказал: “Совершенство складывается из мелочей. Мелочи создают совершенство, а совершенство — не мелочь”.

Важно при вёрстке страниц и программировании анимации помнить об этих словах, иначе сайт получится красивым, но “без изюминки”. Перебарщивать тоже не стоит - анимация в коммерческих сайтах должна создавать акценты, а не устраивать показательное выступление современных технологий вёрстки.

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

Вот что получилось у нас:

Анимация главного слайдера

Десктоп

Мобильный телефон

Пересчёт цены в корзине при смене количества или удаления товара

Программирование

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

  1. Интеграция с 1С - нестандартная, полностью самописная, без использования модуля обмена. Обмен заказами исполнили двусторонний, обмен товарами, остатками и ценами - только из 1С в базу данных сайта.
    Что примечательно: так как оплаты нет (после формирования корзины), заказ помечается ID конкретного магазина, и сразу поступает к персоналу розничной точки продаж.
  2. Формирование карты магазинов происходит “на лету” при выгрузке складов из 1С. Отдельная служба показывает адрес API Google Maps, а тот услужливо отдаёт координаты.
    К сожалению, на стандартном обмене такие вещи делать нельзя (точнее, можно, но он сразу станет нестандартным
  3. И, конечно же, нельзя не отметить чистоту кода - сайт собран без единого “костыля”, в строгом соответствии с архитектурой и спецификой CMS 1С-Битрикс.
    Перед релизом также провели оптимизацию AJAX и JavaScript.
    В результате скорость загрузки сайта и формирования страниц - в “зелёной” зоне, что делает невозможным отказ пользователя по причине долгого ожидания.
    В результате сайт “летает” даже при фильтрации, несмотря на 5 тысяч товаров, обилие свойств и 177 складов.
    Однозначно - победа.

Заключение

Проект сдан, и полон положительной обратной связи. Заказчик доволен и формирует новые задачи. Покупатели получили удобный инструмент для сокращения времени получения заказа и покупки со скидкой (да-да, на сайте некоторые товары дешевле). А мы радостно кладём этот сайт в портфолио, чтобы наши будущие клиенты видели, на что мы способны.

Благодарности

Руководитель отдела рекламы и маркетинга сети магазинов "Алкотека" - Екатерине Тимчевской.

Команде разработки:

  • прототипирование, дизайн, графика - Роман Иванов;
  • front-end (вёрстка) - Эдуард Шевцов;
  • сборка сайта - Маргарита Смирнова;
  • менеджер проекта - Мария Петриди;
  • руководитель проекта (и автор сего текста) - Иван Киселев.

P.S. Обещанный лайфхак.

Если вы задумали подарить боссу бутылочку крепкого и дорогого, или закупаетесь в “Алкотеке” толпой на вечеринку, то танцы с бубном с целью равнозначного вклада в общее дело больше не нужны.

При расчёте просто попросите продавца разбить сумму на любые угодные вам части с помощью “Спецоплаты”. Работает как для наличных, так и для оплаты картой.

Автор устраивал “карусель” из 5 человек, которые платили картой за одну бутылку. Эксперимент завершился удачно.

Благодарности принимаю на pm@iarga.ru.

Читайте так же

Обсудить проект

Обсудить