Альфа банк
Разработка удобного пользовательского опыта для бронирования офисных переговорных
(или Проектирование пользовательского flow для бронирования переговорных в корпоративном офисе)
(или Проектирование пользовательского flow для бронирования переговорных в корпоративном офисе)
- Задачи и исходные данныеСпроектировать флоу и отразить целевые экраны сценария разового бронирования свободной переговорки в центральном офисе для трех сотрудников и одного гостя с дополнительными фильтрами (флипчарт и проектор).
- ПроблематикаКомпания с выстроенной структурой и большим количеством сотрудников диктует жёсткие ограничения и требования к внутренним сервисам. В Альфа-Банке уже существует единая внутренняя система управления офисом, объединяющая ключевые процессы. В рамках развития этой системы необходимо разработать новый функционал — бронирование переговорных комнат.
Forming the structure of screens
01. Выявление потребностей пользователей
Продукт является B2B-сервисом, и его основная аудитория — сотрудники компании, уже привыкшие к определённым паттернам бронирования из других корпоративных систем (Microsoft Teams, Outlook, Google Calendar, Jira). Поэтому сохранение привычных пользовательских паттернов стало критичным для снижения когнитивной нагрузки и ускорения процесса бронирования.
02. Что было важно учесть
Правильная работа с фильтрами
Подтверждение успешного сценария
После бронирования пользователю важно понимать:
Риски
- выделить главное: этаж, время, длительность брони, количество участников, оснащение;
- уменьшить риск ошибок при бронировании и неудачных сценариев;
- сделать флоу легким, максимально понятным, без сложной системы шагов. При перегруженном сценарии бронирования пользователи могут забывать важные шаги.
Подтверждение успешного сценария
После бронирования пользователю важно понимать:
- переговорка забронирована;
- виден статус бронирования;
- необходимое оборудование включено в бронь;
- пропуск для гостя оформлен;
- уведомления для других участников отправлены.
Риски
- некомфортные условия встречи;
- неэффективное использование переговорных (дефицит для других команд, пользователь может выбрать слишком маленькую или слишком большую «про запас»);
- сотрудники тратят много времени на перебор вариантов;
- пропуск для гостя не сделан (гость не сможет попасть в офис).
03. Основные проблемы
Перед генерацией идей я выделила три приоритетные проблемы, требующие внимания в рамках сценария бронирования переговорных.
- Как можно помочь пользователям быстро находить и бронировать подходящую переговорную комнату, чтобы они не тратили время на поиск и сравнение вариантов?
- Как встроить оформление пропуска для внешнего гостя в сценарий бронирования переговорной, чтобы пользователь не забывал о важных сопутствующих действиях?
- Как мы можем наглядно подтверждать успешность бронирования и всех связанных шагов, чтобы у пользователя не возникало сомнений в том, что встреча полностью организована?
Несколько ключевых экранов (2-3)?
04. Генерация идей
На первоначальном этапе я использовала простые эскизы для определения базовой структуры для всех экранов. После выбора примерного расположения ключевых элементов я перешла к описанию основного функционала для каждого экрана. Основной фокус был на том, какие шаги пользователь должен выполнить и на каких экранах.
По итогу это оформляется в компактный user flow, детализируется сценарий пути пользователя, чтобы отразить основные действия на каждом этапе. Дополнительно в рамках тестового я оформила все основные мысли в CJM.
По итогу это оформляется в компактный user flow, детализируется сценарий пути пользователя, чтобы отразить основные действия на каждом этапе. Дополнительно в рамках тестового я оформила все основные мысли в CJM.
Forming the structure of screens
05. Макеты интерфейса
Ключевые изменения и доработки:
При создании макетов я изначально сосредоточилась на базовом сценарии выбора свободной переговорной и добавления участников. Размышляя о том, как сама хотела бы быстро забронировать переговорку, я столкнулась с решениями, требующими переработки. Более детальный анализ показал, что не все ключевые шаги и зависимости были учтены — например, выбор офиса не должен отвлекать пользователя и занимать много времени. Поэтому я пересмотрела user flow и скорректировала структуру экранов, закрепив пользователя за конкретным офисом и вынеся функцию смены офиса в верхнюю часть интерфейса.
При создании макетов я изначально сосредоточилась на базовом сценарии выбора свободной переговорной и добавления участников. Размышляя о том, как сама хотела бы быстро забронировать переговорку, я столкнулась с решениями, требующими переработки. Более детальный анализ показал, что не все ключевые шаги и зависимости были учтены — например, выбор офиса не должен отвлекать пользователя и занимать много времени. Поэтому я пересмотрела user flow и скорректировала структуру экранов, закрепив пользователя за конкретным офисом и вынеся функцию смены офиса в верхнюю часть интерфейса.
Перенос поисковика
В ходе работы над прототипом я внесла еще несколько крупных корректировок для улучшения восприятия и удобства. Одним из ключевых изменений стало расположение системы фильтров. Изначально фильтры находились в верхней части экрана, что выглядело логично для быстрого доступа, однако при большом количестве параметров (этаж, вместимость, оборудование и др.) такой подход создавал перегрузку.
Чтобы сделать процесс выбора более наглядным и привычным, я перенесла фильтры в боковую панель, оставив только важные разделы сверху. Такой подход был вдохновлён интерфейсами сервисов бронирования (Booking.com и Airbnb), где боковая панель позволяет легко сравнивать доступные варианты, не теряя контекст.
Чтобы сделать процесс выбора более наглядным и привычным, я перенесла фильтры в боковую панель, оставив только важные разделы сверху. Такой подход был вдохновлён интерфейсами сервисов бронирования (Booking.com и Airbnb), где боковая панель позволяет легко сравнивать доступные варианты, не теряя контекст.
Варианты структуры
06. UI-кит
В рамках проекта создала UI-кит, который формировался на основе существующих интерфейсов и визуальных решений Альфа-Банка. Для его создания я проанализировала корпоративные референсы, чтобы обеспечить консистентность элементов интерфейса, компонентов и визуальных паттернов с общей дизайн-системой банка. Это позволило ускорить процесс проектирования, сохранять единый стиль и адаптировать существующие компоненты под новые сценарии бронирования переговорных комнат.
Ui-кит
07. Что можно предусмотреть дополнительно
Функционал бронирования переговорных комнат обладает потенциалом для дальнейшего расширения и оптимизации. Существует множество возможностей, чтобы сделать процесс более интуитивным, эффективным и персонализированным. Ниже представлены несколько идей и предположений, которые, на мой взгляд, могут дополнительно улучшить пользовательский опыт и повысить ценность системы для сотрудников.
- Интерактивная карта офиса: чтобы быстро понимать расположение переговорной относительно рабочего места и основных узлов офиса.
- История бронирований и шаблоны: чтобы иметь возможность быстро забронировать комнату для регулярных встреч или повторять прошлые бронирования. Это важно учесть и можно было бы отнести в раздел "Мои бронирования".
- Дополнительные фильтры: на основе тестов возможно были бы выявлены дополнительные потребности в фильтрах. Помним о правиле "" и располагает не более 7 фильтров, а при большем количестве создаем иконку "другие фильтры" и помещаем туда остальное.
- Я рассматривала вариант присваивать бронированиям приоритет (низкий/высокий). Например, если бронь имеет низкий приоритет, пользователь сможет связаться с человеком, который её сделал, и обсудить возможный перенос. На данный момент я только реализовала возможность из основной таблицы бронирований переходить в чат к пользователю, который забронировал переговорную, чтобы при необходимости обсудить перенос встречи.
Мобильная адаптация
08. Размышления и выводы
Ключевые изменения и доработки:
В рамках решения этой задачи было увлекательно изучить пользовательские паттерны и предусмотреть все потребности с учётом контекста. Проект подчеркнул ценность вдохновения существующими сервисами и необходимость нестандартного подхода при проектировании сложных B2B-систем. Кроме того, работа с реальной, но неполной дизайн-системой (точнее сказать ui-китом) представляла небольшой вызов: приходилось адаптировать существующие компоненты под новые сценарии и находить решения для отсутствующих элементов, при этом сохраняя консистентность интерфейса.
В итоге проект продемонстрировал, что комбинация пользовательских исследований, внимательного проектирования flow и адаптации привычных паттернов позволяет создавать функциональные решения, которые реально решают задачи пользователей и повышают эффективность работы внутри компании. А дополнительная коммуникация с командой позволила бы уточнять решения и генерировать новые идеи, делая итоговый продукт более проработанным и соответствующим потребностям сотрудников.
В рамках решения этой задачи было увлекательно изучить пользовательские паттерны и предусмотреть все потребности с учётом контекста. Проект подчеркнул ценность вдохновения существующими сервисами и необходимость нестандартного подхода при проектировании сложных B2B-систем. Кроме того, работа с реальной, но неполной дизайн-системой (точнее сказать ui-китом) представляла небольшой вызов: приходилось адаптировать существующие компоненты под новые сценарии и находить решения для отсутствующих элементов, при этом сохраняя консистентность интерфейса.
В итоге проект продемонстрировал, что комбинация пользовательских исследований, внимательного проектирования flow и адаптации привычных паттернов позволяет создавать функциональные решения, которые реально решают задачи пользователей и повышают эффективность работы внутри компании. А дополнительная коммуникация с командой позволила бы уточнять решения и генерировать новые идеи, делая итоговый продукт более проработанным и соответствующим потребностям сотрудников.
Forming the structure of screens
Forming the structure of screens
ВАЖНО
СДЕЛАТЬ АНИМАЦИЮ
ДЛЯ мобилки 2 экрана
ДЛЯ мобилки 2 экрана