Sport agency & forecasts website 99Bet.site
Задача
Создать информационный-сайт для отображения ленты предстоящих спортивных событий с прогнозами на исход этих же событий
Иногда, а если быть точнее, то очень часто перед продуктом стоит цель в максимально простой форме выполнять свою прямую задачу, но выполнять в полной мере. В данном случае главный объект, вокруг строится весь сайт и вся его функциональность: прогнозы на предстоящие спортивные события
- Прогнозов может быть бесконечно много и они идут потоком
- Изменени прогнозов происходит с очень высокой частотой
- Существует бесконечно много видов спорта, всевозможных лиг и стран - все это надо уместить в одну ленту
- Прогнозы на предстоящие события могут давать все пользователи - UGC. То есть на одно и то же событие может быть много форкастов
- Для каждого прогноза возможна опция «Букмекерская контора». То есть все возможные варианты прогнозов умножаются на количество доступных букмекерских контор
Это касается «фронта» сайта
Вместе с этим необходимо было создать удобную административную часть, где каждый пользователь в простой линейной и интуитивно-понятной форме мог бы создавать прогнозы. Ему предстоит делать это постоянно и много и потому эта функциональность должна быть максимально плавной и приятной с точки зрения пользовательского опыта.
Что получилось в итоге
Получился узнаваемый яркий стильный дизайн, который идеально справляется со своими задачами. Вот так выглядит главный пользовательский опыт для большинства посетителей. Скролл ленты прогнозов:
Главный объект - карточка. Имеет 3 состояния: событие еще не состоялось и прогноз неизвестен, событие состоялось и прогноз сбылся, событие состоялось и прогноз не сбылся. Идентификация происходит с помощью цветовых контрастных различий:
При этом частая пользовательская история: изучить прогноз подробнее. Карточка прогноза выглядит вот так. Тут же приоритетно размещены кнопки «расшаривания» для потенциального увеличения трафика. Кроме того, макет построен с учетом размещения рекламы с повышенной конверсией
- Laravel 7 - основной движок
- MySQL - хранение всех данных
- Selenium (Python) - парсинг прогнозов с внешних сайтов
- VueJS - для интерактивных компонентов
- EditorJS - как основа редактора описаний прогнозов
- Adobe Photoshop, XD, Illustrator - для графических элементов и прототипирования
Функциональная часть включает в себя все то, что необходимо для «плавной» работы сайта:
- Авторизация и личный кабинет пользователя
- Возможность создавать прогнозы пользователем
- Гибкая реализация спортивных лиг, стран и видов спорта
- Система фильтров для прогнозов
- Редактор описания прогнозов на основе EditorJS
Что такое «плавная» работа сайта и гладкий пользовательский опыт?
Это когда авторизация происходит в течение пару секунд из любой точки сайта и после аутентификации пользователь остается там же, где и был
Плавный пользовательский опыт - это когда создание прогноза происходит линейно, нативно и понятно. Каждое поле валидируется, поправляет и ведет пользователся к заполнению следующего поля. При этом технически интерфейс содержит много сложных элементов:
- Инпуты с валидацией
- Инпуты с тэггированием (создание значения налету)
- Селекторы
- Ввод даты
- Редактирование контента (EditorJS)
