Программа управления матчем в континентальной хоккейной лиге

Чемпионат КХЛ 3х3 — новый турнир в системе Лиги. В лиге 8 команд в двух дивизионах: Fonbet и Winline. Пользователь программы — инспектор матча.

Бизнес ценность

Сделать удобный дизайн интерфейса программы с ограничением экрана 1280x720. Отдать в разработку и провести дизайн-ревью и юзабилити-тесты.

Я сделал данный UX/UI всего за 1 месяц, тем самым, с учетом срока на разработку (2 месяца) компанией rustiming.com было заработано 20 млн руб.

Что сделал

Интервью с пользователями (инспекторы)
Расписал срок дизайн-процесса, сообщив команде
Собрал JTBD, CJM
Вывел правила построения согласно CustDev
Userflow и Wireframe, а после Wireflow
Генерировал гипотезы и показывал варианты решений на демо
Глубинные интервью с пользователями на предмет петли улучшений
Подготовил дизайн и компоненты, а после проводил дизайн-ревью

Решение

Покажу только простой UX сценарий, остальное под NDA

Перед началом матча кнопки в состоянии disabled, кроме «Start» — начало матча. Два таймера показывают время периода и время матча. Это привычно инспектору.

В каждой команде 4 играющих и 4 запасных игрока, их можно менять

После старта матча кнопки становятся активными, а некоторые цвето-кодированы.

При тапе на игрока, кнопки личных событий становятся active а другие disabled, пользователь может выбрать тип события, которое совершил игрок (вброс, аут, содействие, буллит промах, буллит гол, фол, дисквалификация и пр.) Нажав на простое событие, например «Goal» в ленте событий будет зафиксирован гол.

Пользователю удобнее, если кнопка выбранного игрока будет контрастна остальным

Событие «Goal» зафиксировано, что отображается на табло счета и в ленте личных событий (время, номер игрока, команда игрока, событие). В компоненте «игрок» в правом-верхнем углу появляется индикатор количества голов за матч.

Игрок номер 60 нарушил правила, тап компонента игрока и выбор категории фола «Big foul». Появляется организм drawer с выбором типа фола, а кнопка «Big foul» в состоянии pressed до тех пор пока пользователь не выбрал тип фола из вариантов.

При тапе на тип фола категории «Big foul» кнопка становится белой для лучшей индикации триггера нажатия и понимания пользователем, что он зафиксировал. Типы фола расположены в той последовательности, которая удобна инспектору согласно статистически проверенным данным по частоте типа фола.

Событие «Big foul» зафиксировано в ленте событий

Прошло время, обоими командами заброшено 5 шайб и сделано 5 фолов.

Сеньор level hard skills

Немного хард-скиллов в Figma. Узнать о проекте больше можно на тех. интервью.

Переменные