Платформа для BIM-проектировщиков Family Manager

Главное о кейсе

As a result of the redesign, the client conducted a survey among 240 active platform users in June 2022. The results compared to previous iterations pleased us: they revealed growth in all significant parameters.

Key figures of the project
Developed 8 user roles;
Solved 200 tasks;
Active product audience of 3,000 design users at the time of release.

We helped the Family Manager team develop a second version of the product and prepare it for a successful public release. The project has been recognized as a model of excellent work for the PIK Group's internal product circuit. We are proud that our interface development now sets the standard in the BIM engineering industry in Russia.

***
По итогам редизайна заказчик в июне 2022 года провел опрос среди 240 активных пользователей платформы. Результаты в сравнении с предыдущими итерациями нас порадовали: выявили рост по всем значимым параметрам.

Ключевые цифры проекта
Проработали 8 ролей пользователей;
Решили 200 задач;
Активная аудитория продукта — 3 000 пользователей-проектировщиков на момент релиза.

Мы помогли команде Family Manager разработать вторую версию продукта и подготовить его к успешному публичному релизу. Проект признан образцом отличной работы для внутреннего контура продуктов группы ПИК. Гордимся тем, что наша разработка интерфейса теперь задает стандарты на рынке BIM-проектирования в России.

Бизнес-задача и ее решение

***Starting: pumping up the home page of the web application
By the time of the first interface task, the project already had a working version and a release cycle lined up. The product owner asked us to think about how we could pump up the home page of the web application. The current layout was crowded with modules, and new ones were already in the pipeline. This suggestion sounded like a challenge, and we took it.

***Main menu and navigation: simulate tabs and trees
Usually we start a project with navigation. But Family Manager already had a cool menu when we plugged in. It remained for us to bring the menu up to date, without fundamentally changing anything. The team's big find is the imitation of browser tabs within the app. It's like sheets in a Google spreadsheet, only tabbed. It turns out that active web application users work with multiple families or other entities simultaneously, move between tabs within tasks, and get excited about this solution.

***Working with Design System
Family Manager is the second project that we did as part of a unified approach to the design of PIK-Project internal loop systems - PIK Start. About the first project you can read here, then we updated and expanded the system. At this stage, we added icons, compiled a local library of components, including tables, and a global guide for further use of the system.

***Changed the way information is presented
We met with the client to discuss what solutions were currently in use and what we should add. Then we took time for initial hypothesis generation: we were interested in the most scalable grid for the entity template. We made three variants from which we chose the winner.

***Conditions for scaling
The main feature of the application is multiple user roles, i.e. it is a complex multi-role system: designers use families and create requests for their development, BIM-masters process these requests and fill the library, BIM-managers adjust information standards, administrators regulate accesses.

The application interface should progressively evolve depending on the role of the user: more rights - more elements and available functions. We started by laying out the basic states of the property page family.

***Refactor tables.
Table is a universal format, they are everywhere and you should design them to further scale the application. We began to organize the types of entities and describe the required modules and contexts of use.

***Application creation: simplifying the process
One of the problems of the first version - the process of request's creation was complicated for users. Everything was in a jumble and it was not clear which data and how to fill them. We discussed the task and decided to try creating a Wizard for request creation. At first we drew a quick prototype to understand how it could look like and whether it would really solve users' difficulties. After a couple of calls and clarification of details we came to the optimal workflow for the request.

***Let's chat: we added chat
The optimized application workflow pulled in another interesting scenario - chat. The family-specific chat includes users discussing new applications and seeing system messages on the approval process.

***Desktop application: scaling up and avoiding limitations
You feel the power of the Family Manager idea when you work with a desktop application. It sits on top of your planner software and updates automatically.

The desktop application is a window into the family catalog that allows you to use the part of the library you need for your project without leaving your workspace. It saves the designer time searching for families and allows you to automatically check families in the project for relevance.

******
ЗАДАЧА
Разработать новый дизайн для веб-приложения. Использовать разработанную ранее дизайн-систему для ПИК Проект

СТАРТ РАБОТ
***Начало: прокачиваем главную страницу веб-приложения
К моменту первой интерфейсной задачи у проекта уже была рабочая версия и выстроен релизный цикл. Владелец продукта попросил нас подумать, как можно прокачать главную страницу веб-приложения. В текущей раскладке модулям было тесно, а на очереди уже были новые. Это предложение прозвучало как вызов, и мы его приняли.

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

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

