Пн-Пт 9:30-18:00
порфтолио

D&S Technologies (Редизайн)

Повторный редизайн сложнее разработки с нуля: как мы создали сайт-каталог для «МОЙ-КА! DS Business»

Для компании «МОЙ-КА! DS Business» мы выполняли редизайн сайта уже во второй раз. Клиент развивает сеть автомоек самообслуживания, производит собственное оборудование и сопровождает предпринимателей на всех этапах запуска бизнеса — от проектирования объекта до строительства, настройки техники и дальнейшего сервисного обслуживания.

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

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

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

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

О клиенте

«МОЙ-КА! DS Business» — компания, которая занимается созданием автомоек самообслуживания и развитием собственной сети объектов в России.

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

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

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

Проблема: масштаб предложения не помещался в формат обычного каталога

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

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

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

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

Новый сайт должен был объединить эти сценарии и последовательно провести пользователя от знакомства с компанией до выбора оборудования или запроса на комплексный расчёт проекта.

Задача

Перед нашей командой стояла задача провести повторный редизайн сайта и привести digital-представительство компании в соответствие с обновлённым брендом.

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

Отдельное внимание необходимо было уделить визуальной подаче. Производственники «МОЙ-КА! DS Business» используют 3D-моделирование при разработке оборудования и проектировании будущих объектов. Клиент хотел вывести качественные рендеры на первый план и сделать их важной частью обновлённого сайта.

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

Исследование и стратегия

В основе структуры сайта лежат несколько разных пользовательских сценариев.

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

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

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

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

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

Тип работ:
Сайт-каталог
Сайт:
мойки-самообслуживания-дс.рф
Пояснительное изображение для первого шага

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

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

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

У сайта «МОЙ-КА! DS Business» почти каждая значимая страница была создана как самостоятельный лендинг. Отдельные структуры использовались для услуг, технологий, направлений бизнеса, оборудования и описания продуктовых линеек. Это означало, что недостаточно было заменить фирменные цвета, обновить шапку и привести к новому виду подвал сайта.

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

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

Аналитика контента и единая система элементов

Значительная часть работы арт-директора и дизайнера была связана не с декоративным оформлением, а с аналитикой.

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

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

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

Объём работ

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

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

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

Общий объём проекта составил порядка 520 часов. В работе участвовали project-менеджер, маркетолог, контент-менеджер, арт-директор, веб-дизайнер, 3D-дизайнер, backend-разработчик и frontend-разработчик.

Каждый специалист отвечал за отдельную часть результата. Маркетолог и контент-менеджер работали со структурой и материалами, арт-директор формировал единую визуальную систему, дизайнер проектировал страницы, 3D-специалист подготавливал и адаптировал рендеры, а разработчики переносили концепцию в функциональный интерфейс на Битрикс.

Редизайн после обновления бренда

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

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

Тёмно-синий цвет формирует ощущение надёжности, инженерной точности и технологичности. Он хорошо сочетается с ночными рендерами объектов и позволяет эффектно показать подсветку автомоек.

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

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

День и ночь вместо стандартного слайдера

Главный экран стал одной из наиболее заметных частей редизайна.

При проектировании автомоек компания создаёт детальные 3D-модели будущих объектов. Эти материалы не только помогают производству и согласованию проекта, но и позволяют потенциальному клиенту заранее увидеть, как будет выглядеть готовая автомойка.

Пожеланием заказчика стало размещение ярких и реалистичных 3D-рендеров на главной странице. Мы отказались от привычного автоматического слайдера, который часто воспринимается как стандартный рекламный элемент и почти не вовлекает пользователя во взаимодействие.

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

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

Так интерактивный элемент решает сразу две задачи: демонстрирует качество проектирования и создаёт эмоциональное вовлечение уже на первом экране.

Главная страница как презентация бизнеса под ключ

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

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

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

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

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

Каталог оборудования

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

В нём представлены несколько линеек, рассчитанных на разные задачи, комплектации и бюджеты. Среди них — флагманское оборудование Premium 5G, а также модели Business+ и Business.

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

