UXPUB 🇺🇦 Дизайн-спільнота: Анастасія Мусієнко

Business Group Logistics — UX/UI-редизайн для національного 3PL-оператора

Анастасія Мусієнко — Tue, 17 Mar 2026 22:57:10 +0000

UX/UI редизайн логістичної компанії Business Group Logistics був реалізований з метою покращення користувацького досвіду, навігації та візуальної подачі послуг 3PL-оператора.

Business Group Logistics — провідний 3PL-оператор України з 30-річним досвідом, що надає повний цикл послуг: від міжнародного експедирування до фулфілменту та митного оформлення.

Проєкт UX/UI редизайну, реалізований у синергії маркетологів (WHY NOT GROUP), дизайнерів (Revend Group) та розробників (FamilyLab), мав на меті створити сучасну технологічну платформу. Оновлений сайт став візуальним підтвердженням масштабу компанії, спростивши комунікацію з клієнтами та підкресливши експертність бренду в агросекторі, FMCG та e-commerce.

Ключові особливості Business Group Logistics:

Географія: національне та міжнародне покриття.
Гнучкість: адаптація під галузь клієнта.
Технологічність: інтеграція ERP, телематика, автоматизація складу.
Сильна експертиза: 30 років на ринку, стабільні партнерські відносини.

Редизайн сайту став необхідним кроком, щоб донести ці переваги до широкої аудиторії у зручній та сучасній формі.

Початкові завдання проєкту

Зробити сайт центром комунікації з клієнтами, де легко знайти потрібну послугу.
Показати всі напрями роботи (FMCG, агросектор, промисловість, e-commerce, міжнародна логістика).
Оновити візуальний стиль відповідно до позиціонування компанії як надійного та інноваційного партнера.

Хід роботи та рішення

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

На основі аудиту ми розробили UX-стратегію, орієнтовану на швидкий доступ до інформації. Головна сторінка стала стратегічним хабом, а розділи послуг отримали систему інтерактивних карток для зручного вивчення. Ми підкріпили блок «Про компанію» реальними цифрами для зростання довіри та максимально спростили шлях до зв’язку через лаконічні форми та інтерактивну карту.

Дизайн-концепція

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

UI Kit та візуальна мова

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

Функціональні рішення

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

Візуальний стиль та естетика

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

Результати проєкту

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

Висновок

Редизайн Business Group Logistics став не просто оновленням зовнішнього вигляду — це інструмент продажів та комунікації, який відображає лідерство компанії в галузі. Сучасний UX/UI допоміг компанії підкреслити свої конкурентні переваги та зробити взаємодію з клієнтами простою та ефективною.

1-800-D2C: від сотень рішень до однієї досконалої платформи

Анастасія Мусієнко — Tue, 06 Jan 2026 19:24:36 +0000

Що таке no-code і чому це не просто «про швидкість»

Revend Group українська веб-дизайн-агенція, яка допомагає бізнесам масштабуватися завдяки системному підходу до дизайну. Che IT Group — прогресивна українська IT-компанія, що спеціалізується на технічній розробці та впровадженні сучасних рішень. Разом ми об’єднали експертизу дизайну та технологій, щоб реалізувати масштабний міжнародний проєкт.

Клієнт, 1-800-D2C – провідна світова платформа для D2C-брендів. Їхня мета була амбітною: упорядкувати хаотичний ринок інструментів і агенцій, створивши каталог з преміум-контентом, який би допомагав брендам знаходити, порівнювати та підключати перевірені рішення. І все це – у максимально стислі терміни.

Як платформа змінювалася зсередини!

Уяви собі Дикий Захід світу D2C-інструментів: сотні агенцій, тисячі SaaS-продуктів і безліч обіцянок — але жодного «шерифа», який відрізняв би надійне від сумнівного. Саме з цим і стикалися власники D2C-брендів, доки 1-800-D2C не вирішили навести лад у цьому хаосі.

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

Занадто багато інструментів – і жодного чіткого орієнтира

Створення платформи, яка вирішує реальні бізнес-проблеми, вимагало розуміння унікальних викликів, з якими стикаються D2C-бренди:

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

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

Гонка швидкого виходу на ринок. У динамічному світі D2C очікувати місяцями на кастомну платформу було неможливо. Потрібно було щось, що можна швидко запустити, але при цьому розумно масштабувати. Іншими словами, вони хотіли «і рибку з’їсти, і на гачок не сісти» (а хто ж ні? 🍰).

Наш no-code підхід: розумне будівництво без зайвої складності

Ми створили витончену платформу, яка виглядає як кастомна, але працює з ефективністю no-code:

Основа на Webflow

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

Магія Memberstack

Тут почалося найцікавіше: ми інтегрували Memberstack, щоб забезпечити плавний досвід користувача та захист преміум-контенту без роздратування відвідувачів. Користувачі можуть вільно переглядати базовий каталог, але справжній «золотий фонд» — детальна аналітика та ексклюзивні відгуки — відкривається тим, хто приєднується до спільноти.

Інтеграція з Airtable

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

Стратегія обмеженого доступу

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

Як ідея перетворилася на новий стандарт у галузі

Результати доводять силу правильного вибору інструментів:

Успішний запуск

Те, що в умовах кастомної розробки могло б тривати 6–12 місяців, було реалізовано за 6 тижнів. Платформа 1-800-D2C запустилася з повним функціоналом, адаптивним дизайном і CMS, якою команда могла користуватися самостійно з першого дня.

Залучення користувачів

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

Масштабування без проблем

У міру зростання платформи нові сервіси, категорії та типи контенту додавалися простими оновленнями в CMS, а не через виснажливі спринти розробки. Команда отримала свободу реагувати на потреби ринку в реальному часі 📈.

Це ще не кінець!

Платформа продовжує розвиватися з новими захопливими покращеннями:

Розширений пошук і фільтрація
Персоналізовані рекомендації на основі поведінки користувачів
Інтеграція з додатковими BI-інструментами
Розширена аналітика для постачальників сервісів
Розробка мобільного застосунку для зручного доступу на ходу

Цей проєкт доводить:

Іноді найрозумніше технічне рішення — не найскладніше. Використавши правильні no-code інструменти та впровадивши їх продумано, ми створили платформу, що поєднує функціонал рівня enterprise з гнучкістю стартапу. Наш клієнт отримав не просто сайт — він отримав бізнес-перевагу, яка з кожним днем стає лише сильнішою ✨»

Розробка

Instagram / Youtube / Linkedin / Clutch / Memberstack / Website

Дизайн

Instagram / Linkedin / Clutch / Website

Дизайн-система як інструмент прискорення бізнесу: кейс Che IT Group

Анастасія Мусієнко — Mon, 30 Jun 2025 08:54:16 +0000

Що таке дизайн-система і чому це не просто «про дизайн»

Revend Group – українська веб-дизайн-агенція, яка допомагає бізнесу масштабуватися, створюючи структуровані дизайн-рішення. Ми розробляємо інтерфейси для веб-сайтів, мобільних застосунків, SaaS-продуктів, CRM і ERP-систем. Одне з наших ключових завдань – оптимізація роботи продуктових команд за рахунок системного підходу до дизайну і розробки.

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

Чому це важливо для бізнесу?

Дизайн-система – це не просто набір UI-компонентів. Це потужний інструмент, який:

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

Біль бізнесу: хаос без системи

До впровадження дизайн-системи Che IT Group стикалися з низкою проблем:

Неузгодженість елементів. Один і той самий блок на різних сторінках мав різний вигляд.
Повільна імплементація. Розробка нових розділів вимагала створення інтерфейсів з нуля.
Складнощі в масштабуванні. Зі зростанням бізнесу збільшувалися витрати на підтримку дизайну і верстки.

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

Наше рішення: створення дизайн-системи

Ми підійшли до завдання стратегічно. Мета – не просто зібрати компоненти, а створити інструмент для зростання бізнесу.

Етапи роботи:

Аналіз і аудит. Оцінили поточний дизайн, виділили ключові елементи.
Систематизація. Зібрали розрізнені компоненти в єдину структуру.
Розробка стилів. Прописали типографіку, кольорову палітру, анімації.
Створення гайдлайну. Підготували інструкції з використання елементів.

Що увійшло до дизайн-системи:

Типографіка — стилі для заголовків, параграфів, кнопок.
Кнопки, посилання, форми, списки, що випадають.
Іконки та ілюстрації.
Колірна палітра з кодами HEX, CMYK, RGB.
Анімації для пожвавлення інтерфейсу.
Гайдлайн з інструкціями щодо застосування.
Ми зробили систему зручною не тільки для дизайнерів, а й для розробників, щоб прискорити їхню роботу.

Результати та вигоди для клієнта

Після впровадження дизайн-системи команда Che IT Group відразу відчула різницю:

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

Відгук

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

Висновки: як дизайн-система допомагає бізнесу
Кейс Che IT Group показав, що дизайн-система – це не просто візуальне поліпшення, а інвестиція в зростання бізнесу. Вона економить час, гроші та робить команду продуктивнішою.

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

UX/UI дизайн для мережі магазинів у форматі convenience store (магазин біля дому) — Сімі

Анастасія Мусієнко — Wed, 22 Jan 2025 17:56:06 +0000

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

Сім23, тепер відома як Сімі, — це стильні та сучасні магазини у форматі «convenience store», найзручнішого й найпопулярнішого типу роздрібної торгівлі у світі. Заснована у 2012 році, мережа швидко розширювала свою присутність по всій Україні, пропонуючи широкий асортимент готових страв, свіжо завареної кави та закусок. Хот-доги, бургери та свіжа випічка стали справжньою візитівкою бренду, яка вже давно підкорила серця покупців.

Мережа продовжує активно зростати, відкриваючи нові магазини, зокрема в таких містах, як Теребовля та Рівне. Сьогодні в Україні працює близько 150 магазинів мережі у п'яти регіонах: Луцьк, Львів, Рівне, Тернопіль та Івано-Франківськ. Крім цього, Сім23 співпрацює з місцевими громадами, організовуючи благодійні заходи та акції.

Етапи дизайну

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

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

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

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

Дослідження

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

Сайтмап

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

Варфрейми

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

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

Дизайн

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

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

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

Мобільна версія

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

Дизайн система

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

Залежно від вимог проєкту, ми можемо розробити як повноцінну дизайн-систему, так і UI-kit. Вибір залежить від складності проєкту та його потреб у масштабуванні.

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

