Редизайн клиентского портала для российского провайдера облачных сервисов кибербезопасности и ускорения — NGENIX Multidesk

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

NGENIX Multidesk — это панель управления облачными сервисами. Пользователи Multidesk — это админы крупнейших российских веб-ресурсов.

Благодаря работе NGENIX, сайты Пятёрочки, Ozon, Почта Банка, Контур Фокус, Ингосстраха и других крутых сервисов работают быстро, не падают и выдерживают DDoS-атаки.

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

Чтобы упростить и ускорить работу платформы для конечных пользователей, NGENIX решили обновить продукт, основываясь на полученной обратной связи.

NGENIX Multidesk — это ресурс, который активно используется клиентами компании. Поэтому разработку нового портала и поддержку старого нужно было вести параллельно, а переезд на новый интерфейс провести так, чтобы ничего не упало и пользователи не страдали.
___
NGENIX Multidesk is a cloud services control panel. Multidesk users are admins of the largest Russian web resources. Thanks to NGENIX, the websites like Ozon, Pochta Bank, Contour Focus, Ingosstrakh and others load quickly, do not crash and withstand DDoS attacks.

The system is constantly growing and scaling. So the new categories of services required the modernization of management interfaces.

In order to simplify and speed up the platform for end users, NGENIX decided to update the product based on the received feedback.

Multidesk is a platform that is actively used by NGENIX clients. Therefore, the development of the new platform and the support of the old one had to be carried out in parallel.

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

После изменения структуры мы получили прозрачность и понимание того, как работают все сервисы. Это ускорило внедрение новых фич примерно на треть.

Параллельно с внедрением редизайна мы поддерживаем старую версию платформы со всей функциональностью до полного перехода на новый дизайн, который запланирован на первый квартал 2024 года.


Также сделали структуру NGENIX Multidesk удобнее и прозрачнее для пользователей. На данный момент процесс редизайна ещё не завершен. Влияние изменений на удовлетворенность пользователей можно будет оценить позднее.
___
Due to the change in the project structure, we gained greater transparency and understanding of how all the platform services work. This reduced the development time by a third.

We are continuing to support the old version of the platform with all the functionality until the complete transition to the new design.


We also made the NGENIX Multidesk structure more convenient and transparent for users.

The process is still ongoing so the impact of the redesign on user satisfaction can be assessed later. The release date for this redesign is first quarter of 2024.

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

Нашей целью стала разработка новой системы Multidesk 5.0, которая бы позволяла постоянно расширять функциональность и добавлять новые экраны и сервисы.

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

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

Разработали front-end платформы и сделали миграцию из старой архитектуры в новую, при этом сохранив консистентность и оставив логику компонентов для корректной связи с другими порталами NGENIX.

Клиент вместе с командой Аспирити продолжает активно разрабатывать новую версию NGENIX Multidesk. Переход со старой версии ещё не завершён, поэтому работы над двумя порталами Multidesk ведутся параллельно.

Мы также увеличили скорость автоматического тестирования новой функциональности в 3 раза и ускорили саму разработку автотестов.
___
Our goal was to develop a new Multidesk 5.0, a system that would be easily expandable and support adding new functionality, screens and services.

Task list:
— Refactoring of the entire project: transferring all of the functionality from the product launch to the new interface and connecting it to the backend.
— Integrating new functionality into the interface.
— Working out the logic of the components and making the platform structure more convenient and transparent for users.
— Redesigning and creating a new design system that will ensure the scalability of the project and improve UX.

As a result, we described and structured the logic of the design system to make the development process more transparent and predictable. It also allowed us to increase the speed of creating new features, modules and interface pages and reduce the cost of development.

We developed front-end platforms and migrated from the old architecture to the new one, while maintaining consistency and leaving the logic of components for correct communication with other NGENIX portals.

We have also increased the speed of automatic testing of new functionality by 3 times and accelerated the development of autotests itself.

The client, together with the Aspirity team, continues to actively develop a new version of NGENIX Multidesk. The transition from the old version has not yet been completed, so work on the two Multidesk portals is underway in parallel.

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

