Интерфейс приложения визуальной LowCode среды разработки • Диполь

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

Компания Диполь с 1992 года занимается комплексным оснащением и переоснащением предприятий радиоэлектроники и машиностроения, научно-производственным консалтингом и повышением эффективности производства.

Компания пришла к нам с задачей доработать интерфейс десктопного приложения.

Задача бизнеса:
Вывести на рынок десктопное приложение визуальной LowCode среды разработки программ для автоматизации процессов измерений, испытаний, межоперационного и выходного контроля и др.

Задача дизайна:
Обновить дизайн существующего решения, которое используется внутри компании:

- провести анализ существующего решения;
- продумать UX и UI-решения;
- создать детальные макеты интерфейса в дизайне;
- создать единую библиотеку используемых компонентов с описаниями.

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

Результат:

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

Передали заказчику макеты отдельных частей приложения и собранные на их основе экраны в различных состояниях.Также заказчик получил библиотеку компонентов и удобную настройку цветовой схемы (светлая / тёмная).


Since 1992, the Dipol company has been engaged in the comprehensive equipping and re-equipping of enterprises in the electronics and mechanical engineering industries, scientific and production consulting and improving production efficiency.

The company came to us with the task of improving the interface of the desktop application.

Business goal:
Bring to the market a desktop application of a visual LowCode environment for developing programs for automating the processes of measurements, testing, interoperational and output control, etc.

Design goal:
Update the design of an existing solution that is used within the company:

- analyze the existing solution;
- think over UX and UI solutions;
- create detailed interface layouts in the design;
- create a single library of used components with descriptions.

One of the important points was that the client wanted the location of all application elements and functionality to be taken as a basis. That is, they wanted experienced users who had previously worked with the product to be able to quickly navigate it natively, even in the updated interface.

Result:

The client received an updated and supplemented interface, developed taking into account the future functionality of the application.

We gave the client layouts of individual parts of the application and screens assembled on their basis in various states. The client also received a library of components and a convenient color scheme setting (light / dark).

Как проект изменил жизнь пользователей

Интерфейс стал более современным (дизайнеры не стали изобретать велосипед и ориентировались на похожие решения мировых компаний), в уже существующие и обновленные части приложения был “втиснут” функционал, которого не хватало.

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

The interface has become more modern (the designers were guided by similar solutions from global companies), the functionality that was missing was “squeezed” into the existing and updated parts of the application.

Due to the reduction in the number of elements such as shadows, outlines, etc., the interface turned out to be lighter and more “readable”.

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

Вывести на рынок десктопное приложение визуальной LowCode среды разработки программ для автоматизации процессов измерений, испытаний, межоперационного и выходного контроля и др.

Обновленный интерфейс снизил порог входа и уменьшил когнитивную нагрузку, при это сохранил существующий функционал, остался гибко настраиваемым в зависимости от роли пользователя (администратор, инженер, оператор).
Это позволит компании предлагать продукт широкой аудитории и занять одно из лидирующих мест на рынке.

Bring to market a desktop application of a visual LowCode environment for developing programs for automating processes of measurements, testing, interoperational and output control, etc.

The updated interface has lowered the entry threshold and reduced the cognitive load, while retaining the existing functionality, and remains flexibly configurable depending on the user's role (administrator, engineer, operator).
This will allow the company to offer the product to a wide audience and take one of the leading places in the market.

Крафт (мастерство), реализация, технические детали

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

We assemble layouts on components in figma, make interactive prototypes, write comments, logically organize the flow and keep the files clean and tidy.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Помимо макетов различных состояний приложения, библиотеки компонентов, заказчик получил флоу некоторых действий на экране (например, работа с панелью канвас - часть экрана на котором создается схема для проектирования и тестирования системы. Или работа с панелями “Свойства” и “Инструменты”).
Такие флоу помогли заказчику показать как будут работать части приложения еще до начала переноса обновленного дизайна в приложение, что поможет разработчикам приложения и пользователям лучше понять как стоит взаимодействовать с продуктом.

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

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


In addition to the layouts of various application states, the component library, the client received a flow of some actions on the screen (for example, working with the canvas panel - a part of the screen on which a diagram is created for designing and testing the system. Or working with the "Properties" and "Tools" panels).
Such flows helped the client show how parts of the application would work even before the updated design was transferred to the application, which will help the application developers and users better understand how to interact with the product.

Intermediate results were shared with the client directly in the working file in Figma, since the project implied frequent adjustments and making changes, and copying to a separate file for the client could entail additional difficulties. This decision was made correctly, since there were no additional time costs for making adjustments to the file for the client and checking versions.

To complete the work on time, a second designer was involved in the second part of the UX design work. And this gave a result not only in the speed of execution of works, but also in the fact that the new designer brought fresh ideas that the client wanted to introduce into the existing panels. In particular, the client liked the implementation of the step-by-step flow for the panel. It allowed us to study how the functionality of the panel works and how to work with it.

Скриншоты