Клиент
FastBox — компания по доставке товаров из Польши в Россию и СНГ, существующая на рынке 7 лет. Сервисом пользуются сотни тысяч довольных покупателей.
В интернет-магазине FastBox можно заказать товар из каталога или прислать ссылку с другого сайта — и специалисты доставят необходимый продукт. Данная услуга особенно популярна в России после ухода зарубежных брендов.
Задача
Команда FastBox обратилась к нам за редизайном и frontend-разработкой интернет-магазина.
Ранее мы уже сотрудничали с заказчиком по продвижению сайта. На основе обсуждений и наших рекомендаций клиент принял решение улучшить дизайн интернет-магазина.
Прошлый дизайн интернет-магазина FastBoxОтдел аналитики изучил сайт, провел исследование на 100 страниц и выделил основные проблемы:
- Низкий органический трафик по сравнению с конкурентами.
- Текущий сайт не может привлечь новых клиентов, так как страницы неудобны с точки зрения UX/UI-дизайна. Это не позволяет удерживать внимание посетителей на страницах.
- Сложный путь пользователя из-за перегруженной навигации.
- Низкая скорость загрузки страниц сайта.
- Отсутствие единого шаблона для страниц категорий и карточек с товарами.
- Статистика показывает, что спрос растет в период осени и зимы. Необходимо учесть этот фактор в структуре сайта — например, добавить блок с промо-материалами и продвижением сезонных товаров.
- Плохая адаптивность для мобильных устройств.
Выжимка из отчета от отдела аналитикиОшибки на сайте мешали продвижению в поисковых сетях и снижали уровень конверсий. Посетитель мог покинуть страницу из-за долгой загрузки или потому что не нашел сразу нужный товар.
На основе результатов исследования мы определили главную цель и задачи проекта.
Цель редизайна: увеличение посещаемости сайта и повышение уровня конверсий.
Задачи проекта:
- Создать удобную структуру на основе анализа путей пользователя.
- Обновить каталог и карточки товаров.
- Собрать все элементы в UI kit и подготовить макеты всех страниц.
- Сделать акцент на главной странице и в каталоге на мужскую аудиторию — это преобладающая ЦА.
- Добавить подборки с товарами и ссылки на популярную продукцию.
- Создать удобный личный кабинет и корзину для быстрого и легкого шоппинга.
- Уделить внимание адаптивной версии сайта и добавить таббар, чтобы клиент мог открыть интернет-магазин в браузере и переключаться между вкладками как в приложении.
- Проработать SEO-факторы для будущего продвижения товаров.
Мы занимались проектированием и фронтендом, а команда заказчика взяла на себя работу с бэкендом.
Проектирование структуры интернет-магазина
Для начала мы распределили рекомендации аналитиков по страницам будущего сайта — собрали его структуру и основные блоки:
- Главная страница с подборками и категориями товаров.
- Каталог с категориями и подкатегориями продукции. Также учли поиск товаров по брендам.
- Карточка товара с важными характеристиками и основной информацией для покупателей — отзывы, оформление заказа, доставка, оплата, гарантии и возврат.
- Корзина с простой формой оформления заказа.
- Авторизация в личном кабинете с помощью номера телефона и email.
- Основные страницы для покупателей — о компании, доставка и оплата.
- Указали возможности поисковой строки и варианты сортировки результатов.
Структура нового интернет-магазинаЗатем подготовили прототипы — основные страницы интернет-магазина. За основу брали популярные решения из ритейла, чтобы реализовать привычный для пользователя путь. Например, открыть каталог с большим количеством категорий и справа увидеть все подкатегории, чтобы быстро найти нужную вкладку.
Прототипы основных страниц интернет-магазинаВ корзине указали варианты списков товаров, когда клиент приобретает продукцию из одной и нескольких категорий.
Варианты отображения списка товаров при оформлении заказаОбновленные пользовательские пути помогают аудитории сразу понять, на какой сайт она перешла, найти всю необходимую информацию по товару и бренду, использовать фильтры для быстрого поиска.
Дизайн интернет-магазина
Сначала мы улучшили корпоративный стиль FastBox и сделали редизайн логотипа.
Старый и новый логотипыЗатем подготовили дизайн-концепцию интернет-магазина с яркими контрастными оттенками и 3D-элементами, чтобы баннеры привлекали внимание пользователей.
На главной странице наши дизайнеры создали следующие блоки:
- Шапка сайта с основными разделами сайта, каталогом, поисковой строкой и личным кабинетом.
- Первый блок с баннерами и карточками — популярные товары и акции.
- Раздел с сезонной продукцией.
- Категории каталога.
- Тематические подборки — например, скидки на бытовую технику.
- Блок с идеями для вдохновения — к примеру, как обустроить кухню. Такой принцип есть в интернет-магазине IKEA, когда при наведении на кнопку с плюсиком появляется название раздела или конкретный товар.
- Баннер с информацией и кнопкой, позволяющей пользователю отправить ссылку с другого сайта — и специалисты FastBox найдут товар.
- Товары с высоким рейтингом — подборка продукции, которую высоко оценили другие пользователи.
- Подвал с контактной информацией и основными разделами сайта.
Дизайн-концепция интернет-магазинаПосле согласования приступили к разработке макетов и сборке UI kit.
UI kit для макетов интернет-магазина FastBoxДля каждой страницы проработали адаптивные макеты.
Адаптивные макетыКлиенты покупают товары с разных устройств, поэтому было важно адаптировать интернет-магазин под смартфоны. Так покупатели получат положительный опыт от удобного онлайн-шоппинга.
Авторизация в личном кабинете
В форму регистрации добавили возможность входа по номеру телефона и электронной почте. Это позволит клиентам выбирать, как им удобнее перейти в личный кабинет.
Варианты авторизацииСтраницы с информацией для покупателей
Оформили страницы, на которых пользователь может найти информацию о компании, получить ответы на часто задаваемые вопросы, прочитать отзывы, изучить условия доставки и оплаты, а также найти контактные данные и связаться с менеджером.
По функционалу Fastbox похож на байерный сервис, поэтому у клиентов могут возникать вопросы о том, как устроена платформа и откуда поставляются товары. На этой странице пользователь может убедиться в надежности и довериться компании.
Также добавили обязательные страницы — политика конфиденциальности и список запрещенных товаров, которые нельзя заказать в интернет-магазине по законодательным требованиям.
Информация для посетителей интернет-магазинаКаталог
Для удобной навигации по ассортименту оформили выпадающее меню каталога — при наведении на категорию открывается список подразделов.
Отображение каталогаКогда пользователь нажимает на подкатегорию, он видит карточки товаров и фильтр. Сортировать продукцию можно по следующим параметрам:
- вверху — по направлениям и назначениям товара.
- слева — по подкатегориям, стоимости, состоянию продукта (новый или б/у), наличию, бренду, цветовой гамме и размеру.
Просмотр товаров из категорииУдобная и привычная навигация помогает быстро находить товары и переключаться между страницами. За счет этого посетители дольше находятся на сайте. Это увеличивает глубину просмотра, положительно влияет на SEO и продажи за счет знакомства с большим количеством товаров.
Карточка товара
Карточку можно открыть двумя способами. Первый — быстрый просмотр. Здесь указано название продукта, стоимость и две кнопки: открыть описание и сразу добавить в корзину. Такой доступ к карточке помогает клиенту быстро изучить интересующий его товар и принять решение: продолжить просмотр и перейти к другому продукту.
Это удобное решение для онлайн-шоппинга, так как открытие новой страницы может раздражать пользователя, если он еще не заинтересован в нем достаточно сильно. А возможность моментального добавления в корзину сокращает шаги на пути к покупке.
Быстрой просмотр товараВторой вариант — отдельная страница продукта с подробной карточкой, где отражены:
- Фотографии товара.
- Название, цена и наличие продукта.
- Оценка и количество отзывов.
- Варианты цветов и сборки заказа.
- Информация по срокам доставки и ее стоимости.
- Блок с характеристиками, описанием, отзывами, как сделать заказ, а также данными по оплате, доставке, гарантиям и возврату.
- Раздел с товарами продавца и сопутствующей продукцией, которая может заинтересовать покупателя. Последняя категория формируется на основе просмотренных и сохраненных позиций.
Карточка товараИсчерпывающая информация о товаре закрывает все вопросы и сомнения покупателя и позволяет принять решение о покупке.
Корзина
В корзине пользователь может добавить комментарий к каждому товару — например, чтобы уточнить информацию у поставщика или указать точный размер. Такая функция редко встречается в e-commerce, но заметки полезны, когда клиент спустя время возвращается к товару и принимает финальное решение о покупке.
Слева показан список продуктов с фотографиями и возможностью выбрать количество. Справа рассчитывается полная стоимость с доставкой и итоговая цена заказа. Также покупатель может ввести промокод и получить скидку.
Если товаров нет в наличии, они попадают в блок «Закончились». Так клиент может выбрать замену и отслеживать продукт во вкладке «Избранное», чтобы проверять, когда он поступит в продажу.
Просмотр корзиныОформление заказа состоит из двух этапов:
- 1-й шаг — покупателю нужно указать свои данные.
- 2-й шаг — выбрать службу доставки и добавить адреса, куда курьер может привезти товар.
Простая форма позволяет клиенту быстро оформить заказ, не отвлекаясь на заполнение дополнительных полей.
Оформление заказаТакже в интернет-магазине есть возможность оформления заказа по ссылкам. К примеру, покупатель сохранил себе в закладки браузера ссылки товаров. Ему удобнее скопировать URL, вставить его в строку и добавить комментарий к продукту и заказу.
Далее открывается такое же окно оформления заказа из двух шагов.
Заказ товара по ссылкеЛичный кабинет
В личном кабинете покупатель видит:
- свои заказы;
- начисление виртуальной валюты;
- заказы, оформленные по дропшиппингу. Это форма продажи, при которой интернет-магазин занимается только реализацией товаров, а хранение и отправка лежит на стороне продавца.
- избранные товары.
- личные данные.
- настройки уведомлений и пароля.
Во вкладке «Мои заказы» дан список всех заявок с номером заказа, датой оформления, фотографиями товаров, статусом и суммой. Это помогает быстро найти интересующий заказ и отследить этап доставки.
Заказы клиента в личном кабинетеКлиент может провалиться в заказ и подробно изучить его статусы. Например:
- обрабатывается менеджером;
- ожидает оплаты;
- в обработке;
- упакован для отправки;
- находится в логистическом центре в Польше;
- отменен или выполнен.
Также здесь дано полное описание деталей заказа, комментарии от менеджера (когда приняли в работу и где сейчас находится товар) и этапы отслеживания посылки.
Статусы заказаВ интернет-магазине доступна система начисления бонусов — виртуальной валюты, которую покупатель в будущем может использовать для оплаты товаров. Монеты начисляются в формате кешбэка — при покупке определенной продукции. Эту информацию можно найти в карточке товара.
Начисление внутренней валютыВ разделе с дропшиппингом — так же, как и в заказах — дан список заявок и краткая информация по каждой из них.
Отслеживание заказов дропшиппингаВ следующей вкладке можно отредактировать контакты, заполнить паспортные данные, указать адреса и организации.
Личные данные клиентаВ настройках есть возможность выбрать варианты уведомлений — например, по SMS или email. Это нужно для отслеживания статусов заказа. Также в этой вкладке можно изменить пароль.
Настройка уведомлений и изменение пароляИнтеграция внешних каталогов
Из-за ухода мировых брендов в России стала популярна услуга по доставке товаров из зарубежных интернет-магазинов: ZARA, H&M и другие. Fastbox решил освоить это направление, и чтобы реализовать эту бизнес-идею, мы создаем дизайн для интеграции внешних каталогов.
С этой функцией клиентам не нужно переходить на другой сайт, чтобы найти продукт — весь ассортимент популярных брендов уже внутри интерфейса Fastbox.
Пример реализованного каталога ZARAФронтенд-разработка
Пользовательский интерфейс реализован на основе HTML, CSS, Java Script с использованием фреймворков React, Vue.js и SSR.
SSR — метод отрисовки веб-страницы на сервере, а не в браузере. Чтобы пользователь не смотрел на пустую страницу в ожидании, пока загрузятся все элементы, а сразу видел всю информацию. Также это положительно влияет на ранжирование сайта.
Для интернет-магазина реализовали русскоязычную версию сайта. Настроили передачу данных через API, а также интеграции со следующими сервисами:
- Google Maps;
- Яндекс Карты;
- Почта России;
- Платежная система Сбербанка.
- Платежная система YooMoney.
Дальнейшие работы по backend выполнялись на стороне заказчика.
Результат
Мы спроектировали новый интерфейс интернет-магазина и личного кабинета, оптимизировали структуру сайта, каталога и категорий, а также улучшили карточку товара и оформление заказа.
- Этап аналитики помог выяснить и найти все проблемы, чтобы учесть их при разработке дизайна и фронтенда.
- Создали единые шаблоны для удобного оформления страниц каталога и карточек с товарами.
- Простая навигация помогает пользователям быстрее найти информацию и нужный товар.
- Обновленный дизайн с яркими элементами привлекает внимание аудитории и удерживает ее на страницах интернет-магазина.
- В карточках товаров посетители могут найти всю информацию по продукту — например, сразу увидеть примерные сроки доставки и стоимость отправки посылки.
- Актуальные версии фреймворков позволяют быстро подгружать страницы и индексироваться в поисковых системах.
- На главной странице разместили блок с сезонными товарами и популярными категориями.
Итоги проекта за квартал:
- 100 000+ людей каждый день пользуются интернет-магазином.
- 1 000 000+ просмотры карточек товаров в каталоге ежедневно.
- 15% еженедельный прирост новых клиентов и трафика.
Обновленный интерфейс поможет покупателям совершать покупки на сайте FastBox быстрее и проще.
Что дальше
Мы продолжаем сотрудничать с заказчиком, предоставляя услуги frontend-разработки: вносим корректировки, внедряем новый функционал и реализовываем каталоги товаров со сторонних сайтов, чтобы пользователям не нужно было уходить из интернет-магазина.
