Вернуться к кейсам 
OilShop — официальный дистрибьютор смазочных материалов Mobil, Sinopec и Neste с 2009 года. Компания поставляет масла для легкового и коммерческого транспорта, индустриальные масла и смазки оптовым и розничным клиентам. Входит в международный закупочный союз GROUPAUTO International с 2014 года.
Старый сайт работал на «1С-Битрикс» и за годы эксплуатации накопил критические проблемы: неадаптивный дизайн, перегруженный интерфейс, отсутствие мобильной версии. Требовался полный редизайн с сохранением товарного каталога и интеграций.
С чем пришли: 5 задач
1. Устаревший дизайн и интерфейс. Сайт визуально отставал от конкурентов. Тяжёлая битриксовая вёрстка, мелкий текст, нечитаемая структура каталога — пользователю было сложно ориентироваться в ассортименте из сотен позиций.
2. Отсутствие мобильной версии. Более 55% посетителей заходили с телефонов, но сайт не был адаптирован. Каталог сжимался в нечитаемую полоску, корзиной невозможно было пользоваться на сенсорном экране.
3. Сложный путь от каталога до заказа. Поиск товара → карточка → добавление в корзину → переход в корзину → оформление. На каждом шаге — перезагрузка страницы. После трёх-четырёх товаров пользователь терял контекст.
4. Слабый личный кабинет. История заказов была свёрнута в таблицу без визуального разделения. Покупатель не видел статус заказа без звонка менеджеру. Профиль не хранил адреса доставки — их приходилось вводить заново при каждом заказе.
5. Отсутствие инструментов для контента. Новости были спрятаны в глубине сайта, не было отдельных посадочных страниц для акций и спецпредложений. Контент-менеджеры не могли гибко управлять баннерами и промо-блоками.
Решение 1. Новый дизайн: тёмная тема и золотой акцент
Разработан дизайн в тёмной гамме с золотым акцентным цветом (#C4A261). Такое сочетание выделяет OilShop среди конкурентов с типовыми светлыми интернет-магазинами и работает на премиальное позиционирование брендов Mobil и Sinopec.
Шрифт Roboto Flex дал гибкость в типографике: SemiBold для заголовков, Medium для навигации, Regular для текстов. Межстрочные интервалы и отступы выстроены по восьмипиксельной сетке — интерфейс выглядит структурно на любом разрешении.
Решение 2. Каталог с фильтрацией и карточка товара
Каталог спроектирован вокруг реального пользовательского сценария: зашёл → выбрал категорию → отфильтровал по характеристикам → добавил в корзину. Три уровня навигации: главные категории в боковом меню, подкатегории с карточками товаров, фильтры по бренду, вязкости и объёму тары.
Карточка товара выводит полный набор характеристик из 1С: артикул, вязкость, допуски, объём, вес. Кнопка добавления в корзину и счётчик количества вынесены в фиксированную нижнюю панель — доступны при скролле.
Решение 3. Оформление заказа в два шага
Процесс покупки сокращён до двух экранов. На первом шаге покупатель вводит имя, телефон, email и адрес доставки — для зарегистрированных пользователей поля автозаполняются из профиля. На втором — проверяет данные и выбирает способ оплаты.
Решение 4. Личный кабинет
Личный кабинет с тремя вкладками: заказы (список с визуальным разделением по статусам), профиль (контакты, адреса, смена пароля), история (завершённые заказы с возможностью повтора).
Решение 5. Полная адаптивность
Дизайн разработан одновременно для десктопа (1440px) и мобильных (390px). Мобильная версия — самостоятельный интерфейс с нижним меню быстрого доступа, крупными карточками товаров, формой заказа с минимумом полей и гамбургер-меню.
Решение 6. Новости и контентные страницы
Разработан шаблон новостей с поддержкой баннеров и SEO-инструментов: настраиваемые метатеги, человекопонятные URL, микроразметка Schema.org.
Страницы «О компании» и «Контакты» сверстаны с учётом контентных задач: карта с адресом, реквизиты, форма обратной связи.
Итоги проекта
| Параметр | Было | Стало |
|---|---|---|
| Типов страниц | 8 (на базе шаблона Битрикс) | 16 уникальных (главная, каталог, карточка, корзина, оформление, заказы, профиль, новости, о компании, контакты + мобильные версии) |
| Адаптивность | Нет | Полная — десктоп 1440px + мобильные 390px |
| Мобильная аудитория | Не обслуживалась | Полноценный интерфейс для смартфонов |
| Шаги оформления заказа | 4–5 с перезагрузкой | 2 без перезагрузки |
| Личный кабинет | Таблица заказов | Вкладки: заказы, профиль, история |
| Повторный заказ | Заполнить всё заново | Один клик — автозаполнение из профиля |
| Дизайн | Типовой светлый Битрикс | Тёмная премиальная тема с золотым акцентом |
| Типографика | Системные шрифты | Roboto Flex с восьмипиксельной сеткой |
Ключевое изменение: сайт из инструмента для чтения превратился в инструмент для покупки. Путь от входа на сайт до оформления заказа сократился до трёх действий: выбрал товар → добавил в корзину → подтвердил заказ.
Типичные ошибки в похожих проектах
1. Редизайн как смена шрифтов и цветов. Если ограничиться косметикой — поменять логотип, шрифт и кнопки — сайт останется неудобным в другой обёртке. Редизайн OilShop затронул структуру: путь пользователя, навигацию, мобильную версию с нуля.
2. Мобильная версия как ужатая копия десктопа. Нельзя просто сжать 1440px в 390px. Нужно переработать навигацию, корзину и форму заказа. Мобильная версия OilShop — отдельный спроектированный интерфейс.
3. Игнорирование промежуточных состояний. Пустая корзина, отсутствие товара в наличии, ошибка при отправке формы — эти состояния часто остаются без дизайна. В OilShop проработаны поп-апы для всех краевых случаев.
4. Сложная регистрация перед заказом. Принудительная регистрация с email-подтверждением отсекает до 30% покупателей. В OilShop заказ можно оформить без регистрации, а кабинет создаётся автоматически при первой покупке.
5. Контентные страницы по остаточному принципу. «О компании» и «Контакты» часто делают в последний момент. В OilShop эти страницы — часть дизайн-системы: та же сетка, та же типографика, те же отступы.
Заключение
Проект OilShop — пример того, как редизайн B2B-интернет-магазина меняет не внешний вид, а пользовательский опыт. Тёмная тема и золотой акцент выделили сайт среди конкурентов, а переработанный путь покупки сократил количество шагов до заказа вдвое. Дизайн-система заложена с запасом под расширение.