ScoreOS

Graphical user interface for app

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

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

My client for this project is Sportable Scoreboards. Traditionally they’ve manufactured only physical scoreboards, but now with the introduction of ScoreOS, they’re getting into purely digital ones too. The company chose to hire me because I have the combination of skills in graphic design and front-end web development that are needed for this type of job.

Design of the Scoreboards

The client requested me to design basketball scoreboards in three distinct visual styles which ScoreOS users would be able to select to their preference. We decided I’d make these styles:

The wood- and virtual-style full-view scoreboards.

In addition to all the scoreboard styles, I also had to make the scoreboards adaptable to three differently sized views. This means I ended up creating for ScoreOS a total of nine separate basketball scoreboards, one in each style and in each view.

The three scoreboard views are as follows:

Full view

Uses a full HD resolution (1920×1080 pixels) and shows all the scoreboard components which include:

Ribbon view

A shorter scoreboard view that’s the same width as the full view but one-fourth its height (1920×270 px). Due to the ribbon view’s more compact space compared to the full view, the T.O.L. and bonus indicator components are removed.

Originally, the ribbon view was intended to be one-third of the full size scoreboards’ height, but later we realized it was a little too tall, so I redesigned it to be one-fourth height instead.

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

Bug view

A tiny scoreboard view (360×203 px) that has only the game clock and home/guest score components.

The classic- and virtual-style bug-view scoreboards.

The scoreboards in the ribbon and bug views are constantly visible in a portion of the screen while other tasks can be done on the rest of the screen simultaneously.

I created all the scoreboard mockup images mainly in the image-editing software Adobe Photoshop. For certain scoreboards elements (particularly the ones that would be SVGs), I also used the vector graphic-editing software Adobe Illustrator.

Development of the Scoreboards

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

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.

Screenshot of Visual Studio Code
My code editor with some of the HTML and SCSS I did for the scoreboards.

The scoreboards also require JavaScript and MySQL for functionality, but those areas were handled by the tech team at Sportable Scoreboards rather than me. I was more responsible for the visual side of the project, less so the inner mechanisms.

We set up certain elements such as the clock to use arbitrary colors chosen by the user. For these customizable elements, I used CSS variables which allow their properties to be easily dynamically changed via JavaScript.

For the scoreboards in the classic and wood styles, all the digits, the possession arrows, and the bonus indicators appear as vector graphics in SVG images. JavaScript automatically swaps these images with others as the game’s statuses change.

Screenshot of the classic-style ribbon-view scoreboard.
The wood-style ribbon-view scoreboard.

When the client originally described the project to me, he said he expected 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 been 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:

  • SVGs are scalable, so they can be enlarged to any size without looking blurry, including on high-resolution displays.
  • SVGs can have CSS filters applied directly to their shapes. This can be seen on the classic- and wood-style scoreboards, where the LEDs have a glowing light effect which I achieved using CSS drop-shadow filters in a bright color.
  • Because SVGs wouldn’t use the masking technique, the SVGs don’t need a solid background color (that is, they have transparent backgrounds), which is good for applying a subtle gradient shading effect on the board.

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

For the “virtual” style scoreboard, the digits appear from special web fonts rather than SVGs.

Making the Controller

A screenshot of the controller to the basketball scoreboards.
The scoreboard controller. Currently shown in dark mode with a red custom color. In this screenshot, the home “+1” score button is currently being pressed.

In addition to the basketball scoreboards, I was also partly involved in the making of the controller to the basketball scoreboards.

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-size screens. We used the client’s original wireframe of the controller for tablet-size screens, which I made the controller automatically adapt to based on the device it’s being displayed on.

To make the controller, I developed a web page from HTML and CSS to match the button layout as outlined in the wireframe images. 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 controller 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 controller uses a custom accent color which can be chosen by the user. The custom color appears in the buttons’ labels and glowing effects. The controller also has the option of appearing in either a light color scheme or a dark one.

A screenshot of the style settings page for the basketball scoreboards.
A screenshot of the style settings page for the basketball scoreboards. Currently shown in light mode. More sports besides basketball will be added later. (Appearance subject to change.)

Redesigning the Settings Page

ScoreOS also 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.

More Info

Currently (as of September 2019), ScoreOS is still in the midst of development and testing, so it’s not available for download yet, though it should be soon.

To learn more about the company behind ScoreOS, visit the website of Sportable Scoreboards.

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.