150k пользователей ежемесячно, как сделать редизайн интернет-магазина и ничего не сломать

Клиент

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

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

Задача

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

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

Прошлый дизайн интернет-магазина FastBox

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

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

Выжимка из отчета от отдела аналитики

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

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

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

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

1. Создать удобную структуру на основе анализа путей пользователя.
2. Обновить каталог и карточки товаров.
3. Собрать все элементы в UI kit и подготовить макеты всех страниц.
4. Сделать акцент на главной странице и в каталоге на мужскую аудиторию — это преобладающая ЦА. 
5. Добавить подборки с товарами и ссылки на популярную продукцию.
6. Создать удобный личный кабинет и корзину для быстрого и легкого шоппинга.
7. Уделить внимание адаптивной версии сайта и добавить таббар, чтобы клиент мог открыть интернет-магазин в браузере и переключаться между вкладками как в приложении.
8. Проработать SEO-факторы для будущего продвижения товаров.

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

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

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

1. Главная страница с подборками и категориями товаров.
2. Каталог с категориями и подкатегориями продукции. Также учли поиск товаров по брендам.
3. Карточка товара с важными характеристиками и основной информацией для покупателей — отзывы, оформление заказа, доставка, оплата, гарантии и возврат.
4. Корзина с простой формой оформления заказа.
5. Авторизация в личном кабинете с помощью номера телефона и email.
6. Основные страницы для покупателей — о компании, доставка и оплата.
7. Указали возможности поисковой строки и варианты сортировки результатов.

Структура нового интернет-магазина

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

Прототипы основных страниц интернет-магазина

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

Варианты отображения списка товаров при оформлении заказа

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

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

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

Старый и новый логотипы

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

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

1. Шапка сайта с основными разделами сайта, каталогом, поисковой строкой и личным кабинетом.
2. Первый блок с баннерами и карточками — популярные товары и акции.
3. Раздел с сезонной продукцией.
4. Категории каталога.
5. Тематические подборки — например, скидки на бытовую технику.
6. Блок с идеями для вдохновения — к примеру, как обустроить кухню. Такой принцип есть в интернет-магазине IKEA, когда при наведении на кнопку с плюсиком появляется название раздела или конкретный товар.
7. Баннер с информацией и кнопкой, позволяющей пользователю отправить ссылку с другого сайта — и специалисты FastBox найдут товар.
8. Товары с высоким рейтингом — подборка продукции, которую высоко оценили другие пользователи.
9. Подвал с контактной информацией и основными разделами сайта.

Дизайн-концепция интернет-магазина

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

UI kit для макетов интернет-магазина FastBox

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

Адаптивные макеты

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

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

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

Варианты авторизации

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

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

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

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

Информация для посетителей интернет-магазина

Каталог

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

Отображение каталога

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

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

Просмотр товаров из категории

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

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

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

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

Быстрой просмотр товара

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

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

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

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

Корзина

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

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

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

Просмотр корзины

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

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

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

Оформление заказа

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

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

Заказ товара по ссылке

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

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

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

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

Заказы клиента в личном кабинете

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

1. обрабатывается менеджером; 
2. ожидает оплаты;
3. в обработке;
4. упакован для отправки;
5. находится в логистическом центре в Польше;
6. отменен или выполнен.

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

Статусы заказа

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

Начисление внутренней валюты

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

Отслеживание заказов дропшиппинга

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

Личные данные клиента

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

Настройка уведомлений и изменение пароля

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

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

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

Пример реализованного каталога ZARA

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

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

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

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

1. Google Maps;
2. Яндекс Карты;
3. Почта России;
4. Платежная система Сбербанка.
5. Платежная система YooMoney.

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

Результат

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

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

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

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

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

Что дальше

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