UX Case Study: Платформа онлайн голосування для закладів освіти України

Ми, CORAL Team — випускники OffGrid Design School. Протягом трьох місяців наша команда працювала над проєктом, який покликаний забезпечити освітні заклади можливістю легко, швидко, доступно та прозоро провести будь-яке необхідне голосування. Зараз ми хотіли б поділитись з вами процесом та результатом нашої роботи.

Про обрання проєкту

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

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

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

Наша команда

Олександра Улянчук — Experience Designer
Дмитро Русан — Experience Designer

Каріна-Вікторія Ярошенко— Cтудентка OffGrid Design School
Анна Іванус — Cтудентка OffGrid Design School
Віолета Задорожнюк— Cтудентка OffGrid Design School

План роботи (Roadmap)

Почалась наша робота зі створення Roadmap, яка відображала етапи проєктування (Prepare/Discovery/Define/Delivery/Present), активності та дедлайни.

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

Roadmap

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

Знайомства з командою стейкхолдерів (Kick-off)

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

Наша онлайн-зустріч зі стейкхолдерами(Kick-off)

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

• У чому полягає основна мета?
• Чи є в команді стейкхолдера попередньо задокументовані напрацювання?
• Хто основний користувач сервісу?
• Чи відомо стейкхолдерам про їх прямих/непрямих конкурентів?
• Чи існують якісь технологічні обмеження?
• Чи є перешкоди?
• Та ін.

Аналіз конкурентів (Сompetitor analysis)

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

Ми дізнались, що:

• в Україні немає прямих конкурентів;
• даний продукт буде доступнішим, ніж аналогові;
• нам потрібен адаптивний продукт.

Опитування (Survey)

Для виявлення потреб та проблем користувачів використали кількісне (опитування серед учнів та студентів) та якісне дослідження (інтерв’ю).

Командою обговорили наших персон — це виборець, кандидат та модератор. Також створили гіпотези:

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

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

Ми також запропонували учасникам взяти участь у інтерв’ю.

Форма опитування для Виборця/Кандидата/Організатора

Посиланням на опитування поділились в соціальних мережах, а саме в інстаграмі та фейсбуці.

В нашому опитуванні взяли участь 50 людей віком від 10 до 47 років, більшість віком 14–16 років.

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

Результати опитування

Складнощі, з якими стикалися респонденти, і які має вирішити ця платформа:

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

Інтерв’ю (Interview)

Наступним кроком було якісне дослідження (інтерв’ю з користувачами). Ми провели 15 глибинних інтерв’ю з респондентами, тривалість кожного з них складала від 30 до 60 хв.

Для інтерв’ю ми виокремили питання для кожного учасника за групами (виборець, кандидат, організатор/модератор). Програми Zoom та Google Meet (https://meet.google.com/) допомогли нам провести інтерв’ю.

Проводити інтерв’ю — це весело.

Після інтерв’ю ми зробили аналіз даних та висновки відобразили у вигляді Empathy map для виборця, кандидата, організатора.

Ми підтвердили гіпотези, поговоривши з респондентами на такі теми:

• втручання вчителів;
• фальсифікація (підробка бюлетенів);
• багато часу на підготовку виборів;
• відсутність спеціального місця для агітації.

Питання та відповіді інтерв’ю та створені карти емпатії.

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

P.S. Хочемо подякувати усім респондентам за їхні відгуки.

Наступний крок — поділились своїми результатами з стейкхолдерами, та продемонстрували результати по опитуванні та інтерв’ю.

Фокусування (Define)

Мозковий штурм (Brainstorming)

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

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

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

Вrainstorming у вигляді стікерів на кожному з капелюхів

Семінар-тренінг (Workshop)

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

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

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

CJM для кандидата

Пріоритизація (Prioritization)

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

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

Пріоритизація ідей методом MoSCoW. Додаткові питання стейкхолдерам.

Маршрут користувача (User Flow)

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

1. Кандидат та виборець:

• створює голосування;
• подає свою кандидатуру на вибори;
• голосує;
• бачить результати та статистику голосувань/виборів/опитувань.

2. Організатор/модератор:

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

3. Адміністратор:

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

Ми побудували схему в FigJam.

Інформаційна архітектура (Information architecture)

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

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

Високоточні прототипи (High-fidelity Wireframes)

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

Тестування (Testing)

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

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

Eтап реалізаціі (Deliver)

Дошка натхнення (Moodboard)

Провівши тестування вайрфреймів ми вдосконалили їх, за рахунок внесення деяких правок. Далі почали займатись візуальною частиною та створення основного фірмового стилю. Першочергово ми орієнтувались на застосунок «Дія» з його дизайн-рішеннями. Варто зауважити, що однією з головних вимог замовника було використання фірмового шрифту «Дії» — «e-Ukraine». Отже, ми представили стейкхолдерам дві теми мудбордів — світлу та темну.

Макети (Mockups)

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

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

Керівництво по стилю (Style Guide)

Обравши стиль застосували бібліотеку та створили компоненти. Також від команди розробників стейкхолдера було прохання застосувати стиль на основі Material Design поєднуючи зі стилем додатку “Дія”.

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

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

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

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

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

Тестування інтерфейсу (Testing UI)

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

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

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

P.S. Хочемо подякувати всім респондентам, хто приймав участь в такі непрості часи.

Підсумок

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