how we developed a navigator for the Hermitage

The Hermitage is a real portal to the world of art, in which an unprepared lover of beauty can get lost and exhausted trying to find a specific exhibit, or perhaps just a way out into the street. This is not a joke; the Hermitage has more than 360 halls, housing about 3 million exhibits. You can wander and enrich yourself culturally indefinitely. Therefore, a modern application for orientation in the space of the Hermitage was simply a must-have of the 21st century.

An application called “Audio Guide,” of course, existed, but it looked more like an exhibit in an antique museum hall. It was already difficult to support with gadgets, there was no version for Android, it had a weak UX design – in general, all the pain that accompanies applications developed in the 2000s.

At the entrance, we only had the same old application and the customer’s wishes. There was no clear technical specification on hand. Therefore, to begin with, we jointly formulated the tasks, in particular, we determined what functions the application (for the user) and the admin panel (for the customer) should perform. It became obvious that it was easier and cheaper to do everything again rather than rewrite the previous version.

Project Features

We started work cheerfully, but after a while sanctions struck, which affected the IT sector as well.

Some options that we planned at the beginning of cooperation turned out to be impossible, and we had to quickly look for new ways to solve problems. The main challenge for us was navigating the museum complex, since there were no ready-made good solutions on the market. The second, much simpler challenge is the implementation of a payment system. We dealt with the remaining tasks in working mode.

As a result, we put together an application that is completely independent of the global market, which works exclusively on domestic services, and is not afraid of any sanctions.

Navigation

The main feature of the Audio Guide application is an interactive map of two wings of the Hermitage: the Winter Palace and the General Staff Building. Initially, we planned to use foreign libraries for working with maps, but this option became unavailable.

The only source materials on hand were a paper map. We decided to mark up all the halls as separate entities via SVG and draw all possible transitions between them in the form of a graph.

The mobile application runs Javascript code, which highlights the required transitions on the SVG file. And the shortest path itself is searched using Dijkstra’s algorithm.

This solution also makes it possible to “turn on” and “turn off” rooms on the map when necessary, for example, preparing for a new exhibition. Routes are redrawn accordingly.

The application is updated in the background. This is necessary, in particular, in the case when a certain hall or exhibit becomes unavailable to visitors for any reason. The API is synchronized at a specified interval. A request is sent to the server and the checksum is checked. If there is any discrepancy, an updated data package is downloaded. This does not cause any problems for the user; he does not notice this process at all.

Editing (admin panel)

An easy-to-use admin panel was one of the customer’s main requirements. Because previously, in order to add a new exhibit, it was necessary to set coordinates: floor, room, how many meters from the corner of the room, and so on. This was very inconvenient and time-consuming.

We implemented this task again through a map. Now you just need to click the mouse in the desired place, you can attach an audio track, photo and text. Essentially, it is one card on both the front and backend. The principle is still the same: an SVG file with a detailed rendering of each room.

We did not immediately come to this decision; initially it was not very clear how it would be correct to edit the map, move or move exhibits.

The mobile application admin is written in the Vue.js framework and is part of the laravel backend. Attached to the monolithic part that is responsible for the Hermitage Store website is an editing application to populate the database and manage content. There are also several sections included through which you can edit the content of the Hermitage audio guide. Thus, editing works on two backends: it edits website and audio guide entries through different sections.

An important point is that the application works offline. There are blind spots in the Hermitage where the Internet does not reach. At the same time, it does not take up a lot of space on the phone – its specific weight is only 174 MB.

We have also implemented the standard functionality of an audio guide – listening to lectures, viewing photos, etc. There are 10 excursions available in the application, 2 of which are free.

And of course, the Hermitage audio guide is now available on all operating systems – both iOS and Android.

The project has been launched and is functioning successfully (Android / iOS).

What about the results?

According to the latest data, within a year of operation of the application there have already been more than 63 thousand downloads, and sales of excursions have increased by 50%.