Pidkazhu
от логотипа до платформы
Сервис подбора СТО в Украине – от правил продукта и логотипа до сайта на трёх языках. С осознанной сменой курса: когда первый дизайн оказался слишком плоским, вся дизайн-система была пересобрана.
Исходная точка и задача
Заказчик пришёл с ясной идеей, но без названия, бренда и сайта. Нужен был не очередной каталог автосервисов, а сервис, которому доверяешь свою машину – ещё до того, как отдаёшь ключи.
Главный враг – неопределённость
Проблема не в том, чтобы выбрать один сервис из десяти. Она начинается в момент, когда нужно доверить машину людям, которые знают о ремонте намного больше тебя.
Trust should come before the keys change hands.
Дизайн-система начинается именно с этой фразы: «We sell confidence, not repairs».
Сначала правила, потом дизайн
Прежде чем нарисовать хоть одну страницу, я зафиксировал продукт письменно: конституция продукта, Unique Mechanism, Brand DNA и главный объект «Bearing». Потом эти документы отвечали на каждый вопрос дизайна – по правилам, а не по вкусу.
Отправная точка: первый черновик
Первый черновик от 30 июня выглядел как любой агрегатор: звёзды, отзывы, карта с СТО, каталог услуг. Технически аккуратно – и ровно противоположно тому, что обещает сервис. Из этого понимания и выросли правила.
- 01Описание ситуации
- 02Разговор с менеджером
- 03Уточнение
- 04Фото или осмотр, если нужно
- 05Подбор СТО
- 06Проверка, может ли оно принять
- 07Согласование с клиентом
- 08Передача данных
- 09Визит на СТО
Одно направление вместо списка
Сердце продукта называется «Bearing» – карточка ровно с одним согласованным СТО. В ней всегда одни и те же поля в одном порядке: СТО · дата · адрес · кто встретит. Её визуальный вес растёт вместе с заявкой и снова спадает после визита – она остаётся доступной, но не требует внимания.
Знак, который говорит
Поиск цвета начался с пяти спокойных скандинавских палитр. Ни одну не взяли как есть – из них выросла собственная система: тёплая бумага, глубокий хвойный зелёный для доверия и один терракотовый акцент для человеческого. Прямо запрещено: сине-красная гамма автомобильной отрасли.
Дизайн-система, а не мудборд
Палитра выросла в полноценный документ из 15 глав: философия бренда, принципы, цвет, типографика, сетка, отступы, движение, иконки, доступность и компоненты. Каждый цвет и шрифт в нём – тот же код, который потом работает на сайте.
От надписи к знаку
В первом черновике логотип был просто надписью: «pidkazhu» с жёлтой точкой в конце. Точка осталась – как знак найденного ответа. В дизайн-системе v1 из неё вырос настоящий знак: говорящий квадрат с точкой в центре.
Решение: знак, который говорит
Знак – это «говорящий квадрат»: пузырь речи со срезанным левым верхним углом – Pidkazhu говорит. Точка в центре – это найденный ответ. Срезанный угол повторяет каждая карточка сайта. Позже логотип получил движение, в шесть раундов: точка обводит контур, сворачивает внутрь и встаёт в центр; затем по надписи проходит тоновая полоса – 2,1 секунды, без отскоков.
Утверждённый вариант V5 A3 – так он работает в шапке pidkazhu.com. При последующем редизайне знак сохранился – поменялись только шрифт надписи и оттенок зелёного.
Победил A: траектория вычислена из геометрии самого знака – к другому логотипу она не подойдёт.
Свои иконки вместо стоковых
Иконки тоже нарисованы, а не куплены: одно семейство линий на сетке 24 px. Иконки ориентира, доверия и заботы несут терракотовую точку из логотипа.
От вайрфрейма до первой живой версии
В конце августа появились вайрфреймы двух конкурирующих главных, затем hi-fi дизайн для десктопа и мобильных. Реализация – Astro и собственный PHP-бэкенд для формы заявки из двух шагов. Сайт заработал 1 сентября.
Моушн-система «Нитка»
Для личной страницы каждой заявки я сравнил три концепции движения. Победила «нитка»: заявка движется точкой по линии – описание, подбор, рекомендация, знакомство, визит. Клиент видит не отдельные экраны, а то, как продвигается его дело.
Аккуратно – но слишком тихо
Первая версия была аккуратной, и именно в этом была проблема. Через неделю после запуска я провёл аудит собственной главной. Вывод: продукт, тексты и логика верны – визуальный язык их не несёт.
Шесть итераций внутри той же системы
Дальше были разбор восьми сайтов-референсов и шесть новых вариантов: журнальная нумерация, тёмные полосы, место под фото, Bearing как сквозная линия. Каждый был лучше предыдущего – ни один не был достаточно хорош. Вывод: проблема не в раскладке, а в самом визуальном языке.
01 / 08Версия 1 · 1 сент.Тёплая бумага, антиква, тонкие линии. Аккуратно – и плоско.
02 / 08Полировка · 8 сент.Шире контейнер, спокойнее отступы. Та же формула.
03 / 08Итерация V2Зелёная полоса ответственности, нумерованные шаги. Больше контраста, тот же ритм.
04 / 08Итерация V3Секция проблемы на своей поверхности, раскладка пополам. Аккуратнее, но не смелее.
05 / 08Итерация V4Крупные цифры и место под фото. Картинки должны были нести то, что не несла система.
06 / 08V5 Editorial · 10 сент.Главы как в журнале, после разбора восьми референсов. Яснее, но всё ещё тихо.
07 / 08V6 Bearing · 12 сент.Bearing как сквозная линия страницы. Сильно как идея, визуально – всё та же бумага.
08 / 08Новая система · онлайнХолодные поверхности, один гротеск, тёмные секции – и машина как главный объект.
Нарушить собственное правило
Поэтому дизайн-систему пересобрали с нуля – включая правило, которое я сам установил: «никаких машин». Один спокойный автомобиль сразу даёт теме лицо и не скатывается в клише автосалона. Осознанно не суперкар, а шведское купе 60-х – P1800: один-единственный владелец проехал на этой модели больше 4,8 млн км благодаря регулярному уходу у мастеров, которым доверял. Это и есть идея Pidkazhu: надёжность создаёт не машина, а сервис вокруг неё. Правила продукта, тексты и Bearing остались нетронутыми.
Новая система, те же правила
Холодный серебристо-серый вместо тёплой бумаги, один гротеск вместо антиквы, тёмные секции для ритма. Зелёный взят прямо с краски машины из hero, чтобы бренд и изображение были одной палитрой.
Первый экран
Машина как спокойный главный объект, а сразу под ней – поля результата: СТО, дата, адрес, кто встретит. Под курсором она превращается в рентген-линзу – под краской видна техника.
Путь в восемь шагов
Вместо «мы найдём лучшее СТО» страница показывает каждый шаг: что делает Pidkazhu и что нужно от клиента – чаще всего ничего.
Десять критериев вместо звёзд
Квалификация, оборудование, прозрачные счета, гарантия: каждый критерий объяснён отдельно – и почему он важен для клиента.
Бизнес-модель открыто
Кто платит комиссию и почему это не влияет на выбор: сайт сам отвечает на неудобный вопрос раньше, чем его задаст клиент.
Атлас услуг
Одна машина, восемь слоёв: каждая группа услуг подсвечивает свою зону автомобиля. Не нужно знать, как называется сломанная деталь.
Страница на каждую услугу
Восемь страниц услуг на трёх языках с типичными симптомами и критериями подбора. Они собирают поисковый трафик и не обещают того, что может только СТО.
Заявка в два шага
Ситуация своими словами, подсказки-чипы, затем контакты. Точный диагноз знать не нужно.
Сначала мобильная версия
Быстро, на трёх языках, без лишнего
Сайт собран статически и быстро загружается; форма заявки работает через собственный лёгкий PHP-бэкенд на украинском хостинге заказчика.
Что получил заказчик
Не шаблон, а продуманный продукт – от первого правила до последней анимации. Бизнес-цифр пока нет; сайт работает с сентября.
Обсудить проект
Давайте вместе выясним, как UX и чёткая информационная архитектура могут улучшить ваш продукт.
Начать консультацию