TCO Scoreboards Kiosk UI Design Challenge

Welcome to the TCO Scoreboards Kiok UI Design Challenge

The purpose of this project is to create a new scoreboard design to be used at the TCO onsite finals as well as other events (various reginal events) that require scoreboards. We provide wireframes to help you get started.
 
Challenge Objectives

• User interface design
• Kiosk screen scoreboads
• 7 screens

Round 1

Submit your initial design for a checkpoint feedback. Try to finish as much as possible for early feedback.
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Round 2

Submit your final design improved based on the checkpoint feedback.

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Project Background

• The purpose of this project is to create a new scoreboard design to be used at the TCO onsite finals as well as other events (various regional events) that require scoreboards. However it is not in the scope of this challenge, please keep in mind, that besides showing these scoreboards on kiosk screens, we will also let people browse the public online versions on our website during and after the events.
• We will use the scoreboards to present live, real-time view of competitions going on both online and offline at events to spectators.
• The designs should be fun, engaging and should provide support areas for sponsors, advertisement and promotion, area for a live broadcast, ticker etc. 

Design direction:

• Your design should follow a dark theme, but you can change the color palette to best match the design.
• Follow the general layouts from the wireframes provided, do not create uniquely different pages. Failure to keep with the wireframes will reduce your winning chances.
• Use the TCO18 logo and colors throughout - we want the brand to be recognizable and expressed throughout. Do not try to match the existing website though, this UI is purely for the need during the event!
• Include the sponsor logos from tco-at-the-ranch, design with real content as possible
• Your typography choice should be easily readable from distance (grotesque or sans-serifs are preferable).
• Your minimum typography size should be readable from afar
• Try to develop an interface that resembles the gaming experience of a high-quality titles. Some inspiration has been included in the provided Sketch file.
• Think about the animation/transitions of the screen elements. You’re designing for live TV in a sense, so draw inspirations from sport events, news reports, computer games.
• Projectors and some TVs have far inferior color reproduction than a computer screen. Keep in mind that and insure you have a sufficient contrast for the important elements
• Pro tip: Test your designs on a TV from afar while designing; move around, and see how the colors change, what is readable, what jumps at you.

 
Scoreboard details
In this challenge we will focus on the algorithm track’s scoreboard. The items that will be shown for each competitor are as follows:

• Competitor
• Indication of changes of their score
• Score: This will decrement constantly as soon as the competition begins. It will change based on a factor of time passed and test cases passed. 
• Test cases passed - shows the number of test cases passed out of the total amount of test cases.  This starts at 0 over some number.  Each time the user submits (can submit multiple times during the course of the competition) the number of test cases passed will be updated and could go up or down.
• Proportion of passed test cases.

Design elements to pay attention to:

• Background: Try to create a visually-appealing background that can be used with different amount of content.
• Scoreboard:make sure the players are represented (images) and the data is readable; think about the movement on the board. Please try to include the member country as well (not shown on the wireframes) - use national flags instead of text;
• Finalist/member card: We want to have scalable design elements to represent the finalists - picture, name, country, @handle, ranking, achievements/badges. The card should be used at:
  • Final starting - announce the finalists
  • Match is started, but we’re waiting on submissions
  • Member on the scoreboard
  • Challenge - member vs. member
  • Winner ceremony - list all (small)
  • Winner ceremony - track winners (big).
• Sponsor banner/message: what would be a good way to display our sponsors that is not obtrusive, but helps to promote them well?
• Information ticker:A way to display important message at the bottom of the screen as a sliding text (think about TV - news).

Form Factors
Please make sure your design supports these form factors:

• 1920 x 1080 px landscape screens
• Optimized for TV, easy to be seen from a distance

 
Screens/Features
Please make sure your design includes the following screens:
���Target Users

• Topcoder community members
• Observers
• Participants, etc.

Judging Criteria
Your submission will be judged on the following criteria:

• Overall idea and execution of concepts
• How well does your design align with the objectives of the challenge
• Execution and thoughtfulness put into the solving the problem
• The overall design and user experience
• Cleanliness of screen design

Design Assets

• Wireframes on Marvel
• TCO18 logo
• Base Sketch file with inspiration

 
Marvel Prototype

• We need you to upload your screens to Marvel App.
• Please send your marvel app request to pere.viktoria@gmail.com 
• You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).

Final Deliverables
For submission you have to upload a zip file that contains the following 4 files:

• Source.zip– All original source files.
  • Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator or as a layered AI file, Sketch or Adobe XD.
• Submission.zip– PNG/JPG files
  • Submit JPG/PNG image files based on Challenge submission requirements stated above.
• preview.png– Your preview image
  • Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
• declarations.txt– All your declarations and notes
  • This file must contain your notes if any, your Marvel link, fonts, stock art and icons used.