Спорт вокруг

приложение «спортивное табло»

Дизайн и разработка мобильного приложения

2024

Отрасль

Спорт

Что сделали

UX-UI дизайн

Разработка моб. приложения

Интеграция с API

Заказчик

Спорт Вокруг. Разработчик инновационных решений для цифровизации спорта: судейские системы, портал мероприятий, CRM
и другие системы автоматизации спортивных мероприятий.

О проекте

Спортивное табло — это мобильное приложение под iOS
и Android, с помощью которого
в режиме реального времени можно следить за процессом прохождения соревнований
по фигурному катанию. В нем можно посмотреть актуальные соревнования и списки участников, кто сейчас на льду, кто ожидает оценку, сколько баллов
и какие места занимают спортсмены.

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

Цели проекта

Расширить линейку цифровых продуктов заказчика. Это поможет повысить уровень предоставляемого сервиса
и увеличить выручку при том же количестве клиентов.
Разработать минимальную версию нового продукта
(MVP) — мобильное приложение «Спортивное табло», для проверки интереса ЦА и жизнеспособности продукта.
Заложить основу для развития продукта и его будущей монетизации.

Задачи

Спроектировать и задизайнить интерфейс (UX-UI дизайн) кроссплатформенного мобильного приложения «Спортивное табло».
Разработать мобильное приложение под iOS и Android.
Помочь закзчику подготовить API собственной судейской системы для интеграции
с приложением.
Интегрировать мобильное приложение с API судейской системы заказчика.
Протестировать и отладить работу приложения.
Опубликовать приложения
в App Store и Google Play.

Что мы сделали

Продумали и проработали сценарии использования приложения.
Продумали логику работы приложения. За основу использовали предложенный заказчиком набросок интерфейса.
Разработали UX-UI дизайн мобильного приложения.
Разработали мобильное приложение на React Native под iOS и Android.
Помогли заказчику подготовить API судейской системы для интеграции с приложением.
Интегрировали приложение
с API судейской системы заказчика.
Протестировали корректность работы приложения
и выполнили работу над ошибками.
Взяли на себя процесс публикации приложений
в App Store и Google Play.

Технологии проекта

JavaScript

TypeScript

React Native

GraphQL

GitLab

Главный
экран

Состояние соревнования в статусе «скоро» и активного соревнования, которое идёт сейчас.

Интерфейс получился легким для восприятия за счёт выстроенной системы визуальной иерархии
и вложенностей. Каждое соревнование содержит в себе набор информационных блоков
о выступающих спортсменах, список категорий внутри каждой из которых содержится список спортсменов.

Мы распределили акценты, увеличили размер важных элементов, уменьшили второстепенные и поработали
с цветом. Предусмотрели
и задизайнили разные состояния всех элементов интерфейса.

Тёмный фон является объединяющим, так мы можем понять, что находимся в рамках выбранного соревнования. А всё, что находится в зоне светлой карточки — это категории выбранного соревнования, между которыми тоже можно переключаться.

До начала выступлений список участников выводится
в очередности их выступлений. Участники, получившие оценку, располагаются сверху.

Карточки

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

По мере хода соревнования карточки каждого учатника меняют своё состояние и содержание
в режиме реального времени.

Варианты состояний карточек

Варианты состояний списка участников

Иконку приложения разработали на основе логотипа компании.

Переключаться между соревнованиями и категориями можно тремя способами: свайпом по названию, тапом на стрелку вправо или открытием списка
со всеми соревнованиями или категориями. В развернутых списках можно увидеть сразу все соревноания или категории одновременно, это удобно для быстрого перехода к желаемому мероприятию и обзора статусов всех мероприятий разом.

Списки соревнований и категорий
в развернутом состоянии

Статусы соревнований

Каждое соревнование и его категории в разный момент времени имеют разные статусы. Варианты статусов: «сегодня», «сейчас», «скоро» и «завершено». Соревнования могут проходить как в один день, так и в разные.