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

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

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

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

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

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

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

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

Корзина

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

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

Решение:

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

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

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

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

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

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

Чекаут

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Моя семья

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник