Клієнтський проєкт · бренд, UX і сайт

Pidkazhu
від логотипа до платформи

Сервіс підбору СТО в Україні – від правил продукту й логотипа до сайту трьома мовами. З усвідомленою зміною курсу: коли перший дизайн виявився надто пласким, усю дизайн-систему було перезібрано.

Клієнтський проєктБрендинг і логотипUX і дизайн-системаAstro · PHP

01 · Контекст

Вихідна точка й завдання

Замовник прийшов із чіткою ідеєю, але без назви, бренду й сайту. Потрібен був не черговий каталог автосервісів, а сервіс, якому довіряєш своє авто – ще до того, як віддаєш ключі.

Коротко

Що

Сервіс, який підбирає водіям в Україні одне перевірене СТО – особисто, без каталогу й без рейтингів.

Моя роль

Усе під ключ: правила продукту, ядро бренду, логотип і його анімація, дизайн-система, UX, сайт і бекенд форми.

Результат

Сайт трьома мовами (UA · RU · EN), працює на pidkazhu.com

Сфера

Підбір автосервісу · Україна

Завдання

Продукт, бренд і сайт

Роль

Стратегія · Дизайн · Розробка

Терміни

Червень – вересень 2026

02 · Проблема

Головний ворог – невизначеність

Проблема не в тому, щоб обрати один сервіс із десяти. Вона починається в момент, коли треба довірити авто людям, які знають про ремонт набагато більше за тебе.

Чого водій боїться в цей момент

Заплатити за роботу, яка насправді була не потрібна

Отримати додаткові роботи, яких ніхто не чекав

Не знати, які деталі й матеріали справді використано

Не розуміти, чи справедлива ціна

Не розуміти, наскільки якісно виконано ремонт

Trust should come before the keys change hands.
Внутрішній принцип бренду – довіра має з’явитися до того, як клієнт віддасть ключі.

Дизайн-система починається саме з цієї фрази: «We sell confidence, not repairs».

03 · Правила продукту

Спершу правила, потім дизайн

Перш ніж намалювати бодай одну сторінку, я зафіксував продукт письмово: конституція продукту, Unique Mechanism, Brand DNA і головний об’єкт «Bearing». Потім ці документи відповідали на кожне питання дизайну – за правилами, а не за смаком.

Відправна точка: перша чернетка

Перша чернетка від 30 червня виглядала як будь-який агрегатор: зірки, відгуки, мапа з СТО, каталог послуг. Технічно охайно – і рівно протилежно тому, що обіцяє сервіс. Із цього розуміння й виросли правила.

Перша чернетка головної Pidkazhu від 30 червня — Перша чернетка, 30 червня: рейтинги, мапа, каталог – усе, що згодом прямо заборонили.

Перша чернетка: мапа, рейтинг 4,8 і «40+ перевірених СТО» — Перша чернетка, 30 червня: рейтинги, мапа, каталог – усе, що згодом прямо заборонили.

Що таке Pidkazhu

Особистий посередник: менеджер розбирається в ситуації в розмові

Одне перевірене СТО замість списку для порівняння

Партнерів заздалегідь перевіряють особисто – фахівці, обладнання, прозорі рахунки, гарантія

Для клієнта безкоштовно – комісію сплачує партнерське СТО

Чесно каже, якщо відповідного рішення немає

Чим Pidkazhu свідомо не є

Не каталог, не маркетплейс, не сайт відгуків

Жодних зірок, рейтингів, вигаданих відгуків і лічильників клієнтів

Жодних фільтрів, порівнянь, калькуляторів цін та онлайн-запису

Жодного особистого кабінету й дашборда

Жодних обіцянок, які сервіс не контролює сам

Дизайн-система v1: п’ять правил дизайну та «жорсткі заборони» — Дизайн-система v1, липень: п’ять правил для кожного екрана – і «hard nos»: жодних авто, шестерень і ключів.

Шлях клієнта – дев’ять закріплених кроків

01Опис ситуації
02Розмова з менеджером
03Уточнення
04Фото або огляд, якщо потрібно
05Підбір СТО
06Перевірка, чи може воно прийняти
07Погодження з клієнтом
08Передача даних
09Візит на СТО

04 · Головний об’єкт

Один напрямок замість списку

Серце продукту називається «Bearing» – картка рівно з одним погодженим СТО. У ній завжди ті самі поля в тому самому порядку: СТО · дата · адреса · хто зустріне. Її візуальна вага зростає разом із заявкою й знову спадає після візиту – вона залишається доступною, але не вимагає уваги.

Картка Bearing у чотирьох станах — Bearing у чотирьох моментах: до результату, пропозиція, погоджений візит, після візиту.

Шість станів заявки – закріплені в моделі даних

Прийнята

Повідомлення отримано, менеджер зв’яжеться.

Потрібне уточнення

Для точного підбору бракує фото чи деталей.

Підбір триває

Шукаємо відповідне СТО й уточнюємо, чи може воно прийняти.

Потрібна згода

СТО знайдено, рішення за клієнтом.

Візит погоджено

СТО, час, адресу й контактну особу визначено.

Рішення немає

Pidkazhu каже про це прямо, а не радить невідповідне.

05 · Бренд і логотип

Знак, що говорить

Пошук кольору почався з п’яти спокійних скандинавських палітр. Жодну не взяли як є – з них виросла власна система: теплий папір, глибокий хвойний зелений для довіри й один теракотовий акцент для людського. Прямо заборонено: синьо-червона гама автомобільної галузі.

Кандидати · червень

Sea Glass Minimal

Fjord Mist

Sage Sauna

Stone Harbor

Charcoal Hygge

Дизайн-система v1 · липень

Paper#F7F4EF

Pine#1F4D3E

Clay#C05E3B

Ink#1C1A17

Дизайн-система, а не мудборд

Палітра виросла в повноцінний документ із 15 розділів: філософія бренду, принципи, колір, типографіка, сітка, відступи, рух, іконки, доступність і компоненти. Кожен колір і шрифт у ньому – той самий код, що потім працює на сайті.

Обкладинка дизайн-системи Pidkazhu v1: «The right shop, chosen for you.» — Дизайн-система v1.0, липень 2026 – обкладинка, шрифт і колір.

Зразок шрифту: Newsreader для заголовків — Дизайн-система v1.0, липень 2026 – обкладинка, шрифт і колір.

Від напису до знака

У першій чернетці логотип був просто написом: «pidkazhu» з жовтою крапкою в кінці. Крапка залишилася – як знак знайденої відповіді. У дизайн-системі v1 з неї виріс справжній знак: квадрат, що говорить, із крапкою в центрі.

Рішення: знак, що говорить

Знак – це «квадрат, що говорить»: бульбашка мовлення зі зрізаним лівим верхнім кутом – Pidkazhu говорить. Крапка в центрі – це знайдена відповідь. Зрізаний кут повторює кожна картка сайту. Згодом логотип отримав рух, у шість раундів: крапка обводить контур, звертає всередину й стає в центр; потім написом проходить тонова смуга – 2,1 секунди, без відскоків.

Затверджений варіант V5 A3 – так він працює в шапці pidkazhu.com. Під час подальшого редизайну знак зберігся – змінилися лише шрифт напису й відтінок зеленого.

Три хореографії руху

A · Point of the line

Крапка малює контур і одним рухом іде в центр. Обрано.

B · Inset orbit

Контур змикається з двох боків, крапка проходить зменшеною копією форми.

C · Spiral lock

Одна лінія з довгим хвостом, потім спіраль у центр.

Переміг A: траєкторію обчислено з геометрії самого знака – до іншого логотипа вона не пасує.

Власні іконки замість стокових

Іконки теж намальовані, а не куплені: одна родина ліній на сітці 24 px. Іконки орієнтира, довіри й турботи мають теракотову крапку з логотипа.

06 · Версія 1

Від вайрфрейму до першої живої версії

Наприкінці серпня з’явилися вайрфрейми двох конкурентних головних, потім hi-fi дизайн для десктопа й мобільних. Реалізація – Astro та власний PHP-бекенд для форми заявки з двох кроків. Сайт запрацював 1 вересня.

Концепція головної 1a — Дві концепції однієї архітектури: 1a та 1b – теплий папір, антиква, тонкі лінії.

Концепція головної 1b — Дві концепції однієї архітектури: 1a та 1b – теплий папір, антиква, тонкі лінії.

Моушн-система «Нитка»

Для особистої сторінки кожної заявки я порівняв три концепції руху. Перемогла «нитка»: заявка рухається крапкою по лінії – опис, підбір, рекомендація, знайомство, візит. Клієнт бачить не окремі екрани, а те, як просувається його справа.

Стани сторінки заявки з ниткою, мобільна й десктопна версії — Сторінка заявки в станах «підбір» і «рекомендація» – мобільна й десктопна версії.

07 · Робота над помилками

Охайно – але надто тихо

Перша версія була охайною, і саме в цьому була проблема. Через тиждень після запуску я провів аудит власної головної. Висновок: продукт, тексти й логіка правильні – візуальна мова їх не тримає.

Діагноз з аудиту від 7 вересня

Одна тональна площина – папір усюди, майже немає ієрархії

Однаковий ритм – кожна секція: заголовок, текст, лінія

Типографіка не має кульмінації

Фірмові прийоми не працюють як система

Головний об’єкт виглядає як п’ять порожніх заглушок

Зелений лише в кнопках – немає площі фірмового кольору

Повітря без архітектурних країв

Шість ітерацій усередині тієї самої системи

Далі були розбір восьми сайтів-референсів і шість нових варіантів: журнальна нумерація, темні смуги, місце під фото, Bearing як наскрізна лінія. Кожен був кращим за попередній – жоден не був достатньо добрим. Висновок: проблема не в розкладці, а в самій візуальній мові.

01 / 08
Версія 1 · 1 вер.
Теплий папір, антиква, тонкі лінії. Охайно – і пласко.
02 / 08
Полірування · 8 вер.
Ширший контейнер, спокійніші відступи. Та сама формула.
03 / 08
Ітерація V2
Зелена смуга відповідальності, нумеровані кроки. Більше контрасту, той самий ритм.
04 / 08
Ітерація V3
Секція проблеми на власній поверхні, розкладка навпіл. Охайніше, але не сміливіше.
05 / 08
Ітерація V4
Великі цифри й місце під фото. Зображення мали тримати те, чого не тримала система.
06 / 08
V5 Editorial · 10 вер.
Розділи як у журналі, після розбору восьми референсів. Ясніше, але все ще тихо.
07 / 08
V6 Bearing · 12 вер.
Bearing як наскрізна лінія сторінки. Сильно як ідея, візуально – той самий папір.
08 / 08
Нова система · онлайн
Холодні поверхні, один гротеск, темні секції – і авто як головний об’єкт.

Порушити власне правило

Тож дизайн-систему перезібрали з нуля – разом із правилом, яке я сам установив: «жодних автомобілів». Одне спокійне авто одразу дає темі обличчя й не скочується в кліше автосалону. Свідомо не суперкар, а шведське купе 60-х – P1800: один-єдиний власник проїхав на цій моделі понад 4,8 млн км завдяки регулярному догляду в майстрів, яким довіряв. Це і є ідея Pidkazhu: надійність створює не авто, а сервіс навколо нього. Правила продукту, тексти й Bearing залишилися недоторканими.

Головна Pidkazhu у версії 1 — До · версія 1

Головна Pidkazhu після редизайну — Після · онлайн

08 · Версія 2

Нова система, ті самі правила

Холодний сріблясто-сірий замість теплого паперу, один гротеск замість антикви, темні секції для ритму. Зелений узято просто з фарби авто в hero, щоб бренд і зображення були однією палітрою.

Дизайн-система v2 · вересень

Mist#F2F4F6

Accent#386C5A

Signal#C05E3B

Graphite#0F1418

Перший екран

Авто як спокійний головний об’єкт, а одразу під ним – поля результату: СТО, дата, адреса, хто зустріне. Під курсором воно перетворюється на рентген-лінзу – під фарбою видно техніку.