The idea of an office map was brought up by a real problem our growing company encountered. 

Finding one of 350 employees in an 8-floor office building like Onix’s may be challenging. “Alex B.? Well, on the 7th floor, in the left wing, you turn to the left, then to the right, and then… His was the third desk, I guess. You can ask someone on the spot.” – instructions like this should sound familiar to any big company employee. If you’re lucky, the first colleague you meet on the spot will tell you. Or not. And if you haven’t met Alex B. before, locating him in an open space isn’t an option.

Why we created the office map

When the map was envisioned, the number of Onix’s employees was significantly lower. The company’s office floors were few but not adjacent: the ground floor, the 5th, and the 7th. Finding a colleague would often equate to a mini-workout for those who hate elevators.

The creation of the map implied several capabilities for the employees:

• Find a colleague and their workstation
• View individual workstations in open spaces
• View information about a colleague

2013: Start of the development. Solutions.

Onix team uses breaks between commercial projects to learn and test new technologies and create demos. Making an office map seemed both interesting and practical. At that time, everyone was discussing indoor navigation issues. We also considered several projects, one of which would employ iBeacon.

Thus, our work on the map began in July 2013. At that time, the project team

• Drew in Photoshop the design of the premises in a pseudo-scale, several types of desks, and the boys and girls.
• Used the Я.Карт engine to create the map. (This engine, which could be used separately on our server, enabled the developers to lock zoom, upload employee cards, and drag the map easily.)
• Chose PHP as the back-end programming language.
• Synchronized the employees’ data from the LDAP system.
• Built a simple admin panel for the administrator to enter the employees’ workstations and arrange the desks of various types.

The map was only accessible via the office IP address and was closed to external users.

Even that simple, the office map performed its function, albeit with some difficulties. For example, someone had to monitor workstation changes and manually update the map accordingly. It also lacked advanced search, e.g., by skills and technologies, in addition to the first and last name.

Therefore, when Onix’s office space and personnel expanded, we felt it was time to update and improve the map.

2019: Version 2.0 

In the fall of 2019, having collected our colleagues’ requirements for a new map, we set to work.

In fact, at that time, the colleagues only wanted to:

• add to the map the floors the company acquired
• add employees’ photos to their cards
• quickly copy a colleague’s email or phone number (because we mainly communicated via Telegram) or promptly open the dialogue window in Skype
• add technologies and employee roles, such as Project Manager, Tech Lead, React Developer, etc.
• conveniently search by technologies and skills

However, appetite comes with eating, and once software developers find themselves in a customer’s shoes, they begin to love changes to the original project scope. So, the project team ended up doing a bit more.

Meeting rooms and workstations

Before the pandemic, nearly all employees attended the office. And since their work often requires teleconferences with clients, the demand for meeting rooms was high. For colleagues to know which room is currently occupied and which is available, we decided to add the appropriate functionality to the map.

Firstly, we added real photos of the different rooms. The HR team painstakingly photographed each room in the office to give an idea of its size and capacity. Now it’s easy to determine which one of the 16 rooms is suitable for a specific conference with or without a team.

Secondly, we developed a room reservation functionality. All rooms were entered into a corporate Google account. When one reserves a specific time slot, one can choose one of the available rooms. A room can be booked not only from the calendar but also from its “profile” page. One should select “Reserve” on the room’s photo, and this option will promptly appear on the calendar.

Thirdly, we updated the map header to feature the quick room reservation for selected times. Users also can see when a room is available for reservation and when it is already occupied or booked.

It is also possible to reserve workstations in the office. This is helpful for colleagues who work remotely but come to the office occasionally and in the case of height-adjustable desks, which are still few in the office. The office map thus enables employees to reserve some of the workstations in advance.

Safety of the office and people

The best way to show fire extinguishers’ locations is to mark them on a map. I confess I never paid attention to them, where they hang, and how many. So we organized a mini-quest “find all the fire extinguishers in the office.” The same about first aid kits.

I doubt anyone will be looking for a fire extinguisher on the map in case of fire. However, if one views the map regularly, one involuntarily gets to remember where they are. It is also convenient to show new employees the fire extinguishers on the map during onboarding.

Locations

Office space is not only about work: there’s time and place for leisure with colleagues. Rumor has it that developers play Playstation at work… Let’s be honest: they do. They also play table football. Moreover, they play the guitar and bass guitar (yuck!), drink tons of coffee, eat ice cream in the lounges, and more.

There are many locations in our offices where you can catch them, but you won’t catch up with them if you never leave your workstation. Our office map helps familiarize new team members with Onix’s office; they can arrange a virtual tour and then go to see everything live.

Accessibility

Previously, the map was accessible only from the office IP address. However, during the pandemic, everyone worked remotely. By then, we had implemented a convenient search by technology and skills, levels of expertise (from novice to expert), and sorting by experience and birthday (we also send birthday greetings), so the office map became a popular instrument even outside the office.

So we integrated the map into Hydra, our company’s ERP, and implemented a common login. The map is now available to any colleague from anywhere in the world.

Workstations

A small office with some twenty desks hardly poses a numbering problem, not to mention the desk numbering logic. However, things changed with Onix’s office encompassing 8 floors and hundreds of workstations. 

Stickers provided a solution. We came up with a smart way to mark all desks on one floor and repeated the procedure 7 times. To make it clear, stickers with numbers were placed on the desks.

Additionally, we enabled employees to change their workstation numbers in their profiles. If they moved to another desk, they change its number themselves. This solved the administrator’s problem of tracking the employees and workstations and updating the map.

A colleague who works remotely can also be found on the map. Instead of the workstation number, they have the “Remote” mark. After all, the map should provide helpful information regardless of an employee’s location.

P.S. Occasionally, e.g., on April 1, we have cats sitting, lying, and working at our desks! And birthday boys and girls have festive profile pictures with air balloons, confetti, and party hats.

Summing up

Our digital office map has long outgrown its navigation function. The best way to see it is to compare the initial requirements with the results we have now:

• A convenient service integrated with the company’s ERP Hydra, which can be independent if needed. (Here’s a demo.)
• Integration with Google Calendar to reserve meeting rooms and height-adjustable desks.
• Each employee can make changes to their profile (photo, email, social networks, etc.), including changing their workstation.
• Access for all employees via single sign-on (SSO).
• Custom solution based on SVG instead of Yandex.map.
• The back-end is written the latest PHP and the interface on the Vue.js framework.
• Pseudo-scaled design that conditionally renders the dimensions and coordinates of desks and other objects.
• Clickable zones to indicate leisure locations and objects.
• Adaptation for convenient use on mobile phones.
• Updated headbar with an advanced search, locations, company services, and option to book a meeting room or workstation.
• Sidebar showing the floors for left-handed and right-handed users.
• Multiple languages: the map is available in English and our beloved mother tongue.
• Balloons and party hats on profile pictures for everyone to know whose birthday it is.