Как увеличить конверсию на 36% меняя интерфейс под пользователей — кейс "Антошка"

ЗаказчикАнтошка — это 40+ магазинов в Украине, 20+ лет лидирующие позиции на рынке Украины, 430000 онлайн посещений в месяц, один из победителей премии RAU Awards 2020ЗадачаПредыдущий интерфейс для интернет-магазина Антошка компания Турум-бурум создавала еще в 2013 году. Все факторы указывали на то, что нужно применить RSR подход в редизайне, т.е. создать новый интерфейс

Время  фактор, беспощадный к интерфейсам Можно бесконечно долго чинить и тюнинговать Волгу, но больше 170 км/ч она не поедет и вместительней не станет. Так, и интернет-магазину можно продлить жизнь на 5–7 лет применяя эволюционный подход, постоянно дорабатывая и улучшая интерфейс. Но рано или поздно вы придете к мысли, что выгоднее снова поменять дизайн комплексно.

Со временем меняется спрос, поведение пользователей и их привычки. В истории с компанией «Антошка» редизайн сайта интернет-магазина стал неизбежным из-за множества факторов, которые возникли под влиянием времени.

Масштабирование бизнеса 

Сеть магазинов активно росла, расширяла ассортимента и услуги. Из магазина детских товаров «Антошка» превратился в семейного помощника и друга: школа будущих мам, клубы развития, консультации педиатров, игровые центры, парикмахерские, кафетерии. Кроме того, магазины стали точками самовывоза продукции. 

Рост доли пользователей mobile 

В 2013 году не было такого количества mobile пользователей, приоритетной задачей того времени был удобный адаптив. С 2014 по 2020 года количество пользователей сайта с мобильных устройств выросло на 400%, к чему интернет-магазин не был готов.

Смена дизайн-концепции

В 2015 году были созданы собственные игровые персонажи бренда — люмеры. 

image8.jpg?x39241

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

  • Изменение технологий

Главной проблемой стала низкая скорость загрузки сайта, которая уже не соответствовала современным ожиданиям пользователей. Кроме этого, чтобы оставаться в тренде, требовался переход с ширины рабочей области в 960 px на широкоформатную в 1280 px. 

  • Новые паттерны поведения пользователей

На смену интерфейсам с максимальной информативностью пришел минимализм, чистота, удобство и простота. Люди перестали вчитываться в текст и разбираться в том, как работает тот или иной инструмент. Перенасыщенные информацией страницы и кнопки с объемной структурой остались в прошлом. Стали менее популярны портальные блоки, потому что пользователи приходят за конкретной покупкой, и важно их не отвлекать. Скроллы и свайпы стали привычными явлениями в интерфейсе. Быстрота осуществления онлайн-покупки — приоритетной потребностью пользователя. 

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

image16-1.jpg?x39241

Интернет-магазин Антошка до и после редизайна

О том, что именно изменилось, и как с помощью интерфейса мы решили новые потребности пользователей смотрите на примере ключевых страниц сайта.

Какие ключевые изменения в интерфейсе Антошка повлияли на его эффективность За 6 лет структура каталога, блоков и сайта в целом претерпела значительные изменения, которые не контролировались UX агентством. Каталог вырос настолько, что категории не помещались на одной странице. Визуально сайт выглядел устаревшим, что снижало его позиции по сравнению с конкурентами. 

Изучив данные аналитики и опираясь на уже имеющийся опыт работы с интернет-магазинами детской тематики, мы поняли, что ключевыми страницами сайта являются:

  • Карточка товара;
  • Корзина;
  • Чекаут.

Карточка товара 

Мы провели анализ юзабилити старой карточки товара и выделили следующие проблемы:

  • Расфокусировка внимания. Сразу возле основного товара был расположен блок с предложением дополнительных товаров, что отвлекало пользователя от принятия решения. 

image2-1.jpg?x39241
Карточка товара в прежнем дизайне

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

Решение:

Мы структурировали информацию на странице карточке товара за счет того, что сделали сайт широкоформатным. Сформировали визуальные акценты на трех блоках:  

  • Фотография 
  • Блок принятия решения: цена, притягивающая основное внимание кнопка купить, и второстепенные призывы — распечатать карточку товара,  поделиться товаром через email. 
  • Служебная информация о доставке и оплате. 

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

image3-1.png?x39241

Проработали порядка 10 видов карточек товара в зависимости от группы товаров, так как для продажи обуви и игрушек важны разные акценты.  

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

image11.gif?x39241

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

Основной упор был сделан на мобильную версию сайта в связи с новыми трендами.

