ScoreOS

Graphical user interface for app

ScoreOS is an app that lets you operate and display virtualized scoreboards for various sports. I designed and partly developed multiple styles of scoreboards and user interfaces for ScoreOS.

Screenshot of scoreboard
A screenshot of the classic-style full-view basketball scoreboard. (Click image to enlarge.)

My client for this job was Sportable Scoreboards, a company that manufactures scoreboards for stadiums and other sports venues. Now with the introduction of their ScoreOS software, they’re making purely digital scoreboards too.

Sportable Scoreboards chose to hire me because I have the combination of skills in graphic design and coding in HTML and CSS that’s needed to work on a project like this.

Design of the Scoreboards

When I had begun this ScoreOS job, the client requested me to design scoreboards for only basketball at first. Designing scoreboards for more sports were planned afterward if I’d do well making the basketball ones. (Spoiler alert: I did.)

Scoreboard Styles

The client wanted the scoreboards to come in multiple visual styles which users of ScoreOS could switch to their preferences. For the basketball scoreboards, we decided I’d design these three styles:

The full-view basketball scoreboards in the wood and virtual styles.

I designed the scoreboards as mockup images that I created mainly in the image-editing software Adobe Photoshop. For some scoreboard elements (particularly the ones that would use SVG images), I used the vector graphic software Adobe Illustrator.

Scoreboard Views

Not only did I make scoreboards in different styles, but I also made them adaptable to a “full view,” a “ribbon view,” and a “bug view,” which are different sizes and shapes of scoreboard in ScoreOS.

Full View

This view has a full HD resolution (1920×1080 pixels) and displays the complete arrangement of scoreboard components.

(Screenshots of scoreboards in the full view are shown above.)

Ribbon View

Screenshot of scoreboard
The classic-style ribbon-view basketball scoreboard.

This is a more vertically compact view (1920×270 pixels), being equally as wide as the full view but a quarter its height. Due to the ribbon view’s reduced amount of space compared to the full view, some scoreboard components are removed.

Bug View

Screenshot of scoreboard
The classic-style bug-view basketball scoreboard.

This is the tiniest of the views (360×203 pixels). It has the minimum amount of components, which for basketball is the game clock and both teams’ scores.

Scoreboards in the ribbon and bug views are meant to be constantly visible in a portion of the screen while other things are displayed on the rest of the screen simultaneously.


With each of the basketball scoreboards in one of three styles and in one of three views, I ended up creating a total of nine individual scoreboards for basketball in ScoreOS.

Development of the Scoreboards

Once the client approved my mockup images, the next step was for me to develop the actual basketball scoreboards to work in the ScoreOS app.

Screenshot of Visual Studio Code workspace
My code editor, Visual Studio Code, with a couple of the HTML and SCSS I did for the scoreboards.

Under the hood, ScoreOS is built almost exactly as if it were a website: It runs on an Apache web server (its own self-contained one) with a MySQL database, using PHP as the server-side language, and HTML, CSS, and JavaScript on the front end.

As directed by the client, I coded the scoreboards with HTML in PHP files for their structure, and with CSS compiled from SCSS for their styling. The other development areas such as the JavaScript and MySQL were handled by the software programmers at Sportable Scoreboards rather than me. I was more responsible for the visual side of the project, less so the inner mechanisms.

Each type of scoreboard component (the game clock, the team scores, etc.) and the “board” itself of the scoreboard (except in the wood style) use colors customizable by the user. For these elements, I used CSS variables (custom properties) which allow their colors to be dynamically changed via JavaScript manipulation.

Screenshot of scoreboard
The wood-style ribbon-view basketball scoreboard.

PNG vs. SVG Images

When the client originally described the project to me, he said he envisioned these elements to be PNG images that would be black masks with transparency overlapping a brightly colored background, emulating the lights of an LED panel. (The black would’ve appeared to be the back part of the LED panels.)

However, I recommended that these elements would be better as SVGs rather than PNGs for the following reasons:

The client was convinced by my arguments, so we ditched the plan to use PNGs in favor of SVGs.

More Sports, More ’Boards

The client was happy with the set of basketball scoreboards I designed, so he then asked me to continue making scoreboards for four other sports: football, baseball, wrestling, and volleyball.

Here are screenshots of just a few of the smorgasbords of scoreboards:

Screenshot of scoreboard
Baseball, timer format, classic style, full view
Screenshot of scoreboard
Baseball, stats format, virtual style, full view
Screenshot of scoreboard
Football, detailed format, classic style, full view
Screenshot of scoreboard
Volleyball, virtual style, full view
Screenshot of scoreboard
Wrestling, basic format, classic style, full view
Screenshot of scoreboard
Wrestling, bout time format, virtual style, full view
Screenshot of scoreboard
Baseball, classic style, ribbon view
Screenshot of scoreboard
Football, virtual style, ribbon view
Screenshot of scoreboard
Volleyball, virtual style, ribbon view
Screenshot of scoreboard
Wrestling, bout time format, classic style, ribbon view
Screenshot of scoreboard
Baseball, virtual style, bug view
Screenshot of scoreboard
Football, virtual style, bug view
Screenshot of scoreboard
Wrestling, bout time format, classic style, bug view

I made each of these additional sports’ scoreboards in the classic and virtual styles like I did for the basketball scoreboards. (I wasn’t directed to make the wood style for the other sports, so the wood style turned out to be for basketball only.) Also like the basketball scoreboards, their components have user-customizable colors.

All of the sports had the three standard scoreboard views (full, ribbon, and bug). Additionally, the ’boards for football, baseball, and wrestling include special formats which shows other information not available in the standard full view.

In total, I created 43 varieties of scoreboards that appear in ScoreOS, counting each sport, in each style, in each view, as well as extra scoreboard formats for certain sports. There were 12 scoreboards for baseball, 9 for basketball, 8 for football, 8 for wrestling, and 6 for volleyball.

Scoreboard Controllers

In addition to the scoreboards, I was also partly involved in the making of scoreboard controllers for each of the five sports in ScoreOS. The controllers can be operated by users to manage the live information output by the scoreboards.

Screenshot of scoreboard controller
The basketball scoreboard controller (upper portion shown) in the dark color scheme with a red accent color. The home team “+1” score button is being pressed.
Screenshot of scoreboard controller
The wrestling scoreboard controller (upper portion shown) in the light color scheme.

Starting with basketball, the client had sent me a rudimentary wireframe image showing the placement of all the controller’s buttons. His original wireframe was meant for display on a smartphone. However, it turned out to be a little too wide for that, so I partly redesigned it so that the controller’s layout would fit better on phone-sized screens. We used the client’s original wireframe as the basis for tablet-size screens, which I made the controller automatically adapt to based on the device it’s being displayed on.

I developed the controllers as a web page from HTML and CSS. To arrange the layout of the controller elements, I used the native CSS grid system (a fairly new feature added to CSS that recently got widespread cross-browser support).

I gave the controllers a more stylized appearance too, with three-dimensional-looking buttons and subtle shading and lighting effects. The client wanted to be sure that the controller’s buttons to have noticeable feedback when pressed, so I made the buttons glow brightly in their active state.

The controllers appear in either light or dark color schemes per user choice. The particular color of the buttons’ labels and glowing effects is customizable by the user too—with the exception of the controller for wrestling, which is color-restricted by design.

Screenshot
The style settings page for basketball scoreboards, currently shown in light mode. (Appearance subject to change.)

Settings Page

ScoreOS has a page for creating and modifying presets of custom style settings for scoreboards. This page was already made by the Sportable Scoreboard developers, but its appearance was originally a little messy and bland. I was tasked to spruce up the appearance of the page and give it a more uniform style with the other settings pages of the program.

Client’s Testimonial

Damian was top notch. He was on time, on task, professional, knowledgeable, ect… He went above and beyond what we asked him to do, providing advice and direction when he saw a better way. We hired several people to work in parallel on this project and Damian was so much better than the other designers that we turned them all off and asked Damian to do the entire project. We fully intend to hire him again as soon as we have work for him.
— Micah Sugg

Similar Projects

To read about other projects where I designed an app’s graphical user interface, see Winter Warland or Darkness.

To read about another sports-related graphic design job I worked on, see EON Sports VR.