Конверсії

Завдяки редизайну сайту залученість користувачів зросла на 35.77%, а перегляд сторінок продуктів збільшився на 40.12%. Покращений та ретельно продуманий користувацький шлях зробив взаємодію з сайтом простішою та цікавішою. Про це свідчить зростання показника повторних відвідувань на 25.03%. Крім того, взаємодія з контактними даними збільшилася на 20%, що підкреслює зручність навігації та простий доступ до ключової інформації.

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

Результат співпраці

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

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

Посилання

Сайт Revend Group — ua.revend.group

Clutch — clutch.co/profile/revend-group

Linkedin — linkedin.com/company/revendgroup

Customer Journey Map, її застосування та ефективність

Анастасія Мусієнко — Thu, 26 Dec 2024 13:25:49 +0000

Владислав Данильчук, UX/UI дизайнер в компанії Revend Group, провів презентацію на тему 'Customer Journey Map, її застосування та ефективність'. У цій статті ми хочемо поділитися з вами ключовими висновками і знаннями, які ми отримали в процесі презентації.

Що таке досвід користувача і чому він критичний для успіху бренду?

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

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

Які методики в UX (User Experience) дозволять дизайнеру побудувати чудову взаємодію користувачів з продуктом?

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

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

Серед принципово найважливіших методик слід підкреслити такі як:
1. Information Architecture: Основне призначення - це організація структури продукту, забезпечуючи логічний взаємозв'язок між усіма внутрішніми сторінками.

2. User Personas: Допомагає нам глибше зрозуміти характеристики цільової аудиторії для створення продукту, що точно відповідає її потребам.

3. User Flows: Дає змогу відстежити шлях користувача через продукт, виявляючи, як він взаємодіє з ним та досягає своїх цілей.

4. Jobs-to-be-Done (JTBD): Фокусується на реальних завданнях і потребах користувачів, що спонукає до створення більш функціонального рішення.

5. Customer Journey Map (CJM): Аналізує кожен етап взаємодії з продуктом, щоб виявити сильні та слабкі місця та підвищити задоволеність користувачів.

6. Wireframing & Prototyping: Розробка базової структури та розміщення елементів для проведення тестів і збору відгуків з метою покращення дизайну.

Чому Customer Journey Map — це ключ до створення глибокого зв'язку з клієнтом?

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

А зробити це, дозволяє саме CJM, адже дякуючи йому ми можемо:

Розібратися в мотиваціях клієнта: Чому він використовує саме цей продукт? Що керує його вибором?
Аналізувати емоційні зміни: Коли клієнт задоволений, а коли відчуває розчарування?
Ідентифікувати можливості для оптимізації: Які бар'єри заважають клієнту досягти своєї цілі? Чи є можливість усунути ці проблеми?
Будувати лояльність і утримувати клієнта: Справжня лояльність не виникає через одноразову інтеракцію, а через постійний позитивний досвід на всіх етапах взаємодії.

Що таке Customer Journey Map: Глибший погляд на структуру та елементи?

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

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

CJM містить кілька ключових компонентів:

Сценарії взаємодії (Journey Stages): Це різні етапи шляху клієнта, від початкового ознайомлення з продуктом до лояльності після покупки. Вони можуть включати стадії усвідомлення потреби, пошук інформації, прийняття рішення, покупку та після обслуговування після продажу.
Дії користувача (Actions): Які конкретні кроки робить користувач на кожному етапі? Наприклад, чи він шукає відгуки, переглядає сторінки продуктів або звертається до служби підтримки?
Емоційний стан (Emotional Journey): Як змінюються почуття користувача протягом шляху? Дослідження показують, що емоційний досвід грає вирішальну роль у створенні лояльності. Позитивні емоції на всіх етапах ведуть до повторних покупок, тоді як негативні можуть викликати втрату клієнта.
Бар'єри та болючі точки (Pain Points): Що заважає клієнту досягти своїх цілей на певних етапах? Можливо, процес покупки занадто складний, а інформація на сайті — недостатньо детальна. Ідентифікуючи ці проблеми, ви маєте можливість їх вирішити до того, як вони перетворяться на причину відтоку клієнтів.
Можливості для вдосконалення (Opportunities for Optimization): Які нові рішення можна запропонувати, щоб зробити шлях користувача простішим, швидшим та приємнішим? Це може бути поліпшення користувацького інтерфейсу, спрощення форми замовлення, додаткові сервіси після покупки або персоналізовані рекомендації.

Коли створювати Customer Journey Map: На яких етапах бізнесу він приносить максимальну користь?

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

Коли це потрібно робити?

1. Запуск нового продукту або послуги: Коли ви вводите новий продукт на ринок, важливо мати чітке уявлення про те, як клієнти взаємодіятимуть із ним. Створення CJM дозволить вам передбачити очікування клієнтів, ідентифікувати можливі проблеми та уникнути фатальних помилок.

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

3. Зміни в поведінці аудиторії: Ринок і потреби клієнтів змінюються постійно. CJM дає можливість швидко адаптуватися до цих змін і підтримувати конкурентоспроможність.

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

Коли цей етап слід уникати?

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

На які метрики слід звертати увагу при побудові якісного CJM?

1. Конверсія на кожному етапі: Слід детально аналізувати кожен етап, зважаючи на відсоток користувачів, які успішно переходять з одного етапу взаємодії на наступний.

2. Час, проведений користувачами: Також, слід зосереджено зважати на середній час, який користувачі витрачають на кожному етапі шляху. Адже часто користувачі покидають етап через конкретні причини, які обовʼязково слід виявити.

3. Задоволення користувачів: Слід вимірювати шляхом опитування користувачів, спонукання залишати відгуки чи проводити анкетування для визначення рівня задоволеності від взаємодії.

4. Кількість випадків негативного досвіду: Слід враховувати число негативних взаємодій або скарг, отриманих на кожному етапі.

5. Net Promoter Score (NPS): Обовʼязково враховуй даний показник, що відображає готовність користувачів рекомендувати продукт чи сервіс іншим. Адже чим кращий продукт - тим більший шанс що його порекомендують іншим.

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

Метод створення CJM

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

Для аналізу наявного продукту:

Для початку проведи інтервʼю. Під час інтерв'ю з користувачами важливо просто запитати, як вони дізналися про ваш сервіс і як саме отримують послуги. Ти можеш використати різні варіанти для інтервʼю - від зустрічі або дзвінку 1 на 1, до опитування у Google Forms.

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

Для аналіз нового продукту:

Першою чергою чітко визнач бізнес-цілі та потреби користувачів.

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

Етапи створення CJM: Крок за кроком до ідеального досвіду користувача

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

1. Визнач User Persona

Перше і найважливіше — чітко зрозуміти, хто ваші клієнти.

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

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

2. Окресли ключові точки контакту (Touchpoints)

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

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

3. Вивчи дії користувача

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

4. Починай створення Stages & Customer Journey

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

5. Проаналізуй канали та процеси взаємодії

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

6. Проведи аналіз дій користувача

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

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

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

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

8. Проаналізуй емоції та болючі точки

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

Ти мусиш описати всі перешкоди, бар'єри, проблеми та обмеження, які можуть заважати користувачеві досягти бажаного результату, щоб згодом їх позбутись та створити дійсно user-friendly продукт.

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

9. Зроби висновки та логічно подумай

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

Приклад CJM: Типовий шлях клієнта в онлайн-магазині одягу

Давайте розглянемо реальний приклад CJM для онлайн-магазину одягу, який продає молодіжні вуличні речі:

Ознайомлення (Awareness) — Клієнт вперше бачить рекламу вашого магазину в Instagram. Його зацікавлює стиль одягу, і він переходить на сторінку магазину.
Розгляд (Consideration) — Переглядаючи сайт, клієнт дивиться фото продукції, читає відгуки, перевіряє сторінку на сайті з новими надходженнями. Він починає зважувати свої варіанти: чи варто купувати зараз, чи краще почекати розпродажу?
Прийняття рішення (Decision) — Клієнт додає кілька товарів у кошик, але зупиняється через занадто складний процес оформлення замовлення або через незрозумілу політику доставки.
Покупка (Purchase) — Після вдосконалення процесу замовлення клієнт завершує покупку. Його емоції під час цього процесу — важливий фактор лояльності.
Обслуговування після продажу (Post-purchase) — Через тиждень клієнт отримує посилку. Чи був він задоволений упаковкою? Чи звертався він до служби підтримки, і як швидко було вирішено питання?

Ключові переваги Customer Journey Map: Чому це обов'язковий інструмент для сучасних бізнесів?

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

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

Висновок: Створення продукту з думкою про клієнта через CJM

Customer Journey Map дозволяє побачити весь шлях користувача і створити продукт, який відповідає його реальним потребам. Це спосіб не лише зрозуміти, як клієнти взаємодіють із компанією, але й дізнатися, що вони думають і відчувають на кожному етапі. Завдяки CJM у нас є можливість створювати продукти та послуги, які будуть викликати у клієнтів бажання повертатися знову і знову.

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

Якщо у вас виникли подальші питання або вам потрібна консультація, не соромтеся звертатися до нас.

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

Дякуємо за увагу, і до нових зустрічей!

Сайт
Instagram
Linkedin

Pla:ngo — реалізація сучасного SaaS-рішення з фокусом на користувача.

Анастасія Мусієнко — Wed, 16 Oct 2024 20:06:14 +0000

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

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

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

Environmental, Social, and Corporate Governance, ESG — це сукупність характеристик управління компанією, за якого досягається залучення цієї компанії до вирішення екологічних, соціальних та управлінських проблем.

Виклики

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

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

Дослідження

Стартували проєкт з дослідження предметної області та аналізу конкурентів на основі зібраних даних. Це дозволило нашій команді розробити детальний сценарій користувацької взаємодії (user flow) та карту сайту.

Етапи дизайну

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

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

Реєстрація

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

Анкетування

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

Профіль організації

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

Сторінка проєкту

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

Кольори та стиль

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

Інтегрований чат для комунікації

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

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

Універсальна адаптивність

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

Статусна навігація

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

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

Відгук компанії AboveBits

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

Переглянути відгук на Clutch.co

Результат співпраці

AboveBits (USA) —Міжнародна команда. Веб-розробка, мобільна розробка
700+ реалізованих проектів. 15 років на світовому ринку. З 2006 року Above Bits є командою, до якої звертаються за веб-дизайном у Шарлотті, штат Північна Кароліна, виконавши понад 1 000 проектів зі смаком і витонченістю.

Revend Group (Україна) — веб-дизайн агенція, яка спеціалізується на підсиленні та підвищенні експертизи дизайн-команд за короткий термін (outsourcing).

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

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

Посилання

Сайт Revend Group — ua.revend.group
Clutch — clutch.co/profile/revend-group
Linkedin — linkedin.com/company/revendgroup

Мобільні додатки очима UX/UI дизайнера

Анастасія Мусієнко — Mon, 29 Jul 2024 09:00:00 +0000

Віталій Лучка, UX/UI дизайнер в компанії Revend Group, провів презентацію на тему 'Мобільні додатки для UX/UI дизайнера'. У цій статті ми хочемо поділитися з вами ключовими висновками і знаннями, які ми отримали в процесі презентації.

Зміст

Мінімалізм і плоский дизайн
Що таке нативні додатки?
Що таке гібридні додатки?
Які основні відмінності між типами дизайну інтерфейсу Android та iOS

Мобільні додатки — це програми, розроблені для використання на мобільних пристроях, таких як смартфони та планшети. Вони полегшують виконання різноманітних завдань і надають доступ до послуг та інформації на ходу.
Бувають такі як: Соціальні мережі, Ігри, Покупки, Продуктивність, Здоров’я та фітнес, Освіта, Навігація

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

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

Мінімалізм і плоский дизайн

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

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

Мікровзаємодії

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

Персоналізація та контекстний дизайн

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

Темний режим і доступність

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

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

Доповнена реальність (AR) і захоплюючий досвід

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

Що таке нативні додатки?

Нативні додатки — це застосунки, розроблені спеціально під конкретну мобільну платформу (iOS чи Android) з використанням «рідних» для цієї платформи мов програмування та інструментів розробки. Для розробки під iOS використовуються мови Swift або Objective-C та інструменти розробки від Apple, такі як Xcode. Процес розробки для iOS зазвичай потребує комп’ютера з операційною системою macOS. Використання неофіційної ОС Hackintosh є можливим, але не завжди оптимальним рішенням, і не на всі ПК її можна встановити.

Розробка додатків для Android передбачає використання мов програмування Java або Kotlin та інструментів розробки, таких як Android Studio. Процес розробки для Android, як правило, є менш вимогливим у порівнянні з iOS, хоча також має свою специфіку.

Переваги нативних додатків

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

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

Швидкість роботи
Нативні додатки працюють швидко і стабільно, оскільки вони оптимізовані під конкретну операційну систему і використовують нативні мови програмування, такі як Swift для iOS чи Java для Android. Крім того, нативні додатки можуть зберігати дані локально на пристрої, що зменшує залежність від інтернет-з’єднання та покращує загальну продуктивність.

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

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

Недоліки нативних додатків

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

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

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

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

Що таке гібридні додатки?

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

Переваги гібридних додатків

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

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

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

Швидкість розробки
Гібридні додатки вимагають менше часу для розробки, оскільки вони використовують одну кодову базу для всіх платформ. Розробники не потребують знання нативних мов програмування, а можуть використовувати загальні веб-технології, такі як HTML, CSS та JavaScript. Спеціальні фреймворки, такі як React Native, Flutter, Ionic тощо, спрощують процес розробки та адаптації, що значно прискорює вихід продукту на ринок.

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

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

Недоліки гібридних додатків

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

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

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

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

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

Дизайн та інтерфейс

Важливою відмінністю між нативними та гібридними додатками є їх дизайн та інтерфейс. Нативні додатки створюються з урахуванням стандартів дизайну та інтерфейсу конкретної платформи, таких як Material Design для Android або Human Interface Guidelines для iOS. Це дозволяє забезпечити користувачам знайомий і зручний досвід взаємодії з додатком.

Стандарти дизайну та інтерфейсу
Нативні додатки дотримуються стандартів дизайну своєї платформи. Наприклад, для Android це принципи Material Design, які включають рекомендації щодо кольорової гами, типографіки, анімацій та інших аспектів інтерфейсу. Для iOS це Human Interface Guidelines, які визначають правила створення інтуїтивно зрозумілих і привабливих інтерфейсів. Дотримання цих стандартів дозволяє додаткам виглядати гармонійно в екосистемі пристроїв і надає користувачам звичний досвід.

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

І Apple, і Google приділяють велику увагу зовнішньому вигляду додатків у своїх магазинах і надають детальну документацію щодо дизайну. Набір правил для iOS називається “Human Interface Guidelines”, а для Android необхідно дотримуватися принципів “Material Design”. Ці матеріали є відкритими, і будь-який дизайнер може отримати до них доступ у будь-який час, щоб створювати додатки, що відповідають стандартам якості цих платформ.

Дотримуватись цих вказівок важливо з трьох основних причин:

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

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

3. Зручний та знайомий досвід для користувачів: Користувачі отримують швидкий і зрозумілий досвід взаємодії з додатками, що відповідають їхнім очікуванням.

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

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

Три основні принципи дизайну програм для iOS:

1. Чіткість або мінімалізм: Використання простих і зрозумілих елементів дизайну, щоб зосередити увагу на основному контенті.

