Редизайн, который увеличил конверсию и привёл +15% новых покупателей в неделю

Заказчик

FastBox

Задача

Команда FastBox обратилась к нам за редизайном и frontend-разработкой интернет-магазина.

Клиент

FastBox — компания по доставке товаров из Польши в Россию и СНГ, существующая на рынке 7 лет. Сервисом пользуются сотни довольных покупателей.

В интернет-магазине FastBox можно заказать товар из каталога или прислать ссылку с другого сайта — и специалисты доставят выбранный товар. Данная услуга особенно популярна в России после ухода ведущих брендов.  

Задача

Команда FastBox обратилась к нам за  редизайном  и фронтенд-разработкой интернет-магазина.

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

Отдел аналитики изучил сайт, провел исследование на 100 страницах и выделил основные проблемы:

• Низкий органический трафик по сравнению с конкурентами.
• Текущий сайт не может привлечь новых клиентов, так как неудобны точки зрения UX/UI-дизайна. Это не позволяет удерживать внимание посетителей на страницах.
• Сложный путь пользователя из-за перегруженной навигации.
• Низкая скорость загрузки страниц сайта.
• Отсутствие шаблона для страниц категорий и карточек с товарами.
• Статистика показывает, что спрос растет в период осени и зимы. Необходимо учесть этот фактор в ходе сайта — например, добавить блок с промо-материалами и продвижением сезонных товаров.
• Плохая адаптивность для мобильных устройств.

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

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

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

Задачи проекта:

• Создать удобную смесь на основе анализа путей пользователя.
• Обновить каталог и карточки товаров.
• Соберите все элементы набора пользовательского интерфейса и подготовьте макеты всех страниц.
• Сделайте акцент на  главной странице  и в каталоге на мужскую аудиторию — это преобладающая ЦА. 
• Добавьте подборки с товарами и ссылки на популярные товары.
• Создайте удобный личный кабинет и корзину для быстрого и легкого шоппинга.
• Откройте доступ к адаптированной версии сайта и добавьте вкладку, чтобы клиент мог открыть интернет-магазин в браузере и переключаться между вкладками, как в приложении.
• Проработать SEO-факторы для будущего продвижения товаров.

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

Проектирование структуры интернет-магазина

Для начала мы распространили рекомендации аналитиков по страницам будущего сайта — собрали его структуру и основные блоки:

• Главная страница подборками и категориями товаров.
• Каталог с категориями и подкатегориями продукции. Также учли поиск товаров по брендам.
• Карточка товара с необходимыми условиями и основной информацией для покупателей — отзывы, оформление заказа, доставка, оплата, гарантии и возврат.
• Корзина с простой формой оформления заказа.
• Авторизация в личном кабинете с помощью номеров телефона и электронной почты.
• Основные страницы для покупателей — о компании, доставке и оплате.
• Указали возможности поисковой строки и варианты сортировки результатов.

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

  В корзине определены варианты списка товаров, когда клиент знакомит с продукцией из одной и нескольких категорий.

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

Дизайн интернет-магазина 

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

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

На главной странице наши дизайнеры состоят из следующих блоков:

• Шапка сайта с возможными разделами сайта, каталогом, поисковой строкой и личным кабинетом.
• Первый блок с баннерами и карточками — популярные товары и акции.
• Раздел с сезонной продукцией.
• Категории каталога.
• Тематические подборки — например, скидки на бытовую технику.
• Блок с идеями для вдохновения — например, как обустроить кухню. Такой принцип есть в интернет-магазине IKEA, когда при наведении на кнопку с плюсиком появляется название раздела или конкретного товара.
• Баннер с информацией и инструментами, позволяющий пользователю отправить ссылку на другой сайт — и специалисты FastBox рекомендуют товар.
• Товары с высоким рейтингом — выбор продукции, которую высоко оценили другие пользователи.
• Подвал с контактной информацией и возможными разделами сайта.

После согласования приступили к разработке макетов и сборке UI kit.

Для каждой страницы проработаны адаптированные макеты.

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

Авторизация в личном кабинете

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

Страницы с информацией для покупателей

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

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

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

Каталог

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

Когда пользователь нажимает на подкатегорию, он видит карточки товаров и фильтр. Сортировать продукцию можно по следующим параметрам:

• вверх — по направлениям и назначениям товаров.
• Слева — по подкатегориям, стоимости, состоянию товара (новый или б/у), наличию, бренду, цветовой гамме и размеру.

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

Карточка товара

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

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

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

• Фотографии цвета.
• Название, цена и наличие товара.
• Оценка и количество отзывов.
• Варианты цветов и сборка по заказу.
• Информация по срокам доставки и ее стоимости.
• Блок с отличными описаниями, отзывами, как сделать заказ, а также данные о героях, доставке, гарантиях и возврате.
• Раздел с товарами продавца и сопутствующей продукцией, которая может заинтересовать покупателя. Последняя категория на основе просмотренных и сохраненных позиций.

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

Корзина

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

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

Если товара нет в наличии, они были обработаны в блоке «Закончились». Таким образом, клиент может выбрать замену и отследить товар во вкладке «Избранное», чтобы проверить, когда он поступит в продажу.

Оформление заказа на двух этапах:

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

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

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

Далее открывается такое же окно оформления заказа из двух шагов.  

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

В личном кабинете покупатель видит:

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

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

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

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

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

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

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

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

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

Интеграция внешних каталогов

Из-за ухода за мировыми брендами в России стали популярными услуги по доставке товаров из зарубежных интернет-магазинов: ZARA, H&M и других. Fastbox решил освоить это направление, и чтобы реализовать эту бизнес-идею, мы создаем дизайн для внешних каталогов.

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

Фронтенд-разработка

Пользовательский интерфейс реализован на основе HTML, CSS, Java Script с использованием фреймворков React, Vue.js и SSR.

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

Для интернет-магазина реализовали русскоязычную версию сайта. Настроили передачу данных через API, а также рекомендации со стороны сервисов:

• Google Карты;
• Яндекс Карты;
• Почта России;
• Платежная система Сбербанка.
• Платежная система YooMoney.

Дальнейшие работы по бэкэнду выполнялись на стороне заказчика.

Результат

Мы спроектировали новый интерфейс интернет-магазина и личного кабинета, оптимизировали структуру сайта, каталога и категорий, а также ограничили карточку товара и оформление заказа.

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

Итоги проекта за квартал: 

• Более 100 000 человек каждый день пользуются интернет-магазином.
• 1 000 000+ просмотров карточек товаров в каталоге ежедневно.
• 15% еженедельный прирост новых клиентов и трафика.

Обновленный интерфейс поможет покупателям быстрее и проще совершать покупки на сайте FastBox.

Что дальше

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