August 8, 2022

Кейс по бронированию переговорок

Самое начало, а уже спойлер! Зато время сэкономит ;)

Привет! Тут я опишу ход мыслей по выполнению тестового задания. Расскажу почему пришел к определенным решениям и как выполнил задачу.

Коротко напомню о самой задаче:

Нужно спроектировать/нарисовать раздел/сервис по удобному бронированию переговорок.

  • В головном офисе до 50 переговорок, в мелких офисах — до 10;
  • Переговорки могут быть на разных этажах офиса.
    Одной из опций должна быть возможность бронируя переговорку, назначить встречу и пригласить участников;
  • Участниками могут быть как сотрудники компании, так и приглашенные гости (на которых надо заказывать пропуск);
  • Некоторым сотрудникам важно чтобы в переговорках было конкретное оборудование (проектор, видеосвязь, доска и т.д.);
  • Встречи бывают как на 2-3 человека, так и на 50;
  • Редко бывают встречи короче 30 минут;
  • Бывают регулярные встречи.

Макет в Figma

Этап 1: Понимание задачи, поиск референсов

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

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

Часть наших процессов происходит через Google Workspace. Нет никаких сложностей, чтобы назначить встречу через Гугл Календарь, особенно в десктоп версии.

Процесс в мобильном приложении гораздо сложнее и не всегда удобнее (на мой взгляд и опыт). Я решил выполнить тестовое взяв за основу работу над дизайном для iOS-приложения и таким образом раскрыть свой опыт как дизайнера.

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

Сервис Mobbin служит отличной базой скринов большинства популярных мобильный приложений. Я начал с поиска интересных решений и кейсов.

Гугл Календарь стал одним из самых первых и очевидных референсов

Моей целью было собрать определенное флоу из разных приложений, которые бы отражали решение одной и той же задачи, но с разным подходом к дизайну и микровзаимодействию, так мне на глаза попались: Todoist, IRL, Календарь (Apple), Fantastical, Monday, TimeTree, Habitify, Things 3 и т.д.

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

Собранный флоу из рефов, которые помогут мне сформировать структуру и набросать прототип

Этап 2: Создание прототипа

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

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

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

Основной сценарий собран

Этап 3: Библиотека компонентов и стилей

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

Берем готовое решение из UI-kit от iOS и упрощаем себе жизнь

Работа с цветом происходила по другому процессу. Для начала я определил главный цвет, который задаст настроение для всего дизайна. Это важный пункт, который позволит выстроить хорошую эмоциональную связь между пользователем и интерфейсом. Мне хотелось, чтобы основным ощущением при работе с приложением звучало как "Свежо!". Так как это у нас по своей сути инструмент продуктивности, то и настроение должно задаваться соответствующее, с мотивацией на эффективную работу.

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

Этап 4: Дизайн

Библиотека компонентов и стилей готова. Прототип готов. Мне в принципе осталось по принципу конструктора начать собирать финальный дизайн, незабывая поглядывать на прототип.

Почему в этом кейсе нужны были этапы и в чем ценность для меня?

  • На этапе референсов я копил визуальный опыт и подмечал классные решения;
  • На этапе прототипирования у меня выстроился сценарий взаимодействия и я проектировал приложение с учетом требований в заданий;
  • Библиотека компонентов и стилей помогла мне определить как будет в целом выглядеть UI. Также быстро вносить в него изменения по всем макетам;
  • На этапе дизайна я мог уже больше сфокусироваться на недостающих решениях и пробелах в сценарии. Местами подогнать цвета и компоненты для лучшей консистентности.

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

Финал

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

Я решил задачу через два сценария:

  1. На главном экране с переговорками (в дизайне "Комнаты") можно увидеть доступные переговорки на сегодня и завтра с расписанием. Выбрав любую, мы попадаем на форму быстрого создания встречи, где система на основе свободного времени предлагает заполнить форму и выбрать нужные опции. Фишка такого подхода в том, что нам не надо думать в моменте как быстро создать встречу и где ее провести. Показаны доступные варианты в ближайшее время, осталось только выбрать и создать встречу.
  2. В этом варианте показал более классический вариант, где есть точка входа для формы создания встречи. Это подходит в том случае, когда событие планируется без спешки и в перспективе. Можно выбрать с учетом фильтров переговорку с нужными опциями.

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

В компании работает больше 30 000 человек по всей России, десятки офисов по стране.

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

В головном офисе до 50 переговорок, в мелких офисах — до 10.

Значит важно как-то обозначить эти офиса и различие между ними. Я выбрал универсальный и более конкретный способ: адрес офиса. Хотя в прототипе есть решение как "Главный офис" и "Малый офис", но тут проблема в том, что в одном городе может быть более 2 офисов и тогда их требуется как-то обозначить понятным образом.

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

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

Участниками могут быть как сотрудники компании, так и приглашенные гости (на которых надо заказывать пропуск)

Добавил специальную форму. Атрибуты произвольные: ФИО, Серия и номер паспорта, Email. Первые два нужны для идентификации на фходе в офис, а почта для отправки информации о встрече, т.к. гостя нет в базе и ее подробности ему не доступны.

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

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

Встречи бывают как на 2-3 человека, так и на 50.

В карточках переговорок указана вместимость.

Редко бывают встречи короче 30 минут.

Минимальная выдача свободных переговорок на экране Комнаты составляет более 30 минут. Если нужно более гибкие параметры, то можно все сделать через расширенную форму (сценарий 2).

Бывают регулярные встречи.

Окей, добавляем опцию со свитчем в форму.

Структурный флоу с точками входа для экранов

Спасибо за внимание! Постарался подробно расписать весь процесс и обосновать свои решения.

Контакты

Мой телеграм
Сайт с портфолио — timurkarimov.com

Макет в Figma