За лаштунками UX/UI процесів команди Турум-бурум

‍Ламати — не будувати.

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

На поганому фундаменті міцної будівлі не звести.

Створення дизайну сайту з нуля також не повинно бути на здогадках. Бо навіть на етапі MVP слід закладати міцний фундамент «юзабіліті» з урахуванням специфіки вашого бізнесу та цільової аудиторії. Тож і тут потрібна ефективна стратегія.

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

Процес створення UX дизайну

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

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

1. Користувацький досвід. Якісний дизайн сайту повинен враховувати реальний досвід користувачів, а отже –  бути простим у використанні, інформативним та інтерактивним.
2. Побудова довірливих стосунків з клієнтами. Сайт має заохочувати користувачів повертатися до вашого бренду і здійснювати повторні замовлення.
3. Вирішення бізнес-завдань. Крім задоволення потреб користувачів, дизайн сайту повинен сприяти досягненню бізнес-цілей власника.

Етап №1: Етап дослідження

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

• Стейкхолдерами;
• Клієнтами;
• Менеджерами (продавцями в офлайн-магазинах, відділами продажів тощо).

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

• Воронки продажу Google Analytics та поведінку користувачів;
• GTM-події;
• Теплові карти та записи сесій – додатковий інструмент, що дозволяє реально виміряти та проаналізувати поведінку користувачів і зібрати кількісні та якісні дані.

За результатами першого етапу отримуємо:

• Потреби та очікування бізнесу, клієнтів та технічні вимоги;
• Список конкурентів;
• Аналітичні звіти (кількісні та якісні дані);
• Карту поведінки користувачів;
• JTBD («робота до виконання) та сценарії користувачів (докладна взаємодія користувача з продуктом або послугою для досягнення певної мети), щоб остаточно зрозуміти, які цілі має задовольняти продукт.

В результаті у нас є багато інформації для подальшої обробки та аналізу: скріншоти, дані з Google Analytics та теплових карт, шляхи різних представників ЦА на різних пристроях тощо. 

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

‍

Етап №2: Етап UX мапування

Зібравши всі вимоги та очікування щодо продукту, переходимо до наступного кроку – розробки UX карти.

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

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

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

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

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

Етап №3: Етап прототипування

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

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

Після створення прототипів низької точності ми переходимо до створення високоточних і детальних прототипів.

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

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

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

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

Процес створення UI дизайну

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

Етап №1. Передача матеріалів та брифінг по проєкту

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

Етап №2. Інтерв'ю та інсайти

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

Ми ставимо питання, які можуть допомогти обрати оптимальну стилістику майбутнього продукту. Запитуємо про настрій, емоції, брендбук, логотип, поточний сайт (якщо такий є) та завдання, які нам потрібно вирішити на даному етапі. Якщо є сайт, запитуємо власників, що подобається і не подобається в поточному дизайні. Крім цього, просимо їх описати, яким вони бачать майбутній сайт, використовуючи метафори. Так власники можуть передати бажаний настрій продукту – повинен він бути стриманим і професійним, або ж, можливо, легким і невимушеним?

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

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

Етап №3. Мудборди

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

Етап №4. Розробка концепції та дизайн сторінок

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

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

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

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

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

Блог та особистий кабінет ми робимо не тільки інформативними, але й конверсійними: 

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

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

Етап №5. Анімація

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

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

‍

Етап №6. UI гайд

На цьому етапі створюємо детальний UI guide, що охоплює всі основні аспекти дизайну: від кольорів, шрифтів та міжрядкових інтервалів, відступів до взаємодії з інформацією на основі сценаріїв поведінки користувачів, інтерактивні/pop-up елементи, натискання кнопок, переходи та інше.

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

Етап №7. Авторський нагляд за виконанням

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

Висновок

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

‍