66shin.ru

контекст

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

задача

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

роль

ux/ui дизайнер

контекст

«66шин.ру» — интернет-магазин шин, дисков, масел и колёсного крепежа. за девять лет работы компания выстроила лояльную базу клиентов и крепкую репутацию в регионе. но сайт всё это время оставался в первоначальном виде: визуально устаревший, с навигацией, которая не вела покупателя к покупке

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

70%

пользователей уходили из корзины, не совершив покупку

~15%

конверсия из карточки товара в корзину

9 000₽

средний чек — только шины, сопутствующие товары игнорировались

качественное исследование

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

кто покупает?

анализ аудитории показал чёткий портрет покупателя: взрослый мужчина 35–54 лет, 64% заходят со смартфона, 75% трафика из поисковых систем. они приходят с готовой задачей и раздражаются от мелких шрифтов, неочевидных иконок и сложных паттернов навигации. среднее время на сайте — от 14 до 23 минут.

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

качественное исследование

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

транскрипт интервью — респондент 1

транскрипт интервью — респондент 2

что говорили пользователи

оформление доставки — настоящая проблема: непонятно ни со сроками, ни с оплатой, ни с подтверждением заказа. проще съездить в их физический магазин

респондент 1 · опытный покупатель

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

респондент 1 · опытный покупатель

попробовал сравнение, но он оказался бесполезным — информации в нём меньше, чем на странице самого товара, и понять, что лучше, всё равно не получилось

респондент 2 · новый покупатель

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

респондент 2 · новый покупатель

job stories

На основе интервью я сформулировала Job Stories — они помогли сфокусировать дизайн-решения на реальных задачах, а не предположениях.

job story 1

когда наступает сезон смены шин

я хочу быстро найти подходящий вариант, чтобы не тратить много времени на поиски и не ошибиться с выбором

job story 2

когда я выбираю диски для машины

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

job story 3

когда я оплачиваю товар

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

job story: быстрый поиск вариантов

ux-тестирование

После формулировки гипотез я провела UX-тестирование с реальными участниками. Тесты проходили на существующем сайте — чтобы зафиксировать конкретные точки отказа и подтвердить найденные проблемы.

Карта UX-тестирования: сценарии, задания, информационные и навигационные проблемы

подбор по параметрам работал, но медленно

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

сравнение товаров скрыто и бесполезно

оформление заказа — главная точка отказа

пользователи не понимали, почему форма не пускает дальше, не видели стоимость доставки и не знали, как выбрать кредит

инструмент подбора по размерам хорош

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

тепловые карты и вебвизор

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

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

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

боли пользователей

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

Длинная форма без авторизации

Повторные покупатели видели полную форму — и уходили. Войти по номеру телефона было невозможно.

Ошибки без подсветки

Форма не пускала дальше, но не объясняла что не так. Пользователь кликал несколько раз и уходил

Кредит в «чёрном ящике»

Хотели купить в кредит, но форма не давала такой возможности — приходилось идти в поддержку.

Цена доставки — в конце

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

mobile-first

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

решения

главная страница: акцент на подборе

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

до

после

карточки товаров

страница товара: вся информация для решения

цена за штуку и за комплект видны сразу. характеристики стали кликабельными тегами. добавлен блок «можно в кредит» — пользователь сразу видит эту возможность и не идёт в поддержку.

оформление заказа: убрали лишнее

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

личный кабинет

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

что изменилось в продукте

исследование из шести источников: метрика, тепловые карты, вебвизор, интервью, job stories, ux-тестирование
инструмент подбора вынесен на первый экран — центр главной страницы вместо неработающего блока «только что проданы»
чекаут переработан полностью: авторизация по телефону, адаптивная форма, подсветка ошибок, цена доставки до оплаты
личный кабинет создан с нуля — активные заказы, бонусы, история, стимул к отзывам
карточка товара: прозрачная цена за штуку и комплект, кредит как опция, кликабельные теги характеристик
новые разделы: избранное, сравнение, страница производителя
мобильный опыт перестроен с учётом 64% смартфонного трафика

каждое дизайн-решение — прямой ответ на конкретную боль пользователя, зафиксированную в исследовании