Редизайн сайта The Spy Store: как повысить конверсию на 16% за 1 месяц?

Как повысить конверсию на 16% за 1 месяц с помощью эволюционного редизайна сайта (ESR)? Как UX-аудит может помочь выявить существующие проблемы юзабилити и найти новые точки роста для повышения конверсии? Узнайте, как это сделать на примере редизайна сайта интернет-магазина Spy Store.

The Spy Store: знакомство с проектом

The Spy Store —  это авторитетная австралийская компания, которая специализируется на оборудовании и услугах наблюдения. Имея почти 10 лет опыта работы на рынке, магазин ценит свою репутацию и предлагает высококачественные инструменты, которые тщательно проверяются специалистами компании.

Целевая аудитория the Spy Store включает:

• Обычные люди;
• Частные детективы; 
• Правоохранительные органы;
• Бизнес.

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

Поэтому компания The Spy Store обратилась к Турум-бурум с такими задачами:

• Понять причины низких показателей KPI электронной коммерции;
• Выявить проблемы юзабилити на текущем сайте;
• Найти новые точки роста;
• Разработать удобный пользовательский интерфейс;
• Внедрить интуитивно понятную навигацию;
• Правильно расставить акценты в интерфейсе;
• Повысить коэффициент конверсии бизнеса.

Интерфейс the Spy Store: 6 критических ошибок и их решения

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

1. Недоработанная стилистика и перегруженная шапка сайта

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

Заголовок сайта был перегружен информацией. Он содержал 4 информационных блока контрастных цветов, поэтому элементы навигации слабо контрастировали с фоном. Из-за этого клиенты, особенно новые, не могли найти нужную информацию, погрузиться в проект и должным образом перемещаться по сайту.

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

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

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

2. Главная страница: неочевидные услуги интернет-магазина

Проблема: Вебсайт имел высокий показатель отказов (77,87%) и показатель выходов (54,03%), поскольку клиенты было недостаточно информации об услугах компании, они не понимали преимущества, которые могут получить. Это связано с тем, что главный баннер сайта не транслировал основной месседж компании и не мог завлечь пользователей двигаться далее по воронке.

Решение: Мы создали эстетически приятный баннер с описательным заголовком и четким призывом к действию (CTA). Он мотивирует посетителей углубиться в сайт, одновременно отсеивая людей, которые не являются целевой аудиторией The Spy Store.

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

3. Неструктурированная и загроможденная страница выдачи

Проблема: В результате UX-аудита мы выявили, что 48,23% новых пользователей и 50,49% постоянных покупателей покидали вебсайт, не просмотрев ни одну другую страницу. Кроме того, только 0,13% всех пользователей переходили на страницу сравнения товаров. Это было вызвано тем, что страница выдачи была плохо структурирована и сложна для навигации: текстовое описание переместило список товаров ниже первого экрана, наименования товаров были слишком большими, цена и скидка были трудно различимы, кнопка сравнения была неудобной и непривычной.

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

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

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

4. Отсутствие кнопок "добавить в избранное и купить"

Проблема: Согласно нашему исследованию, только 2,9% новых пользователей и 8,21% вернувшихся добавляли товар в корзину после просмотра страницы выдачи. Причина — на превью карточки товара на странице выдачи не было двух ключевых кнопок, необходимых для оптимизации конверсии: "добавить в список желаний" и "добавить в корзину". Из-за этого пользователям сайта приходилось делать дополнительные шаги, чтобы завершить целевое действие — совершить покупку.

Решение: Добавить кнопки "Купить" и "Добавить в избранное" в превью карточки товара, чтобы пользователи могли добавлять товары в список желаний или корзину без лишних действий и возвращаться к ним, когда они будут готовы к покупке. Таким образом, если пользователю понравилось несколько товаров, он может добавить их в список желаний/корзину, не отвлекаясь от просмотра ассортимента. Таким образом, мы заботимся о клиентах и помогаем им выбрать продукт, который лучше всего соответствует их потребностям.

Практические рекомендации: Чтобы максимально удовлетворить требования целевой аудитории, учитывайте особенности предлагаемых товаров. Например, The Spy Store продает электронику — товары среднего и высокого ценовых сегментов. Может возникнуть ситуация, когда покупатель не может позволить себе купить товар прямо сейчас, но собирается сделать это после получения зарплаты и т.д. В таких случаях кнопка "Добавить в список желаний" позволяет выбрать товар и купить его позже. В то же время возможность сразу добавить товар в корзину увеличивает шансы на спонтанную покупку.

5. Нарушение визуальной иерархии карточки товара

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

Решение: Мы предложили увеличить отступы между информационными разделами и исправить визуальную иерархию блоков на странице. Сначала мы разместили раздел с информацией, необходимой для принятия решения о покупке (цена товара, наличие кода, рейтинг), затем — блок с деталями о товаре и доставке, а ниже — cross-sale блок. Такая иерархия соответствует маркетинговой стратегии AIDA: внимание (attention) - интерес (interest) - желание (desire) - действие (action). Она облегчает восприятие информации пользователем и повышает конверсию интернет-магазина.

Практические рекомендации: Убедитесь, что страница товара не перегружена информацией, но при этом содержит все важные детали, и пользователи могут найти их без лишних усилий. Расставьте приоритеты блоков в соответствии со спецификой товара, разместив на первом экране самые важные данные, такие как название, цена, рейтинг, кнопка "Добавить в корзину" и т.д. В таком случае у пользователя будет вся необходимая информация для принятия решения перед глазами. Все остальные детали, такие как описание, характеристики, блок cross-sale, upsell и т.д., можно разместить ниже для тех, кто нуждается в дополнительной информации перед покупкой.

         6. Трудности с покупкой сразу нескольких товаров

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

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

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

Результаты редизайна сайта The Spy Store: основные изменения KPIs

В этой статье мы осветили лишь часть проделанной работы. После UX-аудита команда Turum-burum составила список из более чем 60 рекомендаций для оптимизации конверсии The Spy Store. В тесном сотрудничестве с подрядчиком мы определили наиболее критические ошибки юзабилити и исправили их благодаря эволюционному редизайну сайта. 

Как изменились KPIs после внедрения новых UX/UI решений уже через 1 месяц:

• Коэффициент конверсии электронной коммерции увеличился на 16%;
• Увеличилось количество посетителей сайта с мобильных устройств;
• Коэффициент бизнес-конверсии для возвращающихся клиентов улучшился на 4%;
• Мы проследили положительную тенденцию в конвертации новых посетителей в покупателей;
• Количество товаров, добавленных в корзину в мобильной версии, увеличилось на 100%, а в десктопной - на 39%;
• Процент пользователей, которые добавляют товары из карточки товара, вырос на 80%;
• Средний доход на одного пользователя (ARPU) увеличился на 20%.

Как видно из этой статистики, UX-аудит The Spy Store позволил интернет-магазину получить доход, который не мог быть получен ранее из-за имеющихся ошибок в интерфейсе и функционале. А поскольку 75% опрошенных пользователей утверждают, что формируют свое мнение о компании и доверие к ней только на основе ее веб-сайта, инвестиции в качественное юзабилити-тестирование могут помочь бизнесу найти новые точки роста и повысить конверсию. Сейчас мы продолжаем оптимизацию дизайна, контента и пользовательского опыта сайта The Spy Store, чтобы еще больше усилить эти положительные тенденции.

‍