LozahStudio
Kyiv Schools

Kyiv Schools

An interactive portal with city maps of Kyiv.

Kyiv Maps is an interactive web portal featuring city object categories such as trees, restrooms, transport, and resilience points. We designed a modern UI, built a custom admin panel, and developed unique components for fast search and navigation.

Kyiv Maps is a web portal and interactive map that allows users to explore and find various city objects through category-based navigation. At the current stage, four map categories have already been implemented: the Tree Map, the Public Restroom Map, the Transport Map, and the Resilience Map, which featured “Points of Invincibility” where people could charge their devices, warm up, or receive assistance during winter power outages.





We were approached by GIOC (Kyiv City IT Center) to implement this project, envisioned as the foundation for all future interactive maps of the city. The platform had to include a showcase website with information about the project, FAQs, and access to categories, as well as the interactive maps themselves built on the ArcGIS system. Additionally, we developed an administrative panel for moderators to populate maps and add new objects.

The portal thus consists of two key parts:

A showcase website with project information, FAQs, and access to categories
Interactive maps with rich features and user-friendly navigation





Design and Development

The design of the project was based on the digital identity and design system of the Kyiv Services Portal, which was also created by our team, and on the Kyiv Digital brandbook. Using this as a foundation, we built a new UI library of components and styles, modernizing the visual language for the new project and adapting it specifically for the maps to ensure consistency.

We used ArcGIS library elements for route layouts and layers, but developed custom pins and interactive elements in-house. Each element was designed with responsive behavior, and pop-up windows were structured to accommodate any amount of content or information.

Special attention was given to mobile adaptation. Unlike projects where desktop and mobile versions differ only slightly, here we needed a fully tailored approach. User behavior with maps on mobile devices is significantly different from desktop, so we designed separate interaction patterns for each platform.

Every map object includes a pop-up window with details, and each object also has a dedicated page showing its full description, images, links, and contacts (if it represents a venue or organization).





Results

In less than a month, we designed and developed an MVP version of the portal with one category (today, there are already more than four). We created the showcase site with information about the project and a structured FAQ section, built an interactive map featuring different types of objects, each with a preview and a dedicated page containing detailed descriptions, images, and links.

We also developed an administrative panel for moderators and administrators, enabling them to easily manage content, create new categories, and add objects in a fast and convenient way.

Today, we continue to support and expand the project, adding new solutions, categories, and extended functionality.

Request

Choose a solution for you

We have in our arsenal the widest possible selection of solutions for any of your ideas and plans.

I read the terms of use

I give permission for the processing of personal data

Book a consultation