Challenge Summary
Welcome to the “Topcoder Mini Sites Generic Template UI Design Challenge”. In this challenge we are looking to create a new template that will be used as generic layout for Topcoder minisites. We need a great user experience for Desktop and Mobile that can host different communities and mini sites on Topcoder.
Let us know if you have any questions!
1) Home Landing Page (Desktop & Mobile)
2) Learning Page (Desktop & Mobile)
3) Compete/Challenges Page (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1) Home Landing Page (Desktop & Mobile)
2) Learning Page (Desktop & Mobile)
3) Compete/Challenges Page (Desktop & Mobile)
4) Leaderboard Page (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
We are looking to create a generic template that can be used to host upcoming mini sites for sub communities inside Topcoder.com. The goal on this challenge is to design a template that can work with several kind of content. Main Navigation Labels, Images and Content (texts) should be easily editable and adaptable to different sites.
Different mini sites that can be used as inspiration on this challenge. Use them as reference, do not copy any ideas from them.
- http://topgear.tcmini.wpengine.com/
- https://ios.topcoder.com/
- http://predix.topcoder.com/
- http://cognitive.topcoder.com/
- https://tco17.topcoder.com/
Things to think about
- We are not looking for some extreme designs. This need to be simple, otherwise will lost the generic aspect and will be hard to incorporate to different sites. Simple is better on this challenge.
- Neutral colors will work better. Think that we will incorporate different customers logos on this template.
- Images and Content will be replaced later. So design having this in mind. Do not stick with any particular style such like a particular industry or branding.
- You can propose and use titles like: “Getting Started”, “Learn more”, “Compete with the best”, “Resources”, “How to…”, “FAQs”, etc.
- For main texts you can use “Lorem ipsum dolor…”
- Use proper responsive techniques. Not just resize elements from Desktop to Mobile.
- Topcoder logo should be use it on top and footer. Have in mind that this logo can be use with another one on its side. (Refer this as a sample: http://cognitive.topcoder.com/)
- You are free to use any picture from this link: https://www.flickr.com/photos/53993064@N03/albums
Required Screens (Desktop and Mobiles)
1) Home Landing Page
- Basically this will be the first page that users will see when getting into the site.
- We basically see two main options in this site: "Learn" and "Do Work". Users can learn and get certified or just can jump into challenges and start competing.
- Main navigation is required.
- A “Register” button is required.
- “Sign up to newsletter” is required.
- Footer is required.
2) Learning Page
- This will work as a “Getting Started” or “About…” page, please use this site as reference for the kind of content will be here:
- - http://topgear.tcmini.wpengine.com/learning-certification/
- - Use main navigation and footer from landing.
3) Compete/Challenge Page
- This is the typical challenge listing page. This will be pulled from our topcoder current listing challenge page using "React js", so no need to redesign too much this.
- Please use Real Challenges, do not use “Lorem ipsum…” on this section.
- Use main navigation and footer from landing.
4) Leaderboard Page
- We need to design a leader board page that can work for any kind of community mini site.
- You can use content from this site as reference: https://tco17.topcoder.com/ui-design/leaderboard/
- Use main navigation and footer from landing.
Important:
- Keep things consistent. This means all graphic styles should work together.
- Please neutral colors, create something that can work as "white label".
- Please use Open Sans as your main font.
- Focus on the user experience.
- Think mobile first.
Submission Requirements
Screen Sizes:
- This will be a responsive website. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
Mobile: Design for iPhone 6/7: 750px width and height increased as needed.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Target Audience:
- Topcoder community members.
- Potential Topcoder new members.
Judging Criteria:
- User Experience (30%)
- Cleanliness of your graphics and design. 30%)
- Creative thinking and problem solving (30%)
- How well you create design for Topcoder Challenges Details Page Redesign Application (10%)
Submission & Source Files:
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.
Submission File
Submit Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback
Let us know if you have any questions!
Round 1
Submit your initial designs for a checkpoint feedback:1) Home Landing Page (Desktop & Mobile)
2) Learning Page (Desktop & Mobile)
3) Compete/Challenges Page (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final designs with feedback already implemented:1) Home Landing Page (Desktop & Mobile)
2) Learning Page (Desktop & Mobile)
3) Compete/Challenges Page (Desktop & Mobile)
4) Leaderboard Page (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
We are looking to create a generic template that can be used to host upcoming mini sites for sub communities inside Topcoder.com. The goal on this challenge is to design a template that can work with several kind of content. Main Navigation Labels, Images and Content (texts) should be easily editable and adaptable to different sites.
Different mini sites that can be used as inspiration on this challenge. Use them as reference, do not copy any ideas from them.
- http://topgear.tcmini.wpengine.com/
- https://ios.topcoder.com/
- http://predix.topcoder.com/
- http://cognitive.topcoder.com/
- https://tco17.topcoder.com/
Things to think about
- We are not looking for some extreme designs. This need to be simple, otherwise will lost the generic aspect and will be hard to incorporate to different sites. Simple is better on this challenge.
- Neutral colors will work better. Think that we will incorporate different customers logos on this template.
- Images and Content will be replaced later. So design having this in mind. Do not stick with any particular style such like a particular industry or branding.
- You can propose and use titles like: “Getting Started”, “Learn more”, “Compete with the best”, “Resources”, “How to…”, “FAQs”, etc.
- For main texts you can use “Lorem ipsum dolor…”
- Use proper responsive techniques. Not just resize elements from Desktop to Mobile.
- Topcoder logo should be use it on top and footer. Have in mind that this logo can be use with another one on its side. (Refer this as a sample: http://cognitive.topcoder.com/)
- You are free to use any picture from this link: https://www.flickr.com/photos/53993064@N03/albums
Required Screens (Desktop and Mobiles)
1) Home Landing Page
- Basically this will be the first page that users will see when getting into the site.
- We basically see two main options in this site: "Learn" and "Do Work". Users can learn and get certified or just can jump into challenges and start competing.
- Main navigation is required.
- A “Register” button is required.
- “Sign up to newsletter” is required.
- Footer is required.
2) Learning Page
- This will work as a “Getting Started” or “About…” page, please use this site as reference for the kind of content will be here:
- - http://topgear.tcmini.wpengine.com/learning-certification/
- - Use main navigation and footer from landing.
3) Compete/Challenge Page
- This is the typical challenge listing page. This will be pulled from our topcoder current listing challenge page using "React js", so no need to redesign too much this.
- Please use Real Challenges, do not use “Lorem ipsum…” on this section.
- Use main navigation and footer from landing.
4) Leaderboard Page
- We need to design a leader board page that can work for any kind of community mini site.
- You can use content from this site as reference: https://tco17.topcoder.com/ui-design/leaderboard/
- Use main navigation and footer from landing.
Important:
- Keep things consistent. This means all graphic styles should work together.
- Please neutral colors, create something that can work as "white label".
- Please use Open Sans as your main font.
- Focus on the user experience.
- Think mobile first.
Submission Requirements
Screen Sizes:
- This will be a responsive website. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
Mobile: Design for iPhone 6/7: 750px width and height increased as needed.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Target Audience:
- Topcoder community members.
- Potential Topcoder new members.
Judging Criteria:
- User Experience (30%)
- Cleanliness of your graphics and design. 30%)
- Creative thinking and problem solving (30%)
- How well you create design for Topcoder Challenges Details Page Redesign Application (10%)
Submission & Source Files:
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.
Submission File
Submit Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback
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.