ScoreOS
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.
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.
Scoreboard Styles
The client wanted the scoreboards to come in multiple visual styles that users of ScoreOS can switch to as their preference. For the basketball scoreboards, we decided I’d design these three styles:
- “Classic”: Emulates the look of a traditional physical scoreboard as seen in basketball arenas. (Screenshot shown at the top.) Uses mock LED panels with glowing and shading effects.
- “Wood”: Similar to the classic style with a few differences, the most notable one being that the board of the scoreboard has a wood paneling texture, mimicking the surface of a basketball court.
- “Virtual”: An abstract, non-skeuomorphic style using simple geometric shapes.
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
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
This is the tiniest of the views (360×203 pixels). It has the minimum amount of scoreboard components, which 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.
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.
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:
- 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 with a bright color. The glowing effect can even extend beyond the outside of the image’s edges, which wouldn’t be possible with PNGs.
- 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.
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 five other sports: football, baseball, soccer, wrestling, and volleyball.
Like with the basketball scoreboards, I made each of these additional sports’ scoreboards in the classic and virtual styles and having components that allow user-customizable colors. (I wasn’t directed to make the wood style for the other sports, so the wood style turned out to be for basketball only.)
All the sports had at least the three standard scoreboard views (full, ribbon, and bug). Football and baseball each have a fourth view that is even smaller in size than the bug view.
Additionally, football, baseball, and wrestling each include special scoreboard formats that show other information not seen in their standard full-view format. For example, baseball has three formats: “timer,” “stats,” and “inning.”
Here are screenshots of just a few of the smorgasbords of scoreboards:
Counting each sport, in each style, in each view, as well as in special formats for some sports, I made 14 scoreboards for baseball, 10 for football, 9 for basketball, 8 for soccer, 8 for wrestling, and 6 for volleyball. In total, that’s 55 variations of scoreboards I’ve created that appear in ScoreOS. (ScoreOS has more ’board designs made by other designers too.)
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.
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 according to the user’s 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.
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
What's Next?
Do you need a designer or developer to make your own vision of an app? Maybe I can help with that!
Similar Projects
To read about other apps’ graphical user interfaces I designed, see: