Веб портал
для сети коворкингов
«Топ-скоп»
Роль: Product Designer
Период: апрель, 2026
ГОЛЬЦ ОЛЬГА
О проекте
B2B-портал для администраторов сети коворкингов
Проблема
Рабочие процессы были распределены между разрозненными инструментами:
сложность управления ресурсами и увеличенное количество ручных операций
рост затрат на поддержку
Задача
Спроектировать единую систему для управления посетителями, переговорными комнатами, оборудованием и внутренними процессами коворкинга
Решение
  • Спроектирован веб-портал с единой точкой управления бронированиями, посетителями, оборудованием и мероприятиями

  • В основе решения — анализ конкурентных продуктов, проектирование пользовательских сценариев и создание масштабируемой интерфейсной системы
Результат
  • 25+ экранов веб-портала
  • 4 ключевых пользовательских сценариев
  • 15+ компонентов дизайн-системы
  • Анализ 3 конкурентных решений
  • 2 типа календарного представления
0
1 Контекст
Погружение в задачу
  • изучение брифа и требований
Визуальное направление
  • сбор цветовых палитр, типографики, референсов интерфейсов
  • выбор визуальной концепции: чёткость, порядок, сдержанность
Дизайн
  • разработка дизайн-макетов
  • сбор UI-кита: цвета, типографика, иконки, кнопки, состояния
Проектирование
  • построение User Flow для ключевых и экстренных сценариев
  • проработка композиции каждого экрана
  • создание вайрфреймов
Исследование
  • подбор и анализ аналогов
  • формулирование гипотез по функционалу и интерфейсу
0
2 Этапы работы
Исследованно 3 сервиса:
Платформа для управления коворкинг-пространствами
Nexudus
UnSpot
Система управления офисом
OptiCloud
Облачная платформа для мониторинга и оптимизации производства
Критерии анализа:
структура и навигация
работа с данными
соответствие эвристикам
типографика и палитра
Плюсы
Продуманная иерархия и вложенность
Удобные календари бронирования
Четкое цветовое кодирование статусов
Минусы
Некоторые дашборды перегружены
Слабая цветовая иерархия
Идеи
Блок уведомлений на дашборде
Быстрые действия на Главном
Настройка блоков дашборда под себя
Актуальные статусы у переговорных
Местоположение оборудования
*смотрите в десктопной версии сайта*
*смотрите в десктопной версии сайта*
User Flow
Wireframes
Раздел Презентация
Раздел Оборудование
Раздел Переговорные
Список «не прошли обучение»
Поиск нужной позиции
Просмотр календаря
Провести презентацию
Изменение статуса
Удалить
Изменить
Выбор тарифного плана
Выбор посетителя
Управление позицией
Клик на плашку брони
Заполнение формы
Добавить посетителя
Раздел Посетители
Главный экран Дашборд
0
3Анализ конкурентов
0
4 Проектирование
  • Общая информация по статусу позиций в %
  • Чек-боксы
  • Таблица с последними обновлениями статусов
*смотрите в десктопной версии сайта*
Главный экран / Дашборд
Настраиваемые блоки фокусируют на главном
Главные CTA всегда под рукой
  • Нет необходимости переходить в колокольчик
  • Поиск + фильтрация
Форма + нового посетителя
После заполнения формы и сохранения, появляется строка с новым клиентом и статусом «ожидание оплаты»
Фильтры
  • Поиск + фильтры сотрудников
  • Кнопки для быстрой связи
  • Быстрый поиск и связь с клиентами
  • Поиск + фильтры
  • Статусы переговорных
  • Подсказки при ховере
  • Таблица с расписанием
  • Подсказки при ховере
  • Выбор периода
  • Столбчатая диаграмма/тепловая карта
Раздел «Посетители»
0
5 Дизайн макетов
Раздел «Переговорные»
Раскрытые фильтры
Форма новой брони
Детали брони при нажатии
Пояснения по ховеру
Пояснения по ховеру
Раскрытый вид визуализации календаря с расписанием:
  • появляется временной промежуток брони
  • имя клиента
  • иконки оборудования
Переговорные филиала:
  • актуальные статусы
  • вместимость + оборудование
  • чек-боксы работают, как фильтры
Раздел «Оборудование»
Раскрытые фильтры
Через « ··· » раскрывается панель редактирования
Графа «Местоположение»:
информирует о точном нахождении оборудования
Раздел «Презентация»
В этом разделе администратор видит, кто из клиентов уже прошёл обучение, а кто еще нет
«Поделиться памяткой» — для отправки правил клиенту
Вид таблицы «Не прошли» отображает список клиентов, не прошедших обучение
«Провести презентацию» выводит на экран чек-лист
Полностью заполненный чек-лист + завершение обновляют статус у клиента
0
6 Design System
Inter
Regural
Semibold
Bold
Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ Ъъ Ыы Ьь Ээ Юю Яя
1 2 3 4 5 6 7 8 9 0 ! / ? . , - + = : % * « »
10%
#6B4EFF
Акцентный: кнопки, иконки, графики
30%
#F6F5FF
Второстепенный фон карточек/плашек
60%
#FFFFFF
Основной фон
Работа включала
  • исследование конкурентных решений
  • проектирование пользовательских сценариев
  • создание wireframes
  • структурирование контента и наполнение макетов
  • разработку визуальной системы
  • дизайн макетов
Как результат:
Разработано 15+ компонентов дизайн-системы
Проработано 4 ключевых пользовательских сценариев
Проанализировано 3 конкурентных решения
Спроектировано более 25 экранов веб-портала
Дальнейшее развитие продукта могло бы включать
  • проведение пользовательских интервью с администраторами коворкингов
  • тестирование рабочих процессов на реальных пользователях
  • внедрение аналитики для оценки эффективности решений
0
7 Заключение
В рамках проекта был спроектирован B2B-портал для управления операционными процессами сети коворкингов
Благодарю
за внимание
Апрель 2026
Гольц Ольга
Product Designer
@olyagolts
Made on
Tilda