Как увеличить конверсию на 36% меняя интерфейс под пользователей — кейс «Антошка»
- Заказчик
- Антошка - это 40+ магазинов в Украине, 20+ лет лидирующие позиции на рынке Украины, 430000 онлайн посещений в месяц, один из победителей премии RAU Awards 2020
- Задача
- Предыдущий интерфейс для интернет-магазина Антошка компания Турум-бурум создавала еще в 2013 году. Все факторы указывали на то, что нужно применить RSR подход в редизайне, т.е. создать новый интерфейс
Время — фактор, беспощадный к интерфейсам Можно бесконечно долго чинить и тюнинговать Волгу, но больше 170 км/ч она не поедет и вместительней не станет. Так, и интернет-магазину можно продлить жизнь на 5-7 лет применяя эволюционный подход, постоянно дорабатывая и улучшая интерфейс. Но рано или поздно вы придете к мысли, что выгоднее снова поменять дизайн комплексно.
Со временем меняется спрос, поведение пользователей и их привычки. В истории с компанией «Антошка» редизайн сайта интернет-магазина стал неизбежным из-за множества факторов, которые возникли под влиянием времени.
Масштабирование бизнеса
Сеть магазинов активно росла, расширяла ассортимента и услуги. Из магазина детских товаров «Антошка» превратился в семейного помощника и друга: школа будущих мам, клубы развития, консультации педиатров, игровые центры, парикмахерские, кафетерии. Кроме того, магазины стали точками самовывоза продукции.
Рост доли пользователей mobile
В 2013 году не было такого количества mobile пользователей, приоритетной задачей того времени был удобный адаптив. С 2014 по 2020 года количество пользователей сайта с мобильных устройств выросло на 400%, к чему интернет-магазин не был готов.
Смена дизайн-концепции
В 2015 году были созданы собственные игровые персонажи бренда — люмеры.
В рамках мультиканальной системы развития бизнеса нужно было объединить офлайн и онлайн стилистику воедино. Герои стали проводниками по интерфейсу, которые встречаются в шапке, на странице выдачи, демонстрируют новости, приглашают в парикмахерскую, ведут пользователя через весь сайт, связывая воедино все порталы и блоки, а также оффлайн и онлайн точки.
- Изменение технологий
Главной проблемой стала низкая скорость загрузки сайта, которая уже не соответствовала современным ожиданиям пользователей. Кроме этого, чтобы оставаться в тренде, требовался переход с ширины рабочей области в 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%.
Интересные фичи детского интернет-магазина Помимо детальной проработки страниц сайта, добавили интересный функционал, который помогает пользователям экономить деньги и время.
1. Моя семья
В личном кабинете интернет-магазина Антошка добавили вкладку “Моя семья”, куда пользователь может добавить данные о своих детях и получать более релевантную, персональную выдачу товаров.
Например, после введения данных в выдаче автоматически будут выводиться игрушки для четырехлетнего ребенка или показана обувь только 29 размера для мальчика.
В интернет-магазине Антошка пользователь может ежемесячно отслеживать выгодные предложения по товарам, которые соответствуют возрасту его ребенка, осуществлять быстрый поиск по каталогу и пользоваться персональной скидкой ко дню рождения ребенка
Такие мелочи формируют отношение покупателей к бренду, демонстрируют заботу о своем клиенте
2. Отслеживание заказа
На стартовой странице в шапке разместили кнопку “Отследить заказ”, чтобы покупатель мог быстро узнать всю информацию о своей покупке, не тратя время на вход в личный кабинет и прочие действия.
3. Список желаний
Дизайн личного кабинета детского интернет-магазина Антошка позволяет из перечня “Избранное” создавать списки желаний. Это часть личного пространства пользователя: он может оформить свои пожелания в отдельный список и уйти с сайта, все товары при этом сохранятся и при авторизации будут доступны.
Так можно подготовить список подарков на день рождения ребенка и поделиться им с гостями или посоветоваться с другим родителем по поводу покупки. Такой функционал повышает лояльность пользователей к магазину и они чаще возвращают за покупками.
4. Омниканальная программа лояльности
Компания синхронизировала офлайн и онлайн работу скидочных и накопительных программ, чтобы вести общую базу. Поэтому в личном кабинете мы предусмотрели отдельную вкладку “Моя скидка”, где пользователь видит подробную информацию обо всех возможных выгодах.
Как продлить жизнь интерфейсу, и не упустить время? В результате редизайна коэффициент конверсии интернет-магазина Антошка вырос на 36%.
Если вы долгое время не совершенствуете интерфейс, он теряет свою актуальность, технические характеристики перестают соответствовать современным требованиям, эффективность сайта снижается. В таком случае выгоднее подходить к решению проблемы комплексно, использовать революционный подход и проводить полный редизайн сайта.
После чего при помощи ESR (эволюционного подхода) вы можете максимально продлить жизнь своему проекту, постоянно совершенствуя его в соответствии с современными трендами и паттернами поведения пользователей.
В первую очередь, обращайте внимание на ключевые страницы сайта, но не забывайте и о фичах, которые сделают ваш интерфейс особенным, и станут преимуществом в глазах пользователей.
При выборе подхода лучше ориентироваться на данные аналитики и мнение экспертов. Начните с юзабилити-аудита. Так вы получите детальный отчет о недостатках сайта, который поможет принять рациональное решение — революция или эволюция нужна в вашем случае.