Привіт,
Я Юрій.
Я Юрій.
Monte
Monte — це власний онлайн-магазин екстерʼєрного тюнінгу з кастомізованими деталями: спойлери, боді-кіти, сплітери й дифузори. Я провів повний цикл — конкурентний аналіз і інтервʼю з покупцями, персони та JTBD, CJM з точками відвалу, інформаційну архітектуру та флоу, пріоритизацію MVP, UI kit на токенах, десктоп і мобайл, та handoff-документацію для розробки.
Затисни, щоб відкрити
Бренд продавав власну лінію екстерʼєрного тюнінгу через реселерів і маркетплейси, без свого магазину. Після аналізу ринку ЄС і перших інтервʼю з покупцями стало зрозуміло, що шаблонна ecommerce-платформа не підтримує два сценарії, на яких тримається категорія: вибір по авто і кастомізацію деталі. Продукт спроєктували з нуля під ці сценарії.
Чотири інтервʼю з покупцями і карта шляху поділили аудиторію на дві групи, і саме цей поділ визначив більшість подальших рішень. Новачок купує тюнінг вперше, не знає назв деталей і найбільше боїться помилитись. Прошарений вже знає, що хоче, часто аж до артикула, і оцінює магазин за тим, наскільки швидко він не заважає.
Одні покупці починають з авто: знають модель і хочуть побачити, які деталі підходять. Інші починають з деталі: вже знають назву і хочуть знайти її одразу. Одна точка входу обслуговує лише половину з них.
Перша точка контакту вирішує, чи дійде користувач до каталогу взагалі, тож саме їй дісталось найбільше уваги в проєкті. Сценарії входу різні, і один спільний шлях не може обслужити обидва — тому в інтерфейсі два способи взаємодії. Перший — селектор авто: користувач проходить кроки вибору машини, і на кожному інтерфейс підказує можливі комбінації, тож зайти в глухий кут неможливо. Другий — звичний пошуковий рядок, який динамічно реагує на введене: підказує варіанти під час набору, веде в потрібну категорію і показує спецпропозиції.
Я свідомо пропустив етап лоу-фай вайрфреймів. Структура екранів вже була задана IA, user flow і job stories, тож вайрфрейм лише перемалював би готові рішення в сірі коробки. AI-інструменти дозволили одразу робити макети в hi-fi.
Болі користувачів, бізнес-проблеми та інтервʼю склались у набір гіпотез. Під кожну — конкретне дизайн-рішення. Ось ключові з них.
Одна очевидна точка старту замість «клікай куди завгодно», після якої користувач більше не бачить деталей, що не підійдуть на його авто. Перевіряти нічого вручну не треба: fitment вбудований у результати.
Підказки під час набору, збережена історія пошуку і толерантність до помилок у назвах категорій, брендів і типів деталей. Рекомендації тягнуться з того, що користувач вже переглядав і купував.
Галерея товару ставить деталь поруч із фото, де вона встановлена на реальному авто тієї ж моделі. Користувач скролить і бачить результат, а не рендер — і відгуки на сторінці відфільтровані під ту саму модель, тож доказ йде від власників того самого авто.
Люди хочуть щось своє і хочуть побачити це одразу. Деталь відкривається в окремому конфігураторі: 3D-модель з одного боку, матеріал, покриття і колір — з іншого. Кожен вибір перемальовує модель і рухає ціну разом з ним, а комбінації, які неможливо виготовити, лишаються видимими, але приглушеними.
Користувач у кошику розуміє, що обрав не той колір. Зазвичай це пʼять кроків: назад у каталог, знайти, відкрити, переобрати, додати знову. Я звів це до одного — рядок відкривається прямо назад у конфігураторі.
Збережене без реєстрації авто означає, що другий візит не починається з нуля. Просити акаунт до першої покупки — зарано.
Доставка в партнерський сервіс. Окремий вибір при чекауті: додому, за власною адресою, або прямо в партнерський сервіс, який встановить деталь. Збережені адреси переносяться в наступне замовлення.
Двошарова модель токенів: base → semantic roles. Компоненти будуються на варіантах і ролях, а не на окремому токені під кожен випадок, тож система лишається компактною зі зростанням кількості екранів.
Люди хочуть свою збірку, а не заводський пресет — і хочуть побачити її до рішення. Конфігуратор — окрема сторінка, а не віджет на картці товару, бо 3D-прев'ю і три набори опцій потребують місця: модель зліва, матеріал, покриття і колір — справа. Кожен вибір перемальовує модель і оновлює ціну, а комбінації, які неможливо виготовити, лишаються видимими, але приглушеними — тож нічого не стане сюрпризом на чекауті.
У каталозі: фільтри зліва, результати справа, кожен вже звужений під обране авто, з ціною і наявністю на картці. Сторінка товару ділиться на дві частини — галерея зліва, ціна, кнопка покупки і вхід у конфігуратор справа — а нижче специфікації, встановлення, політика повернення й відгуки, відфільтровані під ту саму модель.
У кошику редагується кожен рядок: кількість і колір, який знову відкриває конфігуратор без втрати замовлення. Чекаут — три кроки: контакти, доставка, оплата — і саме доставка тут відрізняється від звичайного ритейлу: додому, за власною адресою, або прямо в партнерську майстерню, яка встановить деталь.
Затисни, щоб відкрити
