Вернутися на головну

app

Мобільний додаток спортивної статистики та прогнозів CheckLive

Задача

Розробити прототипи та UX/UI дизайн мобільного додатку CheckLive зі спортивною статистикою, live-результатами матчів, прогнозами експертів і чатами вболівальників.

Зроблено

Прототипи

Дизайн

Прототипи

Детальне UX-прототипування основних екранів мобільного додатку: стрічки матчів за лігами, сторінки поєдинку зі статистикою таймів, турнірної таблиці, профілю клубу та стрічки прогнозів. На цьому етапі закладено зручну нижню навігацію на 5 розділів і компактну подачу великих масивів цифр на екрані смартфона.

Онбординг та перше знайомство

Привітальна серія екранів знайомить користувача з можливостями сервісу та одразу пропонує обрати улюблені спортивні клуби й підписатися на перевірених прогнозистів із високим ROI. Завдяки цьому стрічка матчів і рекомендацій персоналізується ще до завершення реєстрації.

Реєстрація та вхід

Покрокові мобільні екрани запуску додатку, швидкого вибору улюблених команд, підписки на аналітиків та авторизації через email або соцмережі. Також передбачено режим продовження перегляду результатів без обов’язкової реєстрації.

Реєстрація та вхід - мобільний інтерфейс 2

Реєстрація та вхід - мобільний інтерфейс 3

Реєстрація та вхід - мобільний інтерфейс 4

Реєстрація та вхід - мобільний інтерфейс 5

Реєстрація та вхід - мобільний інтерфейс 6

Налаштування

Розділ персоналізації дозволяє гнучко керувати push-сповіщеннями про початок гри чи забиті голи, обирати формат відображення коефіцієнтів та змінювати порядок видів спорту простим перетягуванням.

Усі матчі

Головний екран розкладу та live-результатів із горизонтальним календарем по днях, перемикачем між усіма іграми та матчами в прямому ефірі, а також швидким додаванням поєдинків чи цілих ліг у «Вибране».

Сторінка команди

Мобільний профіль клубу об’єднує вкладки огляду, останніх результатів із кольоровими маркерами форми, турнірної таблиці, складу за позиціями та історії трансферів гравців.

Сторінка команди - мобільний інтерфейс 2

Сторінка команди - мобільний інтерфейс 3

Сторінка команди - мобільний інтерфейс 4

Сторінка команди - мобільний інтерфейс 5

Сторінка команди - мобільний інтерфейс 6

Сторінка команди - мобільний інтерфейс 7

Сторінка команди - мобільний інтерфейс 8

Сторінка команди - мобільний інтерфейс 9

Сторінка матчу (прематч)

Детальний розбір майбутнього поєдинку: базові коефіцієнти, список травмованих і дискваліфікованих гравців, інформація про арбітра й стадіон, розстановка складів на полі, порівняння H2H та турнірна таблиця.

Сторінка матчу (прематч) - мобільний інтерфейс 2

Сторінка матчу (прематч) - мобільний інтерфейс 3

Сторінка матчу (прематч) - мобільний інтерфейс 4

Сторінка матчу (прематч) - мобільний інтерфейс 5

Сторінка матчу (прематч) - мобільний інтерфейс 6

Сторінка матчу (прематч) - мобільний інтерфейс 7

Сторінка матчу (прематч) - мобільний інтерфейс 8

Сторінка матчу (прематч) - мобільний інтерфейс 9

Сторінка матчу (прематч) - мобільний інтерфейс 10

Сторінка матчу (прематч) - мобільний інтерфейс 11

Матч у прямому ефірі та підсумки

Екрани перебігу гри в реальному часі з хронологією подій по таймах (голи, заміни, жовті й червоні картки), плеєром трансляції, порівняльними шкалами статистики (володіння м’ячем, удари, кутові) та швидким переходом у чат матчу.

Матч у прямому ефірі та підсумки - мобільний інтерфейс 2

Матч у прямому ефірі та підсумки - мобільний інтерфейс 3

Матч у прямому ефірі та підсумки - мобільний інтерфейс 4

Матч у прямому ефірі та підсумки - мобільний інтерфейс 5

Матч у прямому ефірі та підсумки - мобільний інтерфейс 6

Матч у прямому ефірі та підсумки - мобільний інтерфейс 7

Матч у прямому ефірі та підсумки - мобільний інтерфейс 8

Давайте працювати разом.

Готові втілити ваше бачення у життя? Давайте об'єднаємося для вашого наступного проєкту та разом створимо щось незабутнє.

// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
var paddingTop = 'px';
var sectionRadius = 'px';
// Interactive Theme Configuration
function updateButton(config) {
var radius = 'px';
btn.style.borderRadius = radius;
}
updateButton({ active: true });

Розробник

Color Styles

Pink

Purple

Orange

Green

Blue

Дизайнер

Стрічка та публікація прогнозів

Розділ спортивних прогнозів із каруселлю топ-експертів, фільтрацією за видами спорту, картками ставок із показником ROI автора та покроковою формою створення власного прогнозу.

Стрічка та публікація прогнозів - мобільний інтерфейс 2

Стрічка та публікація прогнозів - мобільний інтерфейс 3

Стрічка та публікація прогнозів - мобільний інтерфейс 4

Стрічка та публікація прогнозів - мобільний інтерфейс 5

Стрічка та публікація прогнозів - мобільний інтерфейс 6

Стрічка та публікація прогнозів - мобільний інтерфейс 7

Стрічка та публікація прогнозів - мобільний інтерфейс 8

Експерти та букмекери

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

Експерти та букмекери - мобільний інтерфейс 2

Експерти та букмекери - мобільний інтерфейс 3

Експерти та букмекери - мобільний інтерфейс 4

Експерти та букмекери - мобільний інтерфейс 5

Експерти та букмекери - мобільний інтерфейс 6

Експерти та букмекери - мобільний інтерфейс 7

Експерти та букмекери - мобільний інтерфейс 8

Експерти та букмекери - мобільний інтерфейс 9

Експерти та букмекери - мобільний інтерфейс 10

Чати матчів та вибране

Вкладка активних чатів поєдинків із лічильниками нових повідомлень, живим обговоренням гри між уболівальниками та персональний розділ «Вибране» зі збереженими матчами, командами й експертами.