Разработка дизайна интернет-магазина шин и дисков: как RSR подход вывел Shiny&Diski на новый уровень

Как сделать качественный скачок в продажах благодаря редизайну интернет-магазина по подходу RSR? Представляем вам кейс, который даст ответ на этот вопрос. Денис Студенников, СОО компании Турум-бурум, рассказал в деталях об изменении интерфейса интернет-магазина Shiny&Diski.

Знакомство с компанией «Shiny&Diski»

У компании Shiny&Diski, основанной в 2012 году, большой опыт работы и хорошая репутация. Бренд специализируется на продаже шин и дисков, входит в топ-3 проектов в указанной нише, является официальным представителем компаний Nokian, Michelin, Continental и Goodyear.

Приоритет бренда — легкость подбора и покупки шин. Поэтому в онлайн-магазине Shiny&Diski клиенты могут воспользоваться шинным калькулятором, ознакомиться с подробной характеристикой товаров, получить заказ в течение 1-3 дней различными логистическими компаниями или забрать в пункте самовывоза через 3 минуты после оформления заказа.

Подробнее о проекте

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

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

Дизайн сайта шин и дисков должен был удовлетворить потребности следующих категорий потребителей:

• Постоянные клиенты, желающие быстро оформить заказ;
• Новые пользователи, не знакомые с ассортиментом магазина;
• Не слишком уверенные интернет-пользователи.

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

Разработка интернет-магазина шин по RSR подходу: этапы и решения

Для работы с данным кейсом и создания дизайна сайта Shiny&Diski мы использовали RSR (Revolutionary Site Redesign) подход. Он заключается в масштабном обновлении стилистики сайта, пересмотре его функционала и улучшении юзабилити, то есть — полном редизайне интернет-магазина.

Далее подробно разберем этапы редизайна сайта и примеры решений UX/UI.

UX-аудит

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

Проанализировав данные аналитики интернет-магазина Shiny&Diski, мы обнаружили ряд факторов, которые негативно влияли на успешность компании:

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

Стилистика: минимализм и функциональность

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

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

Единственное, что выбивается из этой концепции, — красный цвет. Учитывая стилистическую минималистичность сайта, яркий цвет привлекает максимальное внимание пользователей. Таким образом, мы выделили важные элементы и CTA (call-to-action) на страницах, расставив необходимые акценты.

Дизайн главной страницы интернет-магазина

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

1. Нестандартные решения для усиления конкурентоспособности компании

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

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

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

2. Акцент на экспертности и социальное доказательство

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

3. Оптимизированная навигация

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

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

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

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

Страница выдачи товаров: разграничиваем главное и второстепенное

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

Для этого мы:

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

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

Карточка товара: интерфейс, который стимулирует клиентов оформить заказ

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

Десктоп версия

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

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

Справа от фотографии разместили наиболее важную информацию для принятия решения. Здесь выводятся рейтинг, отзывы, статус и цена товара, а ниже — его основные характеристики. Интересным решением является также инструмент "нашли дешевле?". Им клиенты пользуются довольно редко, но сам факт его существования говорит об уверенности компании Shiny&Diski в своем предложении.

Кроме этого, на странице есть инструмент cross-sale, а именно — опция страхования. Действенным маркетинговым ходом является расчет стоимости услуги на день. Читая фразу "32 копейки в день", клиент понимает, что страховка стоит меньше чем все, что он покупает в течение дня, и склоняется к покупке.

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

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

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

Адаптивный дизайн сайта

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

• Оставили хлебные крошки, но сделали их под скролл, поскольку по данным аналитики ими пользуются нечасто;

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

• Оставили большую часть первого экрана под изображение товара с возможностью зума;
  
• Добавили блок о популярности товара "Сегодня уже купили N раз";

• Сделали акцент на кнопке "Купить" с помощью цвета и вынесли ее отдельно от других UX/UI элементов;

• Добавили блоки cross-sale и upsell;

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

• Зафиксировали панель с основным функционалом (Купить, сравнить, добавить в "Избранное") внизу экрана, чтобы пользователь мог двигаться вглубь воронки из любой точки страницы;

• Вывели блок основных характеристик товара и далее остальную информацию подаем по принципу один экран — одно действие.

Корзина и страница оформления заказа

Корзину мы создали в форме pop-up, тем самым уменьшив количество шагов к оформлению заказа. Она также содержит инструмент cross-sale услуг страхования. В корзину автоматически добавляется 4 колеса, ведь по данным аналитики чаще всего покупают сразу четыре единицы, однако пользователь может легко изменить количество товара.

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

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

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

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

Мы полностью пересмотрели интерфейс сайта и детально проработали каждую его страницу, придерживаясь при этом принципа mobile first:

• Разработали минималистичный и функциональный дизайн интернет-магазина;
• Увеличили количество точек входа;
  
• Предоставили клиентам возможность получить консультацию по телефону с любой страницы сайта;
• Разработали удобную навигацию и опцию поиска товара с подсказками;
• Структурировали информацию, убрали лишнее;
• Сделали акцент на экспертности и надежности компании;
• Добавили яркие баннеры на главной странице, как дополнительные точки входа, и поощрили пользователей продвигаться дальше по сайту;
• Развернули сортировку, чтобы упростить поиск необходимого товара и тем самым сократить путь пользователя;
• Добавили инструменты cross-sale на всех этапах оформления заказа;
• Использовали действенные маркетинговые стратегии для увеличения конверсии интернет-магазина.

Во время работы над проектом, которая длилась более 2 месяцев, мы постоянно общались с владельцами компании Shiny&Diski, прислушивались к их пожеланиям и обосновывали собственные решения. Активное взаимодействие между UX/UI дизайнером и клиентом позволило нам создать дизайн, который помогает решить задачи широкой целевой аудитории и сочетает в себе простоту и легкость, с яркостью и функциональностью.