КЕЙС: СТРОИТЕЛЬНЫЙ ТОРГОВЫЙ ДОМ СКС · 2018-08-30 · КАИИ...

КЕЙС: СТРОИТЕЛЬНЫЙ ТОРГОВЫЙ ДОМ СКС

Разработка и интеграция с 1С интернет магазина крупного

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

• Удобный поиск товаров с авто-помощником в заполнении

• Сортировка вывода продукции по цене, рейтингу, бренду

• Фильтрация и подбор товаров, на основе характеристик товаров

• Сравнение товаров

• Сохранение списка продукции с присвоением названия - сохранение в смету (с возможностью распечатать)

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

• Личные кабинеты для b2b и b2c

• Кэшбэк, акции, скидки и бонусы - программа лояльности:

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

• Покупка в один клик

• Функционал смет

• Интеграция с 1С

• Интеграция с Яндекс.Маркетом

• Интеграция с соц. сетями: Vk, Instagram, Facebook

Какие возможности были реализованы:

ВК

РА

ТЦ

Е О

ПР

ОЕ

КТ

Е

О К

ОМ

ПА

НИ

ИСТРОИТЕЛЬНЫЙ ТОРГОВЫЙ ДОМ СКС Строительный Торговый Дом «СКС» занимается оптовой и

розничной торговлей строительными и отделочными

материалами на территории Санкт-Петербурга и Ленинградской

области.

Компания является официальным дилером Кнауф, Плитонит,

Крепс, Бергауф, Основит, Роквул, Изовер, Изоспан, Тиккурила,

Тэкс.

Имеет 2 крупных склада в Санкт-Петербурге, что позволяет иметь

в наличии основные категории товаров, быстро и гибко

взаимодействовать с клиентами.

АДРЕС САЙТА

https://www.sks.spb.ru/

ЦЕЛЕВАЯ АУДИТОРИЯ

В2В - строительные организации и дилеры

В2С - строительные бригады, частные мастера-отделочники

ПРОБЛЕМЫ:• Неинформативная карточка товара

• Отсутствие фильтрации в каталоге

• Отсутствие расчёта доставки

• Шаблонный устаревший дизайн и фиксированная вёрстка

• Проблемы usability каталога и оформления заказа

• Отсутствие адаптации под мобильные устройства

• Структура и разметка сайта создавали проблемы с поисковым

продвижением

• Отсутствие реализации системы лояльности и соответствующего

функционала не позволяли привлекать аудиторию отделочных бригад

• Контент и структура не позволяли транслировать образ эксперта по

товарам, а не просто их продавца

СТ

АР

ЫЙ

СА

ЙТ

БИЗНЕС – ЦЕЛИ: • Увеличение доли онлайн-продаж

• Привлечение аудитории розничных клиентов и мелких строительных бригад

• Создать необходимые условия для расширения товарной матрицы

• Интегрировать сайт со складом

• Разработать онлайн-систему лояльности

ЭТАП АНАЛИТИКИ

Изучение информации о компании, ее продуктах и услугах. Проведение

интервью с представителями бизнеса, сбор и детализация требований всех

заинтересованных сторон.

АН

АЛ

ИТ

ИК

А

01СБОР И АНАЛИЗ

ТРЕБОВАНИЙ

02АНАЛИЗ ЦА

РАЗРАБОТКА

ПЕРСОНАЖЕЙ И

ПОЛЬЗОВАТЕЛЬСКИХ

СЦЕНАРИЕВ

03SEO-READY

01. СБОР И АНАЛИЗ ТРЕБОВАНИЙ

Работа над любым крупным проектом начинается с брифинга и

интервью. После подробного обсуждения всех требований по

почте, скайпу и телефону мы вместе с маркетологом клиента

подготовили бриф на аналитику, который стал отправной точкой

нашего проекта.

АН

АЛ

ИТ

ИК

А

02. АНАЛИЗ ЦА РАЗРАБОТКА ПЕРСОНАЖЕЙ И ПОЛЬЗОВАТЕЛЬСКИХ СЦЕНАРИЕВ

