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

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

Проєкт мав жорсткі дедлайни по модернізації порталу. Ми в Loza Studio мали розробити інтуїтивний UX, гарний та сучасний UI і розробити новий вебсайт, який має бути витривалим до великої кількості відвідувачів. І, власне, у нас вийшло! Нижче розповідаємо про проєкт детальніше.

Рішення

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

Розбили проєкт на етапи, а саме:

- Бриф
- Формування Технічного завдання та вимог
- Створення wireframes та прототипування
- Розробка нової айдентики (Шрифти, кольори, паттерни)
- Розробка дизайн-системи для майбутніх веб-продуктів ГІОЦу
- High Fidelity дизайн
- Frontend та Backend Розробка
- Розробка адміністративної панелі сайту

Айдентика

За основу взяли кольорову гаму Києва Цифрового, змінили основні шрифти та попрацювали над тим, щоб сприйняття ГІОЦу будувалося на трьох основних асоціаціях: Технологічніть, Сучасніть та Людино-орієнтованість.
Вебсайт

На етапі дизайну Головної сторінки ми надихалися старим сайтом, на якому вона є сплошною навігацією, яка складається з великих кнопок-посилань. Ми взяли цю ідею, як основу для першої “Велком” сторінки сайту (Бо по суті, головною сторінкою є сторінка “Про нас”)

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

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

Розробка

Для розробки було обрано Nuxt.js, що забезпечило незаконну швидку якість завантаження сторінок без забиття кешу. Перемикання відбувається майже миттєво.
Чому Nuxt.js, а не Vue.js? Тому-що він має функцію Server-Side Rendering, чого не має Vue.js (цей фреймворк більше актуальний для адмін-панелей.)

Головна особливість SSR в тому, що вся сторінка рендериться на сервері при першому запиті, а потім вже в браузері ініціалізується React, і далі додаток працює як звичайний SPA, виконуючи, за потреби, AJAX-запити на сервер. Дані, що завантажуються, є завжди актуальними, адже при кожному перезавантаженні сторінки відбувається запит на сервер. З точки зору SEO все також ідеально: повертається повноцінна сторінка. Користувачі також задоволені — працюють зі звичайним SPA, різниці вони не бачать.

Результат

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