Дизайн-процес — це не чеклист

October 17, 2024
October 17, 2024
7
хв читання
Зміст:
Матеріал підготували:
Khrystyna Kuchma
Lead Designer
Khrystyna Kuchma
Lead Designer

Це не чергова стаття про дизайн-процес. Таких вже багато. У цій — мова йтиметься про специфіку роботи саме в Ексайтед.

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

Почнімо ж спочатку.

Kick-off дзвінок

Всі проєкти починаються kickoff-дзвінком. Головною метою первинної розмови є детальне з’ясування вимог і побажань. Крім цього, важливо зрозуміти структуру стейкхолдерів і ідентифікувати хто за що відповідальний.

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

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

Фаза дослідження

Визначення цілей та контексту

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

Важливо визначити, як продукт буде працювати, яку цінність він принесе користувачам, і в якому контексті він буде використовуватись.

Деск-рісерч та наслідки

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

Крім цього, ми також проводимо користувацькі дослідження (User Research), що допомагає глибше зрозуміти потреби та поведінку кінцевих користувачів. Всі результати документуються в Figma, у вигляді таблиць, презентацій або нотаток з коментарями.

FigJam дошка, де зібрані дані з вторинного дослідження
Приклад вторинного дослідження для одного з наших проєктів

Юзер флови

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

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

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

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

Вайрфрейми

Вайрфрейми ми створюємо тоді, коли є багато невідомих змінних щодо продукту. Вайрфрейми потрібні для того, щоб ітеративно визначити, як працюватимуть різні функціональні елементи додатку, і візуалізувати взаємодію користувачів із продуктом без деталізації. Low-fidelity вайрфрейми допомагають спростити процес планування і дозволяють швидко тестувати ідеї.

Однак, якщо більшість функціональних вимог та елементів продукту вже зрозумілі, або йдеться про редизайн чи підтримку старого проекту, тоді вайрфрейми можуть бути необов’язковими. У таких випадках ми можемо одразу перейти до розробки high-fidelity дизайну, щоб швидше перейти до візуальної частини і фінальної реалізації.

{{case-study}}

Мудборд + дизайн концепт візуального стилю

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

Ми починаємо з глибокого аналізу бренду: його позиціонування, цільової аудиторії та бізнес-цілей. Це дає змогу краще зрозуміти, які візуальні рішення найкраще передадуть суть продукту та будуть відгукуватися користувачам. За потреби ми проводимо Brand Workshop разом із клієнтом, щоб чіткіше визначити напрямок, у якому рухатись.

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

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

Похилий набір з багатьох мобільних дизайн-концептів
Приклад мудборду для одного з наших проєктів
FigJam дошка, де зібрані матеріали для бренд-воркшопу
Приклад воркшопу з клієнтами по брендингу
Два мобільних екрани для ілюстрації концепту додатку для зберігання рецептів
Приклад концепту для одного з наших проєктів

Дизайн продукту

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

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

Також не забуваємо про темну тему, яка вже доступна в багатьох програмах, і користувачі легко можуть перемикатися між нею і світлою. Темна тема передбачається одразу на етапі створення дизайну як частина загальної Дизайн Системи. Це дозволяє легко адаптувати інтерфейс під різні режими (світлу та темну теми), що зараз дуже зручно робити за допомогою Figma Variables.

Робоча зона в Figma з багатьма десятками з'єднаних стрілками екранами
Приклад прототипу з одного з наших проєктів
Інтерфейсні картки, частина з яких у світлій темі, а частина — у темній
Дизайн карток в двох темах з одного з наших останніх проєктів

Юзабіліті тестування

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

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

Коли використовувати немодероване тестування?

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

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

  • Виявлені проблеми з юзабіліті.
  • Відгуки та рекомендації користувачів.
  • Нотатки з тестових сесій.
  • Пропозиції щодо змін у дизайні або функціоналі на основі результатів тестування.

Підготовка до публікації

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

Останнім етапом є створення візуалів для App Store та Google Play Market, щоб ваш продукт виглядав професійно і захопливо на платформах для завантаження.

Крім цього, за необхідності ми створюємо додаткові візуальні матеріали:

  • кавери для соціальних мереж
  • дизайнемо банери
  • Навіть промо-відео, яке демонструє ваш продукт у дії.
Колекція екранів і інших дизайн-елементів, які використовуються в презентації додатку в Appstore
Приклад екранів для App Store з одного з наших останніх проєктів

Підсумок

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

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

Verida
Data Wallet Design Case Study

We helped our client raise $50 mil. and win 2 design awards. Here's how.

Preview of the case

Frequently Asked Questions

No items found.
This is some text inside of a div block.
Підписуйтесь на розсилку
Щоб ви знали: ми використовуємо файли cookie, щоб зробити наш сайт більш захоплюючим 😌
Ви можете знайти деталі на сторінці Privacy Police.
This is some text inside of a div block.