BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to the TCO22 Website Design Challenge. 

Can you believe that it is almost the time? Stage 4 of TCO21 qualification period is almost over, so we are already preparing for TCO22. We would like you to come up with a great design for the TCO22 website based on the requirements put together by the Topcoder team.

CHALLENGE OBJECTIVES

  • To create the UI of 4 screens in desktop and mobile format.
  • To provide an engaging way to introduce the event and the journey to it.
  • To explore improvements from the previous years’ TCO sites.

 

Round 1

Please provide the following screens for checkpoint along with your clickable Marvel prototype with hotspots.
 
  • 1. Homepage - Desktop
  • 2. Competition Overview - Desktop
  • 3. UI Design Competition Details - Desktop
  • 4. Regional Event - Desktop

Round 2

Please provide the following screens with checkpoint feedback incorporated for final review along with your clickable Marvel prototype with hotspots.
 
  • 1. Homepage - Desktop
  • 2. Competition Overview - Desktop
  • 3. UI Design Competition Details - Desktop
  • 4. Regional Event - Desktop
  • 5. Homepage - Mobile
  • 6. Competition Overview - Mobile
  • 7. UI Design Competition Details - Mobile
  • 8. Regional Event - Mobile

WEBSITE OVERVIEW

As a member you have probably had a chance to visit one or more TCO sites already, but here is a recap of what this product stands for.
 
  • It introduces our members and other visitors to the Topcoder Open 2022 event, and the ways to get qualified for the most important yearly competition of the top members.
  • It shows the real time leaderboard of winning members of tracks per stage.
  • It informs the visitors about the regional events.
  • It invites visitors to sponsor the event.
  • When the event is live, this site is also the home of schedules, live broadcasts, news etc.
 

AUDIENCE

 
  • Topcoder members of all tracks
  • Topcoder Admins
  • Potential Sponsors of the event
 

PERSONA

 
Name: PereViki
 
Occupation: Freelance design competitor on Topcoder
 
Goals:
  • My goal every year is to qualify for TCO to be able to compete with the top members and meet my friends.
 
Frustrations:
  • A lot of vertical scrolling needed due to the large headings, and large spacings.
 
Wants:
  • I want to be able to find the information of what TCO is about and how to qualify.
  • I want to see a clear picture of how I stand against the others and the time and find the leaderboard easily.
  • I want to be able to easily access any TCO related information easily.
  • I want to see the information in a more compact way.
 
 

DESIGN GOALS & PRINCIPLES

 
  • Engaging, intuitive style that brings a new, fresh vibe to the site.
  • More compact delivery of information (e.g. remove large banners).
  • Branding should be considered for a certain level, discussed in the Branding section. 
 

JUDGEMENT CRITERIA

 
  • Creativity: Impactful; the solution is different or unique from what is already out there and can be implemented.
  • Exploration: Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
  • Aesthetics: Hi-fidelity design; provide a top-notch finished looking visual design.
  • Branding: Flexible - follow the provided guidelines and suggest improvements where seem appropriate and inline with the goals.
 

GLOSSARY

 
  • TCO: Topcoder Open - a super important (ideally/hopefully) onsite yearly event where top members can qualify based on their performance throughout the year and can compete against each other for the TCO Champion award and $10,000.
  • Regional events: Smaller and more approachable events around the world including bootcamps, games and competitions. The top performing members of the geographical region by competition type will be invited to these events.
  • Track: Currently Topcoder runs challenges in 4 different areas, that we call tracks: design, development, data science, quality assurance.
  • Competition Type: The tracks are further divided into 6 competition tracks: algorithm, development, First2Finish, marathon, QA, UI design. We also have trip winning opportunities for copilots, gig workers, and data science code competitors.
  • Stage: The year is divided into 4 periods aka stages, in which the 3 most successful members per competition type will win a trip to TCO.
  • Leaderboard: A list of the members won any placements of any challenges per competition type along with their earned TCO points.
 
 

SCREENS/FEATURES

 
Please make sure your design includes the following screens/sections. The team is open to your suggestions about the structure of the screens as long as the screens deliver the same content and allow for the same functionality and design goals required. Remember that we are looking to have a more compact form of the amount of information we have and would also like to see some new ideas.
 
1. Homepage
This is the landing page of the website, so it is crucial to retain visitors, and provide immediate engaging information and a way to be able to get to more detailed information. As an example visit the current TCO21 Homepage. This page has to cover the below subjects and the content has been provided here:
  • Tagline
  • Stage countdown clock
  • TCO22 overview
  • Latest news
  • TCO22 around the world
  • Members talk TCO
  • How to earn a trip
 
2. Competition Overview
This page gives the visitor an overall view of the ‘TCO process’. As an example visit the current TCO21 Competition Overview. This page has to cover the below subjects, for content, please refer to the existing page:
  • How it works
  • Regional events
  • TCO onsite finals in the USA
  • TCO competitions
  • How to compete
  • Prizes
 
3. UI Design Competition Details
All the competitions have their own pages within the website. In this challenge we ask you to prepare the one for the UI design competition. As an example visit the current TCO21 UI Design Competition Details. This page has to cover the below subjects, for content, please refer to the existing page:
  • Overview
  • How to qualify
  • Rules
  • Leaderboard
 
4. Regional Event
Each year Topcoder organises several regional events around the world to build the community, let them learn, compete and have fun together. Each of these regional events have their own pages within the website. In this challenge we ask you to prepare the one for the Southern Asia Regional Event.  As an example visit the current Southern Asia Regional Event. This page has to cover the below subjects, for content, please refer to the existing page:
  • Overview
  • Countries in the region
  • Leaderboard
  • Event details
  • Schedule
  • How to qualify
  • FAQ
  • Newsletter promotion
  • Call for sponsors
  • Link to discussion forum 
 
 

BRANDING GUIDELINES

 
As this challenge is focused more on the concept design, following the Topcoder GUI KIT doesn’t matter too much, however at a high level, you should use green buttons and Roboto and Barlow Condensed fonts. Everything else is up to you. This will not be a judging criterion.
 

FORM FACTOR

 
  • Desktop - 1440 px width
    • When designing for the given display resolution, consider visitors with smaller screen resolutions as well.
  • Mobile - 750 px width
 

STOCK PHOTOS AND ICONS

  • Photos: use only free photos from the sites allowed by Topcoder.
  • Icons: use only icons that are free (based on Topcoder icons policy) without giving attribution, or create the icons yourself. If the icons are not free, we will require them to be replaced in the final fixes.
 

MARVEL PROTOTYPE

We use Marvelapp to showcase your design to the team.
  • Ask for a Marvel project on the forum.
  • Upload your screens to Marvel, and include hotspots so that the client can see the interactions between your screens
 

FINAL DELIVERABLES

You have to submit a single zip file that includes the following 4 items:
 
  • Source.zip
    • All original source files
    • Create files in Adobe Photoshop, Adobe XD, Sketch or Figma.
  • Submission.zip
    • Your screens exported as PNGs
  • Declaration.txt
    • A text file that contains all the notes about font usage, photo and icon declarations and your Marvel project URL 
  • Preview.jpg
    • Create a JPG preview file of 1024 x 1024 px

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2021 Topcoder(R) Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • Sketch
  • Adoobe XD
  • Figma

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30189328