> ## Content Index
> Fetch the complete content index at: https://nevsky.ae/llms.txt
> Use this file to discover other available public pages before exploring further.

# Обновлял приложение Wallarm Cybersecurity App
- URL: https://nevsky.ae/cv/works/wallarm-cybersecurity-app-cv/
- Published: 2019-11-05T08:00:00.000Z
- Updated: 2026-05-21T12:19:43.000Z
- Description: Wallarm стал быстрее и понятнее: единый язык компонентов, умные таблицы и метрики риска, чтобы видеть главное и действовать сразу
- Author: Александр Невский
- Tags: Продуктовый опыт, Дизайн и цифровые продукты

*Сентябрь 2018 — Сентябрь 2019*   
Продуктовый дизайнер

🫡Работал в Wallarm **c сентября 2018 по сентябрь 2019 года** продуктовым дизайнером

### Процесс работы

Я занялся «расшивкой узких мест» в продукте Wallarm — платформе кибербезопасности для защиты API (application programming interface) и веб-приложений. 

Пересобрал логику UX *(user experience),*  навёл порядок в старом UI *(user interface)* и параллельно запустил полноценную дизайн-систему: библиотеку компонентов + систему семантических токенов, синхронизированную с фронтендом. 

![](https://storage.ghost.io/c/c3/b4/c3b47bf9-b397-4fd6-898c-a34ffdda20bc/content/images/2026/05/wallarm-cybersecurity-app-cv__01.png)

В кибербезопасности главное — быстро отличать шум от сигнала. Я сфокусировался на потоке инцидентов: от сырого трафика и алёртов к понятной картине атаки, её приоритету и следующему действию. Интерфейс стал «операторским»: меньше кликов, лучше обзор, ясные статусы и сценарии отклика. 

![](https://storage.ghost.io/c/c3/b4/c3b47bf9-b397-4fd6-898c-a34ffdda20bc/content/images/2026/05/wallarm-cybersecurity-app-cv__02.png)

### Что сделал по продукту

- **Рефакторинг UX:**  переработал навигацию, сценарии триажа и приоритизации инцидентов, собрал единый маршрут «наблюдение → инцидент → ответ».
- **Редизайн UI:**  унифицировал таблицы, карточки и таймлайны событий, добавил скелетоны, пустые состояния и предиктивные подсказки.
- **Дизайн-система:**  собрал библиотеку компонентов (таблицы с агрегациями, фильтры, policy-editor, логи, диффы, YAML/JSON-viewer), описал состояния и вариативности.
- **Семантические токены:**  цвета, тени, бордеры, типографика, интерактив — через токены, экспортируемые во фронт (CSS variables/TypeScript), чтобы дизайн и код оставались в синхроне.
- **Визуальная аналитика:**  читабельные графики, статус-бэйджи и риск-метки, чтобы быстро видеть, **что** случилось и **что делать дальше**.

![](https://storage.ghost.io/c/c3/b4/c3b47bf9-b397-4fd6-898c-a34ffdda20bc/content/images/2026/05/wallarm-cybersecurity-app-cv__03.png)

### Итог

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

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

*Еще некоторые экраны:* 

![](https://storage.ghost.io/c/c3/b4/c3b47bf9-b397-4fd6-898c-a34ffdda20bc/content/images/2026/05/wallarm-cybersecurity-app-cv__04.png)

![](https://storage.ghost.io/c/c3/b4/c3b47bf9-b397-4fd6-898c-a34ffdda20bc/content/images/2026/05/wallarm-cybersecurity-app-cv__05.png)

![](https://storage.ghost.io/c/c3/b4/c3b47bf9-b397-4fd6-898c-a34ffdda20bc/content/images/2026/05/wallarm-cybersecurity-app-cv__06.png)

![](https://storage.ghost.io/c/c3/b4/c3b47bf9-b397-4fd6-898c-a34ffdda20bc/content/images/2026/05/wallarm-cybersecurity-app-cv__07.png)

![](https://storage.ghost.io/c/c3/b4/c3b47bf9-b397-4fd6-898c-a34ffdda20bc/content/images/2026/05/wallarm-cybersecurity-app-cv__08.png)

![](https://storage.ghost.io/c/c3/b4/c3b47bf9-b397-4fd6-898c-a34ffdda20bc/content/images/2026/05/wallarm-cybersecurity-app-cv__09.png)