UXPUB 🇺🇦 Дизайн-спільнота: OTAKOYI

UX Case Study: Сервіс для обміну контактними даними та соціальними мережами з використанням NFC-чіпів.

Oleksii Yakubov — Mon, 18 Dec 2023 16:00:47 +0000

Індустрія: Соціальні мережі та комунікації
Ринок: Європа
Рік: 2023
Інструменти, які я використовував: Figma, FigJam та Useberry. Google: Sheets, Doc, Meet, Adobe Photoshop та After Effects

Моя роль

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

Загальний огляд проєкту

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

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

Таким чином користувачам буде легше встановлювати нові зв'язки та розширювати свої соціальні мережі.

Дизайнерські виклики

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

Проблеми проєкту

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

Моє рішення

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

Дизайн-процес

1.Бізнес-дослідження

Kick-off meeting
Preparatory & Secondary research (Desk research)
Stakeholder interviews
Competitive analysis
SWOT analysis
Lean canvas is-as (workshop with stakeholders)

2.Дослідження користувачів та визначення проблем

Survey
User interviews
Empathy mapping
User personas
POV & HMW questions

3.Аналіз

Ideation: Brainstorming

4.Дизайн та тестування

User flows
Prototyping
Usability testing

Крок 1: Бізнес-дослідження:

Kick-off meeting

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

Desk research (preparatory and secondary research)

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

Підпис до зображення: Результат дослідження на підставі desk-research

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

Ось деякі із гіпотез:

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

Stakeholder interviews

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

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

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

Ось деякі із запитань, що були задані стейкхолдерам:

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

Competitive analysis

Під час інтерв'ю стейкхолдери вказали на продукт Popl як головного конкурента. Крім того, я виявив, що наш продукт матиме й інших конкурентів – Tapni та Tapitag.

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

Підпис до зображення: Невелика частина дослідження конкурентів

SWOT Analysis

Для отримання глибшого розуміння внутрішнього та зовнішнього середовища продукту і для підтримки створення Lean canvas ми провели SWOT-аналіз разом зі стейкхолдерами.

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

Підпис до зображення: Артефакт отриманий після SWOT-аналізу

Lean canvas

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

Підпис до зображення: Артефакт, отриманий після воркшопу і доповнений після інтерв’ю з потенційними користувачами

Крок 2: Дослідження користувачів та визначення проблем

Survey

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

Для збору кількісних даних було створено опитувальник із закритими питаннями. Перед запуском опитувальника ми провели “пілотне” тестування на колегах. Це допомогло нам відсіяти непотрібну інформацію та забезпечити якість нашого дослідження.

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

Підпис до зображення: Декілька питань з готового опитувальника.

User interviews

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

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

Empathy mapping

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

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

Підпис до зображення: Карта емпатії отримана після інтерв’ю з юзерами

User personas

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

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

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

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

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

Підпис до зображення: Приклад однієї з користувацьких персон

POV & HMW questions

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

Загалом ми сформулювали 8 основних проблем для 3 персон та перетворили їх в запитання "Як ми можемо...?" з метою активного розгляду та пошуку рішень наступним етапом.

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

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

Крок 3: Аналіз

Ideation: Brainstorming

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

Крок 4: Дизайн та тестування

User flows

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

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

Prototyping

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

Usability testing

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

Висновки

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

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

Підпис до зображення: Прототипи дизайну

Підпис до зображення: UI-дизайн кількох екранів

Кейс: Діджиталізація інтеграційної офлайн-школи, яка навчає мігрантів німецької мови

Sofiia Paramud — Mon, 10 Apr 2023 08:07:27 +0000

Індустрія: Навчання та освіта
Ринок: Німеччина
Рік: 2021

Інструменти, які я використовувала: Figma та FigJam, Google: Sheets, Doc, Meet, Scholar та Jamboard, Adobe Photoshop.

Моя роль та обов’язки

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

Загальний огляд проєкту

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

Цілі проєкту

Розробити онлайн-платформу для учнів та вчителів, яка буде ефективно виконувати поставлені на неї завдання. Основний акцент клієнт робив на грамотній цифровій трансформації бізнесу (digital transformation).

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

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

Проблеми проєкту

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

Дизайнерські виклики

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

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

Дизайн-процес

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

Тепер давайте зануримося в процес глибше.

Підпис до зображення: Дизайн-процес, який я використала в роботі над проєктом.

Етап 1: Discovery

Kick-off meeting

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

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

Preparatory & secondary research (Desk research)

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

Підпис до зображення: Артефак, який був отриманий після проведення Desk research.

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

Ось деякі з цих гіпотез:

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

Stakeholder interviews

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

Ось деякі з питань, які я задавала:

Які проблеми користувачів вони хочуть вирішувати?
Чи проводив клієнт якісь дослідження та, чи має якусь документацію?

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

Чи знають вони свою цільову аудиторію?

Хто їхні конкуренти?

Чи є якісь технічні обмеження щодо проєкту?

Як буде вимірюватися успіх проєкту?

Competitive analysis

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

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

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

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

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

Крім того, я виявила деякий важливий функціонал, який ми додали до нашого продукту:

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

Підпис до зображення: Частина результату після конкурентного аналізу.

Етап 2: Define

Empathy mapping та User personas

Я проаналізувала надані раніше звіти про інтервʼю з користувачами, а також аудіо-записи, та використала отримані дані для створення карт емпатії для кожного респондента.

Карта емпатії дозволила мені кластеризувати значну кількість якісних даних, виявити цінні інсайти та потреби, які я використала для створення персон та формулювання користувацьких проблем + запитань «Як ми можемо …?».

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

Ось декілька інсайтів, які я отримала, створюючи карту емпатії для вчителів:

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

Підпис до зображення: Персонаж учня та карта емпатії.

Ось декілька інсайтів, які я отримала, створюючи карту емпатії для учнів:

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

SWOT analysis

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

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

Business model canvas

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

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

Problem statement (POV) + How might we (HMW) питання

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

Ось декілька POV, які я сформулювала для вчителів та учнів:

[Teacher] needs [to manage their working time] because [they have other responsibilities outside of teaching].

Рішення від команди | етап Idiate: We can resolve this by creating a scheduling feature that allows teachers to block off times when they are not available.

[Teacher] needs [to have different approaches to students] because [each student has different learning styles and needs].

Рішення від команди | етап Idiate: We can resolve this by creating a feature that allows teachers to personalize their approach to teaching for each student.

[Teacher] needs [to check students' understanding of the materials by checking their homework] because [homework is a way to assess student learning].

Рішення від команди | етап Idiate: We can resolve this by creating a homework submission and grading feature.

[Teacher] needs [to leave notes about students] because [keeping track of each student's progress is important for their growth].

Рішення від команди | етап Idiate: We can resolve this by creating a feature that allows teachers to leave notes on each student's profile.

[Student] needs [to feel free to speak and not feel judged] because [they need a comfortable learning environment to thrive].

Рішення від команди | етап Idiate: We can resolve this by creating a feature that allows students to ask questions anonymously.

[Student] needs [to find the right class easily] because [there are many classes to choose from].

Рішення від команди | етап Idiate: We can resolve this by creating a search and filter feature that allows students to easily find classes that match their interests and skill level.

[Student] needs [to have the possibility to rate a teacher] because [feedback is important for improving the quality of teaching].

Рішення від команди: We can resolve this by creating a feature that allows students to rate and leave feedback on their teachers.

Етап 3: Idiate

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

Ви можете побачити наші рішення під POV-проблеми.

Етап 4: Prototype

Prioritisation

На воркшопі ми з командою визначили функціональні пріоритети продукту.

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

Information architecture

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

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

User flows

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

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

Interactive prototyping

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

Підпис до зображення: Інтерактивні прототипи для учня та вчителя.

Етап 5: Testing

Тестування відбувалося в офісі за допомогою наступних методів: Heuristic evaluation, Guerrilla testing (hallway usability testing) та UX expert reviews.

Ось декілька проблем, які були виявлені під час тестування:

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

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

Висновки

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

Підпис до зображення: UI-дизайн кількох сторінок

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

Підпис до зображення: Простий UI kit проєкту.

Кейс: онлайн-школа японської мови, яка надає освіту з використанням професійних викладачів

Oleh Chornyi — Mon, 03 Apr 2023 11:11:17 +0000

Індустрія: Навчання
Ринок: Японія
Рік: 2022
Інструменти: Figma, Google: Sheets, Doc, Meet, Analytics та Lighthouse, WAVE Web accessibility evaluation tools, VisualEyes, Typeform.

Загальний огляд проєкту

Коротко про компанію

Cotoacademy — це офлайн та онлайн школа для вивчення японської мови в Японії. Офлайн школи знаходяться в Токіо та Кіото.

Проблеми з якими звернувся клієнт

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

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

Цілі, які ставив клієнт

Ми визначили перелік пріоритетних цілей, яких має досягти оновлений дизайн:

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

Рішення проблеми

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

Команда, ролі та зона відповідальності

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

Дизайн-процес

Аналіз веб-аналітики;
Аналіз доступності, продуктивності сайту та теплові карти;
Проведення інтерв'ю зі стейкхолдерами;
Аналіз конкурентів;
Онлайн-опитування;
Створення нової інформаційної архітектури;
Розробки інтерактивного прототипу та тестування;
Створення UI-дизайну та UI kit.

Аналіз веб-аналітики

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

Користувацькі шляхи та трафік

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

Демографічні дані

Близько 60% відвідувачів сайту є жінки, а 40% — це чоловіки. За віковою категорією, основні користувачі сайту належать до віковії групі від 18 до 55 років.

Висновки:

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

Припущення, яке повинно допомогти нам вирішити проблеми:

Необхідно додати більше закликів до дії (CTA) в блозі (окремими блоками або в самому тексті).

Згідно з останніми даними від Chartbeat, більшість людей не читають статті в блогах повністю. Насправді, 10% користувачів взагалі не прогортають сторінку вниз, а більшість користувачів зупиняються, коли прогорнули 60% сторінки.

Тому, варіант використанням закликів до дії в тексті виглядає життєздатним.

Інша причина використання заклики до дії в тесті — так звана проблема «банерної сліпоти, banner blindness». Кожен день користувачі Інтернету бачать безліч банерів з різними маркетинговими пропозиціями, які не цікавлять їх. Ця поведінка призводить до того, що користувачі перестають помічати банери.

Ще один аргумент: від 47% до 93% всіх лідів, які генерує Hubspot, приходять з посилань, розміщених всередині тексту. У порівнянні з цим, банери в кінці текстів генерують лише 6% лідів.

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

Ще один потенційно хороший крок — це додати форму підписки на розсилку новин. Це досить застарілий, але перевірений патерн.

Ви також можете додати функцію «Поділитися в соціальних мережах», щоб залучити нових користувачів на ваш сайт. Це більше про маркетинг, але ця функція може повернути користувачів, які були на сайті деякий час тому. Ось деякий список сервіси для ретаргетингу: ReTargeter, Perfect Audience, PixelMe або AdRoll.

Доступність, продуктивність сайту та теплові карти

Тестування доступності

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

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

Результати перевірки сайту на доступність через WAVE Web Accessibility Evaluation Tool.

Тестування продуктивності сайту (версія для мобільних пристроїв)

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

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

Результати автоматизованого інструменту Google Lighthouse, який вимірює якості веб-сторінок.

Тестування продуктивності сайту (версія для стаціонарних комп’ютерів)

Результати автоматизованого інструменту Google Lighthouse для стаціонарних комп’ютерів.

Теплові карти

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

Результати дослідження через інструмент VisualEyes.

Проведення інтерв'ю зі стейкхолдерами

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

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

Аналіз конкурентів

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

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

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

Результати конкурентного аналізу.

Онлайн-опитування

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

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

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

Деякі результати опитувальника, які надав нам сервіс Typeform.

Інформаційна архітектура

Щоб полегшити створення інтерактивного прототипу, було вирішено спочатку створити структурну схему сайту, щоб краще зрозуміти зміст сайту і зв'язки між сторінками.

Інтерактивний прототип та тестування

Ми створили інтерактивний прототип для тестування структури та контенту сайту.

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

Невелика частина інтерактивного прототипу.

UI-дизайн та UI kit

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

Уніфікація

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

Атомарний дизайн

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

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

UI kit з стилями та базовими компонентами.

UI дизайн з адаптивними версіями сторінками.

Кейс: редизайн онлайн-платформи для глобальних опитувань

Vitalii Semenyna — Fri, 31 Mar 2023 11:44:43 +0000

Індустрія: Досліджень громадської думки
Ринок: Велика Британія
Рік: 2021
Інструменти, які я використовував: Figma та FigJam, Google: Sheets, Doc, Meet, Scholar та Jamboard, Adobe Photoshop та After Effects, Otter.ai, PlaybookUX.

Моя роль та обов’язки

UX - 50%, UI - 50%

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

Загальний огляд проєкту

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

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

Дизайнерські виклики

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

Стратегія проєкту

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

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

Проблеми проєкту

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

Моє рішення

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

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

Загальний результат

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

Окрім вище написаного, хотів би підмітити, що UI-сторона продукту відповідала розробленому брендбуку, що для стейкхолдерів було дуже важливо.

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

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

Дизайн-процес

Крок 1: Бізнес-дослідження

Kick-off meeting;
Desk research: preparatory and secondary research;
Stakeholder interviews;
Competitor analysis.

Крок 2: Дослідження користувачів та визначення проблем

Proto-personas;
User interviews;
Empathy mapping;
User personas;
Problem statements & How might we questions.

Крок 3: Пошук ідей

Ideation: brainstorming.

Крок 4: Дизайн та тестування

Prioritization;
User flows;
Information architecture;
Interactive prototyping;
User testing.

Крок 1: Бізнес-дослідження

Kick-off meeting

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

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

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

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

Desk research (preparatory and secondary research)

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

Першим етапом було проведено підготовче дослідження, метою якого було зрозуміти та сформулювати правильні запитання, такі як: «Що…?», «Чому…?» та «Як…?» стосовно даної галузі.

Я вніс у документ дослідницькі запитання команди та додав свої власні.

Загалом, я шукав відповіді на 61-не дослідницьке запитання.

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

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

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

Підпис до зображення: Ви можете побачити перші 3-ри теми дослідження та відповіді на них. Це внутрішній артефакт.

Stakeholder interviews

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

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

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

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

Загалом, я провів 3-ри сесії інтерв’ю. Для транскрипції інтерв’ю в текст, я використовував сервіс Otter.ai. Всі питання та відповіді, а також інсайти, я переніс у документ, який згодом презентував команді.

Підпис до зображення: Інтерфейс Otter.ai.

Competitor analysis

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

Я провів власне дослідження та виявив ще 2-х прямих конкурентів: Survicate та SurveyMonkey.

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

Підпис до зображення: Це лише невелика частина аналізу 5-ти конкурентних продуктів.

Крок 2: Дослідження користувачів та визначення проблем

Proto-personas

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

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

User interviews

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

Я підготував контент для електронного листа, включивши всю необхідну інформацію, і передав його відповідальній особі з боку стейкхолдерів. Винагородою за інтерв’ю була електронна подарункова картка Amazon на $25.

Перед початком інтерв’ю, команда склала новий скрипт для кожної з прото-персон та провели пілотне тестування.

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

Після проведення 7-ми інтерв'ю, що зайняло у мене 3-ри дні, я знову скористався сервісом Otter.ai, щоб перетворити аудіо-дані в текст для подальшого аналізу.

Підпис до зображення: Одне із 7-ми інтерв'ю. Респондент показує мені, як вона користується сервісом Typeform, і пояснює мені, що їй в ньому подобається, і що вона б хотіла бачити в нашому продукті, оскільки часто користується і нашим рішенням.

Empathy mapping

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

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

User personas

Я провів фасилітацію командного воркшопу, на якому ми проаналізували зібрані раніше дані від респондентів і створили 3-ри основні користувацькі персон нашого продукту:

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

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

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

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

Підпис до зображення: Приклад 2-ї користувацької персони

Problem statements & How might we questions

Якісні дані для цього воркшопу, ми взяли з карт емпатії та користувацьких персон, а саме — потреби та інсайти. Фасилітатором воркшопу був я.

Загалом, ми сформулювали 13 основних проблем для 3-х персон та перетворили їх в запитання «Як ми можемо...?» для наступної фази.

Приклад проблеми для 2-ї персони: [Чарлі] потребує [інтуїтивного та сучасного інтерфейсу продукту], оскільки [застарілий та неінтуїтивний інтерфейс призводить до низької участі користувача в опитуваннях, що має негативний вплив на якість та подальший аналіз даних].

Приклад питання для наступної фази: Як ми можемо покращити інтерфейс продукту для Чарлі, щоб збільшити його участь в опитуваннях, і таким чином підвищити якість даних?

Крок 3: Пошук ідей

Ideation: brainstorming

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

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

Перш за все, ми визначили пріоритетність запитань за допомогою техніки крапкового голосування (dot voting).

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

Підпис до зображення: Артефакт, який ми отримали після воркшопу.

Крок 4: Дизайн та тестування

Prioritization

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

Ми використовували поради щодо пріорітизації від Слави Шестопалова, який написав чудову статтю: Feature Prioritizing: 3 Ways to Reduce Subjectivity and Bias.

User flows & information architecture

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

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

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

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

Interactive prototyping

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

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

User testing

Heuristic evaluation. Після завершення роботи над інтерактивним прототипом, я тестував його за допомогою 10-ти евристик Якоба Нільсена та 6-ти дизайн-принципах Дона Нормана.

5-second test. Цей метод я використовував для тестування сайту компанії, а саме — hero-секції (головний екран). Мене цікавило, чи не цільова аудиторія (колеги в офісі) за 5-ть секунд зрозуміє, що це за продукт та для кого він призначений.

First-click test. Я ставив конкретні завдання для не цільової аудиторії (колегам в офісі), і дивився, на що вони натиснуть в першу чергу. Чесно кажучи, було виявлено кілька серйозних проблем, які я виправив.

Guerrilla testing (hallway usability testing). Це метод ще називають партизанським тестуванням. Я використовував його для мегашвидкого отримання фідбеку від не цільової аудиторії. Тестування проводилося в офісі та тривало 5-10 хвилин на 1-ну людину.

UX expert reviews. Це тестування проводив UX Lead, який після завершення власного тестування, склав список речей, які мені потрібно було виправити.

Remote, unmoderated usability testing. Це був мій перший досвід з таким видом тестування. Я дуже хвилювався, але все пройшло досить добре. Ми вирішили спробувати новий інструмент PlaybookUX, який дозволяє провести не модероване тестування і не коштує всіх грошей світу.

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

Перші 5-ть із 34-х завдань, які виконували користувачі:

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

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

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

Підпис до зображення: Це 1-й із 17-ти тестувань, які я аналізував.

Висновки

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

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

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

Паралельно з дизайном, я створив гнучку та ефективну дизайн-систему.

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

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