Challenge Summary
Challenge Summary
Welcome to the TCO Hall of Fame Page UI Design Challenge!
For this challenge we need to design a page to show the finalists and champions from all TCOs. This page will stay on Topcoder site and will be linked from the TCO page. Note, this is a Sketch ONLY challenge. If you haven't jumped on board yet, this is a perfect time.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum!
1. Hall of Fame (desktop + mobile)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1. Hall of Fame (desktop + mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Full Description & Project Guide
Design Problem
Design the TCO Hall of Fame page that will go on the Topcoder site and will match the new Topcoder Site branding (have the same look and feel as this page has).
The following are the required features for this new page. We don’t need to show all of these at once, but using interactions, we should be able to see everything.
- the list and/or photos (preferably) of all the champions from each TCO
- the list of all the finalists from each TCO
- fun facts/stats (most consecutive wins, most time as a finalist, etc)
Add interactivity for this page, an example would be: User selects a tournament (TCO17, TCO16, TCO15, etc...) from the top, like a dropdown with logos. This will change the hero image to the group image of the chosen TCO tournament. Then there will be tabs below to choose a specific track and see the finalists and winner of that particular track together with some members’ fun facts/stats. You can use the TCO17 Finals as an example - we have provided an Excel file with all of the champions and handles of the finalists.
Note: be creative and show us other great interactions for this page. Also pay attention on how this will be displayed on mobile.
We need to see all champions from all TCOs when we land on this page. Some members were champions in multiple TCOs (check the xls file attached to see them). Think how do we show that, without cluttering the interface.
Branding
- We have provided a Sketch file with the GUI KIT and the templates for desktop and mobile devices.
- The GUI KIT includes everything you need to get started including typography, colors, form elements, icons, etc.
- Fonts: use only Roboto font as that is the standard font we are using for the new Topcoder site. It is mandatory you follow only the defined sizes for labels, headings and body texts as well as defined colors (shades of gray)
- Icons: you can use stock icons only from Nucleo: https://nucleoapp.com/ to keep consistency with the rest of our pages.
- Unit size: we are using 5px as a standard size, so try to keep all distances and line heights as a multiple of that.
- If there is something else you need or have questions, ask the in the forum.
Input:
- TCO tournaments: https://www.topcoder.com/community/topcoder-opens/
- TCO photos: https://www.flickr.com/photos/53993064@N03/albums
- Attached TC_Community_GUI_KIT
- TC Color Palette and Styles are here
Stock Artwork & Icons
- Stock photo is not allowed for this challenge. Use photos from our Flickr album.
- Stock icons are allowed only from Nucleo website.
Target Devices
Responsive web:
- Desktop: 1366px width with height adjusted accordingly
- Mobile: 320px width with height adjusted accordingly
Note: you can use same font sizes and graphics from desktop to mobile on 320px and then export at 2x size to look good.
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Topcoder staff
- Topcoder members
Judging Criteria
- Cleanliness of your graphics and design
- Creative, graphics appeal, and interactivity
- Hierarchy and organization of content
- Is the design consistent and adheres to the provided GUI KIT?
- Overall design aesthetics
The Topcoder staff will award checkpoint winners, give feedback, and choose the final design winners.
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72 dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original Sketch source files of the submitted design.
Welcome to the TCO Hall of Fame Page UI Design Challenge!
For this challenge we need to design a page to show the finalists and champions from all TCOs. This page will stay on Topcoder site and will be linked from the TCO page. Note, this is a Sketch ONLY challenge. If you haven't jumped on board yet, this is a perfect time.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge. Feel free to ask any questions in the challenge forum!
Round 1
Submit your Initial Design for a Checkpoint Feedback1. Hall of Fame (desktop + mobile)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design with Checkpoint Updates:1. Hall of Fame (desktop + mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Full Description & Project Guide
Design Problem
Design the TCO Hall of Fame page that will go on the Topcoder site and will match the new Topcoder Site branding (have the same look and feel as this page has).
The following are the required features for this new page. We don’t need to show all of these at once, but using interactions, we should be able to see everything.
- the list and/or photos (preferably) of all the champions from each TCO
- the list of all the finalists from each TCO
- fun facts/stats (most consecutive wins, most time as a finalist, etc)
Add interactivity for this page, an example would be: User selects a tournament (TCO17, TCO16, TCO15, etc...) from the top, like a dropdown with logos. This will change the hero image to the group image of the chosen TCO tournament. Then there will be tabs below to choose a specific track and see the finalists and winner of that particular track together with some members’ fun facts/stats. You can use the TCO17 Finals as an example - we have provided an Excel file with all of the champions and handles of the finalists.
Note: be creative and show us other great interactions for this page. Also pay attention on how this will be displayed on mobile.
We need to see all champions from all TCOs when we land on this page. Some members were champions in multiple TCOs (check the xls file attached to see them). Think how do we show that, without cluttering the interface.
Branding
- We have provided a Sketch file with the GUI KIT and the templates for desktop and mobile devices.
- The GUI KIT includes everything you need to get started including typography, colors, form elements, icons, etc.
- Fonts: use only Roboto font as that is the standard font we are using for the new Topcoder site. It is mandatory you follow only the defined sizes for labels, headings and body texts as well as defined colors (shades of gray)
- Icons: you can use stock icons only from Nucleo: https://nucleoapp.com/ to keep consistency with the rest of our pages.
- Unit size: we are using 5px as a standard size, so try to keep all distances and line heights as a multiple of that.
- If there is something else you need or have questions, ask the in the forum.
Input:
- TCO tournaments: https://www.topcoder.com/community/topcoder-opens/
- TCO photos: https://www.flickr.com/photos/53993064@N03/albums
- Attached TC_Community_GUI_KIT
- TC Color Palette and Styles are here
Stock Artwork & Icons
- Stock photo is not allowed for this challenge. Use photos from our Flickr album.
- Stock icons are allowed only from Nucleo website.
Target Devices
Responsive web:
- Desktop: 1366px width with height adjusted accordingly
- Mobile: 320px width with height adjusted accordingly
Note: you can use same font sizes and graphics from desktop to mobile on 320px and then export at 2x size to look good.
Marvel Prototype
- Request a Marvel Prototype on forums or email keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Topcoder staff
- Topcoder members
Judging Criteria
- Cleanliness of your graphics and design
- Creative, graphics appeal, and interactivity
- Hierarchy and organization of content
- Is the design consistent and adheres to the provided GUI KIT?
- Overall design aesthetics
The Topcoder staff will award checkpoint winners, give feedback, and choose the final design winners.
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72 dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original Sketch source files of the submitted design.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.