З точки зору студії, дизайн як продукт охоплює не лише творчу частину. Це ціла низка складових, які утворюють єдиний дизайн-процес. З певними обмовками можна сказати: наскільки він ефективно вибудований — настільки успішним є проєкт.

Андрій Овсянніков, артдиректор дизайн-студії Zajno, розкладає на атоми цю «акаунтську» сторону роботи дизайн-студії.

Ілюстрації: Zajno

Дахозносний дизайн — чудова мета. Але якщо процеси всередині не налагоджені, її досягнення перетвориться на пекло. І для вас, і для клієнта. Тому успішні студії вдало міксують свою творчу складову з системною, управлінською. Це дозволяє отримати якісніший результат, створити комфортні умови праці над проєктом та зменшити кількість правок клієнта.

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

Попри таку гнучкість у нас сформувалися кілька обов’язкових етапів у процесі роботи над проєктом. Це знайомство з проблемою клієнта, research, варфрейм, дизайн і підготовка первинників.

Знайомство з клієнтом і його проблемою (завданням)

Почну з очевидного, але надважливого. Бажано, щоб у продукті, який ми робимо, відбивалась індивідуальність клієнта. Це дасть змогу зробити результат унікальнішим і більш значущим. Чи вдасться нам, залежить від найпершого етапу — знайомства.

Для цього в нас є список запитань, який пройшов перевірку проєктами й факапами. Ми дізнаємося:

• звідки клієнт?
• де він вчився?
• його хобі?
• звідки дізнався про нас та який наш проєкт зацікавив?
• чому його проєкт важливий?
• як йому комфортно взаємодіяти з нами?
• тощо.

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

Наприклад #1. Один із клієнтів після нашої презентації макетів у Figma починав їх там самостійно редагувати. Пояснював це словами: «Я хотів би, щоб це працювало так». Зокрема, це створювало складнощі для дизайнера, якому треба було шукати, що конкретно клієнт змінив, і наново наводити лад у файлі. У такому форматі було некомфортно працювати.

Ми закрили доступ до редагування файлу, і в нас з’явилися складнощі у комунікації. Завдання та формулювання були незрозумілі, почастішали спільні дзвінки, які забирали багато часу і не призводили до супернезначного прогресу. Все вирішилося, коли ми ближче познайомилися з клієнтом. Бо дізналися, що:

1. йому комфортно доносити свої думки образами, макетами та схемами, а усний пітчинг викликає дискомфорт.
2. він отримує задоволення від участі у процесі проєктування застосунку. Любить пропонувати свої ідеї та хоче, щоб їх або підхоплювали, або об’єктивно критикували.

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

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

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

• вирішуємо, який склад команди потрібен на цей проєкт (наприклад, це промо-сторінка і нам потрібен спеціаліст, який створить 3D-графіку й анімацію для продукту);
• ділимо проєкт на етапи, щоб дати клієнтові оцінку щодо його тривалості;
• шукаємо фахівця з теми на стороні (якщо сфера для нас абсолютно нова і з боку клієнта ніхто не може консультувати нас).

Читайте також: Розквіт українського вебдизайну. Як і чому українські дизайнери прижилися у вебнагородах

Research

Коли ми синхронізувалися з клієнтом, настає найцікавіша частина — творчий пошук. На цьому етапі важливо вийти за звичні рамки. Ми шукаємо натхнення у кіно, книжках, рекламі, спільних брейнштормах і пітчах іншим людям.

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

Наприклад #2. Дизайнер може звернутися до розробників, маркетологів, тестувальників тощо. У цьому процесі варто не шукати підтвердження своїм гіпотезам, а шукати слабкі боки власних напрацювань. Також важливо ставити правильні запитання. Не «Тут зрозуміло, що якщо натиснути на цю кнопку, то відбудеться перехід на сторінку оплати?», а «Як звідси перейти на сторінку оплати?».

Для мене особисто гарною перевіркою стає демонстрація напрацювань друзям, які взагалі ніяк не пов’язані з ІТ-галуззю. Так я отримую максимально незаангажований погляд збоку.

Не знаю, як у кого це працює, але ми не боїмося турбувати клієнта. Якщо під час дослідження маємо запитання про проєкт — запитуємо. Це ок, оскільки на етапі пошуку рішень дизайнер часто приходить до нових ідей.

Алгоритм дослідження такий:

1. шукаємо і генеруємо ідеї;
2. дізнаємося нове, ділимось і ставимо уточнювальні запитання;
3. вивчаємо конкурентів і їхні кейси;
4. вивчаємо користувача нашого продукту і створюємо його портрет;
5. створюємо мудборд з ідеями, що зображає настрій майбутнього продукту. У нас це не просто набір проєктів із подібною тематикою, а референси, що створюють атмосферу і настрій: картинки, фотографії, сайти, відео;
6. формуємо напрацювання у презентацію і презентуємо її клієнту;
7. отримуємо відповідь від клієнта, за потреби допрацьовуємо і переходимо до наступного етапу.

Moodboard

Варфрейми та прототип

Фактично прототип потрібен для того, щоб знайти слабкі місця в наших гіпотезах, протестувати рішення на користувачах, друзях і колегах, презентувати його клієнту. Для нас це корисний інструмент, бо він передусім структурує інформацію і виявляє проблеми в контенті. Але це також і можливість вибудувати сторітелінг та сформувати очікування клієнта.

Структурно етап має такий вигляд:

• створюємо карту сайту і продумуємо юзерфлоу;
• створюємо low fidelity (низькодеталізовані) варфрейми для обговорення логіки проєкту всередині команди й затвердження структури з клієнтом;
• після цього переходимо до розробки деталізованих прототипів;
• прототип тестуємо в рамках внутрішньої команди й команди клієнта.

Wireframe

Design

Часто на етапі варфрейму ми стикаємося з певними проблемами. Наприклад, вигадали щось, що не можна реалізувати з точки зору розробки. Або якісь функції переобтяжені чи незручні користувачу. Це наш внутрішній процес, і розв’язувати негаразди, які виникли, варто саме тут. Бо іншої слушної нагоди, щоб вчасно пофіксити й не завалити проєкт, просто не буде.

Читайте також: Як і навіщо реєструвати студію в США

Дизайн

Пояснювати тут, що таке дизайн, точно не буду, але хотілося б підкреслити певні особливості нашого процесу. Наші дизайнери працюють із мудбордом і варфреймом, щоб потрапити в очікування клієнта. Але якщо у процесі роботи над концептом з’являються нові ідеї та рішення, ми готуємо додатковий ґрунт для цих змін у вигляді презентації. А там вже докладно пояснюємо, чому вважаємо, що варто відійти від второваного шляху й подивитися в бік іншого рішення.

Ми завжди готові до зміни плану, тож нам надважливо збирати зворотний зв’язок від колег по команді. Весь час проєктна команда намагається дізнатися, чи зчитується настрій сайту, чи зручно сприймається інформація, чи зрозуміло, що треба робити на цьому сайті, та інші кляті питання. Здається, цієї передмови більш ніж достатньо, щоби вже перейти до процесу. Відбувається він так:

• створюємо перший драфтовий концепт. У ньому може бути ще не фіналізована графіка (приблизні скетчі, колаж із ледь готових елементів), але ця графіка повинна передавати суть готового продукту. Драфтовий концепт або серію таких концептів презентуємо клієнту для подальшого обговорення;
• затверджуємо драфтову версію і робимо чистову. Після цього презентуємо наші рішення для основної платформи;

Чорнова версіяЧистова версія

• після затвердження чистової версії переходимо до наступних сторінок і повторюємо ці ж етапи;
• фінально апрувляться усі сторінки на десктопі (або в мобільній версії, якщо починали з неї), і ми переходимо до респонсиву для розширень екрану, які потрібні в даному проєкті;
• готуємо первинники для розробників чи дизайнерів, які у подальшому будуть працювати з нашими матеріалами: наводимо лад у файлах, створюємо стайлгайд, презентуємо файл і наші макети.

Після цих етапів проєкт відправляється у розробку. З точки зору дизайну проєкт вже закінчений, але у рамках студії ми ще продовжуємо над ним працювати.

Підбиваючи підсумок, скажу, що процеси — це гнучка система, яка сильно залежить від завдання та клієнта. Якісь етапи скорочуються, якісь, навпаки, займають більше часу та складаються наприкінці з більшої кількості елементів. Але саме такий індивідуальний підхід відрізняє студію від корпорації та дає незвичайний, точно направлений на цільову авдиторію результат.