О проекте
Lumier — норвежская компания, предлагающая премиальное электрооборудование по доступным ценам для B2B и B2C клиентов. Хотя это молодой семейный бизнес, его основатель Пер Норман Нильсен имеет более 40 лет опыта в предпринимательстве и владеет несколькими известными брендами, связанными с электроникой.
Задачи:
- Улучшение интерфейса сайта;
- Привлечение новых пользователей и увеличение количества постоянных клиентов;
- Повышение узнаваемости бренда;
- Увеличение конверсии онлайн-магазина.
UX-аудит и ESR подход
Начали работу с комплексного исследования десктопной и мобильной версий сайта. После UX-аудита предоставили почти 60 рекомендаций для оптимизации конверсии.
Продолжили работы по ESR (Evolutionary Site Redesign) подходу, чтобы пошагово усовершенствовать интерфейс для улучшения пользовательского опыта и конкурентоспособности.
1. Персонализированные блоки на главной странице
Проблема: 40% пользователей, которые просматривали главную страницу, были повторными клиентами. Однако для этой категории клиентов не хватало персонализированных блоков.
Решение: Добавить на главную страницу сайта несколько клиентоориентированных блоков:
- для постоянных посетителей — «последние покупки» или «недавно просмотренные товары»
- для новых пользователей — блоки с различными товарами, сгруппированными по популярности, сфере использования или рейтингу.
2. Интуитивно понятная навигация и удобное меню
Проблема: Меню десктопной версии было слишком сложным, а некоторые категории растягивались на 3 строки. В мобильной версии после нажатия кнопки «Назад» пользователи возвращались не на предыдущую страницу, а в бургер-меню или на другую категорию.
Решение: Сделать категории 2-го и 3-го уровней открытыми по умолчанию и упорядочить их в пределах экрана. Для мобильной версии предложили добавить кнопку «Назад» и переместить бургер-меню влево для облегчения навигации.
Проблема:
- Длинный список фильтров, а некоторые из них использовались редко;
- Отсутствие списка примененных фильтров;
- Отсутствие кнопки для очистки выбранных фильтров.
Решение: Оставить только 5-7 самых популярных фильтров, а остальные параметры представить в виде бургер-меню. Добавить блок с перечнем примененных фильтров и кнопки сброса фильтров.
4. Список товаров, стимулирующий к покупке
Проблема: На карточках товаров Lumier не хватало информации, которая бы подчеркивала ценность предложения и не хватало ключевых характеристик каждого продукта.
Решение: Выводить общий рейтинг продуктов, информацию об акциях и распродажах на карточках товара на странице выдачи каталога, добавить ключевые характеристики товара и кнопку «Добавить в корзину».
5. Информативная карточка товара
Проблема: Отсутствие детальной информации о сроках, цене и способе доставки, что негативно влияло на KPI.
Решение: Добавить визуально выделенный блок с информацией о способах доставки и ее оплаты, используя яркие иконки или список для наглядности.
4. Список товаров, стимулирующий к покупке
Проблема: На карточках товаров Lumier не хватало информации, которая бы подчеркивала ценность предложения и не хватало ключевых характеристик каждого продукта.
Решение: Выводить общий рейтинг продуктов, информацию об акциях и распродажах на карточках товара на странице выдачи каталога, добавить ключевые характеристики товара и кнопку «Добавить в корзину».
5. Информативная карточка товара
Проблема: Отсутствие детальной информации о сроках, цене и способе доставки, что негативно влияло на KPI.
Решение: Добавить визуально выделенный блок с информацией о способах доставки и ее оплаты, используя яркие иконки или список для наглядности.
Проблема: Кнопки выбора количества товара были слишком маленькими, а основной акцент был на иконку «удалить», что приводило к высокому уровню выходов со страницы.
%25201.png)
Решение: Увеличить кнопки выбора количества, сместить акцент с иконки удаления товаров, выровнять по размеру блоки цены и количества и уменьшить расстояние между названием товара и его ценой/количеством в десктопной и мобильной версии е-коммерс.
%25202.png)
Результаты редизайна
В этом кейсе мы описали лишь небольшую часть проделанной нами работы. Благодаря качественному UX аудиту и эффективному сотрудничеству с клиентом, мы:
- определили наиболее критические ошибки юзабилити;
- выбрали наиболее эффективную стратегию редизайна конкретно для этого кейса;
- разработали клиентоориентированный интерфейс с интуитивно понятной навигацией;
- подчеркнули преимущества предлагаемых продуктов;
- расставили правильные акценты;
- предоставили пользователям необходимую информацию для принятия решения о покупке.
Читать полную версию кейса