Мы внимательно изучили данные от клиента, провели

исследование ниши «строительные товары». В результате

плодотворной совместной работы у нас получились основные

сегменты и примеры персонажей из каждого сегмента со своими

особенностями и задачами.

АН

АЛ

ИТ

ИК

А

Для каждого персонажа были разработаны идеальные сценарии

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

структуру сайта и необходимые для проработки сущности.

03. SEO-READY

При проектировании сайта мы всегда работаем в связке с SEO-

специалистами, и учитываем рекомендации. Такой подход

позволяет избежать этапа подготовки сайта к продвижению. Все

требования уже учтены.

АН

АЛ

ИТ

ИК

А

ЭТАП ПРОЕКТИРОВАНИЯ

Разработка оптимальной структуры (карты) сайта, структуры шаблонов интерфейса.

Создание информационной модели (категории и списки товаров, их

свойства/характеристики, справочники возможных значений свойств/характеристик и др.),

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

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

Разработка и защита детализированного интерактивного прототипа сайта, который

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

ПР

ОЕ

КТ

ИР

ОВ

АН

ИЕ

01ИНФОРМАЦИОННАЯ

АРХИТЕКТУРА

02ИНТЕРАКТИВНЫЙ

ПРОТОТИП

03СПЕЦИФИКАЦИЯ К

ПРОТОТИПУ

01. ИНФОРМАЦИОННАЯАРХИТЕКТУРА

В рамках информационной архитектуры мы прорабатываем

внутреннюю часть сайта, которая скрыта «под капотом»

пользовательского интерфейса.

ПР

ОЕ

КТ

ИР

ОВ

АН

ИЕ

Карта сайта и перечень необходимых страниц с учётом SEO

Структура разрабатываемых шаблонов (из каких блоков

будут состоять страницы)

Объектная модель сайта

Разработка фильтров по параметрам объектов

02. ИНТЕРАКТИВНЫЙ ПРОТОТИП

В программе Axure RP 8 мы создали интерактивную модель

сайта. Элементы страниц скомпоновали с учётом рекомендаций,

сформированных на предыдущем этапе. В итоге получилось 31

страница высокой детализации

ПР

ОЕ

КТ

ИР

ОВ

АН

ИЕ

03. СПЕЦИФИКАЦИЯ К ПРОТОТИПУ

Спецификация помогает формализовать и согласовать все

требования и механизм работы на начальном этапе. С этим

документом работают разработчики на этапе вёрстки и

программирования.

ПР

ОЕ

КТ

ИР

ОВ

АН

ИЕ

ЭТАП ДИЗАЙНА

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

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

целевой аудитории.

Основываясь на прототипе и согласованной визуальной концепции рисуем дизайн-макеты

всех страниц. Прорабатываем интерактивные элементы, визуальные эффекты и

адаптивность.

Вместе с дизайном сайта в рамках проекта мы можем также разработать логотип и

фирменный стиль.

ДИ

ЗА

ЙН

01MOOD BOARD

02ВИЗУАЛЬНАЯ

КОНЦЕПЦИЯ

03ОТРИСОВКА

ДИЗАЙН-МАКЕТОВ

Типографика

Цветовая гамма

Референсы

01. MOOD BOARD

Мудборд – лёгкий документ, позволяющий понять ожидания

клиента по визуальной части. Наш дизайнер предложил решения,

максимально привычные аудитории строителей, но при этом

учитывающие тренды современного дизайна, фирменный стиль

компании.

Сайт должен был вызывать ассоциации со словами: лёгкий,

простой, доступный и профессиональный. Исходя из этого была

предложена плоская, минималистичная стилистика, не

перегруженная элементами дизайна.

ДИ

ЗА

ЙН

ДИ

ЗА

ЙН02. ВИЗУАЛЬНАЯ КОНЦЕПЦИЯ

В дизайн-концепции мы описали принцип

построения сетки, навигации и адаптации дизайна