Дерево семейств настраивается в веб-приложении. Можно создавать папки с любой глубиной вложенности, назначать им картинки, скрывать вспомогательные папки, переносить и копировать семейства.


ДИЗАЙН-СИСТЕМА
***Работаем с дизайн-системой
Family Manager – второй проект, который мы делали в рамках единого подхода к дизайну систем внутреннего контура ПИК-Проект — PIK Start. Про первый проект можно почитать здесь, тогда мы обновили и расширили систему. На этом этапе добавили иконок, составили локальную библиотеку компонентов, в том числе таблиц, и глобальный гайд по дальнейшему использованию системы.

В старой версии дизайна иконки были с стиле fill, то есть с заливкой, и после изменения цветовой палитры они собирались в оранжевое пятно. Попробовали разные варианты и в итоге пришли к outline-стилю. Чтобы не нарушить преемственность интерфейса, сохранили метафоры для основных модулей.

Специфические элементы оставляем в локальной библиотеке компонентов. Общие элементы добавляем в глобальный гайд.

ОСНОВНОЙ БЛОК РАБОТ
***Отрисовали новые макеты для основных экранов
На созвоне с клиентом обсудили, какие решения сейчас в ходу и что надо добавить. Затем взяли время на первичную генерацию гипотез: нас интересовало, какая сетка окажется для шаблона сущности самой масштабируемой. Сделали три варианта, из которых и выбрали победителя.

***Условия масштабирования
Главная особенность приложения — множество пользовательских ролей, то есть это сложная многоролевая система: проектировщики используют семейства и создают заявки на их разработку, BIM-мастера обрабатывают эти заявки и наполняют библиотеку, BIM-менеджеры настраивают информационные стандарты, администраторы регулируют доступы.

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

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

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

***Создание заявки: идем по пути упрощения
Одна из проблем первой версии — процесс создания заявки был сложен для пользователей. Все находилось вперемешку, было далеко не ясно, какие данные и как заполнять. Мы обсудили задачу и решили попробовать сделать визард по созданию заявки. Сначала набросали быстрый прототип, чтобы понять, как это может выглядеть и действительно ли решит затруднения пользователей. После пары созвонов и уточнения деталей пришли к оптимальному рабочему процессу по заявке.

***Давайте пообщаемся: добавили чат
Оптимизированный процесс по созданию заявки потянул за собой еще один интересный сценарий — чат. В чате по конкретному семейству пользователи в том числе обсуждают новые заявки, видят системные сообщения по процессу согласования.

***Десктопное приложение: масштабируем и избегаем ограничений
Вся мощь идеи Family Manager ощущается, когда работаешь с десктопным приложением. Оно ставится поверх софта проектировщика и обновляется автоматически.

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

Для нас десктопное приложение — история про ограничения:

— UI наследуется из приложения, а тот из операционной системы;
—UX уже устаканился, пользователи привыкли к выбранной архитектуре приложения.
Мы помогали команде продукта масштабировать интерфейс приложения, когда появлялись новые функции – причесывали раскладку элементов на странице, подбирали и обрисовывали иконки, рекомендовали ui-элементы из дизайн-системы операционки.

Прочая информация о кейсе

Family Manager — это многоролевая профессиональная платформа для работы с библиотеками BIM-компонентов. Ее используют проектировщики, сметчики, поставщики, разработчики и менеджеры, работающие в сфере строительства.

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

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

Family Manager – один из таких сервисов. Он жизненно необходим для получения качественных информационных моделей, по которым возводятся здания. Это уникальная разработка, у которой нет аналогов по функционалу ни на отечественном, ни на зарубежном рынке.

Запланированный выход на внешний рынок и стал толчком к обновлению интерфейса, так как Family Manager давно перерос первоначальный дизайн.

***

Family Manager is a multi-role professional platform for working with BIM component libraries. It is used by designers, estimators, suppliers, developers, and managers working in the construction industry.

The platform is based on 'families', that is, digital analogues of the physical building element, such as foundations, slabs, columns, walls, piping, equipment, etc. It is a project of our long-time customer, PIK – Russia's largest real estate developer.

PIK creates advanced technological services that allow construction professionals to apply innovative solutions in their work. Together with engineers and designers, PIK is changing everyday life so that we can live in comfortable, safe and environmentally friendly homes.

Family Manager is one such service. It is vital for obtaining high-quality information models by which buildings are erected. This is a unique development, which has no analogues in terms of functionality in either the domestic or foreign market.

The planned entry into the foreign market was the trigger to update the interface, as Family Manager has long outgrown the original design.

***

Скриншоты

Видео