Вернули дух азарта и соревнований: как мы перезапустили крупнейший рейтинг хакеров в стране. Кейс Crauch
Привет! На связи Антон Кравченко, CEO студии Crauch. В статье расскажу, как мы сделали платформу, где белые хакеры могут соревноваться, расти и зарабатывать, а компании — находить лучших спецов в кибербезе. Это история о том, как поиск уязвимостей превращается из проблемы в победу для всех.
Мы — Crauch, студия продуктового дизайна
Безумцы, фанатики, работяги. Делаем сервисы и приложения, которыми вы, скорее всего, уже пользовались — просто не знали, что это наших рук дело:)
За плечами — интерфейсы для Avito, VK, Яндекса, Dodo, HeadHunter, МТС, Positive Technologies, iSpring и других бигтехов. Входим в ТОП-20 студий дизайна России и метим в первую десятку
Итак, сегодня история о том, как вместе с ребятами из SALT AND PEPPER (SNP) мы сделали крупнейшую рейтинг-платформу для белых хакеров, где специалисты соревнуются за место в рейтинге, а бизнес может понять свои уязвимости в кибербезопасности. В основе платформы — сильная продуктовая логика, функционал, которого нет у конкурентов и вовлекающий дизайн. Мы отвечали за проектирование и дизайн, а SNP за разработку.
Название заказчика нам говорить нельзя
Проект под NDA. Но о сути продукта расскажем и даже покажем скрины.
Итак, это платформа, где встречаются бизнес и белые хакеры. Компании публикуют задания (внутри их называют «программами») по проверке безопасности своих сервисов.
А специалисты по кибербезу ищут уязвимости, оформляют отчеты и получают вознаграждение — чем критичнее найденная ошибка, тем больше выплата.
По сути это агрегатор, который соединяет компании и исполнителей. У хакеров есть личный кабинет: можно откликаться на задания, вести историю отчетов, общаться с заказчиками. Но в проекте мы отвечали только за публичную часть — ту, что видят вообще все.
Что было не так с платформой
Поиск там работал только по нику, и найти нужного специалиста было сложно — попробуй угадай, под каким именем прячется профессионал. Рейтинговая система не вызывала доверия: никто толком не понимал, за что начисляют баллы и как вообще можно подняться в списке.
В итоге одни программы (то есть задания) моментально собирали десятки откликов, а другие так и оставались без внимания. Платформа не умела управлять этим потоком — все зависело от случая и личных предпочтений специалистов.
При этом сами программы были разного типа: одни с денежным вознаграждением, другие — чисто репутационные, где взамен хакер получал только рейтинг и признание. Понятно, что второй формат популярностью вообще не пользовался.
Без новой механики вовлечения платформа будет буксовать. Нужно было не просто «освежить интерфейс», а выстроить заново систему стимулов — чтобы она вызывала азарт, давала ощущение роста и работала одинаково хорошо для обеих категорий заданий.
Багхантеры, СБшники и HR
У платформы две целевые аудитории — бизнес и хакеры. И у каждой своя мотивация.
Бизнес — это HR, специалисты по безопасности и менеджеры. Им нужен специалист, который не просто «найдет пару багов», а даст конкретные рекомендации, как сделать систему надежнее. Плюс им важно иметь на руках всю нужную информацию о специалисте, чтобы понять, можно ли ему доверить проверку.
Хакеры приходят на платформу, чтобы хорошо зарабатывать. Для этого нужно быть на виду: чем выше ты в рейтинге, тем больше у тебя заказов и внимания от компаний. Поэтому им важно честное ранжирование в рейтинге, основанное только на их скиллах и опыте — и возможность вырваться в первые строчки.
Получается, что платформа стоит на границе двух миров: с одной стороны, она должна выглядеть серьезно и профессионально для бизнеса, с другой — быть живой, соревновательной и фановой для хакеров.
Анализ конкурентов и влияние геймерских интерфейсов
Смотрели не только багбаунти-сервисы, но и геймерские дашборды, киберспортивные трекеры и даже игровую статистику. Все — чтобы понять, как устроены рейтинги, как визуализируют прогресс и как управляют азартом, не превращая все в шоу.
Мы разобрали HLTV, Speedrun, League of Graphs, Fortnite Tracker, интерфейсы в Dota 2, FIFA и других соревновательных платформах. Обратили внимание, как там подается динамика: кто тебя догоняет, насколько стабильно ты держишься в топе, где теряешь позиции. Все это не просто «красивые метрики», а эмоциональный триггер.
В играх мы подсмотрели классные приемы, как показывать прогресс так, чтобы реально хотелось двигаться дальше — графики, всплески, подсветка достижений. Но тут важно не скатиться в мультяшность.
После дискавери перед концепцией мы конечно же первым делом запроектировали все страницы и состояния.
Дизайн-концепт
В Crauch этап дизайн-концепции — это технологически отточенный процесс. Перед тем как рисовать концепт, мы всегда начинаем с мудбордов — это точка синхронизации с клиентом по визуальному направлению. Обычно мы собираем 2–3 варианта с разными стилистиками, для каждого придумываем название, подбираем ключевые слова и описываем визуальные приемы.
Так клиент видит, в какую сторону может развиваться проект, а мы убеждаемся, что одинаково понимаем эстетику будущего продукта. После выбора направления переходим к отрисовке концепта.
Итак, сперва собрали мудборды из референсов — на стыке гейминга, кибербеза и современного цифрового дизайна. С заказчиком поняли, что хотим объединить «Игровой и специалитетный» и «Минималистичный и современный» мудборды вместе.
Дальше погнали рисовать концепцию:
А вот некоторые невошедшие варианты концепции:
Что же у нас получилось в итоге
На этой основе у нас получился стиль, в котором аккуратно сочетаются технологичность и легкая геймификация. Цвета взяли из старой версии сайта — синий и фиолетовый — и докрутили палитру яркими акцентами, чтобы все заиграло по-новому. Для графиков и аналитики добавили градиенты — они создают ощущение движения.
В целом мы старались сохранять чистоту — структура выстроена так, чтобы важное всегда было на виду, при этом не было лишнего шума. Профиль хакера задумывался как портфолио — чтобы им можно было гордиться, делиться и наблюдать свой рост.
Переосмыслили личную карточку хакера
Как уже писал выше, задача была сделать не просто аккаунт, а портфолио, которое можно показать заказчику или скинуть в виде PDF. Чтобы оно не только отражало опыт, но и мотивировало прокачиваться внутри платформы.
Сразу в шапке видно все важное: специализация, сферы, в которых работает хакер, позиция в рейтинге, описание, контакты. Ничего лишнего, но и не приходится рыскать по разделам в поисках нужной инфо. Все на месте, чтобы заказчику можно быстро составить впечатление.
Мы добавили визуализацию прогресса — графики с историей роста, полученными баллами и ачивками. Это помогает хакеру видеть свой путь и вдохновляет двигаться дальше. Особенно если знаешь, что потенциальные заказчики тоже это видят.
Плюс встроили диаграмму компетенций — на ней видно, какие скиллы у хакера развиты сильнее. К примеру, если заказчику нужно протестировать API, он с первого взгляда увидит, что конкретный спец фокусируется именно на таких задачах и стабильно их закрывает.
Еще мы добавили круговую диаграмму по отчетам. Она показывает: сколько отчетов принято, сколько отклонено, сколько ушло в спам или вне скоупа. Это дает быстрое понимание, насколько качественно работает хакер и какие типы багов у него проходят модерацию.
А чтобы профиль выглядел как живая история, мы встроили блок с «новостями пользователя». Это как лента в соцсетях: сюда может попадать все — от новых достижений и перехода в топ-10 до обновлений профиля или свежих отчетов. Если хакер добавил ссылки на свои соцсети, публикации или медиаупоминания, они тоже могут отображаться в новостях.
Ачивки: перезапускаем мотивацию
Ачивки — это как небольшие цели, за которые можно получить бонусы, баллы и визуальные плюшки. Кто-то получает их за стабильность и аккуратность в отчетах. Кто-то — за то, что ловит редкие типы уязвимостей. Кто-то — за активность во время ивентов или участие в программах определенного вендора.
Представим, что на платформу заходит компания «Рога и копыта». У нее нет бюджета на выплату вознаграждений, но она все равно хочет привлечь хакеров к работе. Для этого она может предложить им свою уникальную ачивку — кастомную, фирменную, с хорошим количеством баллов.
Для хакера это возможность попасть в профиль к вендору и подняться чуть выше в рейтинге, а для бизнеса — способ привлечь заинтересованных ребят.
Ачивки бывают разные: глобальные, специалитетные, от вендоров, ивентовые и даже «бустеры» — временные бонусы, которые ускоряют продвижение по рейтингу.
А чтобы это все не превращалось в хаос, в будущем мы планируем добавить возможность выбирать одну фокусную ачивку — как в играх вроде WoW.
Рейтинг: инструмент навигации и роста
Мы хотели, чтобы рейтинг в проекте был не просто «таблицей лучших», а полноценной точкой входа и для заказчиков, и для хакеров. Он показывает не только место в списке, но и дает максимум контекста: кто твои конкуренты, в чем они сильны и как быстро продвигаются.
У каждого участника в рейтинге видна краткая сводка: стек технологий, индустрии, с которыми он работает, последние достижения и статистика по отчетам. Все это дает быстрое понимание, кто перед тобой: новичок, стабильный исполнитель или восходящая звезда, которая вот-вот вырвется в топ
Рейтинг работает и как социальный слой. На любого участника можно подписаться — тогда ты будешь получать уведомления о его активности: когда он получил новую ачивку, ворвался в топ или опубликовал что-то новое. Это удобно не только для HR, но и для других хакеров, особенно начинающих — появляется ощущение, что ты в комьюнити.
Еще одна крутая идея — разделение рейтинга по грейдам. Не всем интересно соревноваться с «вечными топами», особенно если ты только начинаешь. Поэтому мы предусмотрели возможность выделять лучших среди новичков, середнячков и профи.
Фильтрация и сравнение: как найти своего хакера за пару минут
Мы добавили фильтры по четырем параметрам — специализация (скоуп), индустрия, ранг и количество принятых отчетов. Можно задать нужные критерии, получить релевантную выборку — и сразу увидеть тех, кто подходит.
Но на этом не остановились. В рейтинг встроено сравнение хакеров по скиллам. Работает как корзина в маркетплейсах: добавляешь нескольких участников, и внизу экрана появляется «островок» — оттуда можно открыть сравнение.
В нем видно, у кого какие компетенции сильнее, в каких индустриях больше опыта и кто выше в рейтинге. Плюс — одним кликом можно отправить запрос на сотрудничество сразу нескольким хакерам из подборки. И это уже не просто рейтинг, а полноценный инструмент найма.
В рейтинге видно, кто растет, а кто держит планку
Визуально мы разделили тех, кто стабильно в топе, и тех, кто резко вырвался вперед. Первые три места подсвечены как пьедестал: золото, серебро и бронза. Но чтобы замотивировать и остальных, мы добавили новую механику.
Если пользователь, например, поднялся сразу на 20 позиций за неделю — его профиль обрамляется огненной рамкой. Он может быть и не в тройке, но платформа показывает: этот человек сейчас ну супер активный.
Такая логика геймификации работает и на вовлечение новичков, и на удержание старичков. Ведь теперь просто нафармить баллы и отдыхать не выйдет — система рейтинга под капотом считает активность за последние месяцы, и при простое баллы начинают «усыхать». Так что мотивация работать с отчетами остается у всех, неважно, на каком ты месте сейчас.
О математической модели рейтинга
Ее разработали талантливые ребята из SNP. Она состоит из нескольких показателей и учитывает «усыхание» — то есть со временем рейтинг немного снижается, если человек перестает быть активным. Так мы поощряем регулярную работу на платформе.
Всего при расчёте рейтинга используется 19 параметров, 4 взаимосвязанных формулы и 3 коэффициента веса для параметров. Повторяем для более 10 тысяч хакеров в системе, сортируем по убыванию и всё — рейтинг готов. А теперь немного подробнее про математику человеческим языком.
Базовый рейтинг. Основу рейтинга составляют результаты работы — сколько отчетов принято, отклонено или отмечено как спам, и насколько серьезные уязвимости были найдены. Для расчёта используется 12 параметров, проиндексированных в зависимости от важности для рейтинга..
Коэффициент активности. Показывает, насколько регулярно хакер взаимодействует с платформой. Если долго нет новых отчетов, коэффициент постепенно снижается по экспоненте:
Рейтинг достижений. Каждое достижение (ачивка) имеет свой вес, который со временем уменьшается — чтобы рейтинг отражал актуальные результаты. Так хакер мотивируется поддерживать форму и регулярно получать новые достижения.
Нормализация. Чтобы привести итоговые значения к удобной шкале, используется логарифмическая нормализация — все рейтинги «сжимаются» в диапазон от 0 до 1000.
Кстати, модель универсальна — ее можно использовать не только для общего рейтинга, но и для отдельных направлений: по индустриям, скоупам или платформам.
Первые сборки рейтинга делали локально — процесс съедал 16 Гб оперативы и занимал около 10 минут. Скорость была не критична, а вот ресурсы надо было экономить. Мы переписали процесс сборки и в несколько итераций оптимизировали код.
В итоге рейтинги собираются за 15-20 минут, а съедают в 4+ раза меньше ресурсов. Вся система с фронтом и беком стабильно работает на самом базовом сервере — 2 ядра/4 Гб ОЗУ.
А что в итоге?
У бизнеса теперь есть все инструменты, чтобы быстро находить подходящих специалистов: рейтинг, фильтры, сравнение по навыкам, профиль-портфолио. А у хакеров — понятная система роста, ачивки, баллы, мотивация заполнять отчеты и прокачиваться.
Мы вместе с командой заказчика собрали MVP, провели очную презентацию перед фокус-группой из белых хакеров и безопасников. Показали прототип, собрали обратную связь, получили хорошие отзывы — в том числе за внедрение геймификации. Хакеры спрашивали, можно ли получить баллы за взлом рейтинга. Нет, нельзя)
Проект уже показали акционерам. Есть шанс, что платформа пойдет дальше — в сторону соцсети для специалистов. Мы же заложили фундамент для этого: подписки, уведомления и прочие механики.
И, напоследок — как сказала наш дизайнер Даша:
«Это мой любимый проект, это мой любимый заказчик. Я всегда это говорила, говорю и буду говорить»
Барабанная дробь — отзыв клиента
У нас уже вышел красивый и динамичный кейс этого проекта на Behance. Полистайте, там красиво!
А если хочется заглянуть за кулисы — инсайты, мемы, закулисье и жизнь студии мы выкладываем в наш тг-канал. Подписывайтесь!
И на канал наших друзей из SNP, конечно, тоже :)