GIOC is a Ukrainian state institution that creates and supports IT systems for various government bodies and projects. The largest and most recognizable project by GIOC is the Kyiv Digital application, which almost every resident of Kyiv uses.
GIOC approached us to breathe new life into their website since the old design was outdated and had many inconvenient solutions. The main task we faced was to reach a broader audience and increase the number of visitors to the site (and also increase the time they spend on it). The target audience was people who could use online services through the website, such as payment for meals, kindergarten registration, ordering electronic student tickets, purchasing or recharging public transportation tickets, parking payments, and more.
The project had strict deadlines for portal modernization. We at Loza Studio had to develop an intuitive UX, a beautiful and modern UI, and create a new website on Nuxt.js, which had to withstand a large number of visitors. And, indeed, we succeeded! Below, we provide more details about the project.
Solution
To begin with, a series of discussions and consultations with the client were conducted. We identified all the pains, wishes, and goals of the new site. Additionally, we determined the need to create a new identity that would form the basis of the new site's style.
We divided the project into stages, namely:
-
Briefing
-
Technical Task and Requirements Formation
-
Wireframes and Prototyping
-
Development of New Identity (Fonts, Colors, Patterns)
-
Design System Development for Future GIOC Web Products
-
High-Fidelity Design
-
Frontend and Backend Development
-
Development of the Website's Administrative Panel
Identity
We based the color scheme on Kyiv Digital, changed the primary fonts, and worked on ensuring that the perception of GIOC was built on three main associations: Technological, Modernity, and Human-centric.
Website
During the design phase of the Main page, we were inspired by the old site, where it is a continuous navigation consisting of large button-links. We took this idea as the basis for the first “Welcome” page of the site (since the “About Us” page is essentially the main page).
Design System
We developed a scalable design system in Figma, which was linked to the front-end part of the project. As a result, the website development was highly convenient, and changes and edits could be quickly made to the project, even during development.
Development
The website was developed on Nuxt.js, which ensured unlawfully fast page loading speeds without clogging the cache. Switching happens almost instantly.
Why Nuxt.js and not Vue.js? Because Nuxt.js has the Server-Side Rendering (SSR) feature, which Vue.js lacks (this framework is more relevant for admin panels).
The main feature of SSR is that the entire page is rendered on the server upon the first request, and then React is initialized in the browser. The application continues to work as a regular SPA, making AJAX requests to the server as needed. The data loaded is always up-to-date because a server request occurs whenever the page is reloaded. From an SEO perspective, everything is perfect: a complete page is returned. Users are also satisfied — they work with a typical SPA, seeing no difference.
Result
The new website exceeded expectations by giving GIOC a modern look, thanks to the new identity, contemporary design, convenient mobile adaptation, high-quality development, and the new powerful framework. Since its launch, the site has shown a significant increase in page views, unique visits, and sessions.
