Дашборд для сети коворкингов
О клиенте
Меня привлекла для работы растущая сеть коворкингов «Топ-скоп». В каждом из их пространств работает своя команда администраторов. Все они заинтересованы в том, чтобы получить удобный и единый для всей сети инструмент для управления рабочими процессами.
Продукт
Администраторы коворкингов используют несколько разных сервисов. Рост числа коворкингов и персонала делает работу с ними неудобной: приходится постоянно следить за корректной работой сервисов и тратить больше средств на поддержку нескольких систем.
Руководство приняло решение разработать собственное решение, которое со временем будет дешевле в эксплуатации и обслуживании.
Главные ожидаемые функции продукта:
→ мониторинг текущей обстановки в коворкинге,
→ регистрация новых посетителей,
→ отображение загрузки переговорок и арендного оборудования.
Руководство приняло решение разработать собственное решение, которое со временем будет дешевле в эксплуатации и обслуживании.
Главные ожидаемые функции продукта:
→ мониторинг текущей обстановки в коворкинге,
→ регистрация новых посетителей,
→ отображение загрузки переговорок и арендного оборудования.
Моя задача
Cпроектировать веб-портал для сети коворкингов «Топ-скоп».
Компания хочет получить решение, которое будет легко масштабироваться под будущие функции, но при этом не перегрузит администраторов лишней информацией или визуальным шумом.
Компания хочет получить решение, которое будет легко масштабироваться под будущие функции, но при этом не перегрузит администраторов лишней информацией или визуальным шумом.
Функционал
Целевая аудитория
Главная аудитория продукта – администраторы коворкинга.
Моя роль
Передо мной стояла задача создать высоконагруженный интерфейс и при этом сделать его простым для сотрудников коворкинга. На проекте была единственным специалистом, участвовала во всех аспектах процесса разработки: от концепта до релиза и согласования с клиентом.
Дизайн - процесс
1. Исследование
2. UX-проектирование
3. UI-проектирование
2. UX-проектирование
3. UI-проектирование
Этапы дизайн-процесса
ЭТАП 1 Исследование
- Анализ конкурентов
Сильные стороны конкурентов
→ Интуитивная визуализация: все конкуренты используют карты помещений (2D/3D) для наглядного отображения свободных и занятых мест/комнат. Это удобно и быстро для пользователя.
→ Процесс бронирования: отлаженный и простой процесс выбора даты, времени и ресурсов (EasyWeek).
→ Базовая аналитика: наличие дашбордов для администратора с отображением общей заполненности и статистики.
Слабые стороны конкурентов
→ Слабая связка «оборудование-место-пользователь»: ни в одном из проанализированных сервисов нет детального сквозного учета оборудования – от его наличия на складе до привязки к конкретному месту и клиенту. Это лишь упоминается как атрибут переговорной комнаты.
→ Отсутствие гибкости в комплектации: нет возможности стандартно заказать дополнительное оборудование к уже укомплектованной переговорной комнате.
→ Ориентация на администратора: многие системы предлагают хороший функционал для пользователя, но недостаточно мощные инструменты для анализа и управления со стороны администратора (например, глубокой фильтрации по клиентам и оборудованию).
→ Слабая связка «оборудование-место-пользователь»: ни в одном из проанализированных сервисов нет детального сквозного учета оборудования – от его наличия на складе до привязки к конкретному месту и клиенту. Это лишь упоминается как атрибут переговорной комнаты.
→ Отсутствие гибкости в комплектации: нет возможности стандартно заказать дополнительное оборудование к уже укомплектованной переговорной комнате.
→ Ориентация на администратора: многие системы предлагают хороший функционал для пользователя, но недостаточно мощные инструменты для анализа и управления со стороны администратора (например, глубокой фильтрации по клиентам и оборудованию).
Ключевые выводы для дашборда «Топ-скоп»
Анализ конкурентов (UnSpot, EasyWeek, Карта офиса) показал, что большинство сервисов решают лишь часть задач: либо визуализацию, либо бронирование.
Внедряемые решения:
→ Два вида просмотра: Интерактивная карта (как у UnSpot) для наглядности и детализированный список (как у EasyWeek) для фильтрации и сортировки.
→ Детальные карточки помещений: Фото, список оборудования, наличие розеток. Это поможет пользователям выбрать оптимальное место и снизит нагрузку на администраторов.
→ Сквозной учет оборудования: Наше главное преимущество. Мы добавим полный трекингстатусов оборудования («на складе»,«выдано») с привязкой к клиенту и месту, а также фильтры для анализа его востребованности.
→ Гибкое бронирование: Возможность дозаказать оборудование к стандартной комплектации переговорной, что повысит гибкость сервиса.
→ Мощная аналитика для администратора: Расширенная фильтрация не только по дате, но и по оборудованию, клиентам и тарифам для глубокого анализа загрузки пространства.
Общий вывод: Существует рыночная возможность создать более комплексное и глубокое решение, которое не только позволит бронировать пространства, но и станет полноценной ERP-системой для управления всеми ресурсами коворкинга: местами, комнатами, оборудованием и клиентами, с сильным аналитическим уклоном для администратора.
Cсылка на полный анализ конкурентов тут .
Анализ конкурентов (UnSpot, EasyWeek, Карта офиса) показал, что большинство сервисов решают лишь часть задач: либо визуализацию, либо бронирование.
Внедряемые решения:
→ Два вида просмотра: Интерактивная карта (как у UnSpot) для наглядности и детализированный список (как у EasyWeek) для фильтрации и сортировки.
→ Детальные карточки помещений: Фото, список оборудования, наличие розеток. Это поможет пользователям выбрать оптимальное место и снизит нагрузку на администраторов.
→ Сквозной учет оборудования: Наше главное преимущество. Мы добавим полный трекингстатусов оборудования («на складе»,«выдано») с привязкой к клиенту и месту, а также фильтры для анализа его востребованности.
→ Гибкое бронирование: Возможность дозаказать оборудование к стандартной комплектации переговорной, что повысит гибкость сервиса.
→ Мощная аналитика для администратора: Расширенная фильтрация не только по дате, но и по оборудованию, клиентам и тарифам для глубокого анализа загрузки пространства.
Общий вывод: Существует рыночная возможность создать более комплексное и глубокое решение, которое не только позволит бронировать пространства, но и станет полноценной ERP-системой для управления всеми ресурсами коворкинга: местами, комнатами, оборудованием и клиентами, с сильным аналитическим уклоном для администратора.
Cсылка на полный анализ конкурентов тут .
- Мудборд и референсы
Разработка мудборда для проекта велась комплексно и основывалась на трёх ключевых источниках входящей информации:
→ Референсы от заказчика. Были тщательно изучены и учтены предоставленные примеры, что позволило точно понять эстетические предпочтения, желаемый уровень детализации и общее визуальное направление, в котором должен развиваться проект.
→ Данные конкурентного анализа. Изучение решений конкурентов позволило выделить и адаптировать лучшие отраслевые практики (например, интерактивную карту помещений и табличное представление данных), а также выявить слабые места рынка.
→ Требуемый функционал (ТЗ и дополнения). Все заявленные функции, как базовые из технического задания, так и расширенные, предложенные после анализа, стали центральными элементами мудборда. Это гарантировало, что визуальная концепция не просто красива, но и функциональна, точно отражая все необходимые пользовательские сценарии — от сквозного учёта оборудования до гибкой системы бронирования.
→ Референсы от заказчика. Были тщательно изучены и учтены предоставленные примеры, что позволило точно понять эстетические предпочтения, желаемый уровень детализации и общее визуальное направление, в котором должен развиваться проект.
→ Данные конкурентного анализа. Изучение решений конкурентов позволило выделить и адаптировать лучшие отраслевые практики (например, интерактивную карту помещений и табличное представление данных), а также выявить слабые места рынка.
→ Требуемый функционал (ТЗ и дополнения). Все заявленные функции, как базовые из технического задания, так и расширенные, предложенные после анализа, стали центральными элементами мудборда. Это гарантировало, что визуальная концепция не просто красива, но и функциональна, точно отражая все необходимые пользовательские сценарии — от сквозного учёта оборудования до гибкой системы бронирования.
ЭТАП 2 UX-проектирование
- User flow
- Лоу-фай вайфреймы
ЭТАП 3 UI-проектирование
Визуальная концепция проекта «Топ-скоп» построена на принципах минимализма, функциональности и удобства. Я стремилась создать интерфейс, который будет одновременно современным, профессиональным и интуитивно понятным для пользователей.
Ключевые принципы:
→ Чистота и порядок: минимальное использование декоративных элементов, акцент на кнопках и данных.
→ Современная цветовая палитра: основой стали спокойные нейтральные тона (оттенки серого, белый) с добавлением акцентного зеленого цвета для выделения важных элементов и действий.
→ Удобная типографика: чёткая иерархия шрифтов: рубленный шрифт для заголовков и интерфейсных элементов обеспечивает современность, а классический гротеск – удобочитаемость в больших текстовых блоках.
→ Визуальная навигация: использование интуитивных иконок, понятных обеим аудиториям, и продуманная компоновка элементов для быстрого поиска информации.
Ключевые принципы:
→ Чистота и порядок: минимальное использование декоративных элементов, акцент на кнопках и данных.
→ Современная цветовая палитра: основой стали спокойные нейтральные тона (оттенки серого, белый) с добавлением акцентного зеленого цвета для выделения важных элементов и действий.
→ Удобная типографика: чёткая иерархия шрифтов: рубленный шрифт для заголовков и интерфейсных элементов обеспечивает современность, а классический гротеск – удобочитаемость в больших текстовых блоках.
→ Визуальная навигация: использование интуитивных иконок, понятных обеим аудиториям, и продуманная компоновка элементов для быстрого поиска информации.
UI-кит проекта «Топ-скоп» включает готовые компоненты: кнопки, карточки, фильтры и таблицы, оформленные в соответствии с утверждённой стилевой системой. Все элементы адаптивны, содержат состояния (hover, active) и обеспечивают единообразие интерфейса на всех экранах системы.
Экраны дашборда
Главный экран
[Главный] экран представлен в виде дашборда. Для быстрой навигации основные разделы сервиса отображены в сайдбаре. Главный экран имеет 2 вида: карта или список.
[Главный] экран представлен в виде дашборда. Для быстрой навигации основные разделы сервиса отображены в сайдбаре. Главный экран имеет 2 вида: карта или список.
Фото 1 - карта, фото 2 - список
На главном экране также осуществляется бронирование мест. Главный экран является основным экраном для бронирования мест и переговорных комнат. Кроме бронирования мест, на экране пользователь может отследить запрошенное оборудование. Заявки на бронирование отображаются в виде всплывающих сообщений. Ниже шаги для бронирования переговорной комнаты.
[Шаг 1] при бронировании переговорной комнаты – выбор слота. При наведении на слот, появляется краткая информация о месте.
[Шаг 2] для бронирования выбранного места, пользователь выбирает: дату, время, клиента (если бронь осуществляет администратор) и требуемое оборудование.
[Шаг 3] получение подтверждения об успешном бронировании слота.
[Шаг 4] проверка статуса забронированного слота.
Календарь
Вкладка [календарь] показывает загрузку переговорных комнат по дням/неделям/месяцам.
В карточке бронирования кратко указана информация о пользователе и запрашиваемом оборудовании.
Вкладка [календарь] показывает загрузку переговорных комнат по дням/неделям/месяцам.
В карточке бронирования кратко указана информация о пользователе и запрашиваемом оборудовании.
Клиенты
На вкладке [клиенты] собраны данные о всех пользователях коворкинга. Клиентов можно сортировать по тарифным планам. Для новых клиентов необходимо провести ознакомительную презентацию. Скачать презентацию можно по клику на вкладке клиенты или на главной странице сервиса.
На вкладке [клиенты] собраны данные о всех пользователях коворкинга. Клиентов можно сортировать по тарифным планам. Для новых клиентов необходимо провести ознакомительную презентацию. Скачать презентацию можно по клику на вкладке клиенты или на главной странице сервиса.
Чтобы добавить нового пользователя, необходимо заполнить форму.
Оборудование
На вкладке [оборудование] представен список имеющегося в филиале оборудования. По каждой единице оборудования отменен статус и привязка к месту, если оборудование выдано. Кроме того, есть отметка об износе оборудования, для своевременной его замене. Для удобства пользователей есть поиск по названию оборудования.
На вкладке [оборудование] представен список имеющегося в филиале оборудования. По каждой единице оборудования отменен статус и привязка к месту, если оборудование выдано. Кроме того, есть отметка об износе оборудования, для своевременной его замене. Для удобства пользователей есть поиск по названию оборудования.
Экраны и статусы с ошибками
Для отображения ситуаций, когда сервис не отвечает или страница не найдена, разработаны экстренные экраны.
Для отображения ситуаций, когда сервис не отвечает или страница не найдена, разработаны экстренные экраны.
Заключение
В рамках проекта «Топ Скоп» была успешно разработана система, полностью отвечающая поставленным задачам. Ключевой функционал, описанный выше, был реализован в полном объёме. Особое внимание уделено юзабилити: продуманный и интуитивно понятный интерфейс делает взаимодействие с системой комфортным для пользователя. Проект готов к внедрению.