Усилили UX и визуал, сохранив дизайн-концепцию для всемирно известного бренда белья и одежды

Запрос клиента

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

Провели аудит

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

Более подробно о том, как мы проводим аудиты — рассказываем здесь.

Навигация

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

Внедрили «умный» поиск: исправление ошибок и опечаток, популярные запросы, подсказки, поиск по категориям и другие полезные фичи для поиска и выбора товаров.

Главная

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

Каталог

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

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

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

Страница товара

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

Фото товара увеличили и выстроили вертикальной лентой — так пользователь может пролистать все ракурсы без лишней прокрутки.

Рядом с ценой и кнопкой покупки добавили информацию о BNPL (покупка в рассрочку), чтобы пользователь сразу видел доступные варианты оплаты. В этом же блоке показали способы, сроки и стоимость доставки. А еще добавили понятное руководство по размерам с измерениями и подсказками по выбору.

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

Корзина и оформление

Полностью омниканальную корзину со сложной логикой взаимодействия складов, доставок и программ лояльности мы сейчас разрабатываем. Более подробно об этом решении мы рассказали в нашей другой статье — читать кейс «Омниканальная корзина со сложной логикой для New Balance».

Итоги

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

Результат измеримый — после внедрения изменений конверсия в покупку выросла на 37,7% в мобайле и на 63% в десктопе. Теперь интернет-магазин не только отражает эстетику бренда, но и стал более сильным инструментом продаж.

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