Как агентство Nineseven обновило онлайн-магазин МТС c учетом новых трендов удобства для пользователя

Поделиться

Агентство Nineseven рассказало, как создавалась новая версия онлайн-магазина МТС с построением современного customer experience.

Задача

Обновить старый сайт для shop.mts.by под требования времени.

Решение

Для того чтобы осовременить такой крупный проект требовалось одновременно подходить с нескольких сторон:

  • актуализировать программную платформу магазина;
  • обновить визуальный стиль и построить современный customer experience.

Процесс работ

Обновление кодовой базы

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

Что конкретно:

  • Обновили ядро "Битрикс" до последней версии (в данном случае это существенно, так как сайт был на версии до ядра D7)
  • Регламентировали ежеквартальные обновления системы и ПО
  • Перенесли код проекта на последнюю версию PHP
  • Оптимизировали запросы
  • Доработали кеширование ключевых компонент и настроили композитный кеш "Битрикса"
  • Настроили сервер очередей для периодических задач
  • Провели рефакторинг кода и настроили единую систему логирования для всех компонент

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

Обновление графического стиля

К моменту старта работ МТС уже переживал третье обновление визуального стиля, поэтому беларускому сайту нужно было соответствовать. По итогу мы пересобрали более чем 30 макетов.

Вот как выглядела раньше главная страница интернет-магазина:

image001.png

А вот, как сейчас:

image002.png

Старая карточка товара:

image003.png

Обновленная:

image004.png

Мы провели ряд работ по улучшению customer experience, то есть сделали сайт удобнее для пользователя. Далее подробнее о каждом элементе.

Настройка живого поиска

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

image005.png

Популярные подборки в каталогах

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

image006.png

Наглядный подборщик цен в фильтре

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

image007.png

Фасетный индекс в фильтре

Каждый вариант в фильтре просчитывается заранее, и пользователь ещё до выборки знает, сколько товаров есть по тому или иному критерию. Это сокращает время поиска нужного товара и исключает пустые запросы “Ничего не найдено”.

image008.png

Компактная карточка

Карточка содержит в себе основную информацию о товаре: базовые технические характеристики (модель, емкость памяти, цвет корпуса), а также полную стоимость и сумму месячного платежа при покупки товара в рассрочку. Мы решили убрать все лишнее и показать только важное — чем больше места уделено фото товара, тем лучше. Покупатель может быстрее ознакомиться с предложениями и выбрать наиболее выгодное.

image009.png

При наведении на карточку появляются дополнительные характеристики для удобного подбора необходимой модели. Никуда нажимать не надо — все есть в расширенном варианте карточки товара.

image010.png

Блок с аксессуарами к устройству

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

image011.png

Акции сразу возле СТА (call to action)

Маркетинговый элемент, который делает возможную покупку более актуальной и выгодной для клиента.

image012.png

Быстрый заказ

Данная функция имеет плюсы как для клиента, так и для МТС. Клиент экономит время и не заполняет дополнительные формы на сайте, сотрудник МТС может поговорить напрямую с заинтересованным покупателем и повлиять на его финальное решение.

image013.png

Аксессуары в корзине

Если покупатель ранее не обратил внимание на сопутствующие товары, магазин ему снова о них напомнит в корзине.

image014.png

Быстрая смена цвета или типа цены в корзине

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

image015.png

Одна страница со сквозным блоком для проверки заказа и ввода данных

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

image016.png

Предзаказ

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

image017.png

Лайки, которые показывают популярность товаров

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

image018.png

Характеристики товара

Собрали все в группы и разбили на две колонки. Получилось компактно и удобно для пользователя.

image019.png

Блок с товаром всегда доступен при скролле

Удобная функция для клиента: основная информация всегда под рукой. А две кнопки “Добавить в корзину” и “Купить в 1 клик” упрощают процесс покупки — как только клиент решает взять выбранный товар, ему не нужно скроллить вверх или переходить на другие окна.

image020.png

Быстрый заказ доступен и в мобильной версии сайта:

image021.png

Итоги в цифрах

  • Запас мощности текущих серверов увеличился в 4 раза за счет оптимизации кода
  • Автоматизированы бизнес-процессы: скоринг клиентов сократился с 2-5 минут до 30 секунд.
  • Конверсия увеличилась в 2,5 раза
  • Процент отказала уменьшился на 24%
  • Количество страниц за сеанс выросло с 4 до 11

Команда

Руководители проекта от Nineseven

  • Дима Хоружко
  • Юра Иов
  • Иван Самойлик

Верстка

  • Сергей Герасимов
  • Павел Кряквин

Дизайн

  • Сергей Шишпор
  • Дима Хоружко
  • Леша Синкевич

PHP-разработчики

  • Павел Пенкрат
  • Стас Вовк
  • Денис Астапенко

Команда со стороны МТС

  • Александр Тишков
  • Оксана Хачиян
  • Эдуард Романюк
  • Сергей Латышевич
  • Павел Сотников

Поделиться
Материалы по теме:
Обсуждение:
Читайте также: