LiveScorer

Sport Scoring Application

FloSports built an application called LiveScorer that is used to score high school and college wrestling events. A volunteer running the application tracks and updates the score of a match in real time, which is simultaneously dispatched to a scoreboard and a video overlay system that combines the score data with a video recording of the event.

  • PROJECT:
  • CLIENT:
  • CATEGORY:
  • DATES:
  • ROLE:
  • LiveScorer
  • FloSports
  • UI, IxD, Development
  • 2013-2016
  • I designed and built the LiveScorer interface, and programmed many of its custom controls.

Background

FloSports’ prototype application had been in use for several months, so to maintain familiarity with existing users, they requested following the prototype’s control placement where possible. The challenge presented was to update the application with a more professional appearance, adapt the UI for (eventual) use on a tablet, and improve overall usability.

prototype

Visual Design Exploration

Since the sport is historically rooted in assigning athletes with red and green, these colors were explored as key design elements, in addition to variations of electronic scorekeeping.

design 1 design 2 design 3 design 4 design 5

Final Design

The final visual treatment incorporated FloSports’ corporate font and “clipped corner” design element. Controls were enlarged to enable response to touch events, and programmed to be activated by both keyboard and touch. Standard menu options were changed to popover-style controls for contextual access. Because the red/green color combination can be challenging for colorblind users, a color preference setting was provided to enable changing the colors throughout the UI.

main interface

Main interface

riding timer

Riding timer enabled

edit timeline block

Edit timeline block

injury panel enabled

Injury panel enabled

athlete color assignment

Athlete color assignment

athlete color/position choice

Athlete color/position choice

submit bout results

Submit bout results

mat selection

Mat selection

bout selection

Bout selection

user settings

User settings