Редизайн сайта Lumier: создание клиенториентированного интерфейса, который увеличивает продажи бизнеса

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

О проекте

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

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

Владельцы бизнеса обратились к Турум-бурум с следующими запросами:

• Улучшить интерфейс сайта;
• Привлечь новых пользователей и увеличить количество постоянных клиентов;
• Повысить узнаваемость бренда;
• Увеличить конверсию онлайн магазина.

UX-аудит: определение стратегии редизайна и потенциальных точек роста CR

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

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

Для редизайна мы выбрали стратегию ESR (Evolutionary Site Redesign), разработанную Турум-бурум, которая заключается в выявлении недостатков интерфейса с помощью аналитики и их последующем поэтапном устранении. 

Для этого кейса это было оптимальным решением, так как:

• платформа Lumier относительно молода и имеет небольшую посещаемость;

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

• некоторые аспекты веб-сайта нуждались в усовершенствовании для увеличения его конкурентоспособности.

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

Улучшение юзабилити сайта: наиболее критические проблемы и способы их устранения

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

1. Демотивирующая главная страница

Проблема: Согласно UX-аудиту, как минимум 40% пользователей, которые просматривали главную страницу, были повторными клиентами. Однако для этой категории клиентов не хватало персонализированных блоков, которые бы мотивировали их продолжить взаимодействие с сайтом.  Длинные списки товаров и бесконечный текст без визуально отделенных блоков приводили к высокому показателю выходов, слабому уровню вовлеченности пользователей и низкой глубине просмотра сайта.

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

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

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

2. Проблемы с навигацией: неудобное меню, отвлекающее от главного

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

Кроме этого, UX-аудит выявил юзабилити недостатки навигации и в мобильной версии сайта Lumier.

Обычно, когда пользователи просматривают список товаров и хотят перейти в другой раздел, они используют кнопку «Назад». Но в случае с Lumier после этого действия клиенты попадали не на предыдущую страницу, а в бургер-меню. Если же они снова нажимали кнопку «Назад», то попадали на страницу списка товаров в категории, которую ранее даже не просматривали. Такие вещи могут раздражать посетителей и заставлять их покидать сайт.

Решение: Для меню в десктопной версии мы рекомендовали сделать категории 2-го и 3-го уровней открытыми по умолчанию и разместить их в пределах доступной ширины экрана.

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

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

3. Каталог товаров: неудобные фильтры

Проблема: Во время UX-аудита мы выявили следующие проблемы с каталогом сайта:

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

2. Отсутствие списка примененных фильтров: Потенциальные клиенты не видели, выбрали ли они все необходимые параметры;

3. Отсутствие кнопки для очистки выбранных фильтров: Пользователям приходилось просматривать все опции в списке и отключать каждую отдельно.

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

Решение: Для удобного и эффективного поиска мы рекомендовали оставить только 5-7 самых популярных фильтров, чтобы не перегружать страницу. Остальные параметры мы предложили представить в виде бургер-меню. 

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

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

4. Список товаров: отсутствие элементов, которые побуждают к покупке

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

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

Практический совет: Добавляя информацию, подчеркивающую особенности или преимущества товаров, вы повышаете их ценность и привлекаете к ним внимание пользователей. Да, отличной идеей будет добавить блоки с отзывами и рейтингами товаров (социальное доказательство), а также такие разделы как «Хиты продаж», «Рекомендации», «Акции» и т.д.

5. Карточка товара: отсутствие информации об условиях доставки

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

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

Практический совет: почти 50% потребителей готовы ждать доставку до двух дней, и около 30% не против подождать 3-4 дня. Это означает, что обеспечив быструю доставку, вы можете значительно увеличить доход компании и конверсию электронной коммерции.

6. Неструктурированная и перегруженная информацией корзина

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

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

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

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

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

Редизайн сайта Lumier: достигнутые результаты 

В этом кейсе мы осветили лишь небольшую часть выполненной нами работы. После UX-аудита команда Турум-бурум сформировала список из почти 60 рекомендаций на норвежском языке для оптимизации конверсии Lumier. 

Благодаря качественному UX аудиту и эффективному сотрудничеству с клиентом, мы:

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

Кейс Lumier доказывает, что некоторые проблемы интерфейса не видны невооруженным глазом, но именно они могут быть причиной высокого показателя выхода с сайта и низкой конверсии. Юзабилити-аудит — это эффективный способ найти новые точки роста и скрытый потенциал вашей электронной коммерции. Предлагаем вам чек-лист из 170+ пунктов для самостоятельной проверки интерфейса.