ITbox

В 2016 году представители гипермаркета электроники ITbox обратились к нам с пожеланием обновить дизайн интернет-магазина. О том, как мы структурировали миллионы товаров, разработали концепцию “боксов” и переориентировали магазин на маркетплейс с широким ассортиментом, читайте в этой статье. 

Краткая история клиента

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

О клиенте: 
Интернет-магазин ITbox.ua на рынке более 25 лет. Это подразделение известной компании Brain Computers. В нем представлена компьютерная и бытовая техника ведущих мировых и украинских брендов. Широкая сеть пунктов выдачи, сервисных центров и собственных складов работает в 23-ех областях Украины.

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

Какая основная задача была?

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

Основной вектор решения

Что в коробке? 

Так как стояла задача разделить трафик, мы разделил магазин на зоны по тематикам - техника, товары для дома, детские, активный отдых и прочее.
Каждому пространству мы дали созвучное с основным название - box. Например товары для дом - homebox, активный отдых - activebox, детская тема - babybox и т.п.

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

Например, BabyBox выполнен голубой палитрой, а в футере расположился жираф. 

ActiveBox представлен в зеленых цветах, а дизайн-изюминкой является скейтбордист.

Создание  «боксов» помогло решить основную задачу – распределить трафик и более индивидуально подойти к проблемам и целям клиента магазина. Каждый блок представили как самостоятельный раздел интернет-магазина, но тем не менее он оставался в рамках гипермаркета. Таким образом огромное количество трафика  теперь распределялось, согласно  запросам. Так ActiveBox был ориентирован в основном на мужчин 20-35 лет со средним достатком, BabyBox – молодых мам и женщин и т.д. К каждому из этих сегментов был разработан свой подход и посыл.

Просмотренные товары

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

Как пришли к такой стилистике сайта

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

Именно в этих оттенках мы реализовали другие боксы.

Ключевые страницы у проекта

Главная

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

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

Выдача товаров

​Страница реализована максимально просто и удобно. Отображается лишь нужная информация о товарах. 

Она имеет 2 вида: список и плитка.

• По-умолчанию списком отображаются товары, где подробные характеристики, которые важны для выбора​(например: комплектующие для ПК, телевизоры, бытовая техника).

• Плиткой по-умолчанию отображаются товары где важен внешний вид, цвет, текстура (например: одежда, обувь).
  Чтобы полностью погрузиться в выбор товара без отвлечения на дополнительные элементы, добавили возможность скрыть блок фильтров. За счет этого увеличиваются фото и больше плиток помещаются в экран.
   

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

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

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

Подборка похожих товаров - планшетов по алгоритму upsale

Корзина

На этой странице мы проработали отображение различных состояний товаров:

• Товар со скидкой
• Комплект товаров
• Товар с подарком
• 2 товара, которые в сумме дают скидку и т.п.

Проработали сценарии удаления товаров и дальнейшие действия по ним.

Оформление заказа и страница благодарности. ​

Разделили​ оформление на 3 простых шага: личные данные, доставка, оплата. Есть возможность оплатить покупку бонусами.

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

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

Реализовали дашборд с общей информации об истории заказов и последних действиях пользователя.

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

В следующем релизе добавили отдельный доступ для юр.лиц с возможностью автоматического повтора заказов с определенной периодичностью (еженедельно\ежемесячно)

Результат

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

1 месяц проектирования, 2 месяца дизайна, 2 месяца верстки, - и нам удалось создать гипермаркет, который ежемесячно посещают более 900 000 онлайн-покупателей.

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