Як команда волонтерів створила портал для Збройних сил України

В цьому кейсі піде мова про створення порталу www.zsu.gov.ua.

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

Навесні 2020 року волонтери фонду «Повернись живим» познайомили мене з командуванням Збройних Сил України. У останніх на той час виникла гостра потреба створити окремий онлайн-ресурс для армійців, адже збройні сили перебували у процесі реформування. На додачу, у лавах ЗСУ служить вдесятеро більше людей, ніж співробітників Міністерства Оборони. Також життям армії цікавляться родичі військових, волонтери і пересічні громадяни, а це величезна аудиторія.

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

Перша зустріч з армійцями та бриф

На першій зустрічі командири ЗСУ завдання сформували по-армійськи суворо та чітко: ось вимоги та структура, робіть. Проте такий підхід до розробки продуктів, як на мене, неефективний, тому я попросив деякий час на вивчення світових прикладів.

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

Команда, етапи та таймлайн

Після першої зустрічі з командуванням ЗСУ та умовного брифу, під проєкт вдалося зібрати команду з 14 людей.

Етапами нашої роботи були:

  1. Створення Сustomer Journey Map (карта користувачів).
  2. Сегментування та створення гіпотез.
  3. Первинні інтерв’ю.
  4. Аналіз та структурування даних.
  5. Створення прототипу.
  6. Подальше тестування прототипу.
  7. Робота з UI-елементами.

Ми впоралися за 10 місяців, і це був тільки дизайн.

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

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

З кожної категорії для інтерв’ю ми запросили від п’яти до семи людей.

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

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

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

Наведу кілька прикладів відповідей:

«Щоб був нормально написаний і щоб було зрозуміло. Розділ „вакансії“, бо зараз їх неможливо знайти, треба йти до військкомату. Форма зворотнього зв’язку, щоб зв’язувалися з користувачем».

«Де він і що відбувається у тій точці в цей момент».

«Немає можливості зв’язатися, потрібні контакти співслужбовців».

Після ґрунтовного аналізу інтерв’ю основних груп користувачів, ми змогли виділити основні співпадання запитів, що лягли в основу структури сайту:

Проєктування порталу

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

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

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

Дизайн порталу Збройних сил України

Основою кольорового рішення став оновлений дизайн форми та символів українського війська:

Якщо перекласти це на мову інтерфейсу:

Частину інтерфейсів ми побудували на дизайн-системі, затвердженій як стандарт для урядових сайтів США — USWDS, спираючись на яку спроектовано більшість американських урядових сайтів, зокрема: www.va.gov або https://www1.grc.nasa.gov.

Завдяки продуманій системі компонентів та принципів, вона спрощує процес створення дружніх до мобільних пристроїв вебсайтів. Чому ми не спирались на той стиль, що є у сучасних державних сайтів України? Бо в Україні немає затвердженої системи, яка має таку кількість можливостей.

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

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

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

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

Технічна частина

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

Замість післямови

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

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

Над проектом працювали:

Керівник проекту: Олег Нобр, CEO у nobr.agency

Проджект-менеджер: Вікторія Рясна, Product Marketing Manager у Advery

Продакт-дизайнери: Олена Найда, Product designer у Youscan.io, Тетяна Зав’ялова, Holistic Designer у Adorum Inc.

Дослідники: Анатолій Шевченко, Design Lead у Ciklum, Володимир Висоцький, ex-product designer у банку Південний, Діана Гуляєва, UX/UI-дизайнер у kairos technology

UI/UX-дизайнери: Ігор Колода, UX/UI-дизайнер у банку Південний, Олександра Плужник, UX/UI-дизайнер у Orbus Software, Альона Мелешко, UX/UI-дизайнер у Windmill Digital

Графічний дизайнер: Роман Дорошенко, Head of Brand Design у Footwear Studios

SEO-консультант: Юрій Сисак, Product Marketing Manager у Fin.do

Фронтенд-розробка: Coderiver та керівник Юра Артюх.

Разом до перемоги!

Сподобалась стаття? Натискай «Подобається» внизу. Це допоможе автору виграти подарунок у програмі #ПишуНаDOU

👍ПодобаєтьсяСподобалось16
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Згідно із законодавством, у шапці порталу має бути розміщено герб та прапор України.

зараз дуже на часі такі речі, ага)))

Круто! Я правильно розумію, що ви створили цей портал безкоштовно для держави?

good job!
p.s. почему все перестали давать канал RSS ? ведь это гораздо удобнее чем телеграм с мелькающими прямоугольниками или соцсети.
ага, нашел — RSS вверху справа, а я искал внизу слева )

Дуже цікавий проєкт був, складний та наповнений. Співпраця з дуже різними дизайнерами, інтервью з Повернись живим, ветеранами та ЗСУ. Олег, дякую що покликав та об’єднав нас ❤️

схожу не працює

может я ошибаюсь, но похоже, что работает только домен с www — www.zsu.gov.ua
без www — cloudflare показывает ошибку.

zsu.gov.ua та додав до статті

це вже не до нас питання, але передам)

Чого вирішили не використовувати дизайн систему, або хоча б шрифт, Дії ( diia.fedoriv.com )? Шрифт дуже файний насправді

тому що там є сенс відрізняти цивільні та військові проєкти)

Підписатись на коментарі