Интернет магазин товаров для уборки
создание интернет магазна товаров для клининга
адаптивный дизайн интернет магазина товаров для уборки

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

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

«Главная задача — сделать ресурс, который станет лидером в отрасли. Он поможет руководителям и менеджерам по закупкам ознакомиться с товарными предложениями в области клининга, поможет найти, выбрать и заказать необходимые средства и технику для работы на объектах с гостями, посетителями и коммерческих зданий с сотрудниками. Большое внимание уделили удобству, простоте, хорошей мобильной версии и быстроте работы с сайтом. Очень трепетно подошли к оформлению карточки товаров — выбрали лучшие фото товаров для каталога. Компания получила мощный инструмент продвижения своих товаров.

Вычик Павел, СЕО WBSTAR
ИСПОЛЬЗОВАННЫЕ РЕСУРСЫ
ИССЛЕДОВАНИЯ 85%
АНАЛИЗ РЫНКА И ЦА 85%
ПРОТОТИПИРОВАНИЕ 65%
ДИЗАЙН 75%
ПРОГРАММИРОВАНИЕ 67%
ПОДДЕРЖКА 95%
ПРОДВИЖЕНИЕ 55%
МАРКЕТИНГ 35%

Цели и задачи проекта

создание карточки товара интернет магазина
создание каталога товаров в интернет магазине

СИТУАЦИЯ НА СТАРТЕ

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

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

На сайте компании посетитель, в зависимости от своих знаний и потребностей может ознакомиться с товарами, их характеристиками и методами применения.

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

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

Второстепенные страницы: услуги компании, новости, контакты, условия доставки и другие доступны в 1 клик из главного меню. Акцент  сделан на показ интересных пользователю товаров.

В блоке меню разместили «мега-меню» с категориями товаров для быстрого и наглядного перехода к категориям товаров.

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

ЗАДАЧИ ДЛЯ WBSTAR

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

Нарисовали карту пользовательского пути  — для четкого представления, что нужно показать пользователю на каждом конкретном этапе взаимодействия с сайтом.

Работали в единой визуальной концепции для всех элементов —  шрифты, акцентные цвета, стили. Постарались сделать сайт более «легким» и «воздушным», поэтому во-первых — отсекали ненужное, во-вторых применяли визуальные решения, которые не будут отягощать восприятие страниц.

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

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

дизайн карточки товара интернет магазине

Решение и ключевые моменты

разработка множественного добавления товаров в корзину интернет магазина

ПОДАЧА ИНФОРМАЦИИ

Сайт просто обязан быть быстрым.  Удобство просмотра и поиска информации  с компьютеров и смартфонов — на первом месте. Информация — только самая главная и необходимая. Вся информация легко доступна и просто находится.

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

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

ОСОБЕННОСТИ РЕАЛИЗАЦИИ ПРОЕКТА

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

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

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

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

На странице каталога товаров прямо блоке шапки разместили главные  категории высшего уровня — для быстрого и удобного перехода.

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

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

размещение товаров и производителей в каталоге интернет магазина
добавление видео на карточку товара в интернет магазине
продвижение интернет магазина с помощью контент маркетинга

ПРОДВИЖЕНИЕ И МАРКЕТИНГ

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

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

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

СЛОЖНОСТИ И УСЛОВИЯ РЕАЛИЗАЦИИ

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

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

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

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

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

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

подготовка фото для карточки товара в интернет магазине
дизайн формы обратной связи для интернет магазина
280
Часов разработки
14
Прототипов страниц
360
Текстов
1135
Обработано фото

Итоги и планы на будущее

дизайн страниц интернет магазина

РЕЗУЛЬТАТЫ РАБОТЫ

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

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

Быстрая связь с компанией — заявки, вопросы и сообщения передаются менеджерам, они не пропадают и оперативно обрабатываются.

РАЗВИТИЕ ПРОЕКТА

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

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

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

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

Уже запланировали к реализации много интересного. Разработан пошаговый план необходимых действий.

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

дизайн мобильной версии сайта интернет магазина

ПОНРАВИЛСЯ ПРОЕКТ?

Если вас заинтересовали профессиональные услуги цифрового агентства WBSTAR, приходите в гости или отправьте сообщение команде.

Начните печатать и нажмите ВВОД для поиска