01—04

Кейс / Автозапчасти · карточка товара

Карточка
рулевой рейки

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

АвтозапчастиРулевые рейкиВосстановление · ремонт · установкаE-commerce карточка
4

Концепта дизайна

1

Раунд генерации

9193

Диапазон DQS?DQS (Design Quality Score) — внутренняя оценка качества дизайна от 0 до 100 по 20+ критериям: оригинальность шрифтов и палитры, типографика, отсутствие визуальных клише, адаптивность.

A+

Все 4 на уровне VOS?VOS (Visual Outlier Score) — насколько концепт визуально выделяется на фоне типовых решений отрасли. Чем выше — тем сильнее карточка отличается от шаблонных карточек конкурентов.

Концепты

01 / Задача клиента

Карточка, которая
продаёт дорогую деталь

Клиент — интернет-магазин автозапчастей со специализацией на рулевых рейках: продажа восстановленных реек, ремонт, установка, замена. Карточки конкурентов (rulevaya-rejka.ru, prostoreika.pro, pstrussia.ru) выглядят устаревшими и не внушают доверия к покупке детали за 150–190 тысяч рублей.

Задача — современная страница-карточка товара, которая собирает богатый набор блоков и подаёт их премиально: галерея реальных фото, цена розница и опт, подбор по авто и совместимость, характеристики, процесс восстановления, гарантия, трейд-ин с кешбэком 10%, доставка, похожие товары и FAQ.

Товар-образец

Рулевая рейка BMW 5 E60 E61 / 6 E63 E64

ZF · активная · 4 датчика · восстановленная · артикул PSGBW250R

185 720 ₽опт 165 820 ₽

Задача

Премиальная карточка товара взамен устаревших карточек конкурентов

Аудитория

Автовладельцы и СТО, подбирающие восстановленную рейку под конкретный авто

Блоки карточки

Галерея, цена розница/опт, подбор по авто, характеристики, процесс восстановления, гарантия, трейд-ин 10%, доставка, похожие, FAQ

Тон

Уверенный, технический, премиальный — доверие к дорогой инженерной детали

Референсы визуала

understory.io, beside.com, glean.com

МЕТОД

02 / Как мы работали

Четыре направления,
проверенные оценкой

01

Разбор товара и конкурентов

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

02

Генерация направлений

Подготовили четыре принципиально разных визуальных языка по референсам understory, beside и glean — от editorial до технологичного enterprise.

03

Оценка качества

Каждый концепт прошёл систему DQS: проверку на оригинальность, типографику и отсутствие шаблонности. Все четыре набрали 91–93 балла.

04

Сборка кейса

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

RACK

03 / Концепты

Четыре характера
одной карточки

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

Концепт 01
01
93DQS
95VOS

Дорожный Editorial

Understory · кремовый editorial

Типографика

Archivo 900 + Hanken Grotesk

Палитра

Характер

editorialуверенныйтёплый премиумжурнальный

Ключевые элементы

Кремовая канва + лесной зелёныйFull-bleed пастельные плашки-секцииALL-CAPS Archivo, заголовки 90px+6 этапов восстановления на пастельных карточкахЖивой калькулятор трейд-ин 10%Реальные фото товара в галерее

Оценка качества — Excellent

Смелая editorial-типографика, полноцветные пастельные секции и тёмно-зелёные плашки, реальная галерея — premium и небанально.

Смотреть концепт
Концепт 02
02
92DQS
90VOS

Тёплый Editorial

Understory-layout × Beside-палитра

Типографика

Bricolage Grotesque 800 + Instrument Sans

Палитра

Характер

тёплыйeditorialсолнечныйпремиум

Ключевые элементы

Editorial-структура understory с тёплой палитрой besideHero-заголовок в три обработки (solid / outline / коралловый градиент)Full-bleed коралл→персик градиентные лентыNear-black секция процесса восстановленияКастомные SVG-иконки, без эмодзиРеальные фото товара

Оценка качества — Excellent

Тёплая коралловая палитра на editorial-каркасе, brave 108px hero, насыщенные градиентные ленты якорят светлый фон.

Смотреть концепт
Концепт 03
03
91DQS
85VOS

Переливы

Beside · iridescent заголовки

Типографика

Schibsted Grotesk + Onest

Палитра

Характер

спокойныйминималистичныйquiet-luxuryтехнологичный

Ключевые элементы

Минимализм beside, много воздухаАнимированные переливающиеся (iridescent) заголовкиNear-black секция процесса + полноцветная градиентная гарантияГигантский iridescent «10%» в трейд-инПодбор по VINРеальные фото в мягких карточках

Оценка качества — Excellent

Тихий люкс с фирменными переливающимися заголовками; светлая канва уверенно заякорена near-black и тёплым градиентом.

Смотреть концепт
Концепт 04
04
93DQS
95VOS

Электрик

Glean · multicolor ribbons

Типографика

Space Grotesk + IBM Plex Sans

Палитра

Характер

технологичныйenterpriseчистыйэлектрик-акцент

Ключевые элементы

Чистый enterprise-layout gleanМногоцветные flowing-ribbon градиенты (hero, разделители, CTA)Ряд огромных статов: 12 мес · 48 ч · 4 датчика · 10% · 1500+Near-black секции, перетекающие в лентуПодбор по VIN на тёмной карточкеРеальные фото товара

Оценка качества — Excellent

Электрик-ленты и гигантские статы дают технологичный premium-enterprise тон; near-black секции держат композицию.

Смотреть концепт

04 / Промежуточный результат

Концепты готовы,
слово за клиентом

Четыре уникальных концепта карточки с оценками качества DQS от 91 до 93. Это промежуточный результат: клиент выбирает одно направление, мы разрабатываем полноценную карточку товара, разворачиваем её на сайте магазина (с обратной ссылкой на этот кейс) и собираем отзыв.

4

Уникальных концепта

9193

Диапазон DQS

10%

Трейд-ин кешбэк в карточке

1

Карточка после выбора направления

Нужна карточка
такого уровня?

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

Написать в Телеграм