Challenge Summary
Welcome to the “Topcoder Practice Page Design Challenge”! We are excited to create this new page as a one stop shop for new members where they can learn how to compete on the platform and how to quickly get started.
We’d like to make an easy and seamless start for our members so they get to know what Topcoder is really about in a fast way.
Project Background
We want to help new members who join Topcoder learn how to onboard faster. By providing them a practice page, we hope they can jump into Topcoder easier and more efficiently.
Design Problem
We’re looking to create a simple page, in desktop and mobile format for members to practice their skills. The design should follow existing GUI KIT elements and components. Here are a couple of pages we have designed recently so you get an idea of the look and feel for them.
This page should contain a banner with the title “Practice” and the sections below:
1. Ongoing Challenges
This section should contain a grid view/ tiles of 3-6 fun ongoing challenges. Here’s an example of how we’d like the tiles to be displayed: website, Marvel (Getting Started Competitions section).
2. Learning Challenges
Going forward we plan to have 1-2 challenges for each track that will be open forever, for members to practice. Like this QA challenge for example. We don’t have the challenges for the other tracks (feel free to come up with some names). These challenges should be displayed as well as tiles, similar to the above section.
3. How to Get Started
Here we will display a video for newbies to see and learn about how to submit to each track. On the current GUI KIT, the video are displayed like here.
4. Sponsor Area
We’d like to show a spot for sponsored challenges or series.
This should be displayed in a pretty prominent area however if we don’t have a sponsored challenge we need to be able to remove it and still have the design look nice.
Content:
The following sections are more of secondary items, so keep in mind when designing them. The focus should be on the practice challenges (the above ones).
4. Our Top Help Articles
We’d like to display a few articles for each track that are helpful to new members, as listed below.
5. Thrive with Us
Don’t miss our entire educational center, THRIVE to learn, grow, and earn with us at Topcoder. Go here.
6. There’s Probably a Webinar for That
We have webinars with many different subject matters, so if you’re still having some trouble with practicing at Topcoder, you can check them all out here (“here” should be a link as we are building a page dedicated to them).
7. Contact Us
Need some help? Find us in the forums or email us here.
Note: for this page design it is important to follow the Topcoder branding guidelines. And keep consistency with the existing look and feel. Here are a collection of pages we recently designed to give you an idea of this.
Remember to follow the exact colors and fonts as recommended in the GUI KIT. You can read here about how to use the Topcoder GUI KIT. The GUI KIT includes existing navigation, please reuse that.
Size:
Branding Guidelines
Judging Criteria
Stock Photography and Icons
Marvel Projects
If you need a Marvel project, please request in the forums.
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
We’d like to make an easy and seamless start for our members so they get to know what Topcoder is really about in a fast way.
- 1 page design
- Has to follow the Topcoder GUI KIT and be designed in Sketch
- Has a good hierarchy where the content is easy to scan and understand
Round 1
Submit your initial designs and concepts for checkpoint review:- Topcoder Practice page (desktop)
Round 2
Submit your final designs for round 2 and checkpoint updates as per feedback:- Topcoder Practice Page (desktop + mobile)
Project Background
We want to help new members who join Topcoder learn how to onboard faster. By providing them a practice page, we hope they can jump into Topcoder easier and more efficiently.
- The purpose of this project is to give newbies a place to learn about Topcoder and start to compete quickly on challenges
- Show how fast a member can start competing on Topcoder
- This page will be used by the Topcoder newbies and those new to a competition track
Design Problem
We’re looking to create a simple page, in desktop and mobile format for members to practice their skills. The design should follow existing GUI KIT elements and components. Here are a couple of pages we have designed recently so you get an idea of the look and feel for them.
This page should contain a banner with the title “Practice” and the sections below:
1. Ongoing Challenges
This section should contain a grid view/ tiles of 3-6 fun ongoing challenges. Here’s an example of how we’d like the tiles to be displayed: website, Marvel (Getting Started Competitions section).
2. Learning Challenges
Going forward we plan to have 1-2 challenges for each track that will be open forever, for members to practice. Like this QA challenge for example. We don’t have the challenges for the other tracks (feel free to come up with some names). These challenges should be displayed as well as tiles, similar to the above section.
3. How to Get Started
Here we will display a video for newbies to see and learn about how to submit to each track. On the current GUI KIT, the video are displayed like here.
4. Sponsor Area
We’d like to show a spot for sponsored challenges or series.
This should be displayed in a pretty prominent area however if we don’t have a sponsored challenge we need to be able to remove it and still have the design look nice.
Content:
- Image (sponsor logo)
- Join SPONSOR in learning more about their SDK with this fun learning challenge.
- Go here to find the challenge. Click here for more information on their SDK.
The following sections are more of secondary items, so keep in mind when designing them. The focus should be on the practice challenges (the above ones).
4. Our Top Help Articles
We’d like to display a few articles for each track that are helpful to new members, as listed below.
- How to Compete in Design
- How to Compete in Development
- How to Compete in a Marathon Match
- How to Compete in SRMs
5. Thrive with Us
Don’t miss our entire educational center, THRIVE to learn, grow, and earn with us at Topcoder. Go here.
6. There’s Probably a Webinar for That
We have webinars with many different subject matters, so if you’re still having some trouble with practicing at Topcoder, you can check them all out here (“here” should be a link as we are building a page dedicated to them).
7. Contact Us
Need some help? Find us in the forums or email us here.
Note: for this page design it is important to follow the Topcoder branding guidelines. And keep consistency with the existing look and feel. Here are a collection of pages we recently designed to give you an idea of this.
Remember to follow the exact colors and fonts as recommended in the GUI KIT. You can read here about how to use the Topcoder GUI KIT. The GUI KIT includes existing navigation, please reuse that.
Size:
- Web: 1440px width x height as much as needed
- Mobile: 640px width x height as much as needed (note: you can create the design at 320px px width and export at double resolution)
Branding Guidelines
- The presentation should follow the Topcoder branding. The style should follow the new Topcoder site look and feel, while keeping content well organized.
- Topcoder GUI KIT: download here
- Fonts: use only Roboto and Barlow fonts
- Here you can find the Topcoder logo
Judging Criteria
- How easy is it to understand how to get started on Topcoder
- How engaging does the page looks
- Hierarchy and lisibility of information
Stock Photography and Icons
- Topcoder icons will be shared on forums (only use Streamline icons set)
- Topcoder photos should be taken from member’s profiles or Topcoder Flickr album
Marvel Projects
If you need a Marvel project, please request in the forums.
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
- Source.zip – All original source files.
All source files of all graphics created in Photoshop, Illustrator, Sketch, XD. You must include all the sources for the graphics you add into the deck and document.
- Submission.zip – PNG/JPG files
Submit JPG/PNG image files based on the 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 72 dpi and place a screenshot of your submission within it.
- Declarations.txt – All your declarations and notes
This file must contain your notes if any, fonts used,and mentions you’d like the customer to read
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.