ITbox

2903

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Главная

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

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

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

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

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

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

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

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

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

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

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

Корзина

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

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

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

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

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

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

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

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

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

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

Результат

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

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

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

Больше не нужно искать и обзванивать диджитал-агентства!
Создайте тендер и получите предложения по цене и срокам от лучших веб-студий Украины.
Это бесплатно и займет 2 минуты. В каталоге 1500+ диджитал-агенств, готовых помочь в реализации ваших задач. Выберите и сэкономьте до 30% времени и бюджета!
Создать тендер
ITbox
Компания:
Турум-бурум
Тип:
Дизайн
Добавлено:
15-03-2018
Перейти на сайт
2903

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Главная

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

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

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

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

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

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

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

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

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

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

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

Корзина

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

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

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

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

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

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

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

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

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

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

Результат

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

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

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

Bug