под мобильные устройства, поведение

интерактивных элементов.

Отрисовали главную страницу, которая стала

основой остальных макетов.

03. ОТРИСОВКА ДИЗАЙН-МАКЕТОВД

ИЗ

АЙ

Н

В среднем 29% визитов на сайты совершается с мобильных устройств. В некоторых

проектах доля мобильной аудитории уже превышает 80%. Сайты, не адаптированные под

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

аудитории. В обозримом будущем данный тренд сохранится. Благодаря мобильно

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

АД

АП

ТИ

ВН

АЯ

ВЁ

РС

ТК

АЭТАП АДАПТИВНОЙ ВЁРСТКИ

ПРОГРАММИРОВАНИЕ НА BITRIX

ПР

ОГ

РА

ММ

ИР

ОВ

АН

ИЕ

01КАТАЛОГ ПРОДУКЦИИ

02КОРЗИНА И

ОФОРМЛЕНИЕ ЗАКАЗА

03АВТОРИЗАЦИЯ,

ЛИЧНЫЙ КАБИНЕТ

И ПРОГРАММА

ЛОЯЛЬНОСТИ

04ИНТЕГРАЦИЯ С

ВНЕШНИМИ

СЕРВИСАМИ

Удобный поиск товаров с авто-помощником в

заполнении

Фильтрация и подбор товаров, на основе характеристик

товаров01. КАТАЛОГ ПРОДУКЦИИ

Нашими разработчиками был свёрстан и интегрирован

многоуровневый каталог товаров с отдельным набором

фильтров для каждой категории.

ПР

ОГ

РА

ММ

ИР

ОВ

АН

ИЕ

Сравнение товаров

Сохранение списка продукции с присвоением названия -

сохранение в смету (с возможностью распечатать)

Отображение количества товара в нескольких

единицах

Сохранение списка продукции с присвоением названия -

сохранение в смету (с возможностью распечатать)02. КОРЗИНА И ОФОРМЛЕНИЕ ЗАКАЗА

В зависимости от веса товара в заказе модуль расчёта доставки

предлагает подходящую по габаритам машину, а также

рассчитывает стоимость доставки на основе выбранной машины

и района доставки.

ПР

ОГ

РА

ММ

ИР

ОВ

АН

ИЕ

Расчёт стоимости доставки в зависимости от зоны

Несколько способов оплаты

История заказов

03. Авторизация, личный кабинети система лояльности

Перед нами стояла задача создать на сайте систему лояльности

с начислением бонусных баллов за покупки. Для предоставления

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

историю транзакций потребовалась прямая интеграция с базой

данных 1С на серверах заказчика

ПР

ОГ

РА

ММ

ИР

ОВ

АН

ИЕ

Программа лояльности

Интеграция с социальными сетями

04. ИНТЕГРАЦИЯ С ВНЕШНИМИСЕРВИСАМИ

Мы настроили модуль импорта каталога напрямую из 1С, что

позволяет отображать выгружать остатки товаров, хранить все

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

Интеграция с Яндекс.Маркет и социальными сетями повышает

доверие посетителей к сайту и продукции.

ПР

ОГ

РА

ММ

ИР

ОВ

АН

ИЕ

КТО ПРИНИМАЛ УЧАСТИЕ В ЭТОМ ПРОЕКТЕ

УЧ

АС

ТН

ИК

ИМЕНЕДЖЕР ПРОЕКТА АНАЛИТИК UX-СПЕЦИАЛИСТ ДИЗАЙНЕР

ВЕРСТАЛЬЩИК (FRONT END) ПРОГРАММИСТ (BACK END) ТЕСТИРОВЩИК (QA)

КОНТЕНТ-МЕНЕДЖЕР SEO-СПЕЦИАЛИСТ

КАК С НАМИ СВЯЗАТЬСЯ

КО

НТ

АК

ТЫ

+7 (800) 500-61-67

СПб, Беговая 3, оф.14

info@web365.ru

Смотреть другие кейсы