Кейсы МТС Shop
Переход на общую дизайн-систему МТС
Задача
Перевести интернет-магазин на общую для всех продуктов дизайн-систему, чтобы обеспечить целостное визуальное взаимодействие с пользователем, а также бесшовно встраивать Shop в другие сервисы МТС.
Решение
Переход на дизайн-систему был организован поэтапно. В первую очередь обновил ключевые страницы: главную, каталог, карточку товара, корзину и чекаут. Затем перевел остальные страницы.
Дизайн-система МТС отличается гибкостью: основная библиотека содержит только необходимые компоненты для всех продуктов экосистемы, а специализированные создаются продуктами по гайдлайнам. В локальной библиотеке магазина собрал более 50 компонентов.
Поиск
Задача
Спроектировать эффективный и удобный поиск, который ускорит нахождение товаров по заданным критериям и повысит количество товаров, добавляемых в корзину через поиск.
Решение
Внедрил подсказки, корректный поиск с учётом опечаток и раскладки, историю запросов, популярные товары и фильтры.
Для ускорения и избежания проблем с легаси-кодом использовали решение партнёра. Сначала протестировали через iframe для оценки технологии, затем адаптировали под бренд МТС и перешли на интеграцию по API.
Проработал сценарии поиска с учётом бизнес-требований, фирменного стиля, описал состояния элементов и корнер-кейсы, провёл дизайн-ревью.
Результат
Заказы из поиска выросли на 83% в мобильной версии и на 57% на десктопе.
Конверсия из созданных заказов в оплаченные увеличилась на 20%.
Инсайты
Кнопка найти
Изначально предположил, что кнопка «Найти» не нужна, так как на мобильных устройствах можно использовать клавишу Enter. Однако исследования показали, что кнопка увеличивает конверсию поиска на 7%.
Товары в выдаче
Предполагалось, что размещение товаров наверху страницы привлечет больше внимания, но тестирование показало, что пользователи ошибочно считали это полным списком и не просматривали остальные товары. Поэтому товары переместил вниз.
Ребрендинг
Ребрендинг для МТС сделало агентство ONY. Моя роль заключалась в адаптации на продукт нового лого, шрифта, брендового цвета, иллюстраций. Также создал гайды для дизайнеров коммуникаций.
Улучшения программы кешбэка
Задача
Повысить число клиентов, которые списывают накопленный кешбэк у нас в продукте. Списать можно и в других сервисах МТС. Кешбэк могут списывать только клиенты, у которых есть подписка МТС Premium, нужно было дать возможность бесшовно купить подписку не прерывая сценария покупки товара.
Решение
Показать выгоду от списания кешбэка, предлагать авторизоваться для проверки баланса и купить Premium для списания кешбэка прямо во время покупки товара.
Я задизайнил и протестировал несколько точек входа, выбрал наиболее эффективную. Согласовал визуал и сценарий с продуктом МТС Cashback, чтобы сохранить айдентику и привычные паттерны экосистемы МТС.
Не авторизован
Для неавторизованных пользователей в блоке итого в корзине предлагаю залогиниться, чтобы узнать сколько у них есть накопленного кешбэка.
Авторизован, но нет подписки Premium
Кешбэк можно списать только с подпиской МТС Premium. Показываю доступный кешбэк и необходимость подписки.
Есть подписка
Предлагаю выбрать списывать кешбэк или нет.
Покупка подписки
Купить подписку можно в модальном окне, не прерывая основной сценарий покупки.
Результат
Количество пользователей, которые списали кешбэк в интернет-магазине вырос на 9%. Также выросла сумма списываемого кешбэка за покупку.
Количество купленных подписок через интернет-магазин выросло на 1.2%.
Редизайн корзины и оформления заказа
Задача
Снизить число отказов при оформлении заказа и брошеных корзин.
Решение
Разделить корзину и чекаут на две страницы: все допродажи, акции и плюшки предлагать в корзине, а на этапе оформления оставить только выбор способа оплаты и получения заказа.
Я спроектировал с нуля корзину и чекаут с понятными паттернами покупки и применения акций. Частичный запуск на 20% пользователей показал хорошие результаты. После этого новые корзина и чекаут были раскатаны на 100%.
Результат
Мобильная версия
Конверсия из корзины в оформление выросла на +0,6%.
Конверсия из оформления в созданный заказ выросла на +2%.
Десктоп
Конверсия из корзины в оформление снизилась на –0,3%, но это компенсируется меньшим объёмом десктопного трафика и успехами на мобайле.
Конверсия из оформления в созданный заказ выросла на +1%.
