QuantCAD — это ПО для моделирования и автоматического проектирования фотонных интегральных схем, разрабатываемый научными сотрудниками и студентами ИТМО. Меня позвали спроектировать интерфейс приложения, чтобы вывести проект в MVP.

В рамках данного проекта я взаимодействовал со вторым дизайнером в команде, с разработчиками и руководителем проекта для сбора требований и ограничений. Проводил анализ конкурентов, строил информационную архитектуру, проектировал Low-fid, работал над компонентами для UI-kit и создавал High-fid, подобрал оптимальную библиотеку для PyQt, презентовал проект на WUD@ITMO.

После общения с заказчиком и сбора требований я с коллегой проанализировал 6 продуктов, среди которых были как прямые конкуренты, так и прочие САПР из других областей.

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

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

В ходе дальнейших обсуждений с заказчиком и разработчиками для этапа MVP оставили только Must и Should фичи.

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

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

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

В связи с ограничениями разработки я нашёл готовую библиотеку компонентов для PyQt в стилистике дизайн-системы Fluent (Windows 11). Это облегчило и ускорило работу не только команде разработчиков, но и нам, сократив время на разработку UI kit“а.

При создании UI kit'а применялся принцип атомарного дизайна, поэтому дизайн-система получилась легко масштабируемой и пережила впоследствии этап MVP.

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

На момент работы над проектом я ещё не был достаточно опытен, чтобы использовать токены. Сегодня я бы собирал систему полностью на токенах.

Так же Figma ещё не имела режима Motion и AI-функции, тогда бы на проработку записи интерфейса ушло бы гораздо меньше времени.