GOILWebstore
Первый шаг дилера моторных масел в онлайн: бренд, магазин, оплата и кабинет в одном концепте.
Дилер моторных масел, всегда продававший через прилавок. Концепт - весь переезд в онлайн одним куском: бренд, лендинг, объясняющий продукт, магазин с настоящим чекаутом, личный кабинет и те же страницы в ширину телефона.
- Год
- 2024
- Роль
- Продуктовый дизайн
- Объём
- Дизайн-концепт: бренд, лендинг, магазин, кабинет, мобайл
- Система
- Favorit Pro и Gotham Pro, серая шкала, одно золото
- Инструменты
- Figma · After Effects · Photoshop
Проблема
Бриф был в три строки: клиент работает только оффлайн, хочет современный дизайн, нужны новые покупатели. Тихая проблема - сам продукт. Моторное масло - товар, который покупают люди, в большинстве своём не отличающие одну канистру от другой, и магазин, не умеющий объяснить разницу, конкурирует только ценой.
Чтоясделал
Логотип, сквозь который льётся продукт
G вырезана из чертежей двигателей, OIL набрано сплошным чёрным, и фотографическая волна золотого масла проходит прямо сквозь буквы. Первый экран - весь аргумент бренда: чертежи для доверия, сам продукт как единственный цвет на странице. Больше ничему на сайте не позволено быть таким громким.
Каталог двух решений, а не двадцати
Карточка товара - одна фотография, рейтинг, три строки о том, что это за масло, цена и одна кнопка. Ни матрицы сравнения, ни шума бейджей. Описание делает то объяснение, которое раньше делал продавец за прилавком, - вся работа, которую этот магазин наследует от лавки, которую заменяет.
Страница товара спорит спецификациями
Тип, бренд, классификации API и ACEA, вязкость: таблица, которую спросил бы механик, стоит на странице, а не в PDF, и похожие товары ждут в ленте рядом. Добавить в корзину - слайдер, заполняющийся по мере нажатия, так что подтверждение - сама кнопка, а не тост где-то ещё.
От корзины до заказа без тупика
Корзина держит промокод первого заказа рядом с итогом и кнопку быстрой покупки рядом с полной формой. Чекаут предлагает доставку или самовывоз, потом оплату при получении, онлайн или по счёту. Наложенный платёж и счёт - не пережиток: для оптового покупателя это разница между магазином и брошюрой.
Кабинет, собранный ради второго заказа
Вход по почте или через Google, Apple, Facebook. Внутри: заказы рядом с возвратами, адресная книга, реферальная и бонусная программы и настройки рассылки вплоть до любимых брендов и категорий. Первый заказ проживёт без всего этого. Второй - причина, по которой это существует.
Категории, нарисованные чертежами
Авто, мото, тракторы и трансмиссия открываются каркасным рендером самой машины, с типами масел рядом: синтетика, полусинтетика, минеральное, дизельное. Рисунки говорят на одном языке с G из логотипа и честно решают проблему фотографии: ни один сток с коробкой передач не читается инженерией, а не декором.
Тот же магазин в ширину телефона
Три экрана перенесены целиком: карусель «о нас», страница товара с таблицей характеристик и лентой похожих, экран категории с тем же каркасным автомобилем. Не отдельный мобильный дизайн - та же система, дышащая на узкой ширине.
Подкапотом
Серая шкала и один цвет, и цвет - это продукт
Две гарнитуры, Favorit Pro и Gotham Pro, и палитра из восьми серых с одним пыльно-розовым. Всё насыщенное на странице - фотография масла: волна в хиро, капли в диаграммах, канистры в карточках. Когда продукт - золотая жидкость, фирменный цвет поверх соревновался бы с товаром.
Чертежи вместо стока
G логотипа заполнена чертежами двигателя, категории - каркасные рендеры, орнаменты секций - пунктирные окружности из того же чертёжного набора. Доверие к дилеру масел механическое, а не лайфстайловое, поэтому графический язык - тот, которому инженеры уже верят.
Три пути анимированы, а не тридцать экранов в рамках
Каталог - товар - в корзину, корзина - оформленный заказ, вход - настройки кабинета: каждый идёт в After Effects одним непрерывным путешествием с живым курсором. Флоу, существующий только стиллами, прячет свои швы. Заставить концепт двигаться - то, что вообще вынуждает нарисовать промежуточные состояния.
Негламурная половина тоже спроектирована
Возвраты рядом с заказами, у промокода есть место в корзине, оплата покрывает три настоящие привычки, кабинет несёт реферальную и бонусную программы. Концепты обычно останавливаются на хиро и странице товара. Этот нарисован до глубины, на которой настоящему магазину становится больно.