Дизайн-система для продукту
Зводимо інтерфейс до набору повторюваних частин із правилами застосування, щоб нові екрани складались, а не вигадувались. Починаємо з безкоштовного розбору.
Під словом «дизайн» тут чотири різні роботи, і кожна відповідає на своє питання. UX-аудит — чому люди доходять до магазину й не купують: проходимо шлях покупця й показуємо, де він обривається. Прототип — що буде на кожній сторінці ще до верстки, сірими блоками без кольорів, щоб правка коштувала пересунутого прямокутника, а не переписаного коду. Картка товару винесена окремо, бо саме на ній вирішується, класти в кошик чи ні. Дизайн-система потрібна продукту, який уже виріс і кожен новий екран вигадує заново. Усі чотири брати не треба. Якщо сайт працює й має відвідувачів, починати зазвичай варто з аудиту, якщо його ще немає — з прототипу. Перший розбір безкоштовний.
Людина заходить, гортає й іде, а версій причини стільки ж, скільки порадників: колір кнопки, головна, новий сайт. UX-аудит замінює вгадування переліком конкретних місць, де покупець зупиняється, з поясненням чому. Телефон при цьому проходимо окремо, а не зменшеним вікном.
Розберемо вашу ситуацію на безкоштовному аудитіНайдорожчі правки приходять після верстки, коли кожне «а де сторінка про доставку?» означає день-два роботи. Прототип переносить ці розмови на початок: склад кожної сторінки погоджуєте письмово, і вже від нього рахується обсяг розробки.
Товар знайдено, фільтри спрацювали, і саме тут людина не бачить ціни з доставкою, наявності чи того єдиного параметра, за яким обирає. Картку перебудовуємо в порядку питань, які покупці ставлять менеджеру, а не так, як її розклала платформа.
Однакові за змістом кнопки, поля й повідомлення в різних місцях виглядають по-різному, а правку доводиться шукати по всіх екранах. Дизайн-система зводить інтерфейс до набору вже вирішених частин — але тоді, коли продукт уже є, а не замість нього.
З'ясовуємо, що вже є: працюючий магазин із відвідувачами, задум без жодної сторінки чи продукт, що розрісся. Від цього залежить, з якої роботи починати, — і чи варто починати взагалі.
Для сайту з відвідувачами першим іде прохід шляху покупця, окремо з телефона, і звірка з аналітикою. На виході — перелік знахідок, розділений за силою впливу й вартістю виправлення.
Перелік сторінок і склад кожної сірими блоками, для широкого й вузького екрана. Погоджуємо письмово: саме від прототипу рахується обсяг макетів і розробки.
Візуальний дизайн на погодженій структурі. Для магазину окремо — картка з варіантами, чесною наявністю й вартістю доставки, перевірена на незручних товарах.
Виводимо набір компонентів із тих екранів, що вже є, з усіма станами, і переносимо на нього кілька справжніх сторінок — як доказ, що система витримує реальну роботу.
Здебільшого з UX-аудиту. Він показує, де саме люди зупиняються, і нерідко з'ясовується, що переробляти весь дизайн не потрібно: досить виправити кілька кроків у картці чи оформленні. Новий дизайн без цього знання — ставка навмання, яка може прибрати й те, що працювало.
«UI/UX дизайн» — це макети під розробку: візуальний дизайн у Figma під кілька розмірів екрана з передачею розробнику. Тут зібрано роботи навколо макетів. Аудит і прототип ідуть до них: перший показує, що міняти, другий фіксує структуру. Картку товару й дизайн-систему беруть і без повного редизайну.
Так, кожна робота має власний обсяг, строк і результат. Прототип лишається вашим незалежно від того, чи продовжите ви з нами, і його можна віддати іншому розробнику. Частину знахідок аудиту ви зможете виправити своїми людьми — ми прямо позначаємо, які саме.
Потрібна, коли однакові за змістом частини в продукті виглядають по-різному, а кожен новий екран вигадується заново. Рано — коли продукту ще немає: система, побудована з уявлень, а не з реальних екранів, майже завжди виявляється не про те. Тоді чесніше почати з першої версії, а систему вивести з неї.
Якщо до картки доходять і не додають у кошик, а каталог і пошук влаштовують, досить картки. Якщо проблеми розкидані по всьому шляху, спершу аудит: він покаже, чи обмежується справа карткою. Буває, що причина не в дизайні, а в незаповнених характеристиках, — тоді ми скажемо про це на розборі.
Так, це основна платформа, з якою ми працюємо. Дизайн для неї враховує, як тема влаштована всередині: у старих темах розмітка й логіка часто переплетені, і макет, що цього не бачить, розсипається на верстці. Свою тему для OpenCart ми будували саме як систему з набором налаштувань, тож маємо уявлення, де там болить.
Відсотків не називаємо: чесна цифра залежить від магазину, а обіцяна наперед — це вже продаж, а не оцінка. Дизайн прибирає перешкоди на шляху покупця, а купить людина чи ні, залежить ще від товару, ціни й роботи менеджерів. Щоб ефект був видимий, до правок ставимо події аналітики на проблемні кроки.
Опишіть задачу своїми словами — підкажемо, з чого починати, і чи потрібне вам те, за чим ви прийшли. Якщо не потрібне, так і скажемо.