Virto Kanban Board — приложение для управления задачами и проектами по методу Kanban. Оно работает внутри SharePoint и Microsoft Teams: команды ведут доски, карточки задач, сроки и статусы прямо там, где уже общаются и хранят документы. Перед нами стояла задача сделать редизайн продукта: проанализировать текущий интерфейс и функциональность, обновить визуальный стиль и подготовить адаптивные версии для компьютера и телефона.
Дизайн SaaS-приложения, которое встраивается в чужую экосистему, — особая задача. Интерфейс не должен выглядеть чужеродным внутри Teams и SharePoint, поэтому мы строили концепцию строго по Microsoft UI Kit: системный шрифт Segoe UI, привычные элементы управления, сетка и отступы как в продуктах Microsoft. Пользователь открывает доску и сразу понимает, как с ней работать, без обучения.
Kanban-доска — это много информации на одном экране: колонки, карточки, исполнители, сроки, приоритеты, метки. Главная задача UI/UX дизайна здесь — сохранить плотность данных и при этом не перегрузить экран. Мы выстроили иерархию в карточке задачи, выделили статусы цветом и упростили навигацию между досками, фильтрами и отчётами.
Палитра собрана на тёмном графитовом фоне с яркими акцентами: синий, голубой, оранжевый, красный и зелёный обозначают статусы и категории задач. Тёмная тема снижает нагрузку на глаза при долгой работе, а цветные метки позволяют за секунду найти нужные задачи на большой доске.
Отдельно продумали светлую тему: она нужна компаниям, которые используют стандартное светлое оформление Microsoft 365. Обе темы работают во всех разделах продукта и на всех устройствах, а переключение не ломает привычную раскладку экранов.
Мы обновили все ключевые разделы приложения: доски и колонки, карточку задачи, фильтры, календарь, отчёты и статистику с круговыми диаграммами. Новые версии экранов учитывают все требования заказчика и технические ограничения платформы SharePoint, поэтому дизайн сразу готов к разработке.
Большая часть пользователей Microsoft Teams открывает рабочие чаты с телефона, поэтому мобильной версии уделили особое внимание. Kanban-доска на маленьком экране превращается в ленту карточек с быстрым переключением колонок, а статистика и календарь адаптированы под управление одной рукой.
Продукт работает по единой лицензии во всех платформах Microsoft, и дизайн поддерживает эту идею: интерфейс одинаково узнаваем в SharePoint, в Teams и в мобильном приложении. Пользователь переходит между устройствами и видит ту же доску и те же карточки.
Для передачи в разработку мы подготовили макеты всех экранов в тёмной и светлой темах, мобильные версии, палитру с кодами цветов и правила типографики. Разработчики получили полный набор материалов и могли реализовать интерфейс без постоянных уточнений.
UI/UX дизайн веб-приложений, SaaS-платформ и корпоративных сервисов — одно из направлений студии Onebanan. Мы проектируем интерфейсы для B2B-продуктов, CRM, дашбордов и приложений под Microsoft 365. Подробнее о том, как мы делаем дизайн SaaS-платформ, — на странице услуги.
© Onebanan Digital Agency.
