UX case study: VBRANI — соціальна онлайн-платформа, яка допомагає літнім майстриням отримати додатковий дохід
Привіт! З Вами на зв’язку випускники OffGrid Design School. Впродовж трьох місяців у складі команди з 4-ох осіб ми насичено працювали над проєктом соціального підприємства VBRANI. І сьогодні ми хочемо поділитись деталями великого дизайн-процесу, а також результатом нашої роботи. Бажаємо вам поринути у магію тепла та затишку.
Команда
Над проєктом працювали:
Владислава Кременчуцька — Студент
Марія Лопачак — Студент
Ірина Дармограй — Студент
Тетяна Палій — Студент
Олена Покотило — Experience Designer
Віталіна Кочержук — Experience Designer
Про проєкт
Тепер уже можемо перейти й до нашого обранця — соціального проєкту VBRANI.
Натрапили на цю ініціативу ми на сторінках Інстаграму та з’ясували, що VBRANI — соціальне підприємство, яке займається виготовленням в’язаних речей, які створюють бабусі-майстрині, що проживають у геріатричних пансіонатах. Проєкт допомагає літнім майстриням краще інтегруватись у суспільство та отримати додатковий дохід від продажів товарів. На цей час у VBRANI залучено 20 бабусь-майстринь із 5 областей України.
На сьогодні вони ведуть свою діяльність лише в соціальних мережах, але цього недостатньо, щоб покрити всі потреби.
Перша зустріч із замовником
Перша зустріч із замовником — це дуже відповідальна активність, від якої залежить, як побудується подальша взаємодія. Тому ми ретельно вивчили інформацію про підприємство та склали список запитань, які стосувались як безпосередньо проєкту, так і організації нашої роботи.
Окрім цього, ми створили адженду для замовника, щоб у нього було розуміння, що ми обговорюватимемо на зустрічі та він зміг підготуватися до неї.
Після зустрічі ми сформували бриф, у якому зазначили проблеми, потреби та стратегію розвитку продукту:
- структуризація наявного товару та формування каталогу;
- зручна навігація та вичерпна інформація про товар;
- збільшення швидкості замовлення товарів;
- поширення інформації про проєкт;
- знайомство людей з історіями бабусь-майстринь;
- можливість здійснювати фінансову допомогу;
- залучення більшої кількості бабусь-майстринь;
- стирання кордонів між поколіннями.
З думками, що непогано було б колись і своїх бабусь записати в таку ініціативу, ми взялися за створення продукту. Також домовилися про щотижневі дзвінки, щоб активно залучати замовника в наші процеси.
Організація робочих процесів
Роботу над проєктом ми розпочали з організації наших процесів у команді, а саме:
- створення роадмапи з нашими ключовими активностями;
- kanban дошки для ефективного розподілу завдань між собою;
- щоденних коротких зідзвонів для обговорення прогресу.
Попередні дослідження. Аналіз конкурентів
Перед тим, як приступити до створення нашого продукту, ми провели низку досліджень.
Почали з аналізу конкурентів: прямих, які продають в’язану продукцію, і непрямих, які займаються благодійною діяльністю. Це потрібно для того, щоб виявити їхні сильні та слабкі сторони та використовувати ці дані під час роботи над нашим проєктом.
Ми сегментували їх за напрямами, проаналізували окремі параметри та створили матрицю з рішень конкурентів.
В результаті отримали список функцій, які були б корисними для сайту VBRANI.
Попередні дослідження. Гіпотези
Спираючись на цілі нашого замовника та аналіз конкурентів, ми склали гіпотези, ось деякі з них:
- більшість користувачів займаються благодійністю і мають високий рівень емпатії;
- більшість користувачів замовляють товари через соціальну складову;
- користувачам важливо мати можливість ознайомитись з історіями літніх пані;
- фільтр за різними параметрами пришвидшить взаємодію користувача з вебсайтом;
- більша кількість користувачів замовляють товари через телефон;
- людям важливо знати про організацію та її діяльність перед тим, як зробити донат/замовити товар.
А далі ми вирушили перевіряти їх шляхом кількісних та якісних досліджень.
Дослідження користувачів. Опитування
Ми виокремили дві групи користувачів: ті, хто мали досвід взаємодії з брендом VBRANI, та ті, хто такого досвіду не мали.
Тож, для опитування ми склали список запитань, які базувалися на наших гіпотезах, щоб підтвердити їх або спростувати.
Опитування проводилось за допомогою Google Forms та поширювалося через соцмережі організації VBRANI, а також серед знайомих.
Загалом ми отримали відповіді від 121 респондента. Дослідження показало, що:
- 90% користувачів замовляють товари через телефон;
- 83% людей мають свідому громадську позицію та займаються благодійністю;
- 53% людей стежить за брендом VBRANI через соціальну складову (допомога бабусям);
- 63% користувачів можуть так і не замовити товар через відсутність структурованого каталогу.
Дослідження користувачів. Інтерв’ю
Наша команда провела якісне дослідження, щоб дізнатись про досвід користувачів купівлі товарів онлайн, зрозуміти, що саме мотивує людей волонтерити та здійснювати благодійні пожертви. Ну і, звичайно, більш глибоко зрозуміти що найбільше цікавить людей у роботі унікальної організації VBRANI.
Загалом ми провели 7 інтерв’ю (4 інтерв’ю з тими, хто вже частково взаємодіяв із брендом VBRANI та 3 інтерв’ю з тими, хто ще не мав такого досвіду).
Цінна інформація, яку ми дізнались під час проведення інтерв’ю:
- користувачі не знали, чи бабусі-майстрині заробляють кошти з продажу товару;
- користувачі не знали, що можна підтримати бабусь без купівлі товару;
- користувачі хотіли б знати, хто з бабусь виготовив їхні товари;
- користувачам важливо детальніше дізнатись про історію кожної з бабусь та членів команди VBRANI;
- користувачам необхідно мати опис товару, ціну, вибір кольору та розміру, інформацію про матеріал та догляд, термін виробництва, щоб зробити замовлення.
Завдяки опитуванню та інтерв’ю, ми підтвердили більшість попередньо сформованих гіпотез та проаналізували їх за допомогою методу Affinity Mapping.
Ми презентували всі зібрані дані на етапі дослідження стейкхолдерам.
Усі пропрацьовані дослідження були дуже цінними для замовника та пролили світло на багато речей, про які команда VBRANI раніше навіть і не замислювалась.
Отож, продуктивний аналіз та структуризація даних допомогли нам успішно перейти до наступного етапу роботи над проєктом.
Персона
Ми з командою виділили одну персону — Діану, яка уособлює прототип користувача, для якого створюватиметься продукт.
Функції, які стосуються саме покупки товару, ми віднесли до потреб персони, тоді як всі функції, які стосуються внесення фінансової допомоги, ми вирішили зробити необов’язковими та віднесли до побажань нашої персони.
Мапа шляху користувача
Аби краще розуміти наших користувачів та прослідкувати їх шлях досягнення поставленої цілі через взаємодію з продуктом, ми провели воркшоп і створили мапу шляху користувача.
У мапі шляху користувача, ми визначили больові точки нашої персони та запропонували ідеї їхнього вирішення.
Value Proposition Canvas воркшоп
Наступним нашим кроком було проведення воркшопу разом зі стейкхолдерами. Важливо ретельно підготуватися до організації VPC воркшопу.
Value Proposition Canvas Workshop — доволі потужний інструмент, за допомогою якого нам вдалось виявити та зрозуміти проблеми й потреби нашого користувача та створити продукт/послугу, що їх вирішуватиме.
Завдяки такій активності, нам вдалось не лише виявити, але й пріоритезувати список послуг, які надаватиме організація VBRANI. Для пріоритезації ми використовували метод MoSCoW.
Активність Fit or Misfit дала нам розуміння, чи ті послуги, які пропонує підприємство VBRANI покривають усі потреби, які виникають у користувачів.
Під час воркшопу нам вдалось виокремити наступні круті ідеї:
- створити додаткову категорію «загадковий товар». Це вирішить проблему збуту нестандартизованої продукції;
- додавати до замовлення листівку з QR-кодом, де буде посилання на сторінку бабці-майстрині, яка виготовила цей товар;
- додавати подарункове пакування для замовлень на подарунок.
Інформаційна архітектура
Після воркшопу ми змогли створити інформаційну архітектуру нашого сайту: коротку версію для розробників та довгу, деталізовану версію, щоб представити нашим замовникам.
Шлях користувача
Ми виокремили два основні шляхи взаємодії користувачів із брендом VBRANI.
Перший шлях — це купівля товару на сайті, де користувач може знайти товар у каталозі, на головній сторінці або через пошук, оформити замовлення та отримати підтвердження.
Другий шлях — це здійснення фінансової допомоги бабусі-майстрині, який можна реалізувати через меню або сторінку бабусі.
Ваєрфрейми
Маючи основні користувацькі шляхи, ми приступили до створення ваєрфреймів. Ми обрали респонсивний дизайн, адже він дає змогу гнучкій сторінці відображатись однаково привабливо на дисплеї будь-якого розміру. Щоб елементи гармонійно видозмінювалися, ми визначились із брейкпоінтами, після яких відбуватиметься зміна.
Варто зауважити, що основна аудиторія — з інстаграму, а також абсолютна більшість робить покупки через телефон, тому ми обрали Mobile-first format — пріоритетом був мобільний розмір екрану, а від нього вже рухались до десктопу.
Також ми вибрали high fidelity ваєрфрейми, оскільки в цьому випадку ми працюємо з реальними розмірами елементів та текстом замість ліній і відразу бачимо, як виглядатиме фінальний макет.
В ідеалі не рекомендують використовувати lorem ipsum. Хоча трапляються випадки, коли замовник не надає контент. Це був як раз наш випадок, тому ми скористались UX writing — написанням тексту для інтерфейсу, щоб передати відповідний tone of voice бренду.
В результаті, ми спроєктували 28 основних екранів за нашими флоу, 20 додаткових, а також два респонсіви: на планшет та десктоп. У сумі ми витратили 13 днів на 144 екрани.
Перша ітерація тестування
Ми вирішили поділити наше тестування на модероване та немодероване і провести їх паралельно, щоб ефективніше використати час. Також попередньо для цього підготували інтерактивний прототип у Figma.
Перевірка мобільної версії була в пріоритеті, тож для неї ми обрали модерований формат, а саме in person. Для цієї активності ми створили скрипт із гіпотезами та завданнями, завдяки яким ми змогли їх перевірити.
Тож, ми провели 4 модерованих тестування. Всі дії користувачів поділили за такими критеріями:
- впорався з першого разу;
- впорався з труднощами;
- зовсім не впорався;
- додаткова ідея.
Потім ми пріоритезували труднощі, з якими стикалися користувачі та розробили рішення для них.
Для тестування інших розширень ми обрали кількісне немодероване тестування через платформу Maze, у якому взяло участь 8 людей. У результаті одержали автоматично сформований звіт у вигляді статистики проходження шляху користувача та теплових карт.
В результаті тестувань виявилось, що є певні проблеми із назвами кнопок та розміщенням деяких елементів, тож ми виправили це.
Стайлгайд
Фотографії від замовників запевнили нас, що вони здатні самостійно створювати атмосферу платформи, тож зробили палітру, яка не відволікатиме від товару.
Також ми розписали документацію до обраного шрифту, а саме — Raleway. Цей шрифт хороший тим, що, по-перше, він безкоштовний для комерційного використання, а по-друге, це варіативний шрифт і завдяки цьому можна легко підібрати потрібне накреслення.
Дизайн-система
Після цього ми взялися за розробку дизайн-системи. Вона дає змогу дизайнеру швидко змінювати елементи, а розробнику — чітке розуміння, як виглядають різні їх стани та можливість швидко їх зверстати.
UI
Доопрацювавши дизайн-систему, ми перейшли до наповнення наших сторінок візуальною складовою. Почали із мобільної версії та перейшли до інших розширень.
В результаті отримали зручний та інтуїтивний дизайн сайту, на якому можна швидко придбати товар. У картці товару врахували важливість відображення інформації про його ціноформування та яка майстриня його вив’язала. А відстежити замовлення можна в особистому кабінеті користувача.
Інша важлива функція сайту — це можливість внесення допомоги бабусі або організації.
Друга ітерація тестування
Після створення візуальної складової екранів ми провели ще одну ітерацію модерованого тестування. Завдяки цьому ми дізнались, що проробили чудову роботу на етапі дослідження та ваєрфреймів, адже у наших користувачів не виникало проблем при тестуванні.
На завершення
Всі матеріали ми передали замовникам та домовилися триматися на зв’язку. Дякуємо команді VBRANI за нагоду попрацювати над таким цікавим проєктом.
У підсумку кожен із нас почерпнув новий досвід. Завдяки командній ретроспективі ми могли вивільняти емоції, дізнаватись про стан кожного і ділитись своїми снами про ваєрфрейми.
Дякуємо, що догортали до кінця. Сподіваємося, що Ви вже побігли замовляти шкарпетки у VBRANI, щоб зігрітися цієї зими 🙂
