Каджик ВарданянKadzhik Vardanyan
Все работыAll work

B2B-кабинет, дашборд и таблицыB2B web app, dashboard and tables

АренаArena

Веб-кабинет спортивной школы: реестр спортсменов с фильтрами и массовыми действиями, заявка на соревнования в пять шагов, дашборд и дизайн-система на токенах со светлой и тёмной темой.A web app for a sports school: an athlete registry with filters and bulk actions, a five-step competition entry form, a dashboard and a token-based design system with light and dark themes.

РольRole
Продуктовый дизайнер, один на проектеProduct designer, solo
ТипType
Концепт B2B/B2G-сервисаB2B/B2G service concept
ПлатформаPlatform
Веб 1440, мобильный 390, светлая и тёмная темаWeb 1440, mobile 390, light and dark
ОбъёмScope
8 экранов и состояний, 4 в тёмной теме, 3 мобильных, 17 компонентов, 36 иконок8 screens and states, 4 in dark, 3 mobile, 17 components, 36 icons
ИнструментыTools
Figma, FigJam, NotionFigma, FigJam, Notion

В Figma открыты отдельные фрагменты проекта. Полную версию покажу по запросу.The Figma file shows selected parts of the project. The full version is available on request.

Арена

ЗадачаThe problem

В спортивных школах реестр спортсменов часто живёт в Excel, заявки на соревнования уходят письмами, а про просроченные медосмотры узнают на мандатной комиссии. Федерация возвращает заявки из-за мелочей: не тот формат результата, нет приказа, истекла справка.

In many sports schools the athlete registry lives in Excel, competition entries go out by email, and expired medical checks surface only at the credentials committee. The federation sends entries back over small things: a wrong result format, a missing order, an expired certificate.

Цель — один кабинет, где администратор и тренер видят всех спортсменов, понимают, что требует внимания сегодня, и подают заявку без ошибок с первого раза.

The goal: one workspace where the admin and the coach see every athlete, know what needs attention today and submit an entry right the first time.

Администратор школыSchool admin
Держит реестр в порядке. Для неё — блок «Требует внимания» на дашборде, реестр с фильтрами и массовыми действиями.Keeps the registry in order. Gets a ‘Needs attention’ block on the dashboard and a registry with filters and bulk actions.
ТренерCoach
Собирает состав на старт. Для него — форма заявки со статусом медосмотра прямо в составе.Builds the roster for a start. Gets the entry form with the medical status right inside the roster.
Специалист федерацииFederation officer
Проверяет заявку и возвращает с комментарием. Для него — статусы и история решений.Reviews the entry and returns it with a comment. Gets statuses and a decision history.

Дашборд: задачи вместо витриныDashboard: tasks, not a showcase

Дашборд администратора
Дашборд администратораThe admin dashboard
  • Блок «Требует внимания» отвечает на вопрос «что мне сделать сегодня»: истекающие медосмотры, заявка на доработке, тренеры без категории. У каждой строки есть действие.‘Needs attention’ answers ‘what do I do today’: expiring medicals, an entry sent back, coaches without a category. Every row has an action.
  • KPI с контекстом: не просто «23», а «23 медосмотра истекает, +8 к прошлой неделе». Цвет дельты совпадает со смыслом, а не с направлением стрелки.KPIs with context: not just ‘23’ but ‘23 medicals expiring, +8 vs last week’. The delta colour follows the meaning, not the arrow direction.
  • Текущий месяц на графике выделен, будущие показаны как план, поэтому график читается без легенды.The current month is highlighted on the chart and future months are shown as a plan, so it reads without a legend.

Реестр: сложная таблицаRegistry: a complex table

Фильтры-чипы с поиском и счётчиками внутри
Фильтры-чипы с поиском и счётчиками внутриFilter chips with search and counts inside
  • Применённый фильтр показывает значение прямо в чипе и сбрасывается крестиком. Внутри — поиск и счётчики, чтобы не выбрать пустую комбинацию. Изменения применяются кнопкой: на больших реестрах это экономит запросы.An applied filter shows its value in the chip and clears with a cross. Inside are search and counts, so you never pick an empty combination. Changes apply on a button press, which saves requests on large registries.
  • Строка результата «Найдено 6 из 412» и действия над таблицей: сохранить фильтр, направить всех найденных на медосмотр.A result line, ‘6 of 412 found’, with actions above the table: save the filter, send everyone found to a medical.
  • Массовые действия появляются в плавающей панели только после выбора строк и не сдвигают таблицу. Опасное «В архив» отделено и окрашено.Bulk actions appear in a floating bar only after rows are selected and never shift the table. The destructive ‘Archive’ is separated and coloured.
  • Статус медосмотра всегда подписан текстом, а не только цветом.The medical status is always written out, not shown by colour alone.
Выбранные строки, плавающая панель и меню строки
Выбранные строки, плавающая панель и меню строкиSelected rows, the floating bar and the row menu
Пустой поиск, загрузка, ошибка сервера и первый запуск
Пустой поиск, загрузка, ошибка сервера и первый запускEmpty search, loading, server error and first run

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

Every table state explains what happened and offers the next step. An empty search tells you which filter is in the way.

Заявка на соревнованияCompetition entry form

Шаг состава: ошибка подсвечивает строку целиком
Шаг состава: ошибка подсвечивает строку целикомRoster step: an error highlights the whole row
  • Пять шагов вместо одной длинной формы, горизонтальный степпер показывает, где ты и сколько осталось.Five steps instead of one long form; a horizontal stepper shows where you are and what is left.
  • Даты и место приходят из календаря соревнований и не редактируются. Спортсмены добавляются из реестра, а не вводятся заново.Dates and venue come from the competition calendar and are locked. Athletes are added from the registry, not typed again.
  • Ошибка блокирует шаг, предупреждение — нет. Неверный формат результата нужно исправить, а медосмотр, который истечёт до старта, только напоминает обновить справку.An error blocks the step, a warning does not. A wrong result format must be fixed; a medical that expires before the start only reminds you to renew it.
  • Сводка справа всегда на виду: дедлайн с обратным отсчётом, прогресс и шаги с ошибками. Черновик сохраняется автоматически.The summary on the right is always visible: a deadline countdown, progress and the steps with errors. The draft saves automatically.
После отправки: номер заявки и шкала статусов
После отправки: номер заявки и шкала статусовAfter submitting: the entry number and a status timeline

Дизайн-система и тёмная темаDesign system and dark theme

Основа: цвета, типографика, отступы
Основа: цвета, типографика, отступыFoundations: colour, type, spacing
  • Два уровня токенов: 43 примитива и 27 семантических токенов по ролям — фон, поверхность, текст, граница, акцент, статусы, фокус, выделение строки.Two token levels: 43 primitives and 27 semantic tokens by role — background, surface, text, border, accent, statuses, focus, row selection.
  • Тёмная версия любого экрана — переключение режима переменных на фрейме, без копий макетов и ручной перекраски.The dark version of any screen is a variable mode switch on the frame, with no duplicated layouts and no manual recolouring.
  • Шрифт Onest: хорошая кириллица и табличные цифры для дат, ID и номеров.Onest typeface: solid Cyrillic and tabular figures for dates, IDs and numbers.
Дашборд в тёмной теме
Дашборд в тёмной темеDashboard, dark
Реестр в тёмной теме
Реестр в тёмной темеRegistry, dark

Мобильная версияMobile

Карточки вместо таблицы, фильтры в нижней шторке, форма в одну колонку
Карточки вместо таблицы, фильтры в нижней шторке, форма в одну колонкуCards instead of a table, filters in a bottom sheet, a one-column form

На телефоне таблица превращается в карточки с теми же данными. Фильтры уходят в нижнюю шторку с кнопкой «Показать 6 спортсменов», а шаг формы — в одну колонку с закреплёнными кнопками «Назад» и «Далее».

On a phone the table becomes cards with the same data. Filters move to a bottom sheet with a ‘Show 6 athletes’ button, and each form step becomes one column with pinned ‘Back’ and ‘Next’.

Как бы я проверял решенияHow I would validate it

  • Юзабилити-тест подачи заявки на 5–6 тренерах: время, число ошибок валидации, где возвращаются назад.A usability test of the entry flow with 5–6 coaches: time, number of validation errors, where they go back.
  • После запуска: доля заявок, возвращённых федерацией; время от открытия приёма до подачи; число спортсменов, не допущенных из-за медосмотра.After launch: the share of entries sent back by the federation, time from opening to submission, athletes not admitted because of a medical.

Давайте поговорим о вашем продуктеLet's talk about your product

Быстрее всего ответ приходит в Telegram. Готов сделать тестовое задание.Telegram is the fastest way to reach me. Happy to do a test task.