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

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

---

Время — фактор, беспощадный к интерфейсам

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Какие ключевые изменения в интерфейсе Антошка повлияли на его эффективность

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

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

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

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

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

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

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

Решение:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Корзина

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

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

Решение:

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

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

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

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

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

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

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

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

Чекаут

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

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

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

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

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

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

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

Решение:

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

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

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

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

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

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

Результат:

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

Интересные фичи детского интернет-магазина

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

1. Моя семья

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

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

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

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

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

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

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

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

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

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

Как продлить жизнь интерфейсу, и не упустить время?

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

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

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

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

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

Автор: интернет—магазин Антошка