Кейс "Антошка": как редизайн интернет-магазина привел к росту коэффициента конверсии на 36%

Фото: со страницы Facebook «Антошка»

Сеть детских магазинов "Антошка" с 2011 года до 2018 года занималась изменениями внутренних процессов, повышением эффективности магазинов, изменением логотипа, созданием нового формата. Перепрошивка коснулась и интернет-магазина. Его начали менять в 2014 году. В результате редизайна коэффициент конверсии интернет-магазина вырос на 36%.

Дмитрий Куруза, исполнительный директор компании по проектированию и дизайну интерфейсов "Турум-бурум", рассказал о кейсе "Антошка" в колонке, вышедшей в издании ain.ua. Приводим его  рассказ частично.

---

Помимо внутренних процессов менялись запросы пользователей. С 2014 года на сайты чаще стали заходить с мобильных устройств – за последние шесть лет этот показатель вырос на 400%.

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

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

Что изменилось

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

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

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

• Корзина;

• Чекаут.

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

Анализ юзабилити старой карточки товара показал несколько проблем.

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

Карточка товара в прежнем дизайне

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

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

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

• Фотография 

• Блок принятия решения: цена, притягивающая основное внимание кнопка "Купить", и второстепенные призывы – распечатать карточку товара, поделиться товаром через email. 

• Служебная информация о доставке и оплате. 

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

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

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

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

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

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

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

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

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

Корзина

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

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

Решение. Реализовали корзину в двух видах: как отдельную страницу и как поп-ап.

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

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

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

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

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

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

Чекаут

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дополнительный функционал

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

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

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

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

Так можно подготовить список подарков на день рождения ребенка и поделиться им с гостями или посоветоваться с другим родителем по поводу покупки.

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

Вывод

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