—

—

Ссылка на сайт:

Задача:

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

Контекст:

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

Визуальная система оставалась несобранной:

⸺

нарушена иерархия

⸺

элементы конкурировали между собой

⸺

интерфейс выглядел перегруженным и неаккуратным

При этом часть функциональных и визуальных решений, заложенных в оригинальном сайте addinol.de, так и не была реализована в локальной версии.

Подход:

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

Основной фокус — на упрощении восприятия и выстраивании понятной системы, без потери узнаваемости бренда.

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

Первое, что видит пользователь, — главную страницу. Это точка входа и сразу позиционирование бренда. Она показывает, что ADDINOL — это не просто масло, а технологичный производитель с историей с 1936 года, собственной лабораторией и экспертизой в авто и промышленности.

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

Каталог:

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

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

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

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

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

Фильтрация:

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

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

Карточка товара:

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

Форма обратной связи:

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

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

История бренда:

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

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

Каждый этап — это отдельный смысловой блок: изображение, краткое описание и событие.

Итог:

Сайт перестал быть набором страниц и превратился в рабочий инструмент.

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

Лучше один раз зайти и посмотреть, как это работает: