Тинькофф Банк / Приложение цифрового офиса

Задача: Cпроектировать мобильный интерфейс (iOS) для управления офисом, который поможет сотрудникам проводить время в офисе с пользой (тестовое задание от Тинькофф Банка).

Описание: Представьте, что компания переезжает в новый офис и этот офис обустроен по последнему слову техники: всевозможные датчики, геопозицинирование, удобные стулья, столы. Кафе и столовые, в которых можно следить за загрузкой и понимать, когда лучше сходить за кофейком или на обед. Умные переговорки с камерами, которые могут следить за докладчиком, парковка, салон красоты, медицинский центр, комната для видеоигр. В общем, всё, чтобы можно было не уходить домой и жить в офисе.

Проблема: Сотрудников 10 тысяч, а мест в офисе всего 7 тысяч.

Клиент

Тинькофф Банк

Вид работы

Продуктовый дизайн

Год

2024

Исследования

Чтобы спроектировать мобильное приложение для управления «умным» офисом и при этом решить вопрос нехватки рабочих мест для всех сотрудников компании, в первую очередь я начала исследовать рынок похожих продуктов, изучать опыт решения проблемы недостаточного количества рабочих мест в офисе и анализировать боли и потребности их целевой аудитории.

  • Охарактеризовала целевую аудиторию, расписала возможные боли и потребности, чтобы предусмотреть их при проектировании приложения.
  • Изучила существующую на рынке систему hot desk, которая позволяет оптимизировать количество рабочих мест и офисное пространство. Проанализировала 10 платформ, работающих с системой hot desk, по рекламным материалам на сайтах их разработчиков (такие продукты создаются для бизнеса, мне как физ. лицу они недоступны). Выявила их преимущества и недостатки, особые фичи, находки отразила в инсайтах.
  • На основании полученных инсайтов сформировала гипотезы. Проверяла их я в рамках мини-интервью с 11 респондентами, представителями ЦА, предварительно описав так ситуацию, чтобы респонденты тщательно представили себя в офисе и рассказали, что для них было бы важно для комфортной работы в нём. Данные интервью дали мне много ценнейшей информации для создания приложения по управлению «умным» офисом.
  • Проведённые исследования позволили мне понять, какие 2 главные задачи по проектированию интерфейса передо мной стояли:
  • Завлечь сотрудников работать в офисе (судя по проведённому интервью, сотрудники технологичных компаний не очень любят ездить в офис);
  • Решить вопрос нехватки рабочих мест.

Более подробную информацию о проведённых исследованиях (описание процесса, анализ и инсайты, а также 13 задач на проектирование интерфейса в формате User Stories) можно найти в файле Figma

Проектирование

На схеме отражены основной, дополнительные и экстренные сценарии бронирования рабочего места (User Flow). В файле Figma можно найти также User Flows входа в приложение, бронирования переговорной, бронирования парковочного места и планирования перерыва от работы.

Дизайн

Составление UI-кита

Тщательно подобрала цветовую палитру, чтобы цвета были сочными, яркими, но не вырвиглазными, чтобы они подходили под тёмную тему приложения. Предусмотрела все необходимые в работе продукта компоненты и продумала их с точки зрения удобства использования, отразила их состояния и вариации.

Вход в приложение

Было решено сделать авторизацию через корпоративную почту, это самый безопасный, на мой взгляд, способ войти в приложение по управлению «умным» офисом той или иной компании. Это решение находит своё подтверждение и на рынке аналогичных продуктов.

Если пользователь впервые заходит в приложение, система просит его добавить свою фотографию (не кота 😁), объясняя значимость данного действия.

Личные данные при первом входе в приложение вводить не нужно, они подтягиваются автоматически из базы данных компании, привязаны к корпоративной почте.

Важные события

Важные объявления в жизни офиса попадают на самый верх главного экрана приложения в формате сторис. Это могут быть общие собрания по важным делам компании, срочные объявления, праздники, сообщения о мероприятиях, сплачивающих сотрудников и многое другое.

Чтобы не пропустить важные события, предусмотрена возможность установки напоминания.

Выбор места рядом с коллегой

Список коллег можно отфильтровать по отделам и по тому, кто в офисе сейчас. В карточке того или иного коллеги, выбранного из списка, можно найти его контактные данные, чтобы быстро с ним связаться и/или быстро его найти.

Возможность поиска коллеги на плане офиса позволяет пользователю разместиться рядом с теми людьми, с которыми ему приятно находится рядом и/или с которыми чаще всего он взаимодействует по работе. Важность данной возможности озвучили и мои респонденты в интервью.

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

Бронирование рабочего места

При выборе рабочего места на плане офиса пользователь может изучить его оснащение, и до скольки место будет свободно. Дата и время бронирования выставляются автоматически с возможностью редактирования (текущая дата и обычное рабочее время, установленное в компании) для ускорения процесса бронирования. Если кто-то из коллег ранее выбрал данное место для работы, но позже начала текущего рабочего дня, то в статусе и в инпуте «до» будет указано, до скольки место будет свободно. Пользователь здесь также может добавить рабочее место в избранное.

На экране успеха пользователю предоставлена возможность сразу выбрать и забронировать парковочное место, если в нём есть необходимость.

Бронирование парковочного места

Забронировать парковочное место можно всего в 2 клика.

Дата бронирования выставляется текущая автоматически, а время подтягивается из бронирований рабочего места или переговорной комнаты, сделанных ранее пользователем. Если никаких бронирований у юзера не найдено, то время бронирования парковочного места равняется времени полного рабочего дня, установленного в компании. Дату и время можно изменить вручную.

Фильтрация рабочих мест на карте

На плане офиса зелёным окрашены те места, которые доступны для бронирования, в том числе и после фильтрации.

Места без номера — это те рабочие места, которые не подходят по выбранному пользователем фильтру.

Благодаря проведённым интервью при планировании карты были учтены пользователи, которым крайне важно работать за закреплёнными за ними местами (с замочком). Данная концепция гибких и фиксированных мест успешно используется коворкингами.

Бронирование переговорной комнаты

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

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

При бронировании комнаты можно посмотреть, где она находится на плане офиса, откорректировать время и пригласить коллег. Штриховка на таймлайне — промежуток времени, когда переговорная забронирована, если бегунки попадают в эту зону, кнопка становится задизабленной.

Планирование отдыха от работы

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

Если загрузка заведения попадает в красную зону, то появляется возможность получить уведомление о снижении его заполненности. Пользователю не нужно постоянно заходить в приложение и следить за загрузкой.

Бронирования пользователя

Все забронированные места в офисе появляются в блоке «Мои бронирования» на главном экране для быстрого доступа. С помощью иконки настроек можно отредактировать бронь.

Иконки в календаре показывают, как пользователь планирует проводить тот или иной день. Как только пользователь заходит в офис, происходит автоматический check-in по Wi-Fi, GPS или по карте, приложенной к считывателю при входе в здание, статус бронирования в карточке места и иконка в календаре автоматически изменяются.

Результат

Задача по завлечению сотрудников работать в офисе была решена при помощи следующих идей:

  • продуманной системы push-уведомлений, например, о приезде коллег в офис, с которыми чаще всего пользователь взаимодействует;
  • сторис о важных событиях в жизни компании, которые не хочется пропускать;
  • баннера на главном экране о количестве присутствующих сейчас в офисе коллег, избранных на первом месте;

Нехватка рабочих мест была решена посредством создания прозрачной и продуманной системы бронирования рабочих мест (в том числе разделения данных мест на гибкие и фиксированные).

Просто свяжитесь со мной в Telegram

@ChristinaShatskikh