Дизайн-систему вебпорталу та мобільного застосунку Дія розробили в Spiilka Design Büro. Дизайнери Мінцифри працюють у цій системі вже два роки, за потреби створюючи нові фрейми і стилі. Впродовж цього часу Дія значно переросла свою первинну концепцію — державні послуги онлайн — та обросла низкою суббрендів.

Редакція Telegraf.Design поспілкувалася з керівником із розвитку електронних послуг у Мінцифрі Мстиславом Баніком, який управляє багатьма процесами в Дії, та комунікаційними дизайнерами про бренд Дія, роботу дизайн-команди та особливості діджитальної праці в держсекторі.

Мстислав Банік. Керівник із розвитку електронних послуг у Мінцифрі

Ми презентували Дію 27 вересня 2019 року. Тоді ми представили сам бренд, наші наміри стосовно того, яким буде вебпортал, і ідею про те, що в майбутньому з’явиться мобільний застосунок. З часом бренд Дії трансформувався і видозмінився. Спочатку Дія сприймалася суто як «державні послуги онлайн», і ми керувалися уявленням про те, що держава має бути зручною, непомітною людям, спілкуватися зрозумілою мовою і легко надавати послуги.

Коли ми зробили мобільний застосунок, довелось піти на наступний крок у розвитку Дії і створити суббренди: Дія.Цифрова освіта, Дія.Бізнес, Дія City. Відтак новою ідеєю Дії стала «цифрова держава». Застосунок Дія і вебпортал існують у спільній екосистемі, але це два різних продукти. Іншими словами, прості сервіси і документи ми розробляємо для застосунку, а для вебпорталу робимо ширший спектр послуг, але без документів.

Дизайн-система Дії

Перші версії Дія як порталу і мобільного застосунку зробили Spiilka Design Büro. Саме тоді створили основну частину вебпорталу, а тепер робочий процес дещо нагадує конструктор. Spiilka передбачила переважну частину блоків, і надалі ми вносили нові послуги в наявні блоки, корегуючи за потреби стиль чи контент. На цьому побудована BPMN-система розробки послуг (Business Process Model and Notation — система позначок й нотацій), вона охоплює весь наявний дизайн. Процес роботи над вебпорталом базується на переліку полів, кроків тощо. Ми віддаємо їх розробникам, вони збирають форму на основі технічного завдання.

Якщо ми маємо справу з новими блоками — ось як зараз, коли ми впроваджуємо кабінет ветерана — тоді це інша справа, бо там є новий функціонал. Там уже працює дизайнер із нашої команди. Що стосується мобільного застосунку — первинна ідея теж трансформувалася, адже з’явилися Дія.Підпис, розділ «послуги» та інше. Перша версія мобільної Дії містила тільки документи: водійське посвідчення, паспорти. Зараз над дизайном мобільного застосунку працює Андрій Турчин, дизайнер з Державного підприємства Дія.

Дизайн, і не тільки

Дизайн — не єдина площина, в якій ми взаємодіємо, коли створюємо певну послугу, будь то відкриття ФОПа чи зміна місця реєстрації. Є окрема команда, що працює власне над самою послугою. Зазвичай, державний сервіс включає в себе велику кількість полів, усілякого матеріалу. Скажімо, щоб відкрити ФОП, треба заповнити на папері 58 полів. В Дії цей процес значно простіший, бо перед початком роботи є етап реінжинірингу послуги – переосмислення бізнес-процесів і робота над змінами нормативної бази. Цим займаються відділ реінжинірингу Мінцифри та команда розробки електронних послуг Дії. Вони працюють над самим бізнес-процесом послуги, в якому міститься інформація про людину, потім ми обмінюємося цими даними з іншими державними реєстрами. Після цього ми ще раз намагаємось зрозуміти, що ще можна оптимізувати з точки зору UX, аби людині процес здавався зрозумілим і логічним.

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

На жаль, переважна більшість наявних державних форм запитують інформацію в хаотичному порядку. Зміна місця реєстрації в паперовому вигляді чомусь не передбачає, що вказування місця, з якого ти виписуєшся, має бути першим етапом. Тому ми, згідно з правилами UX, спочатку запитуємо: «Будеш виписуватися?» Хоч ми змінюємо порядок, на результат це не впливає.

Процес командної роботи

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

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

У Мінцифрі всі на одній хвилі. У нас немає розриву між людьми, які мислять бізнес-процесами і тими, хто працює над інтерфейсом. Між ними є важливий конектор в обличчі дизайн-проджекта Ірини Храпач. Вона перекладає на дизайнерську мову питання проджектів, і на проджектську — питання дизайнерів.

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

Динамічна праця

Робота над великими послугами, як-от зміна місця реєстрації, потребує щотижневих бордів. У них бере участь кістяк команди: міністр Михайло Федоров, перший заступник міністра Олексій Вискуб, я, Євгеній Горбачов — голова команди розробки. Інколи до обговорення бувають залучені й інші гості, скажімо, до нас часто заходить Олег Гороховський (співзасновник monobank), і ми в прямому сенсі дискутуємо щодо кожного кроку, елементу, екрану. Це дозволяє розглядати проблему з різних боків.

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

