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

В компанії, де більш як 350 співробітників і 8 поверхів з кабінетами, знайти потрібного колегу буває не так просто. «На 8 поверсі, в лівому крилі, ліворуч повертаєш, а потім ще праворуч, і там десь третій, здається, стіл. Або спитаєш когось на місці» – приблизно такі інструкції можна було почути у відповідь на питання «А де сидить Діма Б.?». Якщо пощастить, то скаже перший колега, якого запитаєш. Або не скаже… А якщо з Дімою до цього особисто не зустрічався, то знайти його очима в потрібному опен-спейсі не варіант. Тож ідея створення мапи офісу народилася з реальної потреби.

Наші цілі при створенні мапи офісу

На момент створення мапи кількість співробітників була значно меншою, так само як кількість поверхів, які належали компанії. При цьому поверхи були не сусідні, куди можна швидко піднятись чи спуститись, а 1-ий, 6-ий і 8-ий. Для тих, хто не любить ліфти, пошук колеги міг перетворитись на фізичну вправу. 

Створення мапи передбачало кілька можливостей для співробітників:

• Знайти колегу і його робоче місце
• Візуально зрозуміло зобразити робочі місця, адже багато людей працюють в опен-спейс просторах
• Переглянути інформацію про колегу

Рік 2013: Початок розробки й рішення

Перерви між комерційними проєктами ми використовуємо, щоб вивчити та випробувати нові технології та створити цікаві демо. Зробити мапу офісу було цікаво, а крім того і корисно. Всі в індустрії у той час обговорювали проблему навігації в приміщеннях. Ми навіть розглядали кілька проєктів, в одному з яких намагалися це робити за допомогою iBeacon.

Так у липні 2013 почалась робота над мапою. Тоді ми

• Намалювали дизайн приміщень (тоді ще у Photoshop) у псевдомасштабі, столи різних видів, а також хлопців і дівчат.

• Для створення карти використали рушій Я.Карт, який можна було використовувати окремо на своєму сервері. Цей рушій дозволив зафіксувати зум, завантажити картки співробітників і легко тягати карту.
•  Для бекенду обрали мову PHP
• Дані про колег синхронізували із LDAP системи.
• Зробили найпростішу адмінку, через яку адміністратор вносив місця працівників і розставляв столи різних видів.
• Мапа була закрита для зовнішніх користувачів і доступна лише за офісною IP-адресою

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

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

Рік 2019: Версія 2.0 

Восени 2019 року, назбиравши, на додачу до нових поверхів, ще й побажання колег щодо нової мапи, ми взялися до роботи.

Насправді вимог на той момент було не багато:

• Додати нові поверхи до вже наявних
• Додати фото колеги до картки
• Можливість швидко скопіювати номер телефону (бо тоді спілкування було здебільшого в Telegram), email, перейти відразу у вікно діалогу в Skype.
• Додати технологію або/та роль працівника (Project Manager, Tech Lead, React Developer, тощо)
• Зробити зручний пошук за технологіями та навичками.

Але, як то кажуть, апетит приходить під час їжі. Або ж, коли опиняєшся в ролі замовника, то ідеї народжуються в процесі роботи. Тож окрім вищезгаданого, нам вдалося зробити ще дещо.

Кімнати для перемовин та робочі місця

До початку пандемії майже всі колеги відвідували офіс, і оскільки робота часто вимагає дзвінків із клієнтами, попит на кімнати для перемовин був високий. Щоб колеги розуміли, де зараз вільна кімната, а де вже зайнята, ми вирішили додати відповідний функціонал. По-перше, ми додали реальні фото кімнат, оскільки вони різного розміру і розраховані на різну кількість людей. Тепер легко можна визначити, яка саме підходить для конкретної конференції з клієнтом і командою. Для цього команда HR старанно сфотографувала всі кімнати в офісі (а їх наразі 16).

По-друге, ми додали функціонал бронювання кімнат. Для цього усі кімнати внесли в корпоративний Google акаунт. Коли резервуєш визначений час, можна вибрати вільну в цей час кімнату. Забронювати кімнату можна не лише з календаря, а і з “профілю” кімнати. Варто лиш обрати “Зарезервувати” на фото відповідної кімнати, і така можливість з’являється одразу в календарі. 

По-третє, ми оновили хедер мапи: там з’явилося швидке бронювання кімнат на обраний час. Крім цього, додали можливість бачити, в який час кімната вільна для резервації, а в який уже зайнята.

Щодо місць, в офісі є можливість зарезервувати не лише кімнату, а й окреме робоче місце. Це актуально для тих, хто працює віддалено, але час від часу приходить до офісу, а також для місць із столами змінної висоти, яких в офісі поки що меншість. Таким чином, в офісі є місця, які співробітники можуть завчасно зарезервувати за собою.

Безпека офісу та людей

Найкращий спосіб показати, де знаходяться вогнегасники, це позначити їх на мапі. Зізнаюсь, ніколи не звертала на них увагу, де вони висять і в якій кількості. Тож ми влаштували міні-квест “знайди всі вогнегасники офісу”. Те саме стосується аптечок.

 Не думаю, що під час пожежі хтось почне шукати вогнегасник на мапі, але при регулярному користуванні мапою мимоволі запам’ятовуєш, де вони є. Також зручно показувати їх на мапі новим співробітникам під час знайомства з офісом.

Локації

Офіс – це не лише робочий простір, а й місце дозвілля із колегами. Ходять легенди, що розробники на роботі грають у Playstation. То не легенди, таки грають. А ще на гітарі і навіть бас-гітарі… А ще грають в настільний футбол, їдять морозиво, або п’ють каву в кімнатах відпочинку. В наших офісах назбиралось чимало таких локацій, про які можна і не знати, якщо весь час знаходитись на своєму робочому місці. Тому мапа у нас слугує інструментом знайомства нових колег з офісом Оніксу, де можна влаштувати такий собі віртуальний тур, а потім побачити то все наживо.

Доступність

Раніше мапа була доступна за офісною IP-адресою, але під час епідемії коронавірусу всі працювали віддалено. Оскільки на той час ми вже зробили зручний пошук зі технологіями і навичками, навіть додали позначки за рівнем знань (від новачка до експерта) та сортування за досвідом та днем народження (у нас є традиція привітань), мапа стала зручним інструментом користування поза офісом. Тож ми інтегрували її в Hydra, основний сервіс нашої компанії, і зробили спільний логін. Таким чином, мапа стала доступною для будь-якого колеги з будь-якої точки світу.

Робочі місця

Коли офіс невеликий, лише з парою десятків столів, проблема нумерації не стоїть, не кажучи вже про логіку нумерації столів. Але коли офіс розрісся до 8 поверхів із сотнями робочих місць, постало питання: а як же ті столи нумерувати? Відповідь – наліпками! Ми вигадали, як зручно позначати столи на одному поверсі, а потім повторили це 7 разів. А щоб це було наочно, на столи приліпили наклейки з номерами. 

Окрім того, ми надали можливість співробітникам змінювати номер свого робочого місця в своєму профілі. Пересів за інший стіл – зміни його номер самостійно. Це розв’язало проблему адміністратора, який мав слідкувати за оновленням мапи місць. 

Колегу, який працює віддалено, так само можна знайти на мапі, тільки без прив’язки до робочого місця, а з позначкою “Віддалено”. Адже мапа увібрала в себе інформацію, яка є корисною незалежно від того, де знаходиться користувач.

P.S. А ще іноді, наприклад, 1 квітня, у нас за столами сидять-лежать-працюють котики! А в день народження в іменинника святкова аватарка з кулькою, конфеті й ковпачком.

Підсумовуючи

Наша мапа офісу вже давно переросла свою навігаційну функцію. І найкращий спосіб це побачити, це порівняти початкові вимоги до її створення і результат, який маємо зараз:

• Зручний сервіс, інтегрований з основним сервісом компанії, Hydra, який може бути незалежним за потреби. Як доказ – демо.
• Інтеграція з Google календарем для резервації кімнат для перемовин та столів змінної висоти
• Доступ до власного профілю для внесення змін (фото, e-mail, соціальні мережі, тощо), в тому числі для зміни робочого місця.
• Доступ до мапи для всіх колег через ідентифікатор єдиного входу (SSO).
• Кастомне рішення на основі SVGі замість Yandex.map.
• Бекенд на новішому PHP, а інтерфейс – на фреймворці Vue.js.
• Дизайн із псевдо-масштабом з умовним збереженням розмірів і координатами столів та інших об’єктів.
• Клікабельні зони для позначення додаткових локацій (окрім робочих місць) і об’єктів.
• Адаптували мапу для зручного використання на мобільному телефоні.
• Оновлений хадбар із розширеним пошуком, локаціями, сервісами компанії, та опцією резервації робочого місця чи кімнати для перемовин.
• Сайдбар із поверхами для ліворуких і праворуких 🙂
• Багатомовність – тепер є версія рідною-солов’їною.
• Кульки і ковпачки для позначення іменинників, щоб усі знали, у кого сьогодні свято.