Редизайн интернет-магазина автошин с упором на простоту выбора и совершение покупки

Вступление

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

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

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

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

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

Аналитика и старт работы

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

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

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

Проектирование

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

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

Дизайн-концепция

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

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

Следующим этапом стало создание предварительной концепции (протодизайн). Мы взяли каркас главной страницы из прототипа и заполнили его элементами из выбранных референсов.

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

Главная

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

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

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

Каталог

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

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

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

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

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

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

Чтобы удерживать пользователей и знакомить их с более широким ассортиментом, мы добавили блоки для кросс-продаж: «Похожие товары», «С этим товаром покупают», «Вы недавно смотрели».

Как и в случае с каталогом, после релиза страницы товара мы продолжаем улучшать пользовательский опыт. Так, в блок покупки был добавлен элемент, подсвечивающий, что цена включает НДС.

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

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

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

Итоги

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

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