Портфолио
May 16, 2023

Разработка интерфейсов для русско-американского стартапа Wallarm

Интерфейс главной страницы веб-приложения Wallarm

Я проработал в этом русско-американском стартапе немного больше, чем год — с 2018 по 2019. Это был мега-крутой опыт погружения в очень сложную предметную область.

Краткая информация

Прекрасный логотип Wallarm

Русско-американский стартап Wallarm занимается безопасностью сайтов, приложений и API, которые работают в частных или общественных облаках.

Сайт: https://www.wallarm.com

Содержание:

Задача

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

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

Таким меня встретил текущий интерфейс приложения Wallarm:

Это старый интерфейс, но скоро он изменится!

Процесс работы над проектом

И началась кропотливая работа по поиску совершенно нового варианта. Задача усложнялась тем, что стейкхолдеры компании Ваня и Степа жили в Сан-Франциско и разница во времени выливалась в итоге в постоянные ночные созвоны с Америкой.

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

Офис в Хамовниках был наполнен странными гиками-программистами, которые писали приложения на Ruby on Rails и рассказывали очень интересные истории про древние низкоуровневые языки программирования.

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

Что получилось в итоге

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

Новый вариант:

Интерфейс дашборда на английском языке
Интерфейс дашборда на русском языке

Для тестирования на пользователях с помощью Webflow был собран прототип главной страницы, его можно посмотреть по ссылке:

https://wallarm.netlify.app/waf/my/dashboard/equalizer/v3

Рефакторинг раздела Vulnerabilities

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

Теперь этот раздел преобразился:

Списки найденных уязвимостей в новом дизайне

Прототип раздела Vulnerabilities: https://wallarm.netlify.app/waf/my/vulnerabilities/all

Страница найденной уязвимости:

Страница найденной уязвимости

Прототип раздела найденной уязвимости: https://wallarm.netlify.app/waf/my/vulnerabilities/vulnerability

Новая страница регистрации

Сделал несколько вариантов для страницы регистрации:

Вариант попроще
Вариант посложнее

Рефакторинг разделов Users и Integrations

Переосмысление и редизайн двух важных разделов системы:

Раздел Users
Раздел Integrations

Рефакторинг раздела Scanner и его настроек

Сканнер уязвимостей — один из самых главных продуктов Wallarm – ему очень не хватало настроек.

Раздел Scanner

Задачи для отдела маркетинга

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

Поисковый эскиз главной страницы лендинга про непрерывную интеграцию для разработчиков:

Новый стиль для лендингов

Что в итоге

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

Хорошие коллеги из московского офиса Wallarm