image15.gif?x39241

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

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

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

Правильная структура информации на новой странице карточки товара позволяет ознакомиться со всеми нужными параметрами и принять решение о покупке. Карточка товара стала соответствовать запросам современного пользователя.

Результат изменений страницы карточки товара:

Мы сравнили данные аналитики за 2 месяца до редизайна и через два месяца после и получили следующие результаты:

Количество пользователей, оформивших заказ после просмотра карточки товара в desktop, выросло на 45%, в mobile  на 47%.

Микроконверсия с карточки товара в корзину осталась без изменений, что является хорошим показателям, если брать во внимание, что за период измерений трафик увеличился  на 34% и 52%, в mobile и desktop соответственно. 

Корзина

Основные проблемы:

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

image7.jpg?x39241

Решение:

Реализовали корзину в двух видах:

  • как отдельную страницу;
  • как поп-ап.

Из-за отсутствия левого меню личного кабинета на отдельной странице корзины появилось больше пространства, которое мы максимально задействовали: слева разместили информацию о том, что находится в корзине, справа — все детали заказа. В результате больше информации для принятия решения попало на один экран.

image4.jpg?x39241

Добавили вкладку «Избранное» и «Вы просматривали», откуда пользователь одним кликом может добавить товар в корзину. Использование таких инструментов cross-sale позволяет напомнить пользователю, чем он интересовался ранее и увеличить средний чек интернет-магазина. 

image10-1.gif?x39241

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

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

image19.jpg?x39241

Результаты изменений страницы корзины:

После сравнения данных аналитики за 2 месяца до редизайна и через два месяца после мы увидели, что конверсия с корзины в чекаут в mobile выросла на 31%, в desktop  на 29%

Чекаут

По данным аналитики 53% пользователей не завершали оформление заказа.

image17.jpg?x39241

Основные проблемы:

  • Громоздкая длинная форма с большим количеством полей для заполнения, что отталкивало, пугало пользователя рутинностью.
  • Кнопка завершения целевого действия находилась в самом низу страницы, поэтому пользователь мог ее сразу не заметить.
  • Из-за увеличения с годами вариантов доставки и оплаты, подача информации в этом блоке стала некорректной
  • Чтобы понять какие варианты доставки и оплаты доступны, пользователю необходимо было совершать дополнительные шаги, открывая каждое подменю. Отсутствовала информация о режиме работы магазинов и наличии товаров в них.

image6.jpg?x39241

  • Лишние ссылки в шапке, которые уводили пользователя со страницы

image20.jpg?x39241

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

  • Отсутствовали подсказки и автозаполнение в формах

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

Решение:

Структурировали информацию в форме заказа, разбили ее на смысловые блоки, путем визуальных акцентов. Реализовали прилипающий блок с основными параметрами заказа. 

image5.gif?x39241

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

image9.jpg?x39241

Предусмотрели возможность оформления заказа без авторизации. 

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

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

image1.gif?x39241

В каждом поле реализовали подсказки и возможность автозаполнения

Результат:

  • В mobile процент пользователей, оформивших заказ, вырос на 35%, если сравнивать период 2 месяца до и после редизайна.
  • В desktop количество пользователей, оформивших заказ, выросло на 43%

Интересные фичи детского интернет-магазина Помимо детальной проработки страниц сайта, добавили интересный функционал, который помогает пользователям экономить деньги и время. 

1. Моя семья

В личном кабинете интернет-магазина Антошка добавили вкладку «Моя семья», куда  пользователь может добавить данные о своих детях и получать более релевантную, персональную выдачу товаров.  

Например, после введения данных в выдаче автоматически будут выводиться игрушки для четырехлетнего ребенка или показана обувь только 29 размера для мальчика.

image13.png?x39241

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

Такие мелочи формируют отношение покупателей к бренду, демонстрируют заботу о своем клиенте

2. Отслеживание заказа 

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

image14.jpg?x39241

3. Список желаний

Дизайн личного кабинета детского интернет-магазина Антошка позволяет из перечня «Избранное» создавать списки желаний. Это часть личного пространства пользователя: он может оформить свои пожелания в отдельный список и уйти с сайта, все товары при этом сохранятся и при авторизации будут доступны.

image12.png?x39241

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

4. Омниканальная программа лояльности

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

image18.png?x39241

Как продлить жизнь интерфейсу, и не упустить время? В результате редизайна коэффициент конверсии интернет-магазина Антошка вырос на 36%.

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

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

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

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

Источник

Перейти на сайт

Полный текст статьи читайте на CMS Magazine