Флагманская модель представлена крупнее остальных. Такое визуальное решение подчёркивает её статус и помогает сразу обратить внимание на наиболее технологичное оборудование компании.

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

Детальная презентация моделей

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

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

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

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

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

Технологичность через документацию и доказательства

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

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

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

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

Услуги как единая система запуска объекта

«МОЙ-КА! DS Business» предоставляет комплекс услуг, необходимых для открытия автомойки. Поэтому мы вынесли это направление в самостоятельный раздел.

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

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

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

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

Понятные этапы реализации

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

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

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

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

Вместо абстрактного обещания «откроем автомойку под ключ» сайт демонстрирует реальную структуру работ.

Реализованные автомойки и показатели окупаемости

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

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

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

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

Консультация на основе реального опыта

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

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

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

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

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

Новости и экспертный контент

Отдельный раздел посвящён новостям компании и отраслевым материалам.

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

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

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

Отзывы предпринимателей

В проекте предусмотрен блок с отзывами владельцев автомоек и партнёров компании.

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

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

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

Навигация и пользовательские маршруты

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

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

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

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

порфтолио

Разработка на Битрикс

Сайт-каталог реализован на Битрикс. Платформа позволяет команде клиента самостоятельно управлять контентом и развивать ресурс после запуска.

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

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

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

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

Адаптивная версия

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

В мобильной версии сохраняется основная визуальная концепция: глубокий синий фон, контрастные жёлтые элементы, крупные изображения оборудования и выразительные 3D-рендеры.

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

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

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

Как решения влияют на бизнес

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

Посетитель сразу понимает, что «МОЙ-КА! DS Business» не ограничивается производством оборудования. Компания может разработать концепцию автомойки, подготовить проект, построить объект, установить технику, помочь с запуском и обеспечить дальнейшее обслуживание.

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

Интерактивные 3D-материалы усиливают презентацию и показывают качество разработки. Дневной и ночной режимы помогают представить будущий объект в реальной среде, а реализованные автомойки подтверждают практический опыт компании.

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

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

Инфраструктурный результат

В рамках проекта компания получила управляемый сайт-каталог на Битрикс, который объединяет оборудование, услуги, реализованные объекты, этапы запуска, сертификаты, новости и формы обращения.

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

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

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

Результат командной работы

Сайт для «МОЙ-КА! DS Business» стал продуктом тесной синергии заказчика и исполнителя.

Со стороны клиента команда передала глубокую отраслевую экспертизу, технические материалы, информацию об оборудовании, производственные рендеры и понимание реальных задач предпринимателей. Со стороны студии над проектом работали специалисты по маркетингу, контенту, дизайну, 3D-графике, frontend- и backend-разработке.

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

За 520 часов мы не просто изменили оформление существующего ресурса. Мы заново проанализировали его содержание, сформировали дизайн-систему, переработали около 20 уникальных лендингов, создали семь типовых шаблонов и реализовали их на Битрикс.

Проект стал результатом работы коллектива энтузиастов, объединённых общей задачей — создать сайт, который соответствует уровню продукта и масштабу бизнеса клиента.

Итог

Для «МОЙ-КА! DS Business» мы разработали современный сайт-каталог, который представляет автомойку самообслуживания не как набор оборудования, а как комплексный инвестиционный проект.

Обновлённый визуальный стиль поддерживает новый логотип и позиционирование компании. Глубокая синяя палитра, контрастные жёлтые акценты, качественные изображения оборудования и эффектные 3D-рендеры формируют технологичный и узнаваемый образ.

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

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

В результате клиент получил масштабируемую цифровую площадку на Битрикс, которая поддерживает продажи оборудования, помогает привлекать предпринимателей и показывает «МОЙ-КА! DS Business» как системного партнёра по созданию автомоек самообслуживания.

С гордостью размещаем этот проект в нашем портфолио.

Не знаете с чего начать? Напишите нам

Получите полную консультацию по Вашему проекту бесплатно и быстро

map map