В моєму Paper ціла купа цих екранів, і коли я дістаю айпад і ручку, команда реагує: «Oh no». Буває, я відчуваю натхнення, відкриваю застосунок Дія і починаю скрінити, переосмислювати, переробляти.

Вже після того, як ми все зафіналили, дизайн опрацьовують BA (Business Analytics), далі йде розробка, бета-тести. Й ось у нас є готовий опис інтерфейсу, і він уже не просто презентаційний, він має пов’язану з бекендом функцію. Це пропрацьовують BA, їхні коментарі впливають на кінцевий продукт.

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

Особливості діджиталу в держсекторі

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

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

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

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

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

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

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

Важливою частиною стратегічного бачення міністра Михайла Федорова є запровадження позиції CDTO (chief digital information officer) – заступників з цифрової трансформації в кожному міністерстві та великому органі державної влади. Так, у податковій є заступник з цифрової трансформації, в Міністерстві юстиції також, у Міністерстві внутрішніх справ. У них є відповідні департаменти, завдяки чому у Мінцифри сформована велика команда, і кожен CDTO бере участь у нашій командній грі.

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

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

Ось є технологія Дія.Підпис. Це — електронний ключ, захищений, сучасний, безпечний. Так от, коли людина створює Дія.Підпис, який використовує наші мережі з face recognition, вона скаржиться: «Та скільки вже можна крутити обличчям, щоб отримати ковід-сертифікат?» На щастя, 3 млн людей вже успішно його отримали.

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

Інклюзивність

Шрифт e-Ukraine враховує потреби людей зі слабким зором. Ми не використовуємо низькоконтрастні елементи, ба більше, переважна частина застосунку передбачає використання voice over (система озвучування тексту). Поки що не весь, але ми над цим працюємо. Крім цього, ПРООН (Програма розвитку ООН) ведуть аудит доступності Дії, тож є окремий проєкт по безбар’єрності. Після нього буде додатковий етап розробки, спрямований на те, щоб забезпечити повну інклюзивність Дії, і мобільного застосунку, і вебпорталу.

Взаємодія з App Store та Google Play

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

Єдина затримка у нас сталася цього літа, коли ми запускали ковід-сертифікати. Саме тоді змінювалися внутрішні правила перевірки Google Play, додаткові ускладнення виникли й через те, що медичні дані людини є найчутливішим видом даних. З Apple ми вийшли в бета одразу, але з Google це затягнулося на місяць. Тривало доопрацювання повідомлення про обробку персональних даних відповідно до стандартів Google. Останнє review цієї послуги в Дії було пару тижнів тому, все пройшло швидко — ми надали кілька коментарів для review team і все.

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

Поточні проєкти

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

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

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

Майбутнє без бюрократії?

Наша мета — оцифрувати 100% державних послуг до 2024 року.
Під час пандемії стало ще ясніше, що ми рухаємося в правильному напрямку: цифрові сервіси, цифрові документи. Євросоюз почав активно впроваджувати e-документи під час коронакризи, а ми прийшли до цього ще 2019. Щоправда, термінова розробка продуктів, як-от ковід-сертифікати чи застосунок «Вдома» забирають час і ресурси, які ми планували спрямувати на інші цілі.

Дизайнери Дії: креативність у Мінцифрі та джерела натхнення

 Олександр Жихарєв та Микита Самойленко. Дизайнери команди Дія

Синергія команди

Насамперед, для нас важливо, щоб наша робота сподобалася користувачам. Переважно ми працюємо з комунікаційною частиною дизайну Дії, у цій команді 9 людей. Займаємося підтримкою дизайн-системи, створеної Spiilka Design Büro. До речі, Spiilka інколи нас консультує. Якщо ми говоримо про нові продукти, як-от Diia Summit, тоді разом із командою ми збираємося на брейншторми, думаємо, як щось зробити зручніше, напрацьовуємо рішення, борди, після чого йдемо до Михайла Федорова.

Дія — це продукт, який розширюється та доповнюється, тому гайди та шаблони, які первісно було створені Spiilka Design Büro та Fedoriv Agency, видозмінюються з появою нових функцій. UI-кіти та айдентика не стоять на місці, ми розвиваємо продукт стилістично. Ще більшу креативну свободу ми відчуваємо, коли робимо відео та анімацію, оскільки початкова дизайн-система не передбачала наявність моушена. 3D візуалізацією та моушеном займається Саша Жихарєв.

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

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

Лендинг саміту Дії та тизер Матриці

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

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

Diia Summit

Це вже третій саміт та четверта для нас презентація Дії загалом. Трошки хвилюємося, але не так, як у перші рази. Готуємося до події десь з 10 серпня, оновлюємо стиль, придумуємо ідеї для мерчу. Джерелами натхнення для цьогорічного саміту Дії для нас були навіть віжуали рейвів, як-от Rhythm Büro Natura. Хотілося поставити дим-машину і червоний лазер, як це зробили Blackbox, але до фіналу ці ідеї не дійшли.

Фото: Rhythm Büro

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

Telegraf.Design живе за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.