Провести частичный редизайн сайта ADDINOL24, устранив ключевые проблемы в интерфейсе и визуале без полной переработки продукта.
Контекст:
ADDINOL24 — интернет-магазин моторных масел с уже существующим сайтом и рабочей структурой.
При этом интерфейс выглядел устаревшим: нарушенная визуальная иерархия, слабая типографика и перегруженные элементы снижали читаемость и усложняли восприятие каталога.
При этом часть функциональных и визуальных решений, заложенных в оригинальном сайте addinol.de, так и не была реализована в локальной версии.
Подход:
Мы сохранили существующую структуру и логику сайта, но переработали визуальную систему — типографику, отступы, акценты и компоненты.
Первый экран:
Первый экран не давал чёткого понимания продукта и перегружал пользователя визуально. Основной акцент терялся, а сценарий взаимодействия не был очевиден.
Мы упростили композицию, усилили заголовок и добавили явные точки входа — подбор масла и переход в каталог. Экран стал компактнее, за счёт чего следующий блок с каталогом попадает в зону видимости без скролла и сразу продолжает сценарий выбора.
Было:
Стало:
Каталог:
Блок был перегружен: дублирующиеся действия, слабая иерархия и визуальный шум мешали быстро считать информацию. Карточки выглядели тяжело, а сценарий взаимодействия распадался.
Мы упростили структуру и сократили количество действий: оставили одно основное — переход к товару. Пересобрали типографику и отступы, усилили заголовок и сделали карточки легче для восприятия.
Было:
Стало:
Подбор масла:
Добавили отдельный блок с быстрым подбором масла — ключевой функцией сайта, которая ранее не была явно представлена на главной странице.
Карточка товара:
Блок был слабо структурирован и терялся в потоке контента. Заголовок не считывался как акцент, а композиция не помогала быстро уловить суть.
Мы переработали типографику и расставили акценты: усилили заголовок, упростили текст и выстроили более контрастную композицию.
Было:
Стало:
Итог:
Редизайн выполнен точечно, без полной переработки продукта. За счёт работы с визуальной системой и ключевыми сценариями удалось значительно повысить читаемость и упростить взаимодействие с сайтом.
В результате сайт сохранил текущую структуру, но стал восприниматься как более современный и удобный инструмент.
Лучше один раз зайти и посмотреть, как это работает: