Редизайн интерфейса спортсбука

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

1. Букмекерские конторы, которым клиент будет продавать API как готовое решение.

2. Посетители букмекерских контор (они же спортивные бетторы), которые зарегистрируются на платформе и будут возвращаться снова и снова, чтобы получать свежие прогнозные данные и платить за это.

Второй сегмент прописали подробнее:
• Возрастная группа – от 20 до 40 лет; 80% – мужчины, 20% – женщины. Спокойная, серьезная цветовая гамма подойдет лучше.
• Живут и работают в США.
• Чаще выбирают командные виды спорта.
• Их объединяет азарт «состязания» с букмекером: проверка себя, своих аналитических навыков.
• Предпочитают ставки в реальном времени: мгновенный результат ценнее, чем прибыль в будущем.

– На главной странице и основных экранах вывели события, основанные на интересах и географии бетторов.

– Вынесли в верхнее меню командные виды спорта, распространенные в англоговорящих странах: США (футбол, бейсбол, баскетбол, соккер), Канаде (хоккей) и Англии (крикет). Из индивидуальных добавили только UFC.

– Пользователь интуитивно понимает, как и для чего ему делать следующий шаг: зарегистрироваться, просмотреть коэффициенты и результаты, узнать больше о приобретении API.

Единственная часть в логике API, который мы коснулись. От нее зависело, как и какие цифры с точки зрения UI/UX мы будем показывать в таблицах и графиках на платформе.

Букмекеры публикуют собственные оценки шансов команд – коэффициенты. На платформу попадают данные нескольких десятков контор. Оценки у каждой из этих контор разные, данные иногда серьезно расходятся. Какие числа показывать пользователю в итоге и где лучше это делать?

Решение кажется простым: обобщить и вывести средневзвешенные значения. Однако здесь много нюансов. Уровень доверия к букмекерам изначально неодинаков: они используют разные модели, учитывают разное количество факторов. Кто-то публикует коэффициенты раньше, а другие «подсматривают». Сами форматы представления коэффициентов (американский или десятичный) зависят от сложившейся традиции. Кроме того, рекомендации для беттора по оптимальной стратегии могут зависеть от суммы, которая есть в его распоряжении на момент игры.

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

– Логотип: минималистичен и легко запоминается. Стилизованная латинская R, выполненная геометрическим гротеском с расширенными пропорциями, отражает уверенность и авторитет бренда.

– Фирменные цвета – сочетание нейтральности и ярких акцентов, вместе они хорошо работают на общую эстетику. Фон – графитовый и оттенки серого, контрастный белый для текста и насыщенный нефритовый для интерактивных элементов. В личном кабинете оставили белый фон и черный шрифт.

– Шрифтовая пара: Impact для заголовков и семейство Inter для текстов.
• Impact – с дерзким, кричащим характером и четким ритмом работает на привлечение внимания, делает текст напористым и активным.
• Inter – чистый и современный, нейтрален по своему настроению, но главное – удобочитаемый.

Информации не просто много, а очень много. На каждую игру есть разные ставки: простые – на исход игры (Moneyline), на разницу очков – Spread; на всю игру, на половину, четверть, период – в зависимости от вида спорта.

Мы разбили всю информацию на отдельные группы блоков, поэтому она воспринимается легко:

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

– Важные моменты сопровождаются понятными инструкциями.

– Сайт работает предсказуемо: есть кнопка – и пользователю ясно, что с ней делать.

– Вручную перерисовали каждый логотип, чтобы придать им стилистическое единство.

– Адаптировали текстовые поля под разную длину контента.

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

Кстати, через два года мы столкнулись с похожим вызовом при разработке дизайна трейдинговой системы – в кейсе мы подробно рассказываем о UI/UX графиков и таблиц.

– Протестировали варианты состояний мастер-компонентов и экранов.

– Использование на главной параллакс-эффекта на 100%-ную ширину экрана. Изображение – стадион, до отказа забитый зрителями – мгновенно погружает в атмосферу, создает иллюзию глубины и присутствия, делает цифровой контент реалистичным.

– Эффект «парения» для важных элементов и графических объектов. Они будто приподняты в воздухе – становятся чуть ближе к пользователю, чем остальные, и мягко забирают на себя внимание.

В конце работы над макетами провели маленький тест. Предложили десяти нашим коллегам, незнакомым с проектом, посмотреть на главную в течение пяти секунд, а затем задали всего один вопрос: «Что вы сейчас увидели?». Каждый из них ответил: «Онлайн-ставки на спорт».