Справочник Плакаты Лекторий Команда Вакансии Контакты

Диком 2.0

Клиент

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

Задача

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

Позиционирование

Пока писали рассказ о проекте, перечитали старые документы. Вот, например, из коммуникационной платформы 2013 года:

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

Юный «Диком» теперь повзрослел: взгляд прямо, скулы острее, длиннее шаг. Это портрет целеустремленного молодого мужчины. Его знают и уважают. Партнером ему будет рабочий и дипломат, русский и иностранец. Только не подумайте — сердце его всё то же: доброе, смелое, верное семье и традициям.

Кстати, над образом работала команда айдентики.

Айдентика

Стиль получился про функциональность, перфекционизм и завершенность решений «Дикома».

Логотип

Сделали изгибы чуть более резкими, дерзкими.

Старый
Новый

Цвета

Желтый, графитовый, серый и акцентный красный.

Шрифты

Обычный и жирный FF Unit Pro, жирный FF Unit Slab Pro с брусковыми засечками.

Графика

За иллюстрации и графику еще один, совсем особенный привет в команду айдентики.

Похожи на игру Monument valley
Графика в изометрии

Информационная архитектура

«Диком» работает с частными клиентами, бизнесом, дилерами и поставщиками. Мы написали сценарии взаимодействия и нашли разницу в ожиданиях.

Пример 1

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

Держи онлайн-каталог, пиши о товарах, сообщай о статусах, доставляй вовремя — и порядок. Для подобных заказов мы сделали новый shop.dikom.ru.

Пример 2

Илья Вирин работает менеджером по закупкам на Фольгопрокатном заводе. Руководитель производственно-складского цеха поставил задачу: переоборудовать склад площадью 1400 м². Илья походил по сайтам, посмотрел каталоги, нашел металлические стеллажи: консольные, палетные и с выкатными платформами. Одни обслуживают краном, другие сделаны для длинного груза, третьи — для сверхтяжелого. Ясно, что набросать 70 стеллажей в корзину не получится — Илье нужна помощь.

Дел здесь больше: рассказать об опциях, снять параметры помещения, груза и спроектировать решение. Чтобы объяснить как это, появился корпоративный dikom.ru.

Эти истории о двух частях «Дикома»: четко продающей и нежно сервисной.

Дизайн

Прошли по этапам: концепт, десктоп, мобильные и гайдлайн.

Корпоративный сайт

Главная страница
Категория
Адаптивная карточка
Страница о принципах
Заказ бумажного каталога

Интернет-магазин

Главная страница
Четыреста четвертая
Категория
Карточка товара

Блог

Главная блога
Публикация

Гайдлайн

Правила начали составлять в айдентике, закончили — в вебе.

Реклама

Ведем контекстную рекламу в Директе и Адвордсе. 21 кампания про 48 категорий, 500 товаров и несколько регионов — одно время мы всё держали в уме, а потом написали скрипт для управления ставками и аналитики. «Диком» задает приоритеты, мы размещаем и смотрим на поведение. Однажды тонкой настройкой удалось опустошить склад в низкий сезон.

Героя рекламного труда ищите здесь.

Разработка

Для пользователя корпоративный сайт и блог неотличимы: меню совпадает, футер тот же, цвета, шрифт, картинки сходятся. Но сайт написан на Битриксе, а блог — на Вордпрессе, поэтому на деле у нас два меню, два футера, два всего. И управлять контентом надо в двух админках. Поэтому мы написали обезболивающий код, который транслирует изменения с одной платформы на другую. Добавляем категорию в меню на dikom.ru — находим ее на blog.dikom.ru. Похожее мы проделали с парой корпсайта и магазина.

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

Прошлый блог «Дикома» стоял на Битриксе и был узким для поворотов. Хотелось побольше форматов, интерактива, опции предварительного просмотра. Думали про Тильду, но она не кастомизируется. В итоге выбрали Qards, который нам всё разрешил.

У «Дикома» есть товары с окончательными ценами, а есть с ценами «от». Типичная карточка состоит из основного предмета и комплектующих. Раньше, чтобы присвоить 37 основным товарам цену «от», надо было зайти в 37 категорий, 37 подкатегорий, 37 основных карточек, поставить галки в 37 чекбоксах, провалиться в 37 комплектующих — и тогда система усвоила бы 37 изменений. Это устройство Битрикса, которое поглощает и опустошает человека. Взамен мы разработали интерфейс для обновления цен «от» через спецраздел. Выбираем товары и одной кнопкой решаем вопрос.

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

Скриншот из админки
Админка Qards

Развитие

Продолжаем делать «Диком». Сейчас ускоряем работу с контентом. Например: раньше, чтобы загрузить технические характеристики, одинаковые для 21 товара, надо было открыть 21 карточку и прикрепить файл к каждой. Теперь будет легче: загружаешь файл в отдельный инфоблок и указываешь куда его транслировать.

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

Спасибо Владимиру Дорохину за доверие и дружбу

Образователь­ные проекты Mail.Ru
Курсы для разработчиков от Mail.Ru и технических вузов России.
архитектура, тексты, дизайн, разработка
Технополис
Образовательный проект Mail.Ru Group и Политеха в Санкт-Петербурге.
архитектура, дизайн, разработка
Zehnder-online
Магазин отопительных приборов немецкого бренда Zehnder.
сайт, дизайн, разработка
Hotel Schools
Учёба в швейцарских институтах гостеприимства.
концепция, дизайн, разработка