Sport agency & forecasts website 99Bet.site

Спроектировал, задизайнил и разработал сайт и административную часть для UGC-сайта 99Bet

Задача

Создать информационный-сайт для отображения ленты предстоящих спортивных событий с прогнозами на исход этих же событий

Цель

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

  • Прогнозов может быть бесконечно много и они идут потоком
  • Изменени прогнозов происходит с очень высокой частотой
  • Существует бесконечно много видов спорта, всевозможных лиг и стран - все это надо уместить в одну ленту
  • Прогнозы на предстоящие события могут давать все пользователи - UGC. То есть на одно и то же событие может быть много форкастов
  • Для каждого прогноза возможна опция «Букмекерская контора». То есть все возможные варианты прогнозов умножаются на количество доступных букмекерских контор

Это касается «фронта» сайта

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

Что получилось в итоге

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

Главный объект - карточка. Имеет 3 состояния: событие еще не состоялось и прогноз неизвестен, событие состоялось и прогноз сбылся, событие состоялось и прогноз не сбылся. Идентификация происходит с помощью цветовых контрастных различий:

mockups

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

Инструменты и технологии
  • Laravel 7 - основной движок
  • MySQL - хранение всех данных
  • Selenium (Python) - парсинг прогнозов с внешних сайтов
  • VueJS - для интерактивных компонентов
  • EditorJS - как основа редактора описаний прогнозов
  • Adobe Photoshop, XD, Illustrator - для графических элементов и прототипирования
Функциональная часть

Функциональная часть включает в себя все то, что необходимо для «плавной» работы сайта:

  • Авторизация и личный кабинет пользователя
  • Возможность создавать прогнозы пользователем
  • Гибкая реализация спортивных лиг, стран и видов спорта
  • Система фильтров для прогнозов
  • Редактор описания прогнозов на основе EditorJS

Что такое «плавная» работа сайта и гладкий пользовательский опыт?

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

mockups

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

mockups
  • Инпуты с валидацией
  • Инпуты с тэггированием (создание значения налету)
  • Селекторы
  • Ввод даты
  • Редактирование контента (EditorJS)
mockups