РЕДИЗАЙН
Использование интерфейса стало сложнее для новых пользователей платформы и влияло на время онбординга. Поэтому нужно было переосмыслить весь UI и UX.

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

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

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

РАЗРАБОТКА
Основная задача команды — сделать всё так, чтобы когда настройки сервиса были изменены пользователям, эти данные ушли в API и корректно обрабатывались на стороне бэкенда.

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

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

Это позволило нам не писать новую версию Multidesk с нуля. Часть старого кода мы перерабатываем, часть перевозим полностью в неизменном виде. Получается, что мы практически бесшовно перевозим портал из старой архитектуры в новую, при этом оставляя и расширяя функциональность сервиса так, чтобы сохранить консистентность и не навредить связанным с NGENIX Multidesk порталам (Admindesk и Partnerdesk).

Так как NGENIX Multidesk используют реальные пользователи, важно минимизировать ошибки и выпустить работающий компонент с первого раза. Поэтому любое изменение кода проходит несколько кругов тестирования.

ТЕСТИРОВАНИЕ
Для полноценной проверки работы Multidesk мы написали около 800 UI автотестов. Заранее сделанный UI-кит позволил определить и унифицировать все элементы системы, что помогло автоматизатору начать готовить тестовый фреймворк и запустить проверки заранее. Их скорость прогона ограничена лишь скоростью работы серверов, и даже с учётом этого факта, нам удалось сократить общее время выполнения тестов до 1,3 часа. При последовательном запуске раньше весь процесс занимал около 6 часов.

Это позволило существенно снизить нагрузку на мануальных тестировщиков и сосредоточить их работу в первую очередь на проверке новой функциональности.
___
REDESIGN
Using the interface became more difficult for new users of the platform and affected the onboarding time. Therefore, it was necessary to rethink and redesign the entire interface.

We organized the interface elements, created a design system with guidelines, and also created a UI kit with a list of all the necessary states.

We have created a template to easily assemble the necessary elements into modules and start developing them with minimal designers involvement. This will help roll out new features faster than before.

We also redesigned the navigation based on user feedback. We divided the list of services according to a clear structure so that all of them would be logically located. This made it easier for users to find the right service.

DEVELOPMENT
The main task is to make data going to the API and to be processed correctly on the backend side even when the service settings are changed to users.

Our team uses a copy of the environment with a backend on demo stands. It allows us to launch the platform and see how the admin panels work.

In the last four years of the platform's development, the main focus has been on the rapid delivery of new features. At the same time, we constantly updated the application and reworked the old code in components, simplifying the logic and bringing it in line with current development requirements.

This allowed us to reuse the old code instead of writing it from scratch. We are almost seamlessly transporting the platform from the old architecture to the new one, all while leaving and expanding the functionality of the service. It helps to maintain consistency.

Since NGENIX Multidesk is used by real-time users, it was important to minimize errors and release a working component the first time around. Thus, any code change had to go through several rounds of testing.

TESTING
To fully test Multidesk, we have written about 800 UI autotests. A pre-made UI kit made it easier to identify and unify all elements of the system, which helped the QA Automator to start preparing a test framework and run tests in advance.

Tests running speed is limited only by the speed of the servers, but we managed to reduce the total test execution time to 1.3 hours. When running sequentially before, the whole process took about 6 hours.

This made reducing the burden on manual testers possible.

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

«Очень интересно работать над постоянно развивающимся проектом, который стремится быть быстрее и удобнее для пользователей. На мой взгляд, это стремление также развивает и нашу команду, что повышает скорость разработки и качество конечного продукта».
Сергей Красков, senior QA engineer в Аспирити

Скриншоты

Комментарий заказчика

Мы давно работаем с Аспирити в части разработки пользовательских интерфейсов для наших продуктов. Коллеги имеют серьезный уровень экспертизы в UX и фронтенд-разработке и обеспечивают масштабирование команды под наши потребности.

Удобство использования нашего клиентского портала и простой онбординг новых пользователей очень важны для NGENIX в условиях быстрого роста бизнеса и постоянно растущих потребностей заказчиков, и мы доверили часть масштабного проекта по улучшению опыта использования нашей платформы команде Аспирити.