2. Deference (Повага до контенту): Контент-підхід, орієнтований на першочерговий контент, із присутністю чітких елементів.

3. Плоска глибина дизайну: Використання меншої кількості тіней, але гра з кольором, щоб створити відчуття шару між елементами.

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

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

Що таке матеріальний дизайн?

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

Дизайн інтерфейсу користувача Android базується на чотирьох основних принципах:

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

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

3. Змістовна анімація: Забезпечує плавний перехід між елементами без несподіваних і нелогічних проявів.

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

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

Основні відмінності між дизайном інтерфейсу Android та iOS

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

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

Якщо у вас виникли подальші питання або вам потрібна консультація, не соромтеся звертатися до нас.

Дякуємо за увагу, і до нових зустрічей!

Сайт

Instagram

Технології АІ для UX/UI дизайнера

Анастасія Мусієнко — Wed, 12 Jun 2024 07:00:00 +0000

Владислав Данильчук, UX/UI дизайнер в компанії Revend Group, провів презентацію на тему 'Технології АІ для UX/UI дизайнера'. У цій статті ми хочемо поділитися з вами ключовими висновками і знаннями, які ми отримали в процесі презентації.

Що таке АІ в дизайні та які проблеми він вирішує?

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

Аналіз даних
Автоматизація рутинних завдань
Швидкі інтерації та тестування
Ефективність та якість

UX/UI Design & AI

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

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

Як використовувати AI в UX дизайні:

Аналіз конкурентів
Аналіз цільової аудиторії
Створення персон користувача
Створення AI та User Flow
User Testing
Теплові карти
Prototypes
Перевірка Accessibility

Найкорисніші AI програми та плагіни для UX/UI дизайнера

Дослідження та аналіз (ChatGPT, Google Bard, Microsoft Copilot)

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

Проте головною умовою є чітко написати Prompt, тим більше даних буде для нього орієнтуватися, і тим якісніше ви отримаєте відповідь, підкреслив, Влад.

Генерація та оптимізація (QoQo.ai, FigJam AI, uizard.io, Wireframe Designer)

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

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

Перевірка та тестування (Hotjar, Crazy Egg, Attention Insight (Plugin))

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

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

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

Attention Insight - (плагін і сайт) Передбачає та візуалізує області, на які користувачі зосереджують свою увагу на сторінці або екрані. Визначає емоційні реакції користувачів на елементи дизайну.

UX та АІ

Висновок

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

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

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

Як використовувати AI в UI дизайні

Зображення та відео
Створення дизайн-концепцій
Автоматизація
Кольористика
Типографіка
Доступність

Генерація зображень

Midjourney, Adobe Firefly, DALL·E 3, Bing Image Generator, Stockimg AI
Це надзвичайно потужні інструменти штучного інтелекту, які можуть допомогти створити дійсно унікальні зображення (і не лише). Чому вони корисні:

Можуть створювати фотографії на будь-який смак та для будь-якої мети - від іконок та карток товарів до СТА банерів.

Мають можливість генерувати макети інтерфейсу для нових додатків чи сайтів.

Дозволяють створювати та тестувати дизайн-концепції у надзвичайно швидкий термін.

Кольористика та типографіка

Huemint - це плагін у Figma, який дозволяє:

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

Figma Color Wheel Typestyles (та схожі) - це плагіни у Figma, які полегшують:

Роботу з типографікою.
Гнучке налаштування стилів.
Полегшують пошук кращих пар шрифтів для відповідного проекту.

AI Emojis

Генерування смайликів за запитом
Тут навіть відважні коти-лицарі є ;)

Взаємодія з зображенням

Adobe - універсальна базова програма, за допомогою якої можна виконувати всі можливі маніпуляції з зображеннями

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

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

Adobe - Photoshop (with Firefly AI)

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

Canva

Створити, редагувати та покращити зображення відповідно до запиту
Видаляти фон та об'єкти на фото, генерувати нові локації та предмети
Створювати зображення 3D анімованих GIF

Як шукати нові AI інструменти

Product Hunt - https://www.producthunt.com/
Figma Community - https://www.figma.com/community

Чи здатен штучний інтелект (ШІ) замінити дизайнера?

Штучний інтелект не може замінити людське співчуття.

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

Штучний інтелект - це про обчислювальну ефективність, аналітичні здібності та автоматизацію процесів, але не про неповторну творчість, інтуїцію та здатність сприймати емоційні відтінки.

ШІ - справжній друг дизайнера!

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

Однак він цілком може змінити роль UX/UI дизайнерів. ШІ гарантовано має можливість автоматизувати більшість завдань, на які UX/UI дизайнери витрачають значну кількість часу. Тому, звільнивши нас від монотонності, ми матимемо час для більшої творчості та імпровізації.

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

Якщо у вас виникли подальші питання або вам потрібна консультація, не соромтеся звертатися до нас.

Дякуємо за увагу, і до нових зустрічей!

Сайт

Instagram

Методи та сервіси тестування дизайн гіпотез

Анастасія Мусієнко — Wed, 15 May 2024 06:00:00 +0000

Діана Калінушкіна, UX/UI дизайнерка в компанії Revend Group, на нещодавній презентації розповіла про методи та сервіси тестування дизайн гіпотез. У цій статті ми хочемо поділитися з вами ключовими висновками і знаннями, які ми отримали в процесі презентації.

Що таке тестування

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

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

Значення юзабіліті-тестування

Підвищення зручності та ефективності використання продукту
Зниження кількості відмов та підвищення конверсії
Підвищення задоволеності користувачів

Етапи тестування

Мета дослідження (що ти хочеш дізнатися і навіщо)
Створення сценаріїв
Формування гіпотез
Визначення виду тестування

Давайте детальніше розглянемо різновиди тестування і зрозуміємо їх сутність

Методи тестування:
Загалом існує близько 20 методів UX-досліджень, які поділяються на кілька категорій. Так, за предметом дослідження розрізняють :

Якісні
Кількісні

За форматом участі:

Модеровані
Немодеровані

Польові дослідження

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

Цей метод як і наступні мають як свої плюси так и мінуси, тож давайте їх розглянемо

Плюси: отримання інформації “з перших вуст”; виявлення проблем, про які неможливо дізнатися за проведенням досліджень у лабораторних умовах.

Мінуси: вартість проведення дослідження може бути високою, а також існує ризик отримати суб’єктивну думку.

Фокус-групи

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

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

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

A/B тестування

A/B-тестування є поширеним і дієвим методом дослідження поведінки користувачів. Суть дослідження полягає в тому, що ви пропонуєте учасникам кілька версій вашого продукту. Відмінності можуть полягати у загальному макеті, дизайнерських рішеннях, ієрархічній структурі тощо.

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

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

Сервіси: Freshmarketer, VWO, Optimizely

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

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

Аналіз за допомогою теплових карт

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

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

Мінуси: Якщо ви ніколи не використовувати метод теплових карт, то на початках він може здатися складним для інтерпретації та впровадження.

Сервіси: Hotjar, ClickTale, Crazy Egg, Microsoft Clarity

Також Діана зробила корисну підбірку найбільш популярних платформ для тестування:

Maze
User Testing
SurveyMonkey
Attention Insight
Uxtweak
Google Forms

Платформа Maze

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

1. Прототипування та тестування:

Пряме тестування прототипів: Maze дозволяє імпортувати прототипи з популярних інструментів для дизайну, таких як Figma, Sketch, Adobe XD та InVision, і проводити тестування з реальними користувачами.
Інтерактивні прототипи: Можливість створення інтерактивних прототипів, які імітують реальний досвід використання продукту.

2. Різноманітність тестів:

Якісні та кількісні дослідження: Maze підтримує різні типи тестів, включаючи A/B-тестування, 5-секундні тести, теплові карти тощо.
Сортування карток та опитування: Вбудовані інструменти для проведення сортування карток та опитувань, які допомагають зрозуміти, як користувачі групують інформацію та сприймають інтерфейси.

3. Аналітика та звіти:

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

4. Зручність використання:

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

5. Спільна робота:

Командна робота: Maze підтримує командну роботу, дозволяючи кільком користувачам спільно працювати над проєктами та тестами.
Спільне редагування та коментарі: Можливість спільного редагування тестів та додавання коментарів для покращення взаємодії всередині команди.

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

Платформа Uxtweak

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

User Testing

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

Сервіс Attention Insight

Аналітика дизайну на основі AI  

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

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

Підсумок

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

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

Якщо у вас виникли подальші питання або вам потрібна консультація, не соромтеся звертатися до нас.

Дякуємо за увагу, і до нових зустрічей!

Сайт

Instagram

Дизайн-токени в роботі UX/UI дизайнера

Анастасія Мусієнко — Thu, 18 Apr 2024 08:37:23 +0000

Альона Куліш, UX/UI дизайнерка в компанії Revend Group, на нещодавній презентації розповіла про використання змінних і дизайн-токенів у Figma. У цій статті ми хочемо поділитися з вами ключовими висновками і знаннями, які ми отримали в процесі презентації.

Що таке дизайн-токен простими словами

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

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

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

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

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

Як правильно називати дизайн-токени?

Токен має містити п'ять значень:

Категорія (category) — це може бути колір (color) або шрифт (font).
Тип (type) — текст (text), фон (bg), границя (border).
Елемент (item) — до якого елементу належить цей токен (Input, button, table).
Піделемент (subitem) — тип елементу (Primary / Secondary).
Стан (state) — Hover / Default.

Структура залежить від кожного конкретного елемента і може змінюватися

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

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

Коли і кому використовувати дизайн-токени?

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

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

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

А що на практиці?

А практиці дизайн-токени відкривають безліч можливостей:

Швидко створювати світлі та темні режими або різні теми.
Змінні можна використовувати і в прототипах. Для цього в Figma додали підтримку умов if else (якщо, то), а також додавання, віднімання, ділення і множення. Ця функція може значно скоротити кількість окремих станів для прототипів, які вам потрібно відтворювати. Тепер ви можете створювати стилі не лише для кольорів, а й для заокруглення кутів модулів, значень їх висоти та ширини, відступів всередині Auto layout, тексту всередині кнопок.
Використовуйте змінні як токени для управління дизайн-системами.
Визначайте властивості елементів для різних контрольних точок.
Створюйте макети на кількох мовах.

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

Використання типів змінних для кольорів

На презентації команда UX/UI ділиться своїм досвідом та експериментує з створенням першої змінної для кольору фону кнопки. Колірні змінні можуть ефективно використовуватися для налаштування заливки або контуру об'єкта у дизайні.

Тож давайте створимо нашу першу змінну кольору фону цієї кнопки

Відкрийте панель змінних, натисніть «Створити змінну» і оберіть «Колір».
Змініть назву своєї змінної на «фіолетовий» і значення на #C7B9FF.
Створіть ще одну змінну для текстового напису та обведення кнопки.

Як застосовувати змінні до об'єктів

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

Так що ж краще використовувати: змінні чи стилі?

Хоча і змінні, і стилі можуть використовуватися для визначення таких елементів, як колір, вони відрізняються тим, що змінна є одним значенням, а стиль може складатися з кількох значень.

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

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

Якщо у вас виникли подальші питання або вам потрібна консультація, не соромтеся звертатися до нас.

Дякуємо за увагу, і до нових зустрічей!

Сайт

Instagram

Виклик для Revend Group: як через партнерство посилити дизайн-команду. Кейс з IceBreaker

Анастасія Мусієнко — Thu, 14 Mar 2024 13:18:59 +0000

Чи можливо за короткий термін співпраці підсилити команду, впорядкувати процеси та прискорити time to market продуктів замовника? На сьогодні команда Revend Group успішно виконує більше половини дизайн-проєктів компанії IceBreaker. Як ми це зробили, розповідаємо у кейсі.

Деталі партнерства та обсяг проєкту

Клієнт: IceBreaker (Естонія) – агентство веб-дизайну, що спеціалізується на WordPress розробці, з більш ніж 20-річним досвідом. Лише за 2023 рік компанія має нагороди TOP WEBDESIGN AGENCY та TOP WORDPRESS DEVELOPERS за версією Clutch.

Виконавець: Revend Group (Україна) — веб-дизайн агенція, яка спеціалізується на підсиленні та підвищенні експертизи дизайн-команд за короткий термін (outstaffing). Діяльність компанії включає розробку веб-сайтів, мобільних додатків та інших продуктів, таких як SaaS, панелі управління, CRM, eCommerce, та NFT.

В чому виклик?

Як компанія, що більше спеціалізується на WordPress розробці, IceBreaker доволі часто стикається з проєктами, що вимагають більш високого рівня складності в UI/UX дизайні. Клієнт прагнув збільшити швидкість виконання проєктів і покращити якість роботи дизайнерської команди, що вимагало залучення додаткових ресурсів через аутсорсінг.

Крім того клієнт мав запит щодо створення UX/UI дизайну для сервісу з доставки продуктів та їжі від магазинів-партнерів (ОАЕ). Для ефективного виконання проєкту була необхідна підтримка досвідчених ІТ-фахівців для підсилення дизайн-команди та прискорення time to market продукту (початковий дедлайн на виконання проєкту з естімейтом в 300+ годин був близько місяця).

Клієнт найняв команду дизайнерів Revend Group для вирішення наступних завдань:

розробка веб-сайту для сервісу з доставки продуктів та їжі від магазинів-партнерів (ОАЕ);
підсилення дизайн-команди;
прискорення time to market продукту.

Наші стратегії та підходи

1. Збір вимог
Перед стартом робіт ми провели серію онлайн зустрічей, щоб уточнити деталі проєкту, вимоги до команди та різні організаційні моменти. Це були як мітапи з представником замовника так і з менеджерами проєкту. Такий підхід дозволив створити стратегічне бачення та розуміння цілей, яких команда Revend Group мала досягти. Маючи досвід роботи зі схожими проєктами на українському ринку, ми мали враховувати особливості ecommerce проєктів на ринку ОАЕ (особливості формування замовлень та доставки).

2. Формування дизайн-команди та швидкий старт
На основі попередньо зібраних вимог ми сформували дизайн-комнду. Завдяки спеціалізованій команді Revend Group компанії замовнику не довелось витрачати тижні чи місяці на наймання потрібних спеціалістів, оскільки ми взяли ці обов'язки на себе. Крім того, майбутня команда вже знала, як швидко включитися в робочий процес і адаптуватися, вимагаючи небагато часу для координації як команди.

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

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

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

Цей етап роботи над проєктом включав наступні впровадження:

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

Інтеграція файлів — була налаштована тісна інтеграція між різними дизайн-файлами для забезпечення безшовної співпраці в команді.

Створення sitemap та users story — попередній аналіз сегменту та дослідження конкурентів дали змогу створити докладну карту сайту, яку було представлено клієнту.

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

Дизайн та затвердження головної сторінки — з метою оптимізації часу, відразу після затвердження перших wireframes, ми розпочали розробку дизайну головної сторінки, яка відігравала ключову роль у проєкті. Команда Revend Group представила до 4х різних варіантів, з яких було обрано та презентовано клієнту 2 остаточних. Проте, під час затвердження клієнт обрав міксовану версію обох варіантів.
Деталізація та узгодження дизайну решти сторінок відповідно до визначених кроків (milestones).

Відгук компанії IceBreaker

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

Переглянути відгук на Clutch.co

Результати партнерства

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

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

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

Посилання

Сайт Revend Group — ua.revend.group
Clutch — clutch.co/profile/revend-group
Linkedin — linkedin.com/company/revendgroup