2019 Topcoder Open UI Responsive Design Challenge

Welcome to the “2019 Topcoder Open UI Design Challenge”. The prestigious Topcoder Open brings together the best of the best from countries all over the world, with various backgrounds, cultures, and skill sets.

The goal of this challenge is to design the website of the Topcoder's premiere tournament for 2019.

If you are new to Topcoder, welcome and feel free to ask questions in the Forum and we will be glad to assist you.

Round 1

For Round 1 (or checkpoint round), you need to submit your initial design of at least the following pages for some feedback and guidelines on your submission

1. Home/Landing page
2. Competition Overview page
3. Competition Track page
4. Competition Leaderboard page
5. Regional Events page
6. Regional Events Details page

Note: Number your submission screens based on the flow.

Round 2

For your final submission, you need to submit your improved design based on the feedback for all the required pages outlined below in the requirement section.

Note: Number your submission screens based on the flow.

Background Overview of the Challenge
The Topcoder Open (TCO) website will be the portal of information for everything that is related to TCO ranging from competition rules to winner announcements and a lot more.

The current and previous TCO sites are built using wordpress, but this new website will be built in Topcoder Platform. Example of website that is built in Topcoder Platform are https://blockchain.topcoder.com/ and https://cognitive.topcoder.com/ 

The current Topcoder Open website is https://tco18.topcoder.com for reference on information and sample content. We will also referencing previous TCO events for additional info.

What we need you to do:
You need to design a website with the following details:

Overall Requirements for all the pages 

• The top and bottom bars should have the same style as with the sites built in the Topcoder platform ( ex. https://blockchain.topcoder.com/ and https://cognitive.topcoder.com/ )
• Inside the page should be able to navigate to different TCO pages
• We like the general site architecture from https://athenahacks2018.devpost.com/ in terms of top nav and inner nav. In TCO world, that would be the TC community nav at the top and the TCO pages as the secondary nav.

Screen Size

• Desktop: width is 1280px and height as much as needed by your design
• Mobile: width is 750px and height as much as needed by your design

Branding

• Colors - Use only Topcoder colors 
• Typography - use the Standard Topcoder Typography
• Buttons - use Topcoder buttons
• Icons - you can use or reference icons from here.

Page Requirements
You at least need to design the following pages but you are not limited to just these. You are also welcome to suggest content or features on the pages.


1. Home/Landing page

• Reference page https://tco18.topcoder.com/
• This will be the main landing page of the site
• Top banner section should serve as contentful banner so we can update it all the time for some news/announcements.
• Other possible content or information for this page will be:
  • Competition tracks info and/or short intro about the tournament that will lead to the Competition Overview page
  • TCO related blog posts
  • Some banners with call to action
  • Sponsors
  • and any other feature that you may want to add 

2. Competition Overview

• Reference page https://tco18.topcoder.com/overview/
• This will inform the user what TCO is all about in details or with infos that links to their respective pages. 

3. Competition Track page

• One of the track page is https://tco18.topcoder.com/development/, feel free to explore the other track pages
• This page should have all the info and news related to the specific track

4. Competition Track Leaderboard page

• One example of the track leaderboard page is https://tco18.topcoder.com/development/leaderboard/
• This page displays the current ranking of each users in specific track, usually each competition tracks are divided into 4 stages 

5. Competition Track Schedule 

• Reference page is https://tco18.topcoder.com/algorithm/schedule/
• This page displays all the schedule that are related to specific track

6. Competition Track Online Results

• Reference page is https://tco18.topcoder.com/algorithm/online-round-results/
• This page has a lot of list, it would be great if we can organize this.

7. Regional Events page

• Reference page - https://tco18.topcoder.com/regional-events/
• This page should display all the regional events locations
• Each location will lead to their respective details page
• Need to have some kind of marker or indication when a certain event is over/completed, see https://tco16.topcoder.com/regional-events/ 

8. Regional Events Details page

• This will display all information related to a particular regional event
• Completed event should have event recap and/or photos, see https://tco18.topcoder.com/regional-events/warsaw-poland/ 
• Upcoming events should have Registration section, see https://tco18.topcoder.com/regional-events/beijing-china/ 

9. Sponsors

• This page should display all the tournament sponsors, see https://tco17.topcoder.com/sponsors/ 
• This can be display of logos only or with some short intro that leads to their specific landing pages

10. Sponsor Details

• An example of sponsor landing page are https://tco17.topcoder.com/sponsors/bnmc/ and https://tco17.topcoder.com/sponsors/google/ 

11. Win A Trip main page

• This page displays all other tracks that are intended to give away free trips to the members
• See https://tco18.topcoder.com/win-a-trip/ for reference

12. Win A Trip details page

• See https://tco18.topcoder.com/win-a-trip/copilot-tournament/ for reference
• This page displays all the info regarding the specific track
• Aside from the info, it should have leaderboard as well

13. Media page (Photos and Videos)

• This page is intended for displaying photos and videos, see https://tco17.topcoder.com/onsite-photos/ and https://tco16.topcoder.com/video/ for reference.

14. Forms

• Create a form for generic use
• See https://tco17.topcoder.com/travel-form/ for reference

What will be your submission:
Preview Image
Create a preview image as one (1) 1024px by 1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
- Export a JPG/PNG image file(s) of your submission
- Create a text file with MarvelApp share link in it (see MarvelApp requirement below).
- Place these files into a "Submission.zip" file.

Source Files
All source files of all graphics created in vector format in either Adobe Photoshop, Adobe Illustrator, Sketch or any similar software should be saved as editable files. Place all of your source files into a "Source.zip" file.

For additional instruction about the submission file and how to submit, kindly visit here.

MarvelApp:
- We are going to use MarvelApp to view your submission and may add feedback directly on it. 
- Please request a MarvelApp project to jamesmarquez@gmail.com (challenge copilot) or on the challenge forum.
- Important! You must  include a Share URL/Link to your MarvelApp within your submission notes.
- DO NOT insert MarvelApp Project link! You must copy the link from the “Share” button on the right side of MarvelApp project.

What will be your prize:
For this challenge, the prizes are:
1st place - $1,700
2nd place - $800
3rd place - $250

What will be the Judging Criteria:
Your submission will be judged on the following criteria:
- How well you organize the information
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience.
- Consistency across the UX/UI

What will be the Target Audience:
- Topcoder admins
- Topcoder members
- Sponsors

Final Fixes
If your submission wins, you may be asked to modify your design, graphics (sizes or colors) or modify overall colors.