Для компании лайфстайл гаджетов и аксессуаров ICOVER разработан дизайн сайта, вёрстка, сопутствующие графические материалы для маркетинговой активности и смены айдентики компании. Сайт адаптирован для смартфонов, планшетов и десктопов. Создавался в тесной коллаборации с клиентом, фирменный стиль разрабатывало креативное агентство Olsh & Brothers, интеграцию с системой управления 1С-Битрикс проводили разработчики в компании.

Главная страница

Десктоп версия главной страницы интернет-магазина Таблет версия главной страницы интернет-магазина Смартфон версия меню Смартфон версия главной страницы интернет-магазина

Трансформируемый блок «Популярные категории»

Можно использовать несколько вариации блока: 1. Баннер справа (можно использовать видео вставку); 2. Один большой слайдер с баннерами слева и справа баннер поменьше; 3. Один большой слайдер с баннерами слева и промо товар с ограниченной по времени скидке; 4. Промо товар с ограниченной по времени скидке рядом с популярными категориями.

1.
2.
Слайд баннер слева и баннер справа
3.
Слайд банер и таймер
4.
Популярные категории и таймер

Иконки главного меню

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

Иконки для навигационного меню интернет магазина Иконки для навигационного меню интернет магазина

Каталог интернет-магазина

Каталог интернет-магазина

Блок с фильтрацией всегда остается на виду у пользователя. При скролле страницы он фиксируется. Кнопка фильтрации всегда остается в центре блока фильтрации в зависимости от высоты экрана или окна браузера.

Изменение вида каталога

Фильтрация товаров

При нажатии на кнопку фильтра голубого цвета - он открывается, при нажатии на кнопку фильтра серого цвета - фильтр скрывается. Выбор категории чекбоксом или простой ссылкой в зависимости от ситуации. Если брендов или в общем пунктов в фильтре очень много - можно использовать быстрый поиск. При нажатии на лупу - появляется поле для поиска. Подсказки (можно поставить рядом с любым фильтром, где это требуется). Кнопка «Подробнее в Wiki» должна вести на подробную статью с описанием.

Версия каталога для смартфона
Каталог интернет-магазина Выбор категории

Баннер и теги

Баннер в каталоге интернет-магазина
Баннер и теги в каталоге интернет-магазина
Теги в каталоге интернет-магазина

Состояния кнопок корзины

Состояния кнопок добавления в корзину, предварительного заказа и товара снятого с производства.

Состояния кнопок в дизайне каталога

Ховер карточки товара

Наведение на карточку товара (в наличии), наведение на карточку товара (предзаказ), наведение на карточку товара (снято с производства).

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

Шрифтовая пара

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

Шрифтовые начертания

Карточка товара интернет-магазина

Карточка товара интернет-магазина Концепция меню для смартфона

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

Контентный блок карточки товара

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

Сопутствующие товары

Сопутствующие товары

Выгодный комплект

Выгодный комплект

Похожие товары

Похожие товары

Технические характеристики

Технические характеристики

Вопросы и ответы

Вопросы и ответы

Изображение и описание

Изображение и описание

Ключевые свойства

Ключевые свойства

Изображение, текст и логотип

Изображение, текст и логотип

Отзывы

Отзывы

Изображение и текст

Изображение и текст

Текст и видео

Текст и видео

Видео

Видео

Цветовая схема для сайта

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

Цветовая схема для сайта

Структура сайта

Для оценки объема сайта и логики взаимосвязи страниц нарисована структура сайта (сайтмэп).

Структура сайта (сайтмэп)

Модальные окна

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

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

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

Страница корзины интернет-магазина Страница оформления заказа в интернет-магазине

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

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

Оформить заказ может физическое или юридическое лицо, для этого сделан выбор в блоке «Личные данные». В блоке «Доставка» пользователь может выбрать способ доставки - курьером, пункт выдачи (для регионов) или самовывоз из определенного магазина, внизу блока сразу отображается стоимость доставки. В блоке «Оплата» покупатель выбирает способ оплаты - онлайн, наличными, оплата по счету. В блоке «Ваш заказ» выводится информация о товарах, также в этом блоке можно вернуться назад в корзину для изменения состава заказа. Блок с итоговой стоимостью всегда остается на виду и зафиксирован в правой части, а информация в нём обновляется динамически при изменении данных в формах.

Акции, баннеры, посадочные страницы

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

Баннеры внутри категорий сайта

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

Расположение баннера в категории
Баннер мышки SteelSeries Rival 710 Баннер для сайта компании Anker Баннер для сайта компании Aukey Новогодний баннер 2018 для сайта Баннер для сайта - всемирный день шопинга Баннер для сайта компании Baseus Баннер для сайта компании Coteetci Баннер для сайта компании Ninebot Баннер для сайта кибер понедельник Баннер для интернет-магазина продукции Bang & Olufsen Баннер для сайта - 10 лет компании icover Баннер для сайта - осенняя акция Баннер для сайта - чехлы для iphone Баннер для сайта акции компании icover Баннер бонусной распродажи для сайта Баннер для сайта акции распродажи Баннер для сайта о распродаже Баннер для сайта icover Баннер для сайта Jabra Elite Sport Баннер для сайта о скидке на продукцию Nonda Баннер для сайта о скидке на продукцию Nonda Баннер для сайта - скидка при покупке 2 или 3 товаров Баннер для сайта - уцененные товары с максимальной выгодой Баннер для сайта кибер понедельник Баннер для интернет-магазина продукции Bang & Olufsen Баннер для сайта к 23 февраля Баннер для сайта - покупай больше получай скидку Баннер для сайта - скидка 20% Anker и Baseus Баннер для сайта - всемирный день шопинга Новогодний баннер 2018 для сайта Баннер для сайта - Amira Баннер для сайта - день рождения icover Баннер для сайта - день рождения icover Баннер для интернет-магазина продукции Bang & Olufsen Баннер для сайта - день рождения icover Баннер для сайта - Новый год 2017 Баннер для сайта - Black Friday Баннер для сайта - 8 марта Баннер для сайта - идеальный День святого Валентина Баннер для сайта - акция Bang & Olufsen Баннер для сайта - акция Bang & Olufsen Баннер для сайта - скидка на Baseus Баннер для сайта - 23 февраля Баннер для сайта - день всех влюбленных Баннер для сайта - 8 марта Баннер для сайта - скидка на продукцию Bang & Olufsen Баннер для сайта - Jabra Elite Sport Баннер для сайта - 10 лет компании Баннер для сайта - день рождения icover Увеличенный баннер для сайта - осенняя акция

Баннеры для главной страницы сайта

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

Расположение баннера на главной странице Баннер для главной страницы сайта кибер понедельник Баннер для главной страницы сайта 23 февраля Баннер для главной страницы сайта - день всех влюбленных Баннер для главной страницы сайта на 8 марта Баннер для главной страницы сайта - скидка на Baseus

Маркетинговые материалы для емейл рассылки

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

Пример емейл рассылки Баннер для емейл рассылки - Crazy Days Анимация для емейл рассылки кибер понедельник Изображение для емейл рассылки Изображение для емейл рассылки Jabra Elite Sport Баннер для емейл рассылки - Jabra Elite Sport Баннер для емейл рассылки - скидка на продукцию Bang & Olufsen Баннер для емейл рассылки - скидка 20% Anker и Baseus Анимация для емейл рассылки Fujifilm Instax Изображение для емейл рассылки - скидка на Baseus Дизайн емейл рассылки акции Анимация для емейл рассылки к 23 февраля Изображение для емейл рассылки о беспроводных зарядных устройствах Изображение для емейл рассылки о скидке Баннер для емейл рассылки - всемирный день шопинга Изображение для емейл рассылки - скидка при покупке 2 или 3 товаров Изображение для емейл рассылки о скидке Баннер для емейл рассылки - к полёту готов Анимация для емейл рассылки - 23 февраля Изображение для емейл рассылки скидка при покупке чехлов Изображение для емейл рассылки Jabra Elite Sport Изображение для емейл рассылки - Airpods Анимация для емейл рассылки - акция Bang & Olufsen Изображение бонусной распродажи для емейл рассылки Баннер для емейл рассылки - пуленепробиваемые аксессуары Оформление емейл рассылки на Новый год 2018 Изображение для емейл рассылки о распродаже Изображение для социальных сетей, емейла, вайбер рассылок Изображение для емейл рассылки о скидке Изображение для емейл рассылки Jabra Elite Sport Изображение для емейл рассылки - осенняя акция Анимация для емейл рассылки - идеальный День святого Валентина Баннер для емейл рассылки на первое сентября Баннер Pokemon GO для емейл рассылки Изображение для емейл рассылки о майской акции Изображение для емейл рассылки о майской акции Изображение для емейл рассылки о розыгрыше призов от Aukey Анимация для емейл рассылки - 1 апреля Промо погодных станций для емейл рассылки Анимация для емейл рассылки - 1 апреля Анимация для емейл рассылки - день рождения icover Баннер для емейл рассылки - чехлы от непогоды Анимация для емейл рассылки - акция Bang & Olufsen Анимация для емейл рассылки - Новый год 2017 Анимация для емейл рассылки - 8 марта Поздравление с рождеством для емейл рассылки Изображение для емейл рассылки - Airpods Анимация для емейл рассылки - Black Friday Анимация для емейл рассылки - 8 марта Баннер для емейл рассылки - покупай больше получай скидку Баннер для емейл рассылки - чехлы от непогоды Анимация для емейл рассылки - день всех влюбленных Баннер для емейл рассылки - кабели для устройств Анимация для емейл рассылки - акция Bang & Olufsen Анимация для емейл рассылки - 8 марта Баннер для емейл рассылки - Jabra Elite Sport

Материалы для социальных сетей

Анимационные рекламные баннеры и короткие видеоролики для социальных сетей - ВКонтакте, Facebook, Instagram.

Изображение для социальных сетей Jabra Elite Sport Изображение акции для социальных сетей Новогодний баннер 2018 для социальной сети facebook Изображение для социальных сетей Facebook и ВКонтакте - 10 лет компании Изображение для социальных сетей о скидке Изображение для социальных сетей о скидке Изображение для социальных сетей о скидке Изображение для социальных сетей о розыгрыше призов от Aukey Анимация для социальных сетей к 23 февраля Изображение для социальных сетей скидка при покупке чехлов Изображение для социальных сетей - всемирный день шопинга Изображение для социальных сетей - Amira Изображение для социальных сетей - скидка 20% Anker и Baseus Изображение для социальных сетей - покупай больше получай скидку Изображение для социальных сетей - скидка на продукцию Bang & Olufsen Изображение для социальных сетей - Crazy Days Изображение для социальных сетей - Jabra Elite Sport Изображение для социальных сетей - идеальный День святого Валентина Изображение для социальных сетей - Новый год 2017 Анимация для социальных сетей - Black Friday Изображение для социальных сетей - 8 марта Изображение для социальных сетей - 1 апреля Изображение для социальных сетей - день всех влюбленных Изображение для социальных сетей - день рождения icover Изображение для социальных сетей о скидке на продукцию Nonda Изображение для социальных сетей о розыгрыше призов от Aukey Изображение для социальных сетей о майской акции Изображение для социальных сетей - Crazy Days Изображение для социальных сетей - день всех влюбленных Изображение для социальных сетей - 8 марта Изображение для социальных сетей - акция Bang & Olufsen Изображение для социальных сетей - скидка на Baseus Изображение для социальных сетей - акция Bang & Olufsen Изображение для социальных сетей - 8 марта Изображение для социальных сетей - скидка на Razer и Steelseries Анимация для социальных сетей - Black Friday Изображение для социальных сетей - Crazy Days Изображение для социальных сетей - 1 апреля Изображение для социальных сетей - скидка при покупке 2 или 3 товаров

Видео для LED экранов

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

Промо видео для короткого LED экрана
Промо видео для короткого LED экрана
Промо видео для длинного LED экрана

Специальное предложение

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

Специальное предложение - всемирный день шопинга
Специальное предложение о майской акции Специальное предложение от Ninebot Специальное предложение на рюкзаки Thule Специальное предложение - скидка при покупке 2 или 3 товаров Специальное предложение - Jabra Elite Sport Специальное предложение - Razer Специальное предложение - акция Bang & Olufsen Специальное предложение - скидка на Baseus Изображение специального предложения для сайта бренда Jabra Elite Sport

Паттерны для акций

Чтобы создать проводимой акции единый стиль, использовались кастомные паттерны, как статичные так и с легкой динамикой.

Фирменный паттерн оранжевого цвета для icover - 10 лет компании Фирменный паттерн синего цвета для icover - 10 лет компании Фирменный паттерн желтого цвета для icover - 10 лет компании Фирменный паттерн белого цвета для icover - 10 лет компании
Анимационный паттерн - Black Friday

Печатные материалы

Для кассовых и информационных стоек создавались листовки с акциями и специальными предложениями.

Листовка в pdf - покупай больше получай скидку PDF листовка для умного LED светильника Home Tree Листовка акции в pdf - 8 марта PDF листовка для умного LED светильника Home Tree Листовка распродажи в pdf Листовка для акции компании icover

Посадочные страницы

Лендинг пейдж для акций и специальных предложений состоявшихся в магазине. У большей части лендингов этап дизайна происходил во время вёрстки которая интегрирована в CMS сайта.

Лендинг пейдж для продажи фитнес браслетов
Лендинг пейдж Black Friday до начала акции Лендинг пейдж день рождения icover до начала акции Лендинг пейдж Black Friday после начала акции Лендинг пейдж день рождения icover после начала акции

Другие материалы

Бонусные карты, стикеры, другие графические материалы.

Дизайн бонусной карты - лицевая сторона Дизайн бонусной карты - оборотная сторона Лента коробки для умного LED светильника Home Tree Лента коробки для умного LED светильника Home Tree Лента коробки для умного LED светильника Home Tree Анимационная иконка - дешевле маркета Подарочная пасхалка для сайта - 10 лет компании icover Стикер для коробок - 10 лет компании icover PDF презентация промо размещения товара в компании icover Баннер информирования клиентов о доставке через постаматы

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

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

Личные данные

Управление персональной информацией происходит на странице «личные данные». Пользователь может изменить личные данные (имя, фамилию, отчество, дату рождения, пол), изменить адрес электронной почты, изменить или добавить телефон, подписаться или отписаться от рассылки, изменить пароль.

Страница личного кабинета с персональной информацией

Бонусы

Страница личного кабинета с информацией о бонусах.

Страница личного кабинета с информацией о бонусах Страница личного кабинета с информацией о бонусах

Адреса доставки

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

Страница личного кабинета с адресами доставки Страница личного кабинета с адресами доставки Страница личного кабинета с адресами доставки

Заказы

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

Страница личного кабинета с информацией о заказах Страница личного кабинета с информацией о заказах

Избранные товары

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

Страница личного кабинета - избранные товары Страница личного кабинета - избранные товары

Мои отзывы о товарах

На странице отзывов о товарах в личном кабинете выводится статус отзыва (опубликован, отклонен, на модерации), сам отзыв и вся сопутствующая информация.

Страница личного кабинета - отзывы о товарах

Обратная связь

Для обратной связи с магазином в личном кабинете предусмотрен специальный раздел, в котором пользователь может обратиться за поддержкой. С помощью ключевой кнопки «Задать вопрос» пользователю открывается форма с помощью которой он может отправить сообщение. После отправки сообщения, оно появляется в личном кабинете и для него создается страница на которой происходит обсуждение. При ответе магазина, на кнопке «Задать вопрос» появляется индикатор с количеством сообщений и статусом новое или нет. Сам пользователь может закрыть вопрос, если по его мнению проблема исчерпана.

Другие страницы интернет-магазина

Гарантия

Раздел гарантийного обслуживания ICOVER.

Страница сайта - гарантийное обслуживание

Доставка и оплата

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

Страница сайта - доставка и оплата

Магазины

В разделе «магазины» можно узнать информацию о магазинах компании icover (адрес, время работы, телефон), а также ознакомиться с фото, месторасположением на карте и 3D панорамой.

Страница сайта - магазины

Страница специального преложения

После клика на картинку специального предложения, пользователь попадает на страницу спецпредложения с акционными товарами.

Страница специального преложения

О компании

Бренд-страница о компании. На странице использовано видео, параллакс фон.

Бренд-страница о компании

Страница не найдена / 404

На странице 404 в буквах используется видео создавая необычное восприятие страницы.

Страница не найдена 404

Контактная информация

Страница с контактной информацией.

Страница с контактной информацией

Бонусная программа

Страница бонусной программы ICOVER BONUS.

Страница бонусной программы

Почему мы

Мотивационная страница «почему мы».

Мотивационная страница почему мы

Плавный редизайн сайта

Производился поэтапный редизайн элементов сайта, чтобы не нарушить текущую работу компании (весомая доля заказов приходится на онлайн) и обеспечить плавный переход к будущему дизайну. Параллельно был сделан детальный анализ сайтов конкурентов - для выявления сходств, различий, интересных решений. А также при редизайне использовались данные аналитики, чтобы упростить доступ к ключевым разделам сайта.

Плавный редизайн сайта Плавный редизайн сайта Плавный